Creates multi-tier token systems: global → semantic → component, with dark mode variants.
---
name: Design Token System
description: Build a three-tier token architecture (global, semantic, component) with theming.
---
# 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',
};
```
… install to load the full skillSign in to rate and review this skill.
No reviews yet. Be the first to review this skill.