Repetition
Repeating visual treatments builds a language users learn once and apply everywhere.
Definition
The deliberate reuse of visual elements, spacing, type treatments and structures across a design. Repetition creates unity and reduces the learning cost of each new screen.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this plate
Reach for this when
- Establishing a design system.
- Auditing a product that feels inconsistent.
- Designing a family of similar pages.
- A product feels inconsistent and the individual screens each look fine.
Common mistakes
- Repetition applied so thoroughly that hierarchy disappears.
- Near-repetition, where treatments are almost but not quite the same, which reads as error.
Repetition is what makes a system a system
Every repeated treatment is a lesson the user only has to learn once. A product with five card styles teaches five things; a product with one teaches one and applies it everywhere.
In practice this is enforced through tokens and components rather than through discipline. If the correct treatment is the easiest to apply, repetition happens by default.
What to repeat
- Spacing steps drawn from a single scale.
- Type roles: one treatment per level of hierarchy.
- Corner radii, from a small documented set.
- Icon style, weight and optical size.
- Interaction states: hover, focus, active and disabled behave identically everywhere.
- Page structures: the same layout skeleton for the same kind of page.
What to repeat, and what to vary
A system is repetition with deliberate exceptions. These are the properties that usually belong in each column.
| Repeat | Vary |
|---|---|
| Spacing scale and card padding | Content length and imagery |
| Corner radius and border weight | Emphasis level within a set |
| Type roles and their sizes | Which role a given item uses |
| Icon style, weight and grid | Which icon is shown |
| Interaction states and timings | Nothing. These should not vary at all |
In practice
- i.
One card, many contents
Design systemsA single card component with defined content slots keeps every listing consistent. Five bespoke card designs create five maintenance costs and five things to learn.
- ii.
Four radii in one screen
DriftButtons at six pixels, inputs at four, cards at twelve, and a modal at sixteen, none of it decided. Nobody notices the values and everybody notices that the screen looks unowned.
Local chart
FND·010 · Region II · Grid C2
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Sources
Where a source establishes something narrower than the popular reading of it, the note says so.
- [1]
The Non-Designer's Design Book
R. Williams, Peachpit Press, 1994, revised 2014
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Principles behind this
The reasoning this solution is an application of.
- Consistency and StandardsHEUR·004 · Heuristic
Related concept
Connected closely enough to change how you apply this.
- Component API DesignSYS·002 · Design system
- Design TokensSYS·001 · Design system
- RhythmFND·017 · UI foundation
- ShapeFND·046 · UI foundation
- SimilarityFND·005 · UI foundation
- Spacing SystemsFND·042 · UI foundation
- Visual HierarchyFND·001 · UI foundation