Design system
How HAAM turns visual language and interaction decisions into maintainable infrastructure.
Role of the system
A design system is institutional memory made operational. It carries decisions from one screen, product, or generation of a team into the next without requiring every contributor to rediscover them.
The system should increase coherence without flattening character. It provides a stable grammar, not a collection of identical pages.
Layers
HAAM systems are organised into five layers:
| Layer | Responsibility |
|---|---|
| Foundations | Colour, typography, spacing, motion, grids, and elevation |
| Tokens | Named decisions that connect foundations to implementation |
| Components | Reusable interface structures with defined behaviour |
| Patterns | Compositions that solve recurring user tasks |
| Guidance | Usage rules, accessibility requirements, and examples |
Token principles
Tokens should describe meaning rather than isolated appearance. Prefer names such as surface-emphasis, text-secondary, or space-section over names tied to a single colour value or screen.
A token is justified when it represents a decision that should remain coordinated across contexts. Excessive tokenisation can obscure rather than clarify the system.
Component requirements
A documented component should include:
- its purpose and appropriate use;
- supported states and variations;
- keyboard and assistive-technology behaviour;
- content constraints;
- responsive behaviour;
- known limitations;
- an owner or maintenance path.
Components are not complete when they only reproduce the approved screenshot. They are complete when their behaviour remains intelligible under real content, different devices, and failure conditions.
Governance
Changes should enter the system when they represent a repeatable need. Project-specific exceptions may remain local until evidence shows that they belong in the shared language.
Major changes should record:
- the problem being solved;
- the affected products or pages;
- accessibility and performance consequences;
- migration requirements;
- the decision date and responsible owner.