Design reference

The system behind the readout.

The full written reference is in the repository at docs/design-system.md. Every specimen below is the live component, so this page cannot drift from what ships.

Data semantics

Three colours that carry meaning and are never used decoratively. The reference desaturates with the session state — reload this page on a weekend and the amber will have changed.

--ref · the real world
--pool · on-chain
--hot · the gap
Flags

Outline only — a filled pill would compete with the CTA, the one solid accent block allowed on a screen. DARK outranks every numeric band.

TIGHTWATCHWIDEDARKACTION
Type roles
571

Reading — the only element allowed above H1 size

Display · Graphik
Interface · Manrope
Data · 225.03 tabular
Surfaces

There are no filled cards. A surface is its border and at most a 1.5% white wash over pure black. Square corners everywhere.

Motion

Two curves. Expo-out for entrances, expo-in-out for interaction. Nothing loops, nothing bounces. Below the fold only the section header animates, and only once.

ENTRANCE cubic-bezier(0.16, 1, 0.3, 1)
INTERACTIVE cubic-bezier(0.76, 0, 0.24, 1)

← Back to the readout