Design System: [name]
Design system – tokens, components, contract
Як використовувати: Multi-designer or multi-repo work. Tokens first, then components – the a11y contract is not optional.
Перегляд
Design System: [name]
The contract between design and code – tokens, components, and the rules for composing them. If it isn't documented here, it doesn't exist.
| Field | Value |
|---|---|
| System | [name] |
| Version | N.N |
| Owner | @name |
| Status | Draft / Adopted |
Principles
- [e.g. consistency over novelty]
- [e.g. accessible by default]
- [e.g. compose, don't fork]
Foundations
Color tokens
| Token | Value | Use |
|---|---|---|
--color-primary | #NNNNNN | Key actions |
--color-surface | #NNNNNN | Backgrounds |
Type scale
| Token | Size / weight | Use |
|---|---|---|
text-display | NN/semibold | Hero |
text-body | NN/regular | Paragraphs |
Spacing & radius
| Token | Value | Use |
|---|---|---|
space-1 | Npx | |
radius-md | Npx | Cards |
Components
| Component | Status | Spec | Notes |
|---|---|---|---|
| Button | Stable | [link] | Variants: solid/soft/ghost |
| Input | Beta | [link] | |
| [component] | Proposed |
Component anatomy (repeat per component)
- Variants: [list]
- States: default / hover / active / disabled / loading
- Do: [usage rule]
- Don't: [anti-pattern]
Accessibility contract
- Contrast: AA minimum (4.5:1 text, 3:1 UI)
- Focus: visible ring on every interactive element
- Keyboard: full operability, no traps
- Motion: respects reduced-motion preference
Contribution
| Step | Process |
|---|---|
| Propose | [issue / rfc] |
| Review | [who approves] |
| Release | [versioning rule – breaking = major] |
Changelog
| Version | Date | Changes |
|---|---|---|
| 1.0 | YYYY-MM-DD | Initial |