hero.seventies-groovy-arch · Groovy arch

A hero pattern from Seventies Psychedelic, 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.seventies-groovy-arch". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
The fat headline tilts −4° on 1–7; an arched duotone photo fills 8–12; a second-accent blob bulges out of the arch's base on 6–8; subhead and two capsule buttons below the headline.
Slots
headline, heroImage, subhead, cta, cta2
Grid areas
headline 1-7 · arch 8-12 · blob 6-8 · subhead 1-5 · actions 1-6 (12-column grid, 1-based inclusive spans)
Tokens
bg #F7E8C6 · text #3A1D0C · heading #4A1F08 · accent #D2561E · accent2 #BF8400 · Shrikhand / Nunito · radius 32px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 8

Pattern notes

  • The headline at step 7, tilted −4°, on 1–7 (max ~10 ch). An arched duotone photo (3:4) fills 8–12 across two rows; a second-accent blob bulges out of the arch's lower-left on 6–8. The lead on 1–5 and two capsule buttons (primary + ghost) under the headline.

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 projectRead case studies