Hero

Beta. The composition below 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. This doc page keeps its own h1, so the demo renders the headline 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.

Usage

import { Button, Text } from '@halo-compliance/ui'
import { ArrowRight } from 'lucide-react'

// On a Promotion page the headline IS the page h1.
<section className="hero has-page-pattern">
  <div className="hero-surface">
    <Text variant="eyebrow" as="p">Marketing compliance</Text>
    <h1 className="display-1 hero-headline">
      Compliance, <span className="hero-metal">calibrated</span> for you.
    </h1>
    <Text variant="lede" as="p">
      Halo reviews your marketing against your rulebook before it
      ships — tuned to the risk appetite your compliance team sets.
    </Text>
    <Button variant="primary" icon={<ArrowRight aria-hidden="true" />}>
      Request a rulebook review
    </Button>
  </div>
</section>

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).