visual design
Consistency
Why does visual and interaction consistency matter?
Consistency means the same things look and behave the same way throughout a product - one button style, one set of colours and spacings, predictable patterns. It lets people learn an interface once and apply that knowledge everywhere, instead of re-reading every screen as if it were new.
Also known as: consistency, visual consistency, design consistency, internal consistency
Prefer to watch?
Watch the recap 0:44
The demo
The same little toolbar, two ways. Flip between them and notice how much harder you have to look when every button is its own special snowflake.
What this demo shows (text version)
A toolbar holds five document actions. In "inconsistent" mode each button has a different colour, shape, size and label style, so nothing tells you which is the main action, whether they're even the same kind of control, or which is dangerous - you have to read and judge each one. In "consistent" mode they share one button system: a single clear primary action plus uniform secondaries, with the destructive action deliberately marked.
The consistent version scans in a glance because understanding one control means understanding them all. That's the value of consistency: it lets people reuse what they've learned instead of re-reading every screen, lowers cognitive load, and reads as trustworthy craft. The one good reason to break it is to signal a genuine difference - like keeping a destructive action visibly apart.
Consistency is what lets a learned pattern keep paying off: when every primary button looks and acts like every other, people stop deciding how things work and just use them. Inconsistency taxes attention - each oddly-styled control demands a fresh read and quietly erodes trust. Reuse one system of styles and behaviours; break it only with a deliberate, meaningful reason.
The inconsistent panel made you stop and decode every button - which one's the main action? are these even the same kind of thing? The consistent one you could scan in a glance, because once you'd understood one control you understood them all. Same buttons, same task; consistency simply removed the friction of re-learning.
Consistency works by letting people reuse what they've learned. Internally, a repeated style and behaviour means a pattern understood once is understood everywhere - no relearning per screen. Externally, matching platform and web conventions (Jakob's law) means people arrive already knowing how your product works. Both turn prior knowledge into free usability.
Inconsistency is a quiet, compounding tax. Every button that's a different colour, shape or size forces a fresh judgement - is this clickable? is it the primary action? is it the same as that other one? - and the uncertainty reads as carelessness, which erodes trust. A jumble of styles doesn't look rich; it looks broken.
Consistency isn't rigidity, though. The goal is "same meaning, same treatment" - which sometimes means being deliberately inconsistent to flag a genuine difference (a destructive action shouldn't look like a safe one). Break the pattern only on purpose and only to communicate; a design system exists to make the default consistent so the exceptions can carry weight.