Design Tokens Beyond Colour — Allowed

This gauge covers Chapter 24 after Class Naming Conventions. It lifts the colour-only custom-property limit from Chapter 16 (CSS/variables/).

Learning goal

Store spacing, sizing, radius, breakpoint, and motion values as custom properties alongside colour roles, and consume them through var().

Inherited tools

Everything allowed through ../variables/allowed.md and ../naming/allowed.md remains available. Colour tokens from Chapter 16 stay valid; this chapter adds non-colour tokens.

New CSS

• Custom properties for:
• spacing (--space-2, --space-4, …)
• sizing (--max, --max-width)
• radius (--radius, --nav-radius)
• breakpoints (--bp-sm, --bp-md, --bp-lg) used as documented values
• motion (--motion, durations/easing)
• typography stacks (--font-sans) when useful
• Reading those tokens with var() in layout, type, and transition rules

Media queries still need literal breakpoint values in most browsers; document the token next to the query (as ui/navbars/styles.css does).

Learning rules

1. Name tokens by role (--space-4, --max), not by one component’s whim.
2. Keep colour and non-colour tokens in the same :root when they form one system — see ui/navbars/styles.css and its catalog token table.
3. Prefer a small scale (for example 2/3/4/6/8) over a unique space token per rule.
4. Re-check contrast and focus styles when theme tokens change.
5. Do not invent tokens for one-off literals that never repeat.

Not allowed

• JavaScript theme switching (still deferred — see Variables lesson 05 for prefers-color-scheme without a toggle)
• Replacing Chapter 16 colour lessons — complete those first
• Container queries (see Chapter 25)
• Inline styles (except as taught in the HTML→CSS data-channel lesson)

Pages

• 01-sizing-spacing.html — spacing, max-width, and radius tokens
• 02-breakpoints-motion.html — breakpoint + motion tokens; link to navbars

Rules to lean on

Rules 11–12, 155–162, layout-system container guidance, and ui/navbars catalog tokens.