hero.fullbleed-overlay-bottom · Full-bleed, bottom plate

A hero pattern from the hero library, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 1. Give the section root data-pattern="hero.fullbleed-overlay-bottom". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A photograph fills the whole viewport; a solid page-colour plate sits on its bottom-left (columns 1–7) holding eyebrow, headline, subhead and one CTA; a small caption plate sits bottom-right in 10–12.
Slots
heroImage, eyebrow, headline, subhead, cta, caption
Grid areas
image full · plate 1-7 · caption 10-12 (12-column grid, 1-based inclusive spans)
Notes
The plate is opaque (bg role), so text never depends on the photo for contrast. For frosted-glass the plate may use backdrop-filter, but keep a solid fallback that passes AA.
Tokens
bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #FF3B00 · accent2 #00A1BA · Barlow Condensed / Barlow · radius 0px · space unit 8px (full list in design/tokens.json)
Section
full-bleed · vertical padding step 0

Do

  • Fill the full viewport (100svh) with one photograph, object-fit: cover.
  • Anchor an opaque plate in the bottom-left (columns 1–7), flush with the bottom edge of the hero.
  • Keep everything readable on the plate: eyebrow, headline at step 5 (three lines max, so the photo stays the larger area), a 1–2 line subhead, one CTA.
  • Add a small caption plate bottom-right (10–12) crediting the place or product in the photo.

Don't

  • Don't put text directly on the photo or rely on a dark gradient scrim for contrast.
  • Don't centre the plate or float it mid-image.
  • Don't use a carousel or autoplaying slideshow.

Phone width

  • Show the photo at 4:5, then the plate below it at full width (no overlap).
  • Hide nothing: the caption follows the plate as a muted line.

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project

Corvid Robotics — identity