Skip to content
Assay

The Assay design system.

An assay is the definitive test of a metal's purity, and a hallmark is the struck record of that test. The system borrows its whole language from that ritual: paper and ink for the certificate, one disciplined gold for the mark, monospace for the evidence.

Identity

The cartouche.

On a hallmark, the fineness of gold is stamped inside an oblong with cut corners. The Assay mark is that surround, struck with an A whose flat apex and flat-topped counter echo the chamfers. It is the mark of the authority that does the testing.

Lockup

Assay

Instrument Sans · semibold · tracking tight · mark height matches cap height

Scale

Outline above 20px; the punch variant carries favicons and tight sizes

Color

Paper, ink, and one gold.

Warm neutrals carry everything. Gold is struck in small doses where it means verification, evidence, or action. On light surfaces, gold-600 and deeper are the only text golds; gold-500 is reserved for graphics.

Warm neutrals

paper

#f9f8f5

Page canvas

surface

#fefdfc

Raised cards

linen

#efece8

Quiet fills

mist

#e0ded8

Hairlines, borders

stone

#6d6861

Muted text (AA on paper)

ink-soft

#3c3a36

Secondary text

ink

#1b1915

Primary text, buttons

black

#0c0b08

Dark-mode canvas

Assay gold

gold-050

#fcf6ec

Wash, hover tint

gold-200

#f0dcb1

Tints, selection

gold-300

#edc980

Large accents on dark

gold-400

#e7b551

Accent text on dark

gold-500

#d19936

Identity core. Graphic-only on light

gold-600

#94631a

Gold as text on light

gold-700

#794f1a

Deep gold, hover state

On light

Ink on paper for prose. Gold-600 for links and accents. Stone for supporting text.

On dark

Warm white on near-black. Gold-400 carries the accent. Fog for supporting text.

Typography

A sans for the argument, a mono for the record.

Instrument Sans carries display and prose. Commit Mono, a deliberately neutral programming face, carries labels, dates, and figures: anything that reads as evidence rather than argument. Both are open licensed and self-hosted.

Display

60px / semibold / -0.02em

The proof is in the deploy

Title

36px / semibold / -0.01em

The proof is in the deploy

Heading

24px / semibold

The proof is in the deploy

Body

17px / regular / 1.75

The proof is in the deploy

Small

14px / regular / 1.6

The proof is in the deploy

Label

11px / mono / caps / 0.14em

The proof is in the deploy

Commit Mono figures

0123456789

record 2026-07-02T09:14:07Z · signature verified · ledger append accepted

In use

The tokens at work.

Shared shadcn/ui components from the workspace library, rendered with nothing but the brand tokens. No component ships custom colors.

Buttons

Badges

VerifiedPendingHeld outRejected

Form

Record schema
Signed and written once. Verifiable offline.

fields: task, grade, signature, timestamp
storage: write-once, append-only
verification: offline, public key

Principles

Six rules the system keeps.

01

Struck, not rendered

Flat color, crisp edges, small radii. The brand behaves like a punch mark in metal: no gradients, no bevels, no metallic sheen.

02

Hairlines, not shadows

Structure comes from one-pixel rules and spacing. Elevation is reserved for surfaces that truly float.

03

Gold means something

The accent marks evidence, verification, and action. It never decorates. Most of any page is paper and ink.

04

Mono is for the record

Commit Mono carries labels, figures, dates, and anything that reads as evidence. Prose stays in the sans.

05

Contrast is computed

Every text-on-surface pair is verified against WCAG AA in both modes before it ships. Nothing is eyeballed.

06

Motion earns its place

A calm reveal on entry, a considered hover, nothing perpetual. Reduced-motion preferences collapse it all to static.