Design system principles
The principles are the measurable rules that guide layout and interaction decisions in the system. Visual principles draw on Gestalt psychology and NN/g’s visual-design framework; usability heuristics draw on Jakob Nielsen’s 10 general principles for interaction design. Both are listed from most to least important.
Scale
#1Priority 1Relative size signals importance and rank. The most important elements should be visibly larger than supporting ones, using no more than three distinct sizes in a composition.
Visual hierarchy
#2Priority 1Users scan before they read. Size, weight, and position must signal what matters first, so the eye lands on the primary element without searching.
Balance
#3Priority 1Visual weight should feel evenly distributed across the layout. No single area should dominate so heavily that users miss the rest of the composition.
Contrast
#4Priority 1Differences must be decisive. When two elements differ in role, they differ clearly in size, weight, or color, never ambiguously.
Proximity
#5Priority 1Related items sit close together and unrelated items sit apart. Spacing communicates grouping before any border or box does.
Similarity
#6Priority 2Elements that share a visual trait — color, shape, size, or weight — are perceived as related. Consistent styling within a role tells users what belongs together and how it behaves.
Common region
#7Priority 2Items within a shared boundary are perceived as a group. Containers and backgrounds unite related elements when spacing alone is not enough to communicate structure.
Alignment
#8Priority 2Every element shares an edge or axis with another. Invisible grid lines create order that users feel even when they cannot name it.
Typography
#9Priority 2A limited typographic system — no more than three sizes and consistent weight rules — establishes hierarchy and keeps text readable without overwhelming the layout.
Color
#10Priority 2Color should be applied strategically, not decoratively. A restrained palette lets content stand out; reserve accent colors for the elements that need the most attention.
Imagery
#11Priority 3Images should add meaning, not noise. Every visual should support comprehension or brand perception — decorative clutter competes with the information users came to find.
Whitespace
#12Priority 3Empty space is an active tool, not leftover room. Generous, even spacing reduces cognitive load and increases comprehension.
Visibility of system status
#13Priority 3The interface should keep users informed about what is happening through timely, appropriate feedback. No consequential action should feel silent or uncertain.
Match the system to the real world
#14Priority 3Use language, concepts, and controls that match user expectations — not internal jargon. Information should appear in a natural, logical order users already understand.
Consistency and standards
#15Priority 3Users should not wonder whether different words, patterns, or actions mean the same thing. Follow platform and industry conventions so the system feels predictable across every surface.
User control and freedom
#16Priority 4Users need clearly marked exits to undo mistakes and leave unwanted states. Support undo, cancel, and back without forcing users through extended recovery paths.
Error prevention
#17Priority 4Prevent problems before they happen. Eliminate error-prone conditions, use constraints and good defaults, and confirm before irreversible actions.
Recognition rather than recall
#18Priority 4Keep options, labels, and state visible so users recognize what to do instead of remembering it from another screen. Minimize memory load across the flow.
Aesthetic and minimalist design
#19Priority 4Every element in the interface competes for attention. Remove what is irrelevant or rarely needed so essential content and actions stay visible and easy to parse.
Error recovery
#20Priority 4When errors occur, messages should be plain language — no codes — and should precisely explain the problem and how to fix it. Recovery paths should be immediate and obvious.
Read the rest of the design system
Enter your details to unlock the remainder of this page, plus the principles, foundations, components and interactions pages in full.