hero.minimal-whitespace-cta · Whitespace with a single action

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

Rule
Columns 1–7 are left empty on purpose; a small block in 8–11 sits on the bottom edge: eyebrow, a short h1 at step 3 and one large primary button. Column 12 stays empty.
Slots
eyebrow, headline, cta
Grid areas
empty 1-7 · block 8-11 (12-column grid, 1-based inclusive spans)
Notes
At least 60% of the hero is empty page colour. The button is the most saturated thing on the screen.
Tokens
bg #FAF8F4 · text #1A1A1A · heading #0A0A0A · accent #111111 · accent2 #5C4311 · Bodoni Moda / Jost · radius 0px · space unit 8px (full list in design/tokens.json)

Do

  • Leave columns 1–7 and 12 completely empty.
  • Bottom-align a narrow block in 8–11: eyebrow, a short h1 at step 3, one large primary button.
  • Make the button the only saturated element on screen.

Don't

  • Don't fill the empty columns with an image, pattern or shape.
  • Don't add a subhead paragraph or second button.
  • Don't centre the block.

Phone width

  • Keep a tall empty top area (about 40svh), then the block at full width, left-aligned.

Brand & product studio

We make complicated companies simple to choose

Start a project