hero.constructivist-diagonal-slogan · Diagonal slogan

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

Rule
A full-bleed red poster: the slogan at step 8 in capitals runs across all 12 columns on a −6° diagonal, underlined by a parallel black bar; subhead and a secondary button sit square on 6–11.
Slots
eyebrow, headline, subhead, cta
Grid areas
eyebrow 1-5 · slogan 1-12 · bar 1-12 · subhead 6-11 · cta 6-8 (12-column grid, 1-based inclusive spans)
Notes
The whole hero is the accent colour; every text uses onAccent. Shorten the slogan to fit two lines at step 8 rather than shrinking it.
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
background accent · full-bleed · vertical padding step 8

Pattern notes

  • The whole hero is red (`bg: accent`, full bleed, every text `onAccent`). A small capital eyebrow on 1–5 and the slogan at step 8 across all 12 columns (inset by 32 px so the tilt never crosses the page gutter), both rotated −6°, then a parallel black bar under the slogan. The subhead and a large secondary button stay square on 6–11. Shorten the slogan to two lines rather than shrinking it.

Brand & product studio

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