Welcome & the design token mental model
This page is both a tutorial and a working example of how to use
:root and CSS custom properties as design tokens for colour, type,
spacing, radius, and more.
What you’ll learn
By the end, you’ll be able to:
- Use
:rootandvar()to define global design tokens. - Create light/dark colour palettes with a single theme switch.
- Build a consistent typography scale with font families and sizes.
- Set up spacing and sizing tokens you can reuse everywhere.
- Standardise border radius, borders, and shadows.
- Layer “component-level” tokens on top of your global system.
Mini example: one token reused everywhere
Here’s the core idea: define a value once, reuse it everywhere:
/* Global token */
:root {
--brand-forest: #3c5d4a;
}
/* Components that consume the token */
.button-primary {
background-color: var(--brand-forest);
color: #fff;
}
.badge-accent {
border: 1px solid var(--brand-forest);
color: var(--brand-forest);
}
Change --brand-forest in one place and every button, badge, or card
that uses it will update automatically.
Key terms we’ll use
- Custom property – the underlying CSS feature (e.g.
--color-bg). - Design token – a named value used across a design system.
- Global token – a token defined in
:rootfor site-wide use. - Component token – a token scoped to a component (e.g.
.button).