Design breakdown · Marketing · Hero
Anatomy of a landing-page hero
The hero is the one screen every visitor sees and most never scroll past. Here's each part of a high-converting marketing hero, why it earns its place, and the exact tokens to rebuild it.
1 · Anatomy
The components, decoded.
Eyebrow / kicker
Why it exists Names the category before the headline lands.
Why it works A short, muted line above the H1 ("For product teams") orients the visitor in under a second, so the headline can sell the outcome instead of explaining the context.
Headline (the rhythm)
Why it exists The one line a skimming visitor actually reads.
Why it works Benefit-first beats feature-first: lead with what the reader gets, keep it to one or two lines, and let a clamp()-scaled size make it the loudest thing on the page.
Subheadline
Why it exists Earns the click the headline asked for.
Why it works One sentence of plain proof (who it's for, the concrete payoff) placed directly under the H1 so the eye reads benefit, then evidence, then action without backtracking.
Primary CTA
Why it exists The single action the page is built around.
Why it works One dominant button in the brand primary, high-contrast and verb-led ("Start free"), removes the choice paralysis that two equal buttons create. Visual weight should map to the action you most want.
Secondary CTA
Why it exists Catches the not-yet-ready visitor.
Why it works A quieter ghost or text button ("See how it works") keeps lower-intent traffic engaged without competing with the primary. Contrast difference, not equal billing, is what protects the conversion path.
Social proof
Why it exists Answers "can I trust this?" at the fold.
Why it works A row of recognizable logos or a metric sits near the CTAs, above the fold, so reassurance arrives at the exact moment of hesitation instead of three scrolls later.
Hero visual / product shot
Why it exists Shows the thing instead of describing it.
Why it works A real product frame to one side anchors a Z-shaped reading path (headline, visual, CTA) and gives the abstract promise something concrete to attach to.
2 · Tokens
The design system this archetype runs on, pulled from the Aurora palette.
3 · Build kit
A live, palette-driven hero, then the code to recreate it.
Ship the landing page you keep meaning to build
One column, one dominant action, proof near the fold: the layout that converts cold traffic.
:root {
--color-bg: #0E0B1A;
--color-surface: #1B1530;
--color-primary: #3FD0C9;
--color-accent: #A06BFF;
--color-text: #F1ECFF;
--color-muted: #9489B8;
}<section class="hero">
<p class="eyebrow">For product teams</p>
<h1 class="hl">Ship the landing page you keep meaning to build</h1>
<p class="subhead">One column, one dominant action, proof near the fold.</p>
<div class="actions">
<a class="btn btn--primary" href="#">Start free</a>
<a class="btn btn--ghost" href="#">See how it works</a>
</div>
<div class="proof"><span></span><span></span><span></span><span></span></div>
</section>
<style>
.hero {
display: flex; flex-direction: column; align-items: center;
text-align: center; gap: var(--space-4);
max-width: 640px; margin: 0 auto; padding: var(--space-6);
}
.eyebrow {
font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 14%, transparent);
padding: 5px 12px; border-radius: 999px;
}
.hl {
font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.05;
color: var(--color-text); margin: 0;
}
.subhead { color: var(--color-muted); font-size: 1.05rem; max-width: 46ch; margin: 0; }
.actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.btn {
border-radius: var(--radius); padding: 13px 22px;
font-weight: 700; text-decoration: none;
}
.btn--primary { /* the one action the page is built around */
background: var(--color-primary); color: #fff;
}
.btn--ghost { /* quieter, never equal weight */
background: transparent; color: var(--color-text);
border: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent);
}
.proof { display: flex; gap: 10px; opacity: .7; }
.proof span {
width: 52px; height: 18px; border-radius: 5px;
background: color-mix(in srgb, var(--color-text) 16%, transparent);
}
</style>That's the whole machine: discover great heroes in the inspiration feed, decode the parts here, then build with the Aurora palette and a template. Same framework, any archetype: dashboards and more archetypes follow.