hero.brutalist-marquee-scream · Marquee scream

A hero pattern from Brutalist, 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.brutalist-marquee-scream". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
An accent marquee band on top, a full-width uppercase headline at step 5, then subhead 1–5 and CTA 10–12; a second marquee in the inverse colours at the bottom.
Slots
tagline, headline, subhead, cta, meta
Grid areas
headline full · subhead 1-5 · cta 10-12 (12-column grid, 1-based inclusive spans)
Notes
Marquees scroll continuously (pause on hover and under prefers-reduced-motion).
Tokens
bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #012FD3 · accent2 #4980FE · Space Mono / Space Mono · radius 0px · space unit 8px (full list in design/tokens.json)
Section
full-bleed · vertical padding step 0

Pattern notes

  • Bleed edge to edge. Top: a marquee band in accent with onAccent mono uppercase text, 2 px borders top and bottom. Middle: the headline across the full width (step 5, heaviest weight, uppercase, tight — four or five lines at most at 1440 px), then the subhead in 1–5 and an underlined CTA bottom-aligned in 10–12. Bottom: a second marquee in heading-on-bg (inverse) with the meta copy. At phone width the headline drops to step 3 and may break mid-word with hyphens.
Strategy and design for companies that make thingsPositioningIdentityWebsitesStrategy and design for companies that make thingsPositioningIdentityWebsites

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
Booking projects from June 2026Booking projects from June 2026Booking projects from June 2026Booking projects from June 2026Booking projects from June 2026Booking projects from June 2026Booking projects from June 2026Booking projects from June 2026