Skip to content

PatternsContent patternsHero

Hero

The opening block of a page. Eyebrow, title, lede, optional meta, optional actions.

4-7 lines totalMax title 2-3 lines

Anatomy

  1. Eyebrow: 1 line, uppercase, 0.6875 rem, 0.22 em tracking, --muted-foreground. Sets the topic, not the promise.
  2. Title: 2-3 lines, font-instrument-serif, 2.25-4.75 rem, -0.03 em tracking, --foreground. The whole sentence. No "introducing" prefix.
  3. Lede: 2-3 lines, body, 1.0625 rem, 1.6 line-height, --muted-foreground. The argument, not the topic.
  4. Meta (optional) — 1 line of pills, 0.6875 rem, 0.12 em tracking, uppercase. Year, role, duration, stack.
  5. Actions (optional) — 1-3 buttons, primary on the left, secondary on the right, ghost optional.

Rules of thumb

  • Total height: 4-7 lines. If it's more, the page is doing two things.
  • Title text-wrap: balance. The browser will fit the title to the column.
  • Lede is not a sentence fragment. It's a sentence, sometimes two.
  • No "Welcome to" or "Introducing". The first word is the first word of the argument.

Good vs bad

tsx
// Good
<h1 className="ds-home__title">
  A small, opinionated design system for products that try to be useful.
</h1>
<p className="ds-home__lede">
  Every page here is a working artifact — the same code that runs in production,
  documented in place.
</p>

// Bad
<h1>Welcome to the design system!</h1>
<p>Here you will find tokens, components, and patterns that we use to build our products.</p>

What not to do