Focus · Colour · C-00

The colour.

Uniform: a colour system built from maths rather than taste. Neutrals are even OKLCH lightness steps, and the eight accents share one lightness and chroma, so any app can pick any accent and every rule still holds. This is the spec for software and the web: neutrals, accents, status colours, contrast, charts, web usage and tokens. The whole kit below uses it.

Focus · Type · Y-00

The type.

Geist and Geist Mono, from the Technical direction. This is the typography spec for every Maker Merchant app and for the web: the families, the four roles, a software scale and a web scale, the features we turn on, the rules, and tokens to copy. Every sample on this page is set with the live tokens, and the whole kit below uses them too.

Focus · Tools · T-00

The tool bar.

One solid bar of keys, milled from a single housing. The ends of the bar are rounded and the inner keys are square, with a fine seam between each key and a tight cutout around them. Keys share the panel's colour and carry light icons. Hovering a key lights its icon in the app's accent. Pressing it dips the key a few percent darker with a hairline inner shadow. On release it springs back flush with the bar, and its icon stays lit in the app's accent. The dark and light panes share the same values, so use the tuner to adjust both together.

Focus · Buttons · B-00

The buttons.

The same construction as the tool bar: each face sits in its own machined cutout, and joined buttons share a hairline seam. There's a little more colour here. Primary buttons are anodised in the app's accent, secondary buttons carry an accent icon, and tinted buttons wash the panel with the accent. Pressing a button dips it instantly and it springs back flush. The cutout and seam follow the tool bar tuner above.

Focus · Components · C-00

Everything else.

The rest of the kit, built the same way. Every control sits in a machined cutout. Keys and thumbs are panel-coloured faces, while fields and readouts are recessed faces. Joined parts share a hairline seam with square inner edges. Icons are solid and light, and they take the accent on hover and when active. Values sit on Geist Mono readouts, and every press dips instantly and springs back flush. The cutout, seam and radius follow the tuners above.