Kevin Coyle
Kevin Coyle

Design System Tokens

Design system tokens should be your single source of truth.

I've settled on this approach:

  1. Source: JSON file with all tokens (colors, spacing, typography, etc.)
  2. Generation: Use tools like Style Dictionary to generate CSS, iOS, Android, etc.
  3. Usage: Import generated CSS or use tokens directly

Example token structure:

{
  "color": {
    "primary": { "value": "#81d4fa" },
    "secondary": { "value": "#4fc3f7" }
  },
  "spacing": {
    "sm": { "value": "0.5rem" },
    "md": { "value": "1rem" },
    "lg": { "value": "1.5rem" }
  }
}

This ensures consistency across web, iOS, Android, and any other platform.