hero.memphis-tilted-poster · Tilted poster

A hero pattern from Memphis, drawn alone below with this design's tokens and sample copy. Not used in this design: shown with its tokens for comparison. Give the section root data-pattern="hero.memphis-tilted-poster". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
The headline at step 8, rotated −6°, runs 1–10 over a giant accent circle on 8–12; the lead and CTA sit below on 2–7 beside a tilted accent2 triangle on 10–12.
Slots
headline, subhead, cta
Grid areas
headline 1-10 · circle 8-12 · copy 2-7 · triangle 10-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #FDF9F4 · text #241E16 · heading #150E06 · accent #FF5FA2 · accent2 #9AAE00 · Bricolage Grotesque / DM Sans · radius 12px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • A giant circle in accent with a 3 px outline on 8–12 across rows 1–2. The headline on 1–10, row 1, at step 8, heaviest weight, uppercase, rotated −6° so it crosses the circle. Row 2: the lead and a primary button on 2–7, and a triangle in accent2 rotated 20° on 10–12. At phone width the circle and triangle hide and the headline keeps a −3° tilt at step 5.

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