cta.risograph-tear-off · Tear-off flyer

A cta pattern from Risograph Print, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 6. Give the section root data-pattern="cta.risograph-tear-off". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule

A flyer on surfaceAlt: uppercase headline in 1–9, line and button in 10–12, a dashed cut line, then a row of tear-off tabs with the contact detail repeated.

Slots

headline, body, cta, items[6..8]

Grid areas

headline 1-9 · action 10-12 (12-column grid, 1-based inclusive spans)

Notes

The tabs are narrow boxes with a left rule; on desktop rotate their text 90° like a real tear-off flyer, flat at phone width (scroll-x).

Tokens

bg #FDF9F4 · text #241E16 · heading #150E06 · accent #FF48B0 · accent2 #00B790 · Bricolage Grotesque / Work Sans · radius 0px · space unit 8px (full list in design/tokens.json)

Section

background surfaceAlt

Pattern notes

On surfaceAlt. Uppercase headline (step 7) in 1–9, bottom-aligned with a short line at body size and a primary button in 10–12. A 2 px dashed cut line (style the divider `border-top-style: dashed`). Then six to eight tear-off tabs in a row, each a narrow box with a left rule holding the same mono contact detail rotated 90° on desktop. Tabs scroll horizontally, unrotated, on phones.

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

Discovery sprint

Positioning workshop

Identity design

Website

Launch support

Retainer