design-system
Installation
SKILL.md
Design system
A design system is a set of constraints that makes consistency the cheap path. If the system is harder to follow than to ignore, it will be ignored.
Tokens first
Define the primitives before any component. Every visual decision references a token; nothing hard-codes a value.
- Color — semantic names, not literal ones.
surface,surface-raised,text-primary,text-muted,border,accent,danger. A token namedblue-500cannot be re-themed. - Type — a scale with a stated ratio, and a line-height per step. Four to six steps. More than that and nobody can tell them apart.
- Spacing — one scale, geometric, used for every gap and inset. Arbitrary spacing is the single most common source of "it looks off but I can't say why."
- Radius, elevation, motion — small closed sets. Two or three each.