Design systems
Tokens, components, usage guidelines and design documentation.
Download all 7
- Audit design consistency across screens
Inventories spacing, type, colour, radii and component variants across screens, finds near-duplicates and plans their consolidation. Use before building or cleaning up a design system.
- Define a design token architecture
Designs a three-tier design token architecture (primitive, semantic, component) with naming conventions, theming rules and a sample token file. Use when starting or restructuring a design system.
- Define an icon system
Defines an icon system with grid and keylines, stroke and corner rules, sizes, naming, metaphors, accessibility and contribution rules. Use when a design system creates or tidies up its icons.
- Design a dark theme
Designs a dark theme from an existing light palette, covering surface elevation, semantic colour mapping, contrast checks, images, charts and token changes. Use when a design system adds dark mode.
- Plan design system governance
Plans how a design system is run, covering ownership, the contribution model, versioning, deprecation, adoption tracking and support. Use when setting up or fixing how a design system is run.
- Write accessibility annotations
Annotates a screen design for engineering handoff with accessibility notes - headings, landmarks, focus order, accessible names, states, keyboard behaviour and announcements - mapped to WCAG.
- Write a design-system component spec
Writes a design-system component spec covering anatomy, variants, states, behaviour, tokens, content rules, dos and don'ts, and accessibility. Use when adding or documenting a component.