Introduction

Quoin's design system — a letterpress proof room. Light first, calm, one shadow in the whole system.

The Quoin interface looks like a printed proof sheet, not a dashboard. It has newsprint and paper-white surfaces, hairline borders, small radii and exactly one shadow in the entire system. The shadow is for popups only. The mood is a librarian's, not a coach's. The copy states the figure and its interval. It never puts an adjective in their place. The copy uses the same sentence when the news is good and when the news is bad.

Design stage

Quoin is design only. Every screen in this documentation exists in Paper (file 01M2Q303RK19BADQ6XBRKCD8PK). Very little of the component library is in code yet. Where a live example appears on this site, it comes from the real @quoin/ui package. For everything else, the spec is described but not yet built.

What's here

Brand and tokens

Color, type, radii, spacing and motion — rendered from the real @quoin/tokens values.

Components

All 45 sections of the component spec, on Base UI, with live examples for what's built.

Motion

Principles, tokens, per-component specs and the five signature moments.

Copy voice and casing

How Quoin's interface copy sounds, and how it's cased.

Design rules

The rules that don't bend when you touch a screen.

Screens

Every Paper artboard, indexed by page.

The five signature elements

The verdict sentence, set in Source Serif. It gives the figure and its interval in one sentence. The sentence ends with the literal state word.
The ruler. It draws the interval of an experiment as a printer's line gauge. The gauge has ticks, a zero line, a dashed target and a shaded harm zone.
The locked pre-registration block. It has a surface-2 background, a lock icon, and "locked 28 Jul, 10:04 · sam," set in mono.
Crop marks, on report sheets only.
Copyable CLI command chips. They appear wherever a command applies to the item on the screen.

Look and feel, in one paragraph

The look is calm and printed. Borders are hairline (--color-border / --color-border-strong). Radii are small (2/4/6/10px). The system has no drop shadows except on popups. All popups share exactly one shadow value. Components gives this value once. The system is light-first. Dark mode is out of scope for v1. Text never sets below 12px. Negative colour (--color-negative) appears at most once on a screen. Caution uses text, never a colour fill. The one deliberate use of all caps in the whole system is the rubber-stamp "rolled back"/"shipped" decision-record Stamp. See Copy voice and casing.