Design Tokens for Colors in Tailwind CSS

What Are Color Design Tokens?

Design tokens are named values that represent design decisions. For colors, tokens create a shared language between designers and developers: 'primary' means the same blue-600 in Figma, CSS, React Native, and email templates.

Token Architecture

• Primitive tokens: Raw color values like blue-600 (#2563eb)
• Semantic tokens: Purpose-driven names like color.primary, color.error
• Component tokens: Specific to UI elements like button.background, input.border
• Each layer references the one below it for maintainability

Implementing Tokens in Tailwind

// tokens/colors.js
module.exports = {
  primitive: {
    blue: { 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8' },
    red:  { 500: '#ef4444', 600: '#dc2626' },
    slate: { 50: '#f8fafc', 700: '#334155', 900: '#0f172a' },
  },
  semantic: {
    primary: 'var(--color-primary)',
    error: 'var(--color-error)',
    surface: 'var(--color-surface)',
    'on-surface': 'var(--color-on-surface)',
  },
};

// tailwind.config.js
const tokens = require('./tokens/colors');
module.exports = {
  theme: {
    extend: { colors: { ...tokens.primitive, ...tokens.semantic } }
  }
};

Syncing Tokens Across Platforms

// tokens.json (W3C Design Token format)
{
  "color": {
    "primary": {
      "$value": "#3b82f6",
      "$type": "color",
      "$description": "Main brand action color"
    },
    "error": {
      "$value": "#ef4444",
      "$type": "color"
    }
  }
}