Contents
Design system definition
| Part | What it does |
|---|---|
| Foundations | Color roles, type, spacing, grid, radius, icon rules, motion, elevation. |
| Components | Reusable interface parts such as buttons, inputs, tabs, modals, tables, cards, and navigation. |
| Patterns | Reusable solutions for common product moments such as onboarding, filtering, empty states, errors, and permissions. |
| Content rules | Labels, helper text, error messages, confirmation copy, and voice rules. |
| Code | Production-ready implementation, tokens, package rules, and component behavior. |
| Governance | How patterns are added, reviewed, maintained, deprecated, and adopted. |
What a design system includes
| Layer | Example |
|---|---|
| Visual foundations | Type scale, color roles, spacing, layout, icons. |
| Interaction behavior | Hover, focus, disabled, loading, success, error, and empty states. |
| Accessibility | Keyboard behavior, contrast, target size, focus, labels, status messages. |
| Product patterns | Forms, dashboards, settings, billing, onboarding, search, filters. |
| Documentation | Usage, anatomy, do/don’t notes, examples, exceptions. |
| Contribution model | Who can add, change, approve, or retire a pattern. |
Design system vs UI kit vs style guide
| Term | What it is | Limit |
|---|---|---|
| UI kit | A set of interface components, often in Figma. | Useful, but incomplete without behavior, code, content, and governance. |
| Style guide | Visual and brand rules for how things should look and sound. | Does not always define product interaction or reusable implementation. |
| Component library | Reusable coded components. | Can become technical inventory without design rationale or product patterns. |
| Design system | A connected set of rules, components, patterns, code, and governance. | Only works if teams adopt and maintain it. |
How design systems work in product teams
| Team | How they use it |
|---|---|
| Design | Reuse patterns, define exceptions, improve quality without redrawing every surface. |
| Engineering | Build with stable components, states, tokens, and accessibility rules. |
| Product | Use the system to reduce repeated decisions and clarify scope. |
| Content | Keep labels, errors, help, and empty states consistent. |
| Support | Feed repeated user confusion back into product patterns. |
