TaskBuild the full token system at :root: 10 color tokens (--primary, --primary-fg, --danger, --success, --bg, --surface, --text, --text-muted, --border, --accent), 6 spacing tokens (--space-xs to --space-2xl), 4 type tokens (--font-sans, --font-mono, --text-base, --text-lg), 4 radii (--radius-sm, --radius-md, --radius-lg, --radius-pill), 3 shadows (--shadow-sm, --shadow-md, --shadow-lg), 3 motion (--ease-out, --duration-fast, --duration-base). Use them on body + a .demo div showing 3 things: text in --text, bg --surface, border --border + padding --space-md, border-radius --radius-md, shadow --shadow-md.
Capstone 1: Design-token library
200 XP14 min
Theory
The foundation every component depends on
A complete token set covering everything you need to style a real product. This is the file every other component IMPORTS via @layer tokens.
The 6 categories of tokens:
- Colors — primary palette + semantic (text, bg, border, danger, success).
- Spacing — 4/8/12/16/24/32/48/64 scale.
- Typography — font-family, sizes via modular scale, line-heights.
- Radii — 4/8/12/16 + pill (999px).
- Shadows — sm/md/lg with double-shadow technique.
- Animation — durations + easings.
Once these are defined, EVERY component is just a recombination of tokens.
🔒
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial — card required, cancel anytime.
Sign up — free trial →First 15 lessons in each track are free. No card needed for those.