Oversized-type hero that hits first

Open preview

Overview

Bold Hero doesn’t ask to be read. It asks to be hit by. You accept some readability cost in exchange for planting the pitch — and the brand’s temperature — into the visitor’s memory in the first two seconds.

Why it works

Seed-to-Series-A startups rarely win landing pages through feature density (the features aren’t all built yet). What they can win on is conviction: “this company believes X.” Oversized type in a single accent color is the most efficient visual grammar for making conviction look inevitable.

Structure

• Eyebrow bar: the orange bar previews the “we’re not holding anything back” color before the headline arrives.
• Two-line headline: same font, but italicizing one word and outlining another creates a hierarchy from typography alone.
• Lede + CTA two-column row: the lede (read) and CTA (act) sit side-by-side below the big type — no scrolling needed to see both.
• Offset shadow on hover: the CTA’s translate + colored shadow reads editorial, not “app-y.”
• Backed-by strip: investor names in plain type. No logos required; the absence is a signal too.

When to use

• Post-funding startup landing pages that need to signal momentum, not polish
• Agenda-setting products that bet on a single sentence of positioning
• Brands where typography carries more identity than illustration

Recommended stack

Category

Hero

Styles

Bold / Startup / Editorial / Warm

Audience

for startups

SPA

No

Hosting

any

Notes

HTML/CSS only. Uses -webkit-text-stroke for the outlined word — degrades gracefully in older browsers.

AI prompt

Build an editorially-bold hero section for a Series Seed startup landing page.
Intent: loud type, one color, one CTA. The headline must land in 2 seconds.
Canvas:
- Off-white page background (#faf9f5), near-black ink (#0a0a0c).
- Single accent color: vivid orange (#ff4d1a). Use it sparingly —
  eyebrow bar, italic word, CTA hover shadow only.
Header:
- Absolute at top. Left: bold "◼︎ Stack/07" wordmark. Right: 4 nav links,
  muted weight. Hide nav below 720px.
Hero body:
- Eyebrow row: short orange bar + uppercase tracked text "SEED ROUND · 2026".
- H1 takes two lines, font-size clamp(3.2rem, 11vw, 9.5rem), weight 900,
  letter-spacing -0.045em, line-height 0.88.
  - Line 1: "Ship <span orange italic>faster</span>,"
  - Line 2: "<span outlined>decide</span> slower."
    Use -webkit-text-stroke: 2px <ink> with color transparent for the
    outlined word.
- Below the H1: a 2-column row on desktop, stacking below 720px.
  Left: 1 paragraph of lede copy, max 42ch, muted gray.
  Right: vertical CTA cluster —
    - Primary CTA: solid black button, 2px radius, bold label,
      label + right-arrow icon, label "Start the 14-day trial".
      On hover: translate(2px, -2px) with a -4px/4px orange offset shadow.
    - Ghost link beneath: "No credit card · cancel anytime →".
Bottom strip:
- Thin 1px border top. "BACKED BY" label + 5 wordmark-style investor names
  (Accel, Y Combinator, First Round, Benchmark, SV Angel).
Pure HTML/CSS, fully responsive. No JS.

Keep the structure, invert palette:
- Background #0b0c0f, ink #faf9f5, accent stays orange.
- Outlined word uses -webkit-text-stroke with the light ink color.
- CTA becomes a light-on-dark button; hover shadow remains orange.

Expand the layout at >=1024px:
- 60/40 grid. Left 60%: existing hero content (eyebrow, headline, lede, CTA).
- Right 40%: a tilted browser/app mock (a card with fake chrome and
  a full-bleed screenshot). Add a rotate(-3deg) transform.
- On hover of the card, lift it by translateY(-4px).

FAQ