Design system · 09

The key, and everything that is not one.

Almost everything on a page is paper. The exceptions are the few things you press, and of those only one — the key — is built to look and behave like an object.

The key

The primary action is a physical control standing on the desk: a dark cap, lit along its top edge, casting a shadow underneath. It rises a little under the pointer, and when pressed the face sinks — the lit edge dims as it rolls out of the light and the shadow closes up.

Press and hold either one. The light key is the same control in paper, for a secondary action that is still a control rather than a link.

Variants

Seven variants in three kinds. Keys are objects. Outline and secondary are flat card stock. Ghost and link are text, and stay flat: they are not things on the desk.

Key

The primary action. One per view.
Key, in paper

A secondary action that is still a control.
Card stock

A flat control among other flat things.
Card stock

A tinted control, for toolbars and filters.
Text

Navigation items. Not an object.
Text

An inline action: ink, underlined in tan.
Key

The key, for something that cannot be undone.

Implementation

<Button href="/contact">Start a conversation</Button>
<Button variant="light">See the work</Button>
<Button variant="outline" size="sm">Filter</Button>
<Button variant="ghost" href="/services">Services</Button>

Button variants
Variant	Kind	Use
	Key	The primary action. One per view.
	Key, in paper	A secondary action that is still a control.
	Card stock	A flat control among other flat things.
	Card stock	A tinted control, for toolbars and filters.
	Text	Navigation items. Not an object.
	Text	An inline action: ink, underlined in tan.
	Key	The key, for something that cannot be undone.

One height

Every control on the site is 40px tall. Sizes change padding and text, never height, so a row of mixed actions lines up wherever it appears.

Fields

A field is a recess, not a white box. Typing into a form should read as writing into the sheet rather than onto a card resting on it. Forms themselves stay unboxed.

Resting, invalid and multi-line. Focus draws a tan ring; an invalid field keeps its message beneath it, and the error is announced to screen readers as well as shown.

Accordion

One accordion pattern, without an outer frame: the open row is tinted, and a perforated rule separates the rest.

What opens a row?

The whole trigger, at a 40px minimum height. The chevron is an indicator, not the target.

What separates rows?

How many can be open?

Focus

Every interactive element shows the same focus: a 2px tan outline, offset 3px from the element. Tab through this page to see it. It is never removed, only restyled.

Implementation

Control tokens
Token	Value	Use
	oklch(0.29 0.033 61.15)	The cap
	oklch(0.47 0.04 61.15)	The lit bevel inside the top edge
	oklch(0.995 0.002 70)	The cap, in paper
	var(--primary)	Focus outline
	cubic-bezier(0.22, 1, 0.36, 1)	Travel: 110ms

Rules

Use one key per view, for the action the page exists for.
Use the light key when a second action is still a control.
Keep a key's label to words alone.
Leave vertical room around a key so its shadow is not clipped.

Don’t

Trail a chevron or arrow after a key's label.
Change a control's height to make it fit.
Give ghost or link variants depth; they are text.
Put a field on a white card inside a boxed form.