Design Token System

---
name: Design Token System
description: Build a three-tier token architecture (global, semantic, component) with theming. Use when setting up design tokens, adding themes or dark mode to a design system, or untangling hard-coded colors and spacing.
---

# Design Token System

Use this skill to design a scalable token architecture that survives rebrands,
theming, and growth - instead of hard-coded values sprinkled through the codebase.

## The three tiers

### Tier 1: Global (primitive) tokens

Raw values with no meaning attached. The full palette of options.

```js
const global = {
  blue500: '#3B82F6',
  gray900: '#111827',
  space4: '16px',
  fontSize3: '18px',
};
```
… load the full skill through Skill Me