Pattern Catalog
Visual grammar
Not interaction patterns: the perceptual layer underneath them. Spacing, hierarchy, colour, shape, motion and words.
4 entries.
Family
Principle
Visual grammar · Demo
Semantic Colour
Neutral is the default and colour is an exception that carries exactly one meaning — at most three semantic hues plus greys, and never colour on its own.
Scan & Understand
Visual grammar · Demo
Spacing and Proximity
Whitespace is the primary grouping mechanism. Things that belong together sit close; things that do not sit apart — and uniform padding everywhere is a decision not to have grouped anything.
Scan & Understand
Visual grammar · Demo
Visual Hierarchy
Size, weight, colour and position are a currency with a fixed supply. Spend them in proportion to importance, and accept that emphasising everything emphasises nothing.
Scan & Understand
Visual grammar · Demo
Words and Labels
The text is the interface. A button named after its outcome, a label in the customer's vocabulary and an error that says what to do next do more than any amount of layout.
OrientAct & Decide
Nothing matches those filters.