cta.constructivist-agit-band · Agit band

A cta pattern from Constructivist, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 7. Give the section root data-pattern="cta.constructivist-agit-band". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule

A full-bleed red band: the call in capitals at step 6 on 1–9, tilted −6°; a black circle on 10–12; a large secondary button square on 1–4.

Slots

headline, body, cta

Grid areas

headline 1-9 · circle 10-12 · cta 1-4 (12-column grid, 1-based inclusive spans)

Tokens

bg #EFE6D2 · text #16130F · heading #16130F · accent #C8102E · accent2 #FF7777 · Anton / Barlow Semi Condensed · radius 0px · space unit 8px (full list in design/tokens.json)

Section

background accent · full-bleed · vertical padding step 10

Pattern notes

A full-bleed red band (`bg: accent`): the call in capitals at step 6 on 1–9, rotated −6°, in `onAccent`; a black circle on 10–12. Below, square to the grid with a wide row gap (step 8) so the tilted call never touches it: a lead-size line in `onAccent` on 1–5 and a large secondary button on 6–9.

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