The same thing should look and behave the same way everywhere, and follow platform convention where one exists.
Heuristic · Nielsen heuristics
Tag
Entries tagged design-systems, drawn from across the library. Tags cut through the section structure, which is where most of the useful connections are.
26 entries across 6 sections
26 entries
The same thing should look and behave the same way everywhere, and follow platform convention where one exists.
Heuristic · Nielsen heuristics
Elements that look alike are assumed to behave alike, which makes visual language a promise.
UI foundation · Gestalt principles
Repeating visual treatments builds a language users learn once and apply everywhere.
UI foundation · Visual design
Consistent ratios between sizes make a layout feel considered, without needing any particular mystical ratio.
UI foundation · Visual design
A structured palette of ramps and semantic aliases, so colour decisions are made once rather than per screen.
UI foundation · Color
A fixed set of spacing values, so every gap in the product comes from the same vocabulary.
UI foundation · Layout
Icons speed recognition for concepts users already know and create guesswork for everything else.
UI foundation · Form and depth
Every interactive element needs a defined appearance for every state it can be in, and most designs specify only two.
UI foundation · Form and depth
Named values that carry design decisions, so a change happens once rather than in every consuming file.
Design system · Foundations
The props a component exposes determine whether it gets used correctly or forked, which is the main failure mode of design systems.
Design system · Components
Documentation is the product. An undocumented system is a component library nobody can adopt correctly.
Design system · Practice
Who decides what goes in, how changes are proposed, and how the system stays coherent as more people touch it.
Design system · Practice
A system nobody uses is a cost centre, and adoption is won by making the system the easiest path rather than by mandate.
Design system · Practice
How the system changes without breaking the products built on it.
Design system · Practice
How work gets from a product team into the shared system without either blocking the team or degrading the system.
Design system · Practice
Supporting several visual identities from one system, which is a token architecture problem before it is a design problem.
Design system · Foundations
A component is finished when its parts, its states and the reason each variant exists are all written down.
Design system · Components
Two libraries claiming to be the same system will diverge. Decide where truth lives, and make the other side derive from it.
Design system · Practice
Count what is actually in production before deciding what the system should contain.
Design system · Practice
Drafting component documentation from code, which handles the mechanical parts and not the judgement.
AI workflow · Design systems
A system team built a complete component library that nobody adopted, then changed the strategy from mandate to migration path.
Case study · Design systems
The standard workshop for developing and documenting components in isolation.
Tool · design-systems
Design system documentation aimed at the whole team, not only engineers.
Tool · design-systems
Design system platform with token pipelines and documentation generation.
Tool · design-systems
Open-source build tool that transforms one token source into every platform format.
Tool · design-systems