content.neobrutal-callout-page · Callout page

A content pattern from Neo-Brutalism, drawn alone below with this design's tokens and sample copy. Used in this design on: about page, section 1. Give the section root data-pattern="content.neobrutal-callout-page". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
The h1 on 1–8 with the story under it in two lead columns (1–4, 5–8); a bordered accent2 callout box on 9–12 runs beside both, top-aligned.
Slots
title, statement, body, body2
Grid areas
title 1-8 · callout 9-12 · col1 1-4 · col2 5-8 (12-column grid, 1-based inclusive spans)
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)

Pattern notes

  • For about and article pages. The h1 (step 6, heaviest weight) spans 1–8 on row 1; under it the body copy runs in two columns (1–4 and 5–8) as lead paragraphs, max 40 ch each. A bordered accent2 callout box on 9–12 spans both rows, top-aligned, and holds the statement in bold type at step 2 rotated 2°. Phone: title, callout, then the paragraphs.

How we think

Most rebrands fail because they start with a logo. Ours start with a sales call recording and a spreadsheet of lost deals.

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

We hand over everything — source files, a living brand system and a website your team can edit without calling us.