| Layer | What it contains | Engineering analogy |
|---|---|---|
| Foundations | Color, typography, spacing, icons, motion, accessibility rules. | Base types, constants, platform constraints. |
| Tokens | Named design decisions such as color.text.primary or space.4. | Configuration variables with stable names. |
| Components | Buttons, inputs, modals, tables, navigation, cards, alerts. | Reusable modules with props, states, and tests. |
| Patterns | Higher-level guidance: search flows, empty states, onboarding, error recovery. | Reference architectures and service recipes. |
| Content | Voice, terminology, microcopy, labels, validation messages. | API naming conventions and error contracts. |
| Governance | Ownership, contribution rules, versioning, review, adoption support. | RFC process, code ownership, release policy. |
Core distinction
A design system is not a UI kit. A UI kit gives reusable parts. A design system also explains when to use them, why they exist, how they change, and who maintains them.