Slopless Design

cta.bauhaus-triangle-call · Triangle call

A cta pattern from Bauhaus, 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.bauhaus-triangle-call". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule

A yellow field: headline lowercase at step 6 on 1–7 with a primary button; a large accent triangle fills 9–12.

Slots

headline, cta

Grid areas

text 1-7 · triangle 9-12 (12-column grid, 1-based inclusive spans)

Tokens

bg #FDF9F4 · text #241E16 · heading #150E06 · accent #0050CC · accent2 #AF0029 · Jost / Jost · radius 0px · space unit 8px (full list in design/tokens.json)

Section

background surfaceAlt

Pattern notes

Section background yellow (surfaceAlt), bleeding edge to edge. Headline (step 6, lowercase, weight 700, max ~16 ch) and one primary button (square, accent fill) on 1–7. A large solid triangle in accent fills 9–12, pointing up, its base on the section's bottom edge. At phone width the triangle shrinks and sits under the button.

Have a hard thing to explain?

Start a project