Design System Basics (dummy)
A design system is not a library of components. It is a list of decisions we have agreed to stop making.
Tokens
We maintain three layers of tokens:
- Primitive — raw values: colors, numbers, font sizes.
- Semantic — roles:
surface,onSurface,border,danger. - Component — per-component overrides, used sparingly.
Designers pick semantic tokens. Engineers write code that only references semantic tokens. Primitive tokens move, semantic tokens don’t.
Type scale
| Name | Size | Use |
|---|---|---|
| Display | 28 | Page titles |
| Heading | 20 | Section headings |
| Body | 15 | Default text |
| Caption | 13 | Supporting text |
Spacing
A 4pt grid. Every margin and padding is a multiple of four. If a design needs a 7, something is off — usually a line-height or an icon bounding box pretending to be spacing.