Slopless Design

cta.swiss-signal-field · Signal field

A cta pattern from Swiss International, 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.swiss-signal-field". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule

A full-bleed field of the accent colour: headline 1–8 at step 6, the action bottom-right in 10–12. The field is the only accent on screen.

Slots

headline, body, cta

Grid areas

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

Tokens

bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #E2271D · accent2 #850001 · Inter Tight / Hanken Grotesk · radius 0px · space unit 8px (full list in design/tokens.json)

Section

background accent · vertical padding step 10

Pattern notes

A full-bleed field in the accent colour with `onAccent` text: headline 1–8 at step 6, and a short line plus a secondary (outlined, square) button bottom-aligned in 10–12. Use it once per page; it counts as the screen's accent.

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