hero.neobrutal-app-window · App window

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

Rule
The hero is one big bordered 'window' on a yellow field: a title bar with three dot buttons, then the headline on 1–8 and the action column on 9–12 inside it.
Slots
eyebrow, headline, subhead, cta, meta
Grid areas
titlebar full · headline 1-8 · action 9-12 (12-column grid, 1-based inclusive spans)
Notes
Section background is surfaceAlt (the yellow field); the window is surface with a 3px border and the hard shadow. Title-bar dots are three small circles.
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
background surfaceAlt · vertical padding step 8

Pattern notes

  • The section background is the yellow `surfaceAlt` field. One large bordered window (surface fill, hard shadow) fills the grid: a title bar with a bottom border holds three small filled circles (accent, accent2, bg — like window buttons) on the left and the eyebrow in mono on the right. Inside the window the headline runs 1–8 at step 7, heaviest weight; the action column 9–12 is bottom-aligned with the subhead, a medium primary button and a small muted meta line. Phone: title bar stays one row, then headline, then actions.

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

Booking projects from June 2026