Skip to content
UX Atlas
UI foundationCraft conventionFoundational

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 page
  1. Definition
  2. Repetition is what makes a system a system
  3. What to repeat
  4. In practice
  5. Sources
  6. Continue from here

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.

In practice

One card, many contents

Design systems

A single card component with defined content slots keeps every listing consistent. Five bespoke card designs create five maintenance costs and five things to learn.

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

  • 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.

Related concept

Connected closely enough to change how you apply this.