Chapter 24 — Design Tokens Beyond Colour

Extend custom properties to spacing, sizing, breakpoints, and motion — lifting Chapter 16’s colour-only limit.

New concepts

Non-colour tokens (--space-*, --max, --radius, --bp-*, --motion) and reading them with var().

Read the Design Tokens gauge

What changes after Naming?

Chapter 16 taught colour roles. Catalogs such as ui/navbars already ship a fuller token set. This chapter is the bridge.

Lessons

  1. 1. Sizing and spacing tokens
  2. 2. Breakpoint and motion tokens

Related follow-on in Chapter 16: HTML→CSS custom-property data channel.

Checkpoint

Define a small :root scale for space, max-width, radius, and motion. Build one card that uses only those tokens for spacing and transition timing.