Slopless Design

cta.hardware-power-key · Power key

A cta pattern from Industrial Hardware, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 8. Give the section root data-pattern="cta.hardware-power-key". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule

One surfaceAlt control panel: label, h2 at step 6, line and an inline email form in 1–7; a large round orange power key with a mono caption in 9–12.

Slots

label, title, body, newsletter, meta

Grid areas

copy 1-7 · key 9-12 (12-column grid, 1-based inclusive spans)

Tokens

bg #E5E3DE · text #262522 · heading #111110 · accent #FF5B14 · accent2 #1C1C1A · Archivo / Archivo · radius 6px · space unit 4px (full list in design/tokens.json)

Pattern notes

One recessed control panel (surfaceAlt, seam, bevel, 32 px padding): part label, h2 at step 6 (≤ 18 ch), a muted line and an inline email form in 1–7; a 180 px round orange power key with a mono caption centred in 9–12.

Next step

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.

you@example.com

Booking projects from June 2026