design-tokens-system

Design Tokens System

Comprehensive design token architecture for consistent design systems.

Design tokens are the atomic units of design (colors, spacing, typography). A robust token system ensures consistency across all platforms.

---

Token Architecture

Four-Layer Token Structure

Base Tokens (Primitives)
  ↓
Semantic Tokens (Context-aware)
  ↓
Component Tokens (Component-specific)
  ↓
Application (Usage)

Layer 1: Base Tokens (Primitives)

{
  "color": {
    "gray-50": "#f9fafb",
    "gray-100": "#f3f4f6",
    "gray-900": "#111827"
  },
  "spacing": {
    "4": "4px",
    "8": "8px",
    "16": "16px"
  }
}

Layer 2: Semantic Tokens (Context-Aware)

{
  "color": {
    "text-primary": "{color.gray-900}",
    "text-secondary": "{color.gray-600}",
    "background-primary": "{color.gray-50}",
    "border": "{color.gray-200}",
    "interactive-primary": "#2563eb",
    "interactive-hover": "#1d4ed8"
  }
}

Layer 3: Component Tokens

{
  "button": {
    "primary": {
      "background": "{color.interactive-primary}",
      "text": "#ffffff",
      "padding": "{spacing.12} {spacing.16}",
      "border-radius": "4px"
    }
  }
}

---

Token Definition Formats

W3C Design Tokens Format

{
  "colors": {
    "primary": {
      "$value": "#2563eb",
      "$description": "Primary brand color",
      "$type": "color"
    }
  },
  "spacing": {
    "md": {
      "$value": "16px",
      "$type": "dimension"
    }
  }
}

Figma Variables Setup

In Figma:

Collections/
  Colors/
    Primary/
      50, 100, 500, 900
  Spacing/
    xs, sm, md, lg, xl
  Typography/
    fontSize, lineHeight, letterSpacing

---

Token Export & Transformation

Export Formats

TypeScript:

export const tokens = {
  color: {
    primary: '#2563eb',
  },
  spacing: {
    md: '16px',
  },
};

CSS Variables:

:root {
  --color-primary: #2563eb;
  --spacing-md: 16px;
}

Tailwind Config:

module.exports = {
  theme: {
    extend: {
      colors: { primary: '#2563eb' },
      spacing: { md: '16px' },
    },
  },
};