Skip to content
UX Atlas
UI foundationCraft conventionFoundational

Emphasis

Making one thing stand out, which only works if most things do not.

Definition

Emphasis is the deliberate promotion of a single element above its surroundings. It depends entirely on contrast with a consistent baseline, which makes it a limited resource within any one view.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. Emphasis techniques, quietest first
  3. In practice
  4. Continue from here

Emphasis techniques, quietest first

  • Increased weight, which is precise and cheap.
  • Increased size.
  • A background tint, which creates a region as well as emphasis.
  • A solid fill in the accent colour, which is the strongest static treatment.
  • Isolation in whitespace, which is quiet and often the most elegant option.
  • Motion, which overrides everything and should be reserved for change.

Do

  • Emphasise the action that matches the user's most likely goal.
  • Combine two levers at most.
  • Keep the baseline quiet so emphasis has somewhere to stand out from.

Do not

  • Use colour alone, which fails WCAG 1.4.1.
  • Emphasise more than one element per view.
  • Use animation to emphasise something that is not changing.

In practice

Two primary buttons

A very common failure

Save and Publish both styled as primary forces the user to read and decide where the design should have told them. Making one secondary costs nothing and answers the question.

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.

Applies when you are designing

A CheckoutA DashboardA Pricing PageA Search ExperienceAn AI ProductAn Onboarding FlowAuthenticationNavigation

Applied through

Where this shows up as a concrete interface decision.

Principles behind this

The reasoning this solution is an application of.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.