Skip to content

PatternsWriting patternsEyebrow

Eyebrow

The small uppercase label above a heading. Sets the topic, not the promise.

1 line0.6875 rem0.22 em tracking

Anatomy

An eyebrow is the small uppercase label above a heading. It is 0.6875 rem, 0.22 em tracking, uppercase, in --muted-foreground. It sits 0.875 rem above the heading.

When to use an eyebrow

  • When a section needs context before the heading. A case study hero needs "Cognitive distance" before the title.
  • When a card needs a category before the title. "Foundations" before "Color, type, space, motion."
  • When the topic of a section is different from the title. "Step 03" before "Balanced assignment".

Do and don't

Do

Cognitive distance · 2026

Sets the topic and the year. Two pieces of context, one line.

Don't

Cognitive distance: a new framework for understanding how users experience the world

An eyebrow is not a sentence. It is a label.

Rules of thumb

  • Eyebrow is always uppercase. Always --muted-foreground. Always tracked.
  • Eyebrow is never a sentence. It is a label, a category, a date, a section number.
  • Eyebrow is one line on desktop. If it wraps to two on mobile, it is too long.
  • Eyebrow is separated from the heading by a single line, not by extra padding.