hero.constructivist-vertical-banner · Vertical banner

A hero pattern from Constructivist, 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.constructivist-vertical-banner". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
The headline stacks one capital word per line in a narrow banner column on 1–4, bottom-aligned; a duotone portrait fills 5–8; a giant red index numeral, an 8px bar, the lead and CTA stack in 9–12.
Slots
headline, heroImage, index, subhead, cta
Grid areas
headline 1-4 · portrait 5-8 · index 9-12 · bar 9-12 · text 9-12 (12-column grid, 1-based inclusive spans)
Notes
Set the banner column at step 7, line-height ~0.95, so each word fills the column width like a vertical poster strip. At phone width it comes first, full width.
Tokens
bg #EFE6D2 · text #16130F · heading #16130F · accent #C8102E · accent2 #FF7777 · Anton / Barlow Semi Condensed · radius 0px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 6

Pattern notes

  • The headline in capitals at step 7 stacks one word per line in a narrow banner column on 1–4, bottom-aligned, so it reads as a vertical poster strip. A duotone 4:5 portrait fills 5–8. On 9–12: a giant index numeral at step 8 in red (a year or "No. 1"), an 8 px black bar, then the lead and a large primary button at the bottom.

We make complicated companies simple to choose

06

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