Hero
Marketing page-topper: a centered column with a display-size title (one phrase optionally wrapped in .hero-accent for the accent-colored run), a measured lede paragraph, and a CTA row — typically a stadium .btn-primary.btn-pill next to a .btn-subtle-link. The huge vertical whitespace is the point. .hero-grid adds a faint hairline grid backdrop that fades radially behind the content. For in-app empty regions use .empty-state — heroes belong to marketing/docs surfaces.
Root: .hero on <section>, <div>, <header>
Examples
Ship the sprint, skip the ceremony
Lozenge turns platform primitives into a whole workflow surface — boards, backlogs, and flags with zero JavaScript.
<section class="hero hero-grid"><h1 class="hero-title">Ship the sprint, <span class="hero-accent">skip the ceremony</span></h1><p class="hero-lede">Lozenge turns platform primitives into a whole workflow surface — boards, backlogs, and flags with zero JavaScript.</p><div class="hero-actions"><a class="btn btn-primary btn-pill" href="#">Get started</a><a class="btn btn-subtle-link" href="#">Read the docs</a></div></section>Docs that lint themselves
Every example on this site is generated from a machine-checked spec.
<section class="hero"><h1 class="hero-title">Docs that lint themselves</h1><p class="hero-lede">Every example on this site is generated from a machine-checked spec.</p></section>Contract
Variants & modifiers
| Class | Axis | Rules |
|---|---|---|
hero-grid | modifier | optional |
Structure
| Selector | Required | Description |
|---|---|---|
.hero-title | required | The display headline (display 900: 68px/76px, semibold, max-width 15ch). Any heading element; the class zeroes its margin. Wrap one phrase in .hero-accent for the accent run. |
.hero-lede | optional | Supporting paragraph: max-width 640px, 20px/30px, subtle. |
.hero-actions | optional | Centered CTA row with 12px gaps, wrapping allowed. |
Accessibility
One hero per page, and its title is the h1 — the display size is not a license to break the heading outline. .hero-accent is decoration, not emphasis: it must restate or color-amplify a word, never carry meaning that would be lost without the color (its pairing, status-info subtle text on the page surface, follows the verified contrast direction and tracks the accent-hue dial). The grid backdrop is a content-':before over a separator token; under forced-colors it repaints with the gridlines gone, which is the correct degradation.
Nesting
Allowed in:
page content, normally the first element of a marketing/docs page
Never inside (or containing):
.hero.card.dropdown-menu.mega-menu