🎨

Color Tokens

DTCG Type: color

Color tokens define the color palette of your design system. They range from raw primitives (hex values) to semantic tokens (foreground, background, primary) to component-specific tokens (button-bg, card-border).

Token Examples

Token Name	Value	Preview
`color.primary.500`	`#6366F1`
`color.neutral.100`	`#F1F5F9`
`color.semantic.success`	`#22C55E`
`color.semantic.destructive`	`#EF4444`

CSS Properties

These CSS properties typically consume color tokens:

colorbackground-colorborder-colorfillstrokeoutline-colorbox-shadow (color part)

Use Cases

✓

Brand identity — primary, secondary, accent colors

✓

Semantic states — success, warning, error, info

✓

Surface layers — background, card, popover, dialog

✓

Text hierarchy — primary, secondary, muted, disabled

✓

Interactive states — hover, active, focus, disabled

✓

Data visualization — chart colors, heatmaps

Usage Example

:root {
  /* Global tier */
  --color-primary-500: #6366F1;
  --color-primary-600: #4F46E5;
  --color-neutral-100: #F1F5F9;
  --color-neutral-900: #0F172A;

  /* Semantic tier (light) */
  --color-background: var(--color-neutral-100);
  --color-foreground: var(--color-neutral-900);
  --color-primary: var(--color-primary-500);
  --color-primary-hover: var(--color-primary-600);
}

.dark {
  --color-background: var(--color-neutral-900);
  --color-foreground: var(--color-neutral-100);
}

.btn-primary {
  background: var(--color-primary);
  color: white;
}
.btn-primary:hover {
  background: var(--color-primary-hover);
}

Available in Presets

Full Brand System

Complete 3-tier system with light/dark modes

Simple

Lightweight global-only tokens

Product / SaaS

Interactive product UI with semantic modes

Landing Page

Bold marketing with gradients and drama

Dashboard / Admin

Data-dense panels with chart colors

Mobile App

Touch-friendly native-feeling values

Email Template

Email-safe px units + web-safe fonts

Minimal

Under 20 tokens, bare essentials

Naming Convention

// Token name format: {category}.{group}.{variant}
// Examples:
// color.primary.500 → #6366F1
// color.neutral.100 → #F1F5F9
// color.semantic.success → #22C55E
// color.semantic.destructive → #EF4444

// CSS custom property:
// --color-primary-500: #6366F1;
// --color-neutral-100: #F1F5F9;

// Token set hierarchy:
// global/         → Raw primitive values
// semantic/light/ → Light mode semantic mapping
// semantic/dark/  → Dark mode semantic mapping
// component/      → Component-specific overrides