How to build a hero, a bento grid and a footer

The three sections every landing page needs, each built from type scale, one accent and space.

TL;DR

Hero: one huge headline, one sentence, one primary action, a texture kept behind the text.
Bento: the biggest cell carries the idea, one gap value everywhere.
Footer: name, three to five links, a real sign-off, room above it.

Goal: a first screen that says what this is, a grid that ranks ideas, and an ending that feels like one.

You need

Your type scale and tokens. See Scales and type.
Optional: a shader or image for the hero texture.

 HERO                     BENTO
 ┌──────────────────┐     ┌──────┬───┬───┐
 │ eyebrow          │     │ BIG  │ ▪ │ ▪ │
 │ HEADLINE, HUGE   │     │ IDEA ├───┴───┤
 │ one line, 44ch   │     │      │ story │
 │ [primary] (alt)  │     ├───┬──┴───────┤
 └──────────────────┘     │ ▪ │ action   │
                          └───┴──────────┘
 FOOTER  name · contact · source · legal · sign-off

Steps

1. Build the hero in layers

Layer	Rule
Texture	A background with a subject, kept behind text
Headline	One huge thing per view: `clamp(3rem, 9vw, 8.5rem)`, tight leading
Support	One sentence, 44ch max
Actions	One solid button, one outline
Eyebrow	Small, mono, uppercase, tracked

<section className="relative min-h-[82svh] overflow-hidden">
  <Texture />
  <div className="relative flex min-h-[82svh] flex-col justify-between p-10">
    <p className="font-pixel text-[16px] uppercase">A field guide</p>
    <div>
      <h1 className="font-display text-[clamp(3rem,9vw,8.5rem)] leading-[0.9]">…</h1>
      <p className="mt-6 max-w-[44ch]">…</p>
    </div>
  </div>
</section>

2. Reveal the headline with a mask

Ease

wordslines

Each piece sits in a box with overflow hidden, then slides up from 110%. The mask is what makes it read as a reveal and not a fade. Try lines vs words, and linear vs quint.

Each word sits in an overflow-hidden box and slides up into view. Use an ease-out and a short stagger.

3. Build the bento

The one big idea

Largest cell, strongest image or number.

Proof

A metric or a logo.

Detail

A feature worth a close-up.

Supporting story

Wide cells read as sentences.

Call to action

Small, bright, obvious.

One grid, five cells, three sizes. Asymmetry creates hierarchy; the gap stays constant so it still reads as one object.

<div className="grid auto-rows-[7.5rem] gap-3 sm:grid-cols-4">
  <div className="sm:col-span-2 sm:row-span-2">The one big idea</div>
  <div>Proof</div>
  <div>Detail</div>
  <div className="sm:col-span-2">Supporting story</div>
  <div>Call to action</div>
</div>

The biggest cell carries the idea. The accent cell carries the action. Keep one gap value.

The name and one line of what it is.
The three to five links people look for: contact, source, legal.
A sign-off with some personality.
Enough space above it to feel like an ending.

Pitfalls

Two primary buttons. Only one thing can be the main action.
A magnetic button everywhere. Use it once, on the hero action, never on forms or nav.

Strength0.35

When not to use it: forms, nav bars, dense toolbars, anything clicked repeatedly. A moving target is harder to hit (Fitts's law), and touch screens have no hover. Keep it to one hero CTA, and keep strength under about 0.4.

Bring your pointer near the button. Inside the dashed radius it follows by a fraction of your offset; outside, it springs home. Mouse only, and off when reduced motion is on.

Why it works

These sections are the rules under load: a type scale, one accent, space and motion applied to a common job. That is why they can be reused without looking reused.