hero.seventies-wavy-band · Wavy band

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

Rule
A full-bleed orange band: the fat headline at step 8 across all columns, a wavy divider, then the subhead on 1–5 and a capsule button pushed right on 8–12.
Slots
headline, subhead, cta
Grid areas
headline full · wave full · subhead 1-5 · action 8-12 (12-column grid, 1-based inclusive spans)
Notes
Fill the band with a vertical sunset gradient from accent (top) to accent2 (bottom) when gradients are on; all text stays onAccent, so check it on both ends.
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
background accent · full-bleed · vertical padding step 10

Pattern notes

  • A full-bleed orange band (a vertical gradient from accent to accent2 when gradients are on): the headline at step 8 across all columns in `onAccent`, a wavy divider, then the lead on 1–5 and a large secondary capsule button pushed to the right edge of 8–12.

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