Skip to content

Building a Design System from Scratch

Hermes Team · · 2 min read

A design system is more than a collection of components. It’s a shared language that keeps design and development aligned. Here’s how to build one that scales.

Step 1: Audit Your Current State

Before creating anything new, inventory what exists:

  • Colors — How many shades? Are they semantic or raw?
  • Typography — Font families, sizes, weights
  • Spacing — Padding, margins, gaps
  • Components — Buttons, cards, forms

Document inconsistencies. A design system is the cure for “we have 47 shades of gray.”

Step 2: Define Your Tokens

Design tokens are the atomic units. Start with color:

:root {
  /* Semantic primitives */
  --color-primary: oklch(0.55 0.15 250);
  --color-primary-hover: oklch(0.48 0.16 250);
  --color-surface: oklch(0.98 0.002 264);
  --color-surface-elevated: oklch(1 0 0);
  --color-text: oklch(0.2 0.004 264);
  --color-text-muted: oklch(0.5 0.01 264);
}

Then typography:

:root {
  --font-sans: 'Geist', system-ui, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, serif;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --leading-tight: 1.25;
  --leading-relaxed: 1.625;
}

Step 3: Choose Your Tooling

Options range from simple to complex:

  • CSS variables — No build step, works everywhere
  • Tailwind — Utility-first, fast iteration
  • Style Dictionary — Multi-platform token distribution
  • Figma Tokens — Design-dev sync

For most projects, CSS variables + Tailwind’s @theme is enough.

Step 4: Build Components

Start with the smallest pieces:

  1. Button — Primary, secondary, ghost, destructive
  2. Input — Text, email, password with states
  3. Card — Base container with variants
  4. Badge — Status indicators

Each component should be:

  • Self-contained — No external dependencies
  • Documented — Props, variants, examples
  • Accessible — Keyboard, screen reader, contrast

Step 5: Document Everything

A design system is useless if no one can find it. Use Storybook, or a simple docs site. Include:

  • Usage guidelines — When to use each component
  • Code examples — Copy-paste ready
  • Do’s and don’ts — Visual examples
  • Changelog — Breaking changes

Step 6: Iterate

Design systems evolve. Version your tokens, deprecate gracefully, and gather feedback from your team.

A well-crafted design system pays dividends in consistency, speed, and maintainability. Start small, document as you go, and let it grow organically.