Slopless Design

cta.neobrutal-stamp-banner · Stamp banner

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

Rule

A bordered accent banner with the headline tilted −2° on 1–8, the body and a large secondary button on 9–12, and a yellow star at the top of 7–9, between the headline's end and the body.

Slots

headline, body, cta

Grid areas

headline 1-8 · action 9-12 · star 7-9 (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)

Section

vertical padding step 10

Pattern notes

One accent-filled bordered banner with the hard shadow. The headline (step 6, heaviest weight, onAccent) sits on 1–8 rotated −2°; the body and a medium secondary button are bottom-aligned on 9–12. A yellow star (lg, rotated 20°) sits at the top of 7–9, between the headline's end and the body (it may break the banner's top edge), and hides on phone. Use once per page.

Have a hard thing to explain?

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.

Start a project