Case study

Design System

A token-first design system — Primitives → Semantic → Component

Outcome: 308 primitives → 234 semantic tokens · dark mode is a token swap, not a redesign

  • Type: Self-initiated
  • Role: Design Engineer
  • Year: 2026
  • Tools: Figma, Figma Variables
  • Tags: Design System, Design Tokens

The case in brief

Context
A self-initiated design system built from tokens up in Figma Variables.
Problem
When values are hard-coded, retheming or adding a dark mode turns into a redesign.
Scope
Foundation tokens, 308 primitives and 234 semantic tokens, 130 typography variables, nine components from atoms to organisms, and a self-generated audit page.
Role
Design Engineer
Constraints
Light and dark first-class from the first file, WCAG 2.1 AA baked into every primitive, and nothing hard-coded past the primitive layer.
Key decisions
  1. A three-tier chain — Primitives → Semantic → Component — that every value traces back to.
  2. Light and dark built in from the first file, not bolted on later.
  3. Structured like atomic design: atoms build into molecules and organisms, each inheriting from the layer below.
  4. A self-generated audit page re-documents every primitive, semantic, typography and component token on each pass.
Outcome
308 primitives → 234 semantic tokens · dark mode is a token swap, not a redesign

A system built from tokens up

A token-first design system — Primitives → Semantic → Component

Foundation

Spacing, typography, radius, shadow, opacity, and stroke weight live as raw variables first — no component touches a hard-coded value

Atoms → Molecules → Organisms

Buttons, inputs, toggles, checkboxes, avatars and badges build up into an accordion and a data-dense table row, then into cards and a sidebar with pinned/unpinned states — each inheriting from the layer below it.

  • 308 — Primitives — Raw values — color, font, spacing, radius, opacity, shadow
  • 234 — Semantic — Purpose-named tokens referencing primitives, per light/dark
  • 130 — Typography — Type variables covering the full text system
  • 10 — Component pages — 982 typography bindings, zero partial — full QA pass across every page

Every value in this system traces back to a three-tier chain: Primitives → Semantic → Component. Nothing is hard-coded past the primitive layer, which means retheming or shipping a dark mode is a token swap, not a redesign. Light and dark were both first-class from the first file, not bolted on later.

Primitives — the raw variable layer, in Figma Variables

Semantic — purpose-named tokens mapped to light and dark

Structured like atomic design, checked like production code

Structure

  • Foundation: spacing, typography, radius, shadow, opacity, and stroke weight tokens
  • Atoms: buttons, checkbox & radio, avatar & badge, input, textarea (six variant states), toggle, icon library (stroke-based, Vuesax Linear)
  • Molecules: accordion, table row (dedicated data-density typography roles)
  • Organisms: card, sidebar (expanded/collapsed × pinned/unpinned, five usage patterns), data table — each with dedicated size and type variable collections
  • A self-generated audit layer that re-documents primitives, semantics, typography, and components on every pass
  • A unified color/surface/ namespace (page, subtle, element, elevated, overlay, inverse) and dedicated focus-ring tokens carry every surface and focus state across both themes

Nine components, one audit page

  1. Buttons — primary, secondary, ghost, danger, and icon-only, each with hover, focus-visible, active, disabled, and loading states
  2. Input & TextArea — TextArea shipped as a separate component with six variant states, including resize and character-counter slots
  3. Checkbox & Radio, Toggle — Error and Disabled as full variable modes, Hover and Focus as dedicated token slots
  4. Avatar & Badge
  5. Table Row — its own data-density typography roles, tuned for tabular contexts at small sizes
  6. Card
  7. Sidebar — isPinned, four variants across expanded/collapsed × pinned/unpinned, five usage patterns
  8. Accordion
  9. Audit — a self-generated page that re-documents every primitive, semantic, typography, and component token on each pass

v1.1

All projects · Start a project