The Ledger system: one token block, every component, six verdict states.

01 · Tokens

Eleven colours, two families, one radius

Paper, ink and hairlines carry the whole layout. The four signal values are restricted to verdict surfaces and the single primary action — a signal colour used for decoration is a bug, because it spends the meaning of the seal.

The block, to copy

:root{
  /* ground + ink */
  --paper:#F6F7F5;         /* page ground */
  --card:#FFFFFF;          /* input + seal field surface */
  --ink:#141414;           /* primary text, strong rules */
  --sub:#5A5F58;           /* secondary text, labels, captions */
  --hair:#CDD1CA;          /* fine hairline between ledger rows */
  --hair-strong:#9AA097;   /* control borders, opening rule */
  --placeholder:#71766F;   /* input placeholder (AA on --card) */

  /* signal — verdict surfaces and the one primary action ONLY */
  --green:#0B6B4F;         /* consistent / no-conflicts + Verify */
  --green-press:#095A42;   /* that action, hover + pressed */
  --caution:#8A4B00;       /* caution signal */
  --red:#8A1C13;           /* RESERVED: strongest negative only */

  /* type — production intent first, system fallback after */
  --font:"Inter","Söhne",-apple-system,BlinkMacSystemFont,"Segoe UI",
         Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",SFMono-Regular,
         Menlo,Consolas,monospace;

  /* geometry */
  --radius:3px;            /* one small radius; no corner inflation */
  --maxw:clamp(760px, 40vw + 250px, 1180px);            /* measure; margins carry the authority */

  /* type scale — fluid, mobile -> desktop. Premium reads LARGE +
     LIGHT + TIGHT, so display and h2 carry weight 400. */
  --fs-display: clamp(2.5rem, 1.1rem + 5.6vw, 4.5rem);   /* 40 -> 72px  H1 */
  --fs-h2:      clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem); /* 24 -> 34px    */
  --fs-h3:      clamp(1.125rem, 1rem + 0.5vw, 1.375rem); /* 18 -> 22px    */
  --fs-body:    1rem;        /* 16px                                */
  --fs-small:   0.9375rem;   /* 15px  secondary prose               */
  --fs-caption: 0.8125rem;   /* 13px  captions, notes               */
  --fs-eyebrow: 0.6875rem;   /* 11px  mono, uppercase, tracked      */
  --fs-cert:    clamp(1.25rem, 1rem + 1vw, 1.75rem); /* 20 -> 28px cert */

  --lh-display: 0.98;   --ls-display: -0.022em;   --fw-display: 400;
  --lh-h2:      1.12;   --ls-h2:      -0.012em;   --fw-h2:      400;
  --lh-body:    1.6;    --ls-eyebrow: 0.14em;

  /* motion — one interaction curve, one duration ladder */
  --dur-micro:  120ms;  /* the focus ring leaving         */
  --dur-color:  150ms;  /* colour only                    */
  --dur-enter:  200ms;  /* the two one-shot keyframes     */
  --dur-state:  300ms;  /* control + hover                */
  --dur-reveal: 500ms;  /* entrance and scroll reveal     */
  --ease:       cubic-bezier(0.2, 0, 0, 1);     /* seal press ONLY */
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);   /* interaction     */
}

Light only, pinned. html{color-scheme:light} plus explicit values on every surface, and a prefers-color-scheme:dark block that re-declares the same eleven values rather than inverting them. A viewer who forces dark keeps the institutional register and never gets invisible text.

Layout rules that travel with the tokens. Strict grid, generous margins, everything left-aligned. Results are labeled ledger rows separated by fine hairlines — a register entry, never a card stack. No drop shadows, no gradients, no decorative icons; the only glyphs in the system are the six seal marks.

The ground is plain paper

The hero band used to carry a ruled “ledger paper” ground: a repeating hairline behind the eyebrow and the display headline, on a 32px rhythm. On a real screen it read as banding across the page rather than as paper, so it is gone and nothing replaces it.

Do not reintroduce a page texture. The ground is flat --paper. Every hairline that remains is structural — the rule between two ledger rows, the rule that opens a section, a control border — and each one separates two things a reader can name. A rule that separates nothing is decoration, and decoration is what made the page look like a rendering artefact.

02 · Type

Grotesk for language, tabular mono for figures

Premium is LARGE, LIGHT and TIGHT; mass-market is small, heavy and loose. Display and h2 therefore sit at weight 400 — confidence comes from size, not bold. Every cert number, grade and population figure is tabular mono, which is the precision cue and is not optional. Each row below renders through the token it names.

The rules that travel with the scale. The cert number is the hero datum: --fs-cert, mono, tabular figures, letter-spacing:.04em. Body copy is never set below 15px, and eyebrows are the only 11px text. Maximum measure for prose is 68ch — a longer paragraph is a density smell, not a layout to widen.

Sentence case everywhere. Uppercase is reserved for mono micro-labels (eyebrows, seal labels, badges, table headers) where letter-spacing does the work.

03 · Signature

The embossed letterpress seal

The one signature element. A flat matte field pressed into the page: hairline edge, inset shadow at the top-left, inset light at the bottom-right, an engraved inner ring, and a debossed glyph over a mono label. Never glossy, no gradient, no shadow cast onto the page. The seal carries the verdict colour; nothing else on the result does.

Why the seal is allowed one filter. The glyph carries drop-shadow(0 1px 0 rgba(255,255,255,.9)) — a 1px light cast directly beneath the stroke. That is the letterpress highlight that makes the glyph read as pressed in rather than drawn on. It is the emboss, not a shadow effect, and it is the only filter in the system.

04 · Components · the hero control

Cert input, grader selector, one action

One oversized mono field, one segmented grader selector, one green action. Nothing competes with it. Focus the field to see the hairline turn green; the scan line sweeps once, at --dur-enter, while the lookup is in flight.

The masthead readout at the top of every surface carries the same figure as the first stat. One number, one source — and on these static pages it is dated, because it is a snapshot rather than a live count.

Empty field · placeholder

Loading · the scan line sweeps the input

Motion is near-none. Production sweeps the line once (.certwrap.scanning, --dur-enter). The field above is a still frame of that sweep (.sg-line) so the line can be read on a static page: the loop that used to stand in for it is gone, because there is no looping animation anywhere in this system. The sweep and the result entrance both sit inside prefers-reduced-motion guards and vanish entirely when reduced motion is requested — no motion in this system carries information.

The interaction system

One curve and one duration ladder. Every transition uses --ease-soft; --ease is spent on a single thing, the seal press. A new interaction picks a rung of this ladder or it does not move — there is no second scale.

Why two tiers for colour. A colour change a reader is not looking at — a row washing under the cursor, a link warming — settles in 150ms. A control they are aiming at takes 300ms, because that is long enough to read as a response and short enough not to lag the cursor. The one primary action takes the whole 500ms, on transition:all, so its fill, its border and its lift arrive as a single movement.

What every surface owes a reader

• Links.Colour transition on hover at --dur-color; nav links are colour only, at --dur-state. Every one of them takes the same focus ring, instant in.
• Buttons and the primary action.Background and border transition, plus a translateY(-1px) lift on hover that returns to translateY(0) on press. No scale, no shadow, no overshoot — the control settles, it does not bounce.
• The grader segmented control.The selected state transitions rather than snapping, at --dur-state; where the page can run script the ink fill slides between segments instead of redrawing.
• A ledger row washes on hover.Background to the hairline at 35% alpha, --dur-color. Colour only — the row never moves.
• The cert field.Border and its 1px ring transition together on focus, at --dur-state.
• Disclosure.The summary's colour transitions and the + marker rotates 45° into a close mark. The marker turns rather than swapping glyphs, because a content swap cannot be transitioned.
• Scroll reveal.Sections start at opacity 0 and fade in with a 12px lift as they enter the viewport, at --dur-reveal, staggered 70ms per sibling and capped at three — so a section is fully settled 710ms after it starts. Each element is unobserved the moment it reveals; nothing re-triggers, and no ledger row ever carries a reveal.
• The result card enters.Opacity 0→1 with an 8px rise, at --dur-reveal --ease-soft. Once, on arrival.
• The verdict seal presses in.scale(0.985)→1 with its inset shadow arriving, at --dur-enter --ease. Once. Never loops, never shimmers. This is the only use of --ease and the only scale in the system.
• The verdict's colour and its text never animate.A semantic state must not fade between meanings; it appears already correct. Nor does the layout or size of anything carrying data — no reflow theatre — and ledger rows carry no scroll-triggered reveal. A register is still.

Transitions, not keyframes. Three keyframes exist in the whole system — the seal press, the lookup sweep and the result's rise — and each runs once. Everything else a reader can trigger is a transition between two states. No animation loops, and nothing moves that a reader did not ask to move.

Reduced motion, and the rule that outranks it. Under prefers-reduced-motion: reduce every transform and reveal is off, opacity fades survive at --dur-micro, the seal appears without the press, and the scan line does not sweep. Content outranks the animation. The reveal can only hide a section behind .js-reveal, a class the boot script sets solely when an observer exists and motion is allowed; the observer stops watching an element the moment it reveals; a 1.6s failsafe drops the class if the observer never fires at all; a catch drops it on any script error; and the reduced-motion block states opacity:1 outright. No reader can be left looking at an empty page.

Error · the field rejects before any lookup

Buttons, links, badges, focus

Inline link: jump to the verdict states. Badges: psa reviewed re-verify reported

Focus. One ring everywhere: 2px solid green at 2px offset, on buttons, chips, links, the field, each segment of the grader selector, and every disclosure summary. Tab through this page to check it. Every interactive target is at least 44px tall.

05 · Components · the ledger row block

Result anatomy

Identity first, then labeled rows for grade and sub-grades, population, and the reference-image slot — each separated by a fine hairline, with a heavier rule opening the ledger. Labels sit left in sub, values sit right in mono. The verdict and its seal close the entry.

Data honesty. Three slot classes exist for exactly this reason: .row .v for a figure we hold, .row .v.na for a field the grader does not issue, and .naslot for a whole group we cannot read. A slot is never filled with an estimate, an average, or a plausible-looking number.

06 · Components · verdict states

All six verdict states

The vocabulary is fixed. SlabEye reports what it observed against the record and the sighting graph — it never states that a card is or is not what the label says, because it cannot see inside a holder. State 01 has two copy variants: one when a grader record was actually read, one when only the sighting graph was checked. State 06 is designed but not emitted live.

01a · consistent with the record

01b · no conflicts observed · collision check only

02 · seen on other live listings

03 · resolves to a different card than the listing claims

04 · no record found for this cert

05 · doesn't match this grader's cert format

06 · flagged by a report · designed state, not emitted live

State 06 is design-only. Reserved red, and the one state with no data behind it — no report corpus exists. It is rendered here and in the demo so the design is settled; the live app must not emit it until real reports exist on a record.

Vocabulary discipline. Four words are barred from every SlabEye surface: the noun for deliberate deception, the adjective for an object that is a copy passed off as the original, and the two adjectives that assert an object is the real article. The list lives in DESIGN-BUILD-SPEC.md and is deliberately not reproduced here, so a grep of any shipped surface returns nothing. No surface claims a card is or is not what the label says. The six statements above are the whole vocabulary — a new state needs a new honest sentence, not a stronger adjective.

07 · Components · the ceiling line

The same-print ceiling line

Persistent, never dismissible, and attached to every green verdict. It is the structural limit of the whole product: two copies of the same print scan identically, so a clean screen cannot reach the object inside the holder.

Where it must appear. On state 01a and 01b, always, in the verdict body — not in a footnote, not behind a disclosure. It rides inside .vtext as .ceiling: a left hairline rule, sub colour, one sentence.

One contracted variant. The app's live string is asserted by its embedded test suite as “A matching scan does not confirm the specific card sealed inside the holder.” — the same sentence, uncontracted. Either is canonical; do not reword the clause itself.

08 · Components · record-check outcomes

What you saw on the grader's own page

After the deep link out, one tap records the comparison. Three equal-weight quiet buttons — deliberately not colour-coded, because colouring one answer steers the log. The log is append-only; undo appends a retraction rather than deleting anything.

Append-only, in the UI too. The retraction shows in the log as its own row. Nothing disappears, so the surface cannot imply a cleaner history than the data holds.

09 · Components · capture

The honest 3-shot indicator, and retake coaching

Three shots, each gated on its own. The indicator shows which are in and which is next, and marks the label shot required because the cert read comes from it. It does not pretend to be a locked wizard: the server can only advise after a shot arrives, so the copy says so.

1. 01 Front — full slab In. The anchor shot: it sets the scale and the flat plane every other measurement is taken against. in
2. 02 Cert labelrequired Next. The number is read from this shot, so glare over the label zone is checked hardest here. next
3. 03 Edge / corner macro Not in yet. Adds surface and edge context through the plastic; macros are the most blur-prone shot, so the bar is tighter. pending

Nothing here is locked. Each shot is checked on its own once it arrives — the check happens on the server, so it can advise and ask for a retake, not stop you mid-shot. Shoot them in any order, redo one without losing the others, or stop after the label: that is the only shot the cert read needs. Photos are read, then discarded.

No forced camera. These inputs carry accept="image/*" and nothing else. The capture attribute was removed on 2026-07-30 because it forces the rear camera and strips the Photo Library and Files out of the picker. Do not re-add it.

Retake coaching — one instruction, one physical fix

One reason, never a list. The gate short-circuits on the most fatal failure and names exactly one fix. After three consecutive refusals for the same reason the copy escalates from a nudge to a concrete change of light, because on a phone the only real lever is the room. A refusal to read a shot is never a verdict — a verdict only exists for a shot that cleared the bar.

10 · Components · dense table

Listings carrying the same number

Hairline rows, mono for anything countable, sellers as opaque handles. The table scrolls inside its own container so the page never scrolls sideways.

Sightings are seller-entered and unverified until a collision review runs. The same handle appearing twice is a relisting, not a second slab — the table shows the observation, and the wording never converts it into an accusation.

Empty state

11 · Components · structure

Steps, facts, rules, disclosure

Numbered ledger rows · .steps

1. Enter the number and pick the grader.Checked against the grader's real format before anything else runs.
2. SlabEye screens it against the record and the sighting graph.
3. Read the ledger — the verdict, plus a one-tap link to the grader's own record.

Fact rows · .facts

• The same number on two live listings at once.A graded slab is a single physical item — confirm which copy the grader sealed.
• A record that resolves to a different card.The number can return a record and still describe something other than the listing.
• A number that fits no format the grader issues.Most often a typo or the wrong grader — and always worth resolving before money moves.

Hairline rule above · .rule

Strong ink rule above · .rule-strong

Disclosure · .qa

Error state · the lookup itself failed

12 · The three hero screens

The system on a dealer's phone

Same tokens, same components, no new pieces. This is the canvas that matters: a phone held at a counter, one hand, bright ambient light.