hero.fullbleed-framed · Full-bleed in a mat frame

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-framed". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
The photo fills the viewport inside an even mat of page colour (one space step 3 on all sides); four labels sit in the mat's corners: eyebrow top-left, meta top-right, headline bottom-left, CTA bottom-right.
Slots
eyebrow, meta, heroImage, headline, cta
Grid areas
eyebrow 1-4 · meta 9-12 · headline 1-8 · cta 10-12 (12-column grid, 1-based inclusive spans)
Notes
Think of a framed print: the mat width is identical on all four sides and the labels sit in the mat, never on the photo. The headline is the only large element.
Tokens
bg #FDF9F4 · text #241E16 · heading #150E06 · accent #7C1C1D · accent2 #B2635D · Libre Caslon Text / Libre Caslon Text · radius 0px · space unit 6px (full list in design/tokens.json)
Section
full-bleed · vertical padding step 0

Do

  • Inset the photo by one even mat on all sides (space step 3) so it reads as a framed print.
  • Fill the viewport height: the photo grows to take all space between the top and bottom label rows.
  • Set eyebrow top-left and meta top-right in the mat; headline bottom-left (1–8) and an underline CTA bottom-right (10–12).
  • Use a hairline inset border on the photo if the style has borders.

Don't

  • Don't let any text overlap the photo.
  • Don't make the mat uneven or wider at the bottom.
  • Don't use a filled button; the CTA is an underlined link.

Phone width

  • Shrink the mat to step 2; photo at 4:5; headline below it, CTA under the headline.
  • Keep eyebrow and meta on one line above the photo; drop meta if it wraps.

Brand & product studio

Booking projects from June 2026

We make complicated companies simple to choose

Start a project