🧰 CSS Expert

Design Systems

⏱ 1 hr2 topicsLive playground
🎯 By the end: You can explain design tokens and reusable components, and set up a small token system with CSS variables that keeps a project consistent.

Look at any big product — a bank app, a Google service — and notice how every button, every spacing, every shade of blue feels part of one family. That consistency isn't luck; it comes from a design system: a shared set of rules and reusable pieces. You already have the tools to build a small one, and it's the natural endpoint of everything in this course.

1Design tokens — your single source of truth

Design tokens are the named, reusable values of your design — colours, spacing, font sizes, radii, shadows. You met the mechanism already: CSS custom properties. A design system simply means deciding these once and using them everywhere, never hard-coding a stray value.

:root {
  /* colour tokens */
  --color-brand: #FF6B00;
  --color-ink: #0F1B2D;
  /* spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  /* shape */
  --radius: 10px;
}

A spacing scale like this (4, 8, 16, 24, 32…) is a quiet superpower: when every margin and padding comes from the same scale, your whole layout feels rhythmic and intentional instead of slightly-off everywhere.

Components built from tokens
HTML
CSS
Live preview
What's happening: All three components pull from the same tokens (--brand, --space-3, --radius). Change a token once at the top and every component updates together — that consistency IS a design system.
Key points
  • Design tokens are named reusable values (colours, spacing, radii) — built with CSS variables.
  • Decide values once on :root and reuse via var() — never hard-code stray values.
  • A consistent spacing scale (4/8/16/24…) makes layouts feel rhythmic and intentional.

2Reusable components and consistency

The second half of a design system is components: reusable, named pieces — a button, a card, an input — built once (with BEM-style classes from the last lesson) and reused everywhere. Together, tokens and components give you:

  • Consistency — every button looks and behaves the same, because it's the same button.
  • Speed — you assemble pages from ready-made parts instead of restyling from scratch.
  • Easy change — update the button component or a token once, and the whole product follows.
Big teams formalise this with tools (Figma libraries, Storybook, frameworks). But the idea is exactly what you can already do: tokens in :root, components as well-named classes. Start there and you're thinking like a professional.
Even on a solo project, a tiny design system pays off fast. Spend ten minutes defining your tokens and a handful of components first, and the rest of the build goes quicker and looks more polished.
Key points
  • Components are reusable named pieces (button, card, input) built once and reused.
  • Tokens + components give consistency, speed, and one-place updates.
  • You can build a small design system today with :root tokens and BEM-named component classes.

★ Practical: a mini design system

In any playground:

  1. Define tokens on :root: a brand colour, a spacing scale (at least 3 steps), and a radius.
  2. Build a .btn component that uses those tokens.
  3. Build a second component (e.g. a .card) that reuses the same tokens.
  4. Change one token and confirm both components update together.

Ready to test yourself?

Take the short quiz. Score 60% or more to mark this lesson complete.

Start the quiz →

💡 Log in to save your progress and earn the certificate.

← Previous
Architecture & BEM
Next →
CSS Performance