Actions

Buttons and links

One button style and one link style. No radius, no shadow, no second accent.

Examples

On canvas and on the band (composed from the live classes)Open “On canvas and on the band” at full size

Phone 390 · Light

Desktop 1440 · Light

Phone 390 · Dark

Desktop 1440 · Dark

When to use it

A button for the one action a page or section asks for (buy, download, get in touch). Links for everything else.

Live: Hirsla, Unresolved, Advisory.

Anatomy

Button: a.btn or button.btn: 52px high, 28px side padding, 17px, 500.
Row: .btn-row: button first, then text links, 20px gap.
Text link: Indigo, 1px underline 4px below.

Variants

On canvas: Indigo ground, off-white text; hover ink. Dark mode: lavender ground, dark text.
On the band: Off-white ground, indigo text; hover white.

States

Hover: Colour step, 150ms linear.
Focus: 2px ring, 4px offset.
External: Opens in a new tab and ends in “↗” (see the External links pattern).

Behaviour

Phone, tablet, desktop: Same at every width; links in a row get 44px height.
Motion: Colour only, 150ms.

Accessibility

Real a or button. 44px minimum target. Button text 10.5:1.

Words

Verbs, sentence case, no full stop: “Get it on the App Store”.

Code

Classes: .btn .btn-row. Styles in site/assets/css/site.css.

<div class="wrap" style="padding-block:32px"><div class="btn-row"><a class="btn" href="#">Primary action</a><a href="#">Text link</a></div></div><div class="band wrap" style="padding-block:32px"><div class="btn-row" style="margin:0"><a class="btn" href="#">Primary on the band</a><a href="#">Text link</a></div></div>