Build a useful, maintainable design system
A design system connects visual rules, components and usage. Start with repeated elements and observed problems. Its value lies in consistent, maintained decisions rather than the number of drawn components.
Photo: Glenn Carstens-Peters / Unsplash · Context photograph; no affiliation with FDS is implied.
Inventory real inconsistencies
Compare representative pages on phones and wide screens. Record variations in headings, spacing, buttons, forms and cards. Associate each variation with a justification or defect.
Group elements by purpose. Different cards may serve different needs; buttons performing the same action require a shared rule.
Define foundational rules
Define reading width, type scale, spacing, colours and breakpoints. Test long headings, translations and zoom. Keep explicit units and variables rather than isolated corrections.
Separate body text, captions and interactive controls. A subdued caption should not force a tiny filter size. Also check contrast and visible focus.
Document states and behaviour
Describe normal, hover, focus, disabled, error and loading states where relevant. Connect form labels and messages to fields. Preserve readable tables on small screens.
Prefer suitable HTML elements and check keyboards and assistive technologies. ARIA practices support defined interactions; copying attributes does not replace expected behaviour.
Organise adoption and evolution
Publish examples, usage rules and counterexamples. Define who accepts a variant and maintains its code. Test changes across pages before generalising.
Plan retirement of old components and track remaining pages. A system becomes fragile when documentation and production diverge. Include visual checks in shared changes.
A record to keep with the decision
| Item | Evidence |
|---|---|
| Foundations | Variables and responsive examples |
| Component | States, keyboard and errors |
| Maintenance | Owner and evolution |
Frequently asked questions
Should I start with a complete library?
Start with repeated elements on important journeys. Establish a small consistent foundation before multiplying variants.
Reference material
W3C · ARIA Authoring Practices
The practical checklist is an editorial synthesis to adapt to your service. It does not constitute a certification or an audit result.