Hero

Above-the-fold page region for landing pages. Per the answered design question recorded with this component: ship Hero + CTA in v1.0; other Sections deferred.

Patterns

The Split pattern collapses to a single column on narrow viewports via auto-fit + the --hero-split-min token (default 20rem).

Anatomy

<section class="hero">
  <div class="hero__eyebrow">v1.0 launch</div>
  <h1 class="hero__title">A semantic design system.</h1>
  <p class="hero__lede">Rooted in suprematism. Built for humans and AI agents.</p>
  <div class="hero__actions">
    <a href="#" class="button -primary">Get started</a>
    <a href="#" class="button -ghost">Read the manifesto</a>
  </div>
</section>

<!-- Split with visual slot -->
<section class="hero" data-pattern="split">
  <div>
    <h1 class="hero__title">A semantic design system.</h1>
    <p class="hero__lede">For humans and AI agents.</p>
    <div class="hero__actions">
      <a class="button -primary">Get started</a>
    </div>
  </div>
  <div class="hero__visual">
    <img class="image -rounded -shadow" src="hero.jpg" alt="…" />
  </div>
</section>

<!-- On accent background -->
<section class="hero -on-accent" data-pattern="centered">
  <h1 class="hero__title">Ship faster.</h1>
  <p class="hero__lede">A design system for the AI-native era.</p>
  <a class="button -secondary">Get started</a>
</section>

Every part is optional except .hero__title. Authors compose what the page needs.

Tokens used

From semantic tier

• --color-surface-canvas — default background
• --color-accent — eyebrow + on-accent background
• --color-ink-strong, --color-ink-regular, --color-ink-inverse
• --space-inset-section-{m,l} — block / inline padding
• --space-gap-elements-{s,m} — internal gaps
• --space-gap-blocks-l — split-pattern gutter
• --font-overline-* — eyebrow
• --font-display-hero-* — title (v0.2.0 will swap to display.hero per ADR-0009)
• --font-body-lead-* — lede

Component-tier (generated)

• --hero-max-content — measure cap for text content (default 56rem)
• --hero-split-min — collapse threshold for split pattern (default 20rem)

Accessibility

• Wrap in <section> so it appears as a landmark when paired with an outer <main>.
• The title is the page's primary heading — use <h1> (or <h2> if another section already takes <h1>).
• The eyebrow is decorative — use <div> (or <p> if it conveys a brief sentence); avoid headings here so the page outline stays clean.
• .hero__visual should carry an alt attribute on its <img>.

Edge cases

• No lede: drop the <p class="hero__lede">. The component composes whatever is present.
• Multiple action buttons: the .hero__actions row wraps; use Button + Button-group + or stacked buttons depending on density.
• Long title: max-inline-size: var(--hero-max-content) keeps the measure readable.
• Dark theme: uses semantic tokens, flips automatically with data-color-scheme="dark" on :root.

Do

• Pick the pattern that matches the page intent before writing markup.
• Keep titles concise — Hero is a visual moment, not a paragraph.
• Use Image (or a Spinner placeholder during async load) inside .hero__visual.

Don't

• Don't put three or more buttons in .hero__actions. Use a primary
  • secondary, or primary + ghost.
• Don't override the title's font via inline styles. Use the pattern variants or wait for the v0.2.0 display.hero token.
• Don't nest Hero inside Hero.