hero.neobrutal-colour-slabs · Colour slabs

A hero pattern from Neo-Brutalism, 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.neobrutal-colour-slabs". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Two touching bordered slabs: the pink headline slab on 1–8 and a yellow side slab on 9–12 with a star, the subhead and a meta line; a marquee belt closes the hero.
Slots
eyebrow, headline, cta, subhead, meta, tagline
Grid areas
slab 1-8 · side 9-12 · belt full (12-column grid, 1-based inclusive spans)
Notes
The slabs share their borders (no gap). The marquee belt is a full-width accent2 band directly against the slabs' bottom border; it stops under prefers-reduced-motion.
Tokens
bg #FFF4DE · text #111111 · heading #000000 · accent #FF5FA2 · accent2 #00BCA1 · Archivo Black / Space Grotesk · radius 8px · space unit 8px (full list in design/tokens.json)
Section
full-bleed · vertical padding step 6

Pattern notes

  • Two slabs share borders with no gap. Slab one (1–8) is accent-filled with onAccent text: eyebrow, headline at step 7 heaviest weight, and a large secondary button, all bottom-aligned. Slab two (9–12) is the yellow `surfaceAlt` fill: a big accent2 star (rotated −10°, hidden on phone), the lead subhead and a mono meta line, spread top to bottom. Under both, a full-bleed marquee belt in accent2, directly against the slabs' bottom border, carries the tagline in h3 weight. The hero is full-bleed.

Brand & product studio

We make complicated companies simple to choose

Start a project

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Booking projects from June 2026

Strategy and design for companies that make thingsPositioningIdentityWebsitesStrategy and design for companies that make thingsPositioningIdentityWebsites