CSS architecture & design tokens

This lesson is part of the year-long Code Academy Alfred path. Goal: understand tokens, BEM or utilities, CSS debt in real web / mobile-web design conditions.

Design tokens (color, radius, shadow, spacing) centralize consistency — like our --ink, --teal variables.

Two modern schools: scoped components (CSS modules) or utilities (Tailwind). Both are valid; Next.js loves Tailwind.

Month 2 checkpoint: a responsive, contrasted landing, no layout tables, with visible keyboard focus.

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.