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