Brand and tokens

Color, type, radii, spacing and motion — rendered live from the @quoin/tokens package this site imports.

Every swatch and specimen on this page is a CSS custom property from @quoin/tokens/theme.css, values.css and motion.css. @quoin/web and @quoin/ui import the same files. If the value of a token changes in the package, this page changes with it. Nothing here is a hand-copied snapshot.

Mood

"Letterpress proof room." The mood is light-first. It has newsprint and paper-white surfaces, hairline borders and small radii. The whole system has one shadow. The shadow is for popups only.

Color

Surfaces, text and structure

--color-bgnewsprint — sidebar, desk

--color-surfaceproof sheet — main content

--color-surface-2wells — commands, locked blocks

--color-border

--color-border-strong

--color-fg

--color-fg-muted

--color-fg-subtlenever on surface-2

--color-accentblue pencil

--color-accent-subtle

--color-positive

--color-positive-subtle

--color-negativeat most once per screen

--color-negative-subtle

--color-cautionmarks and fills

--color-caution-subtle

--color-caution-textcaution as text

--color-info

Visualization (the ruler, exposure charts)

--color-viz-interval

--color-viz-estimate

--color-viz-zero-line

--color-viz-target

--color-viz-harm-zone

--color-viz-harm-zone is a fill. Use it only to shade the region of the interval of a guardrail that counts as harm. Do not use it as a status color anywhere else.

Type

The system has three font families. Each family has one job:

--font-display — Display — Source Serif 4Clear: +21.6% [+5.2, +37.9]

--font-sans — Sans — Hanken GroteskRolled out to 45%. r-0419. Undo

--font-mono — Mono — DM Monoquoin flags rollout onboarding.checklist_v2 50 --env production

Text never sets below 12px in the product. The type scale:

--text-xsRolled out to 45%

--text-smRolled out to 45%

--text-baseRolled out to 45%

--text-mdRolled out to 45%

--text-lgRolled out to 45%

--text-xlRolled out to 45%

--text-2xlRolled out to 45%

--text-3xlRolled out to 45%

Radii

--radius-xs

--radius-sm

--radius-md

--radius-lg

Spacing

The spacing scale is 4/8/12/16/24/32/48. Each step is a --space-* token:

--space-1

--space-2

--space-3

--space-4

--space-6

--space-8

--space-12

Containers

A report has the width --container-report (760px). The app frame has the width --container-app (1240px). The desktop artboard is 1440px wide. It has a 240px sidebar, a 56px top bar and 48px main padding. The content is 760px wide, plus a 56px gap, plus a 288px rail.

Motion tokens

Durations range from --duration-instant (0ms) to --duration-signature (700ms). --duration-signature is for the five signature moments only. See Motion. Under prefers-reduced-motion: reduce, every duration token becomes half or less. Five easing curves cover every transition: --ease-enter, --ease-exit, --ease-move, --ease-emphasis and --ease-press. See Motion for the curve that belongs to each kind of change.

Logo

The logo is a registration mark beside "quoin". The mark is a circle of radius 5.5 with a crosshair through it. "quoin" is set in Source Serif 4, weight 600, lowercase. The registration mark is the one piece of custom iconography in Quoin. Everything else in the interface uses a plain, unbranded icon set.

Importing these tokens in your own code

@import '@quoin/tokens/theme.css';
@import '@quoin/tokens/values.css';
@import '@quoin/tokens/motion.css';

theme.css holds the Tailwind v4 @theme block (colors, font families, radii, spacing). values.css holds type-scale and breakpoint values. These values stay as plain custom properties and are not Tailwind theme keys. motion.css holds every duration, ease, distance and scale token, including the reduced-motion overrides.

Brand and tokens

On this page