Find it. Try it. Build with it.

All three variants share the .o-hero base (max-width, centered, container padding). Modifiers compose different inner element sets:

Inner element classes (.o-hero-home-content, .o-hero-page-eyebrow, .o-hero-case-grid, etc.) keep their existing names. The refactor unifies the wrapper only; deeper renaming would break consumers without enough benefit.

<!-- Home -->
<section class="o-hero o-hero--home">
  <div class="o-hero-home-content">…</div>
  <div class="hero-motion-frame">…</div>
</section>

<!-- Page -->
<section class="o-hero o-hero--page">
  <span class="o-hero-page-eyebrow">Work</span>
  <h1 class="o-hero-page-title">…</h1>
  <p class="o-hero-page-lede">…</p>
</section>

<!-- Case -->
<section class="o-hero o-hero--case">
  <ol class="m-breadcrumb">…</ol>
  <div class="o-hero-case-head">…</div>
  <div class="o-hero-case-grid">…</div>
</section>

• Container max-width→var(--w-default) = 1120px
• Container inline padding→var(--container-pad)
• --home padding-block→var(--s-10) var(--s-9)
• --page padding-block→var(--s-9) var(--s-7)
• --case padding-block→var(--s-9) var(--s-7)
• --case grid gap→var(--s-6)
• Title color→var(--color-text-primary)
• Lede color→var(--color-text-body)

Inspect the live production card below. The parts list and source classes explain its composition.

H.A.R.D. Protocol Public Preview

Look beneath the finished screen

A public protocol for examining the evidence behind an AI-created workflow before committing to the next build.

• Research
• Engineering review

• Whole-card linkThe entire <a> is the link target. Inner elements must not include nested links, that breaks screen-reader navigation. Tag list is non-interactive on purpose.
• Title roleUse <h3> at the page level. Inside the design system showcase, <h4> respects heading hierarchy.
• KeyboardTab focuses card. Enter activates the link. :focus-visible shows the accent outline; mouse focus does not.
• Color contrastTitle 18.5:1 (AAA). Teaser 7.2:1 (AAA). Meta 4.6:1 (AA). Accent metric 4.81:1 (AA ✓).
• Reduced motionCard transitions cap at 220ms. Active scale animation is preserved (sub-100ms tap response is not motion sickness territory).
• Touch targetWhole card is the target, minimum height ~340px. WCAG 2.5.5 ✓.

<a class="o-card-work" href="/portfolio/multi-role-analytics"
   data-domain="Enterprise SaaS">
  <div class="o-card-work-thumb">
    <span class="o-card-work-thumb-mark">Dashboard</span>
  </div>
  <div class="o-card-work-body">
    <div class="o-card-work-meta">
      <span>T-Mobile</span><span>2025</span><span>8 mo read</span>
    </div>
    <h3 class="o-card-work-title">Multi-Role Analytics Dashboard</h3>
    <p class="o-card-work-teaser">…</p>
    <div class="o-card-work-foot">
      <ul class="m-tag-cluster">
        <li class="tag">Multi-role</li><li class="tag">AI</li>
      </ul>
      <span class="t-mono-s t-accent">1 platform</span>
    </div>
  </div>
</a>

• --card-radius→var(--r-4) = 18px
• --card-border→1px solid var(--color-border)
• --card-border-hover→1px solid var(--color-border-strong)
• Body padding→var(--s-4) var(--s-5)
• Title color→var(--color-text-primary)
• Metric color→var(--color-action-text)

How the card behaves across data conditions, loading, missing, error, filtered. Most consumer scenarios pass through these states; documenting them prevents inconsistent UX.

What can go inside each slot. The card has fixed structure; deviating breaks layout or accessibility.

• Heading hierarchyh1 for the case-study title (only h1 on the page). Subsections use h2.
• BreadcrumbWrapped in <nav aria-label="Breadcrumb">. Last item is plain text (current page), not a link.
• Definition list<dl> with <dt>/<dd> pairs. Screen readers announce as "Role: Senior UX Designer; Team: Product, sales enablement, …"
• Visual slotProject photo requires alt describing the work, not the medium ("dashboard showing role-based filters" not "screenshot of dashboard").
• Color contrastTitle 18.5:1 (AAA). Lede 7.2:1. Meta dt: 4.6:1. Meta dd: 18.5:1.
• Reduced motionReveal animations disabled, content is visible at opacity: 1 from the start.

<section class="o-hero-case">
  <nav aria-label="Breadcrumb">
    <ol class="m-breadcrumb">
      <li><a href="/portfolio">Work</a></li>
      <li>Enterprise SaaS</li>
      <li>2024</li>
    </ol>
  </nav>
  <div class="o-hero-case-head">
    <h1 class="o-hero-case-title">…</h1>
    <p class="o-hero-case-lede">…</p>
  </div>
  <div class="o-hero-case-grid">
    <div class="o-hero-case-visual">
      <img src="…" alt="…">
    </div>
    <dl class="o-case-meta">
      <div><dt>Role</dt><dd>Senior UX Designer</dd></div>
      <div><dt>Team</dt><dd>…</dd></div>
      <div><dt>Timeline</dt><dd>3 months</dd></div>
      <div><dt>Status</dt><dd>Shipped</dd></div>
    </dl>
  </div>
</section>

How the hero behaves across data conditions. Hero is the page's opening, these states are unmissable.

What can go inside each hero slot. Hero is the page's first impression; slot violations show up immediately.

Live anatomy

Tab reaches each enabled choice. Space toggles it. The disabled example is unavailable, not selected. For a single mutually exclusive choice, use radio buttons.

<fieldset>
  <legend>Include in review</legend>
  <label class="plot-choice">
    <input type="checkbox" name="review" value="requirements">Requirements
  </label>
</fieldset>

Tab enters the group. Arrow keys move between enabled options using native browser behavior. Selecting one option clears the other.

<fieldset>
  <legend>Review format</legend>
  <label class="plot-choice"><input type="radio" name="format" value="guided" checked>Guided</label>
  <label class="plot-choice"><input type="radio" name="format" value="independent">Independent</label>
</fieldset>

Keyboard and touch selection follow the browser and operating system. A searchable multi-select needs a separate combobox implementation; this control is not one.

<label class="m-field-label" for="role">Role</label>
<select class="plot-select" id="role" name="role">
  <option value="">Choose a role</option>
  <option value="designer">Designer</option>
</select>

The first check validates the answer. After that, editing updates the error without moving focus. Production forms also need server validation, authorization, duplicate-submit protection and a recoverable network-error state.

Invalid: aria-invalid="true" + associated error text.
Submit: prevent duplicate requests; focus a summary of errors.
Edit: retain input; clear only errors that are resolved.
Success: announce actual success, not merely a button click.
Network error: retain input and provide an explicit retry.

Decorative skeletons are hidden from assistive technology. Text still explains the state when motion is reduced. Real content containers should use aria-busy while updating; keep the status announcement outside that busy region.

<!-- No value means the amount of remaining work is unknown. -->
<progress class="plot-progress" aria-label="Loading results"></progress>
<p role="status">Loading results…</p>
<!-- Use an actual measured value for determinate progress. -->
<progress class="plot-progress" value="2" max="3" aria-label="2 of 3 files loaded"></progress>

Enter or Space toggles the focused summary. No focus trap and no keyboard-triggered animation. Native HTML continues working without JavaScript.

<details class="plot-disclosure">
  <summary>What happens next?</summary>
  <p>The explanation stays in the document flow.</p>
</details>

• Hero.o-hero--home with status pill, name, lede, CTA pair, meta chips, and motion graphic
• Sections.o-section with --bordered, --compact, --breathe modifiers
• Cards.o-card-archetype for domain navigation
• Stats.m-stat for proof strip
• CTA.o-cta + .m-cta-pair

/, the home page (one instance only)

• Hero.o-hero--page, Work eyebrow, page title, lede
• Filter.m-filter-row with .m-chip[data-filter], see Behavior hooks for filter binding
• Group section.o-section--bordered + .m-eyebrow-title--numbered + .ds-grid.ds-grid-2
• Cards.o-card-work with data-domain attribute consumed by the filter JS

/portfolio, five group sections, 15 cards total

• Reading progress.o-reading-progress, fixed-top amber bar, JS-driven via --reading-progress custom property
• Hero.o-hero--case, full case-study hero with breadcrumb, head, grid, meta
• Narrative blocks.o-process, repeated for each named section (context, research, design, system, validation, outcome)
• Impact framing.m-metric grid with the case's measured outcomes
• Artifacts.o-artifact-grid with key research / design / spec artifacts
• Closing.m-link-card for next-case navigation, .o-cta for contact

/portfolio/<slug>, 15 case-study pages

• Hero.o-hero--page, generic page-hero variant
• Sections.o-section--bordered with .m-eyebrow-title--numbered
• About body.m-career-entry × N + .o-feature-grid for capabilities
• Contact body.o-contact-grid + .m-field form fields
• 404 body.m-empty-state + .m-cta-pair

/about, /contact, /404

• Section structure.ds-section with .ds-section-head, own scaffolding, distinct from .o-section
• Doc framework.ds-component-doc for every documented atom / molecule / organism / template (S2 framework)
• Tier visualization.ds-chain, .ds-token-list, .ds-composition, .ds-token-table
• Examples.ds-tier, .ds-tier-badge, .swatch, .ds-grid

The design-system page and H.A.R.D. Protocol Library share the contents-and-reference scaffold. Their controls differ by task. Reuse is not evidence of usability validation; the documentation pattern remains provisional.

Design system and H.A.R.D. Protocol Library (with criterion search).