Start with actual pages and components
Inventory headings, cards, buttons, forms, messages and spacing on important pages. Find variants that fulfil the same role and those meeting genuinely different needs. Combine duplicates before inventing another component.
For each element, document its use, expected content and necessary states: normal, focus, error, loading or unavailable. Guide and service cards may share a base while carrying different information.
- Components found on real pages.
- Duplicates rationalised.
- Useful states described.
Connect style with meaning
Define a hierarchy of headings, body text, space and colour. A primary button should consistently signal a priority action; colour cannot be its only cue. Preserve contrast, text size and visible focus in each variant.
Test long languages and different scripts. A German label or right-to-left Arabic layout may overflow where French fits. The multilingual guide
- Visual role consistent.
- Contrast and focus checked.
- Variants tried in multiple languages.
Try components in context
Place elements in pages with real text and images. A card elegant with two words may fail with a three-line title. Test phone width, zoom, form error and empty states before declaring a component ready.
Pair examples with simple acceptance checks. The prelaunch guide
- Short and long content tested.
- Empty and error states visible.
- Mobile and zoom checked.
Evolve the system without drift
Assign an owner to design decisions. When adding a variant, explain the need and where it belongs. Repeated exceptions may show that a general rule should change.
After changing typography, space or colour, review representative pages and languages. Keep a few examples current rather than a large obsolete document. The maintenance guide
- Decisions and uses documented.
- Exceptions tracked.
- Representative pages reviewed after changes.