EduByte.tech
Start learning
CSS Essentials·Project

Project: a design system

Define tokens, build components and ship every state as one coherent kit.

Beginner 25 min read Lesson 16 of 480 Challenge included
What you will be able to do
  • Centralise tokens
  • Build reusable components
  • Cover states and motion consistently

A design system is a small set of decisions reused everywhere. Start with tokens, style a few components, then document the states that matter.

  1. 01
    Tokens

    Define colour, spacing, radius and type scale as custom properties on :root.

  2. 02
    Base

    Set the page background, text colour and font from the tokens.

  3. 03
    Components

    Build a button, card and badge that read only from tokens.

  4. 04
    States

    Add hover, focus-visible, disabled and error states for interactive elements.

  5. 05
    Motion

    Use one timing curve and one duration for feedback, with a reduced-motion override.

design-system.cssCSS
:root {
  --brand: #e4472b;
  --brand-strong: #c93a21;
  --ink: #1c1917;
  --paper: #f7f4ee;
  --surface: #ffffff;
  --line: #e7e2d9;
  --space-2: 12px;
  --space-3: 24px;
  --radius: 12px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, sans-serif;
}

.button {
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  background: var(--brand);
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: transform 180ms var(--ease), background 180ms ease;
}

.button:hover {
  background: var(--brand-strong);
  transform: translateY(-1px);
}

.button:focus-visible {
  outline: 3px solid rgb(228 71 43 / 0.35);
  outline-offset: 2px;
}

.button:disabled {
  background: var(--line);
  color: #8b8580;
  cursor: not-allowed;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
}
Live exampleThe components in use
Your turn

Add a secondary button

Medium

Create a secondary variant that uses the surface, ink and line tokens with the same focus and disabled behaviour.

CSS · starter
.button.secondary {
  /* your rules here */
}
Check your understanding before moving on.
Knowledge checkQuestion 1

Why centralise values in custom properties?

Select an answer to continue
Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.
Sign in
Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: Drill 1: Summarise — Selectors and the cascade
Lesson 16 of 480 · 0% of course