Selectors, color, contrast

This lesson is part of the year-long Code Academy Alfred path. Goal: understand selectors, WCAG contrast, CSS variables in real web / mobile-web design conditions.

CSS variables (:root { --ink: #0b1f1c }) are the base of a design system. Avoid low-contrast “vibes-only” colors.

Classic bug: light gray text on light backgrounds, or white on yellow. Always check contrast.

Prefer hsl/oklch to adjust lightness without breaking hue.

Practice immediately: rebuild the example, then change it. Memory comes from active repetition, not passive reading.

If you get stuck, use Cursor with a precise prompt (context + goal + constraints), then explain the generated diff yourself.