Design Token Management with Claude Code: Consistent UI Guide

Streamlining Design Token Management With Claude Code

Design tokens centralize design decisions like color, typography, and spacing. With Claude Code, you can efficiently build everything from token definitions to code generation.

Defining Tokens

JSON-Based Token Design

> Define design tokens that conform to the W3C Design Tokens
> Community Group spec.
> Include color, typography, spacing, and radius.

{
  "color": {
    "primary": {
      "50": { "$value": "#eff6ff", "$type": "color" },
      "100": { "$value": "#dbeafe", "$type": "color" },
      "500": { "$value": "#3b82f6", "$type": "color" },
      "600": { "$value": "#2563eb", "$type": "color" },
      "700": { "$value": "#1d4ed8", "$type": "color" },
      "900": { "$value": "#1e3a8a", "$type": "color" }
    },
    "semantic": {
      "background": {
        "default": { "$value": "{color.primary.50}", "$type": "color" },
        "inverse": { "$value": "{color.primary.900}", "$type": "color" }
      },
      "text": {
        "default": { "$value": "#1a1a1a", "$type": "color" },
        "muted": { "$value": "#6b7280", "$type": "color" },
        "inverse": { "$value": "#ffffff", "$type": "color" }
      }
    }
  },
  "typography": {
    "fontSize": {
      "xs": { "$value": "0.75rem", "$type": "dimension" },
      "sm": { "$value": "0.875rem", "$type": "dimension" },
      "base": { "$value": "1rem", "$type": "dimension" },
      "lg": { "$value": "1.125rem", "$type": "dimension" },
      "xl": { "$value": "1.25rem", "$type": "dimension" },
      "2xl": { "$value": "1.5rem", "$type": "dimension" }
    },
    "fontWeight": {
      "normal": { "$value": "400", "$type": "fontWeight" },
      "medium": { "$value": "500", "$type": "fontWeight" },
      "bold": { "$value": "700", "$type": "fontWeight" }
    }
  },
  "spacing": {
    "1": { "$value": "0.25rem", "$type": "dimension" },
    "2": { "$value": "0.5rem", "$type": "dimension" },
    "4": { "$value": "1rem", "$type": "dimension" },
    "8": { "$value": "2rem", "$type": "dimension" },
    "16": { "$value": "4rem", "$type": "dimension" }
  },
  "radius": {
    "sm": { "$value": "0.25rem", "$type": "dimension" },
    "md": { "$value": "0.375rem", "$type": "dimension" },
    "lg": { "$value": "0.5rem", "$type": "dimension" },
    "full": { "$value": "9999px", "$type": "dimension" }
  }
}

Code Generation With Style Dictionary

Multi-Platform Output

> Create a Style Dictionary configuration.
> Output CSS variables, TypeScript constants, and files for iOS/Android.

// style-dictionary.config.js
import StyleDictionary from 'style-dictionary';

export default {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'dist/css/',
      files: [{
        destination: 'variables.css',
        format: 'css/variables',
        options: { outputReferences: true },
      }],
    },
    typescript: {
      transformGroup: 'js',
      buildPath: 'dist/ts/',
      files: [{
        destination: 'tokens.ts',
        format: 'javascript/es6',
      }],
    },
    ios: {
      transformGroup: 'ios-swift',
      buildPath: 'dist/ios/',
      files: [{
        destination: 'StyleDictionary.swift',
        format: 'ios-swift/class.swift',
      }],
    },
  },
};

Generated CSS variables:

:root {
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-semantic-text-default: #1a1a1a;
  --spacing-4: 1rem;
  --radius-md: 0.375rem;
}

Dark Mode Support

Leveraging semantic tokens makes dark mode support easy.

[data-theme="dark"] {
  --color-semantic-background-default: var(--color-primary-900);
  --color-semantic-text-default: #f3f4f6;
}

Figma Integration

You can also ask Claude Code about syncing Figma Variables with your design-token JSON. It can even generate a token extraction script that uses the Figma REST API.

Summary

With Claude Code, you can efficiently go from token definition to code generation with Style Dictionary, and all the way through multi-platform support. Also see building a design system, the CSS/styling guide, and dark mode implementation.

For more on Style Dictionary, see the official Style Dictionary documentation.