Hero

Beta. The pattern’s component is <Hero> (with <Hero.Metal>) in @halo-compliance/ui — the demo below renders it live, and it is the canonical register. Per-surface variations (homepage vs product vs landing), hero motion policy, and mobile responsive behavior are pending the marketing-site build-out — named here rather than implied.

Composition

Flat bold type directly on the eggshell page, over the diagonal tiled-wordmark splash: an accent eyebrow, a display headline with a single gold word, one sentence of body, and a single solid-gold CTA. No glass band here — frames and engraving belong to the proposed system.

Anatomy

Five parts, top to bottom. Every one of them already exists elsewhere in the system — the hero invents nothing new, it just turns the volume up.

Splash

The diagonal tiled wordmark fading toward the corner — the client portal’s signature backdrop. Flat and friendly; there’s no glass to feed, so it’s pure brand presence. Decorative to assistive tech — it never carries meaning.

Eyebrow

A <Text variant="eyebrow"> — the small uppercase category label in contrast-safe gold. Orients before the headline lands.

Headline

Display register (Arvo slab, bold) in the warm brown ink. On a real Promotion page this is the h1. Keep it under ~18ch and let it wrap balanced. (The engraved Black-900 treatment is the proposed system’s.)

Gold word

ONE word of the headline goes flat bold gold — the contrast-safe ramp, so it stays readable on eggshell and bright on the dark plate. Maximum one per headline; the rarity is the treatment. (The clip-gradient shimmer is the proposed system’s mechanism.)

Body

One or two sentences in the lede register — what the product is, what it does. Hold the measure at ≤52ch.

CTA

A single canonical <Button> variant=primary — a solid gold button with white type, the boldest thing on the page after the headline. The Promotion hero carries ONE action (ADR-0028); a quiet secondary is the documented exception, never the default.

Key principles

• One gold word per headline, maximum. The gold accent is reserved for the hero’s highest-attention moment. Two gold words read as decoration; one reads as intent.
• The hero is the typographic spike. Everything below tapers from it. If a section heading deeper in the page matches the hero’s weight, the hero loses its primacy — fix the section, not the hero.
• The tagline is the register. “Compliance, calibrated for you.” is the canonical typographic instance; heroes follow its cadence — short, declarative, one weighted word.
• Full-bleed means full-bleed. Don’t pad the hero with internal margins meant for narrower content. The band touches the viewport edges (and the splash) intentionally.

Across the two brands

The hero is the pattern where the two systems diverge most visibly, so both treatments are named here explicitly.

• Proposed — “compliance should be simple.” The hero is one big framed glass surface on the brand-mark splash: gold frame rule, backdrop-blur glass, engraved Black-900 display type, one clip-gradient metal word, calm gold CTA. The same vocabulary as a primary button, scaled to a marketing surface.
• Official — “compliance should be fun.” No glass and no frames: flat bold display type (Arvo slab) directly on the eggshell page, over the diagonal tiled-wordmark splash fading toward the corner — the client portal’s register. The accent word is flat contrast-safe gold, and the CTA is a solid gold button with white type. Gold colors actions and accents, never container frames.

Accessibility

• One h1. On a real Promotion page the headline is the page h1 — Hero’s default. This doc page keeps its own h1, so the demo passes headlineAs="p" and the headline renders as a paragraph in the display register — same paint, no second h1 in the outline.
• The CTA is a real Button. Keyboard reachable, visible focus ring, honest hit area — never a styled div. It is the only interactive element in the band.
• Contrast is built into the gold. The accent word rides the contrast-safe gold ramp — deep gold on eggshell, bright gold on the dark plate, AA at display size in both — and falls back to plain currentColor under forced-colors so it can never render invisible.
• Nothing to reduce. The composition is static by design — the metallic word is a static gradient, not an animation, so the reduced-motion path is the default path.
• The splash is decorative. It sits behind the content, ignores pointer events, and carries no meaning — assistive tech never hears about it.

API

Hero owns the band — its geometry, materiality, and both brand treatments; the slots stay the canonical pieces (the Text registers, a primary Button). Six props on the root, plus one compound part.

eyebrow?

The gold uppercase kicker above the headline, rendered in the canonical eyebrow register. Orients before the headline lands.

headline · headlineAs? · scale?

The display headline — required: a hero always says one big thing. Under the official brand it rides the display recipe flat (Arvo slab, bold, the warm brown ink — the engraved Black-900 treatment is the proposed system’s). headlineAs picks the element — h1 on a real Promotion page (the default), p for doc embeds that already own an h1. scale picks display-1 (the default) or display-2 for constrained embeds.

<Hero.Metal>

Wraps the ONE gold word inside the headline — under the official brand the component paints it flat contrast-safe gold (the clip-gradient shimmer is the proposed system’s mechanism), with the forced-colors fallback shipped. Maximum one per headline; the rarity is the treatment.

children?

The body — one or two sentences in the lede register, held at ≤52ch by the component.

cta?

The single CTA slot — pass the canonical primary Button. One action (ADR-0028); a quiet secondary is the documented exception, never the default.

splash?

Paints the page-pattern utility within the band, for standalone mounting. The proposed splash resolves away under the official brand — the diagonal tiled wordmark is the portal page’s own backdrop, as the demo’s mock viewport shows. Omit when the page already carries its splash.

Usage

import { Button } from '@halo-compliance/ui'
import { Hero } from '@halo-compliance/ui/patterns/Hero'
import { ArrowRight } from 'lucide-react'

// On a Promotion page the headline IS the page h1 (the default).
// The page carries the brand splash; pass `splash` only when the
// hero must paint its own.
<Hero
  eyebrow="Marketing compliance"
  headline={<>Compliance, <Hero.Metal>calibrated</Hero.Metal> for you.</>}
  cta={
    <Button variant="primary" icon={<ArrowRight aria-hidden="true" />}>
      Request a rulebook review
    </Button>
  }
>
  Halo reviews your marketing against your rulebook before it
  ships — tuned to the risk appetite your compliance team sets.
</Hero>

When to use

• Promotion sites. The homepage, product pages, landing pages — surfaces whose job is acquisition (ADR-0028).
• Rarely, a major in-app moment. A launch panel for a major feature can borrow the register — sparingly, or the spike stops being one.
• Not for in-app page tops. That is PageHeader’s job — orientation, not promotion.

Anti-patterns

• Don’t stack gold words. One per headline, ever. The second one demotes both to decoration.
• Don’t grow a button row. One CTA. When everything on the page is a call to action, nothing is. A quiet ghost secondary is the ceiling.
• Don’t let section headings compete. If a heading further down needs hero weight to feel important, the page hierarchy is wrong — restructure the page, don’t escalate the type.
• Don’t put claims in the hero you can’t keep. The hero is the loudest sentence the company says. Honesty over inflation — simplicity reads as maturity (ADR-0022).

Related

• /page-header — the in-app analog: orientation band, not promotion surface.
• /text — the display register the headline rides on.
• /button — the CTA is the canonical primary Button.
• /surfaces — the splash and surface materiality (documented there for both brands).