taste-design-system

A design system is a decision inventory. This skill tells the agent how to take that inventory, structure it, and keep it honest.

1. TOKEN ARCHITECTURE (Three Tiers, Never Two)

1. Primitive tokens — raw values: --color-ink-900, --space-4, --radius-md. No meaning beyond the value.
2. Semantic tokens — meaning, not value: --color-surface, --color-text-muted, --color-border, --space-inset-lg. Products consume semantic tokens ONLY.
3. Component tokens — per-component aliases: --button-bg-primary, --button-radius, --input-border-width. Components never reference primitives directly.

Rule: components → semantic → primitive → value. If any layer is skipped, the system will fork.

2. TOKEN FORMAT (DTCG, Not Freeform)

Write tokens as a flat key map (or W3C DTCG JSON if the stack supports it):