Ledger is a review instrument. It is used for long stretches by people making consequential decisions about other people’s work, so the identity is calm, warm and precise rather than loud. This document is the reference for anyone extending it.
The interface shows what it measured before it offers an opinion, and it separates the two visibly.
A reviewer is here for twenty minutes at a time. Nothing should compete for attention with the work being reviewed.
Depth comes from light and elevation. Effects earn their place by clarifying hierarchy, never by ornament.
Scoring, empty states and error states are all shaped by the question of whether the candidate is being treated justly. That is not a compliance layer, it is the product.
Missing, broken, loading and completed each get composed treatment. A blank container is an unfinished thought.
Three stacked rules inside a rounded square, referencing a ledger line and the stacked evidence a reviewer works through. It reads at 16px and holds up in a single colour.
Clear space on all sides equals the height of the mark. Minimum mark size is 18px. The gradient runs from action primary hover to action primary at 150 degrees and never reverses. Do not outline the mark, rotate it, or place it on a busy photograph. On a coloured ground, use the solid navy or a knocked out white version rather than the gradient.
Tokens are named for the job they do rather than the colour they are, so a second theme is a token swap instead of a rewrite. Every ratio below was measured, not estimated. Six of these failed on the first audit and were corrected.
One accent only. Action primary carries selection, primary buttons and the focus ring, and nothing else competes with it. Status colours mean status and are never used decoratively. Body copy never sits on a translucent surface. Container hairlines are deliberately below the three to one threshold, since the relevant criterion governs controls rather than decorative separators, and cards are already separated by fill and elevation. Form control borders do carry three to one.
Instrument Serif gives a candidate’s name the weight it deserves, since the page is about a person’s work. Instrument Sans carries the interface. JetBrains Mono handles every number and label, with tabular figures so columns do not shift as values change.
Headings use balanced wrapping so a title never leaves one orphan word. Body copy uses pretty wrapping to avoid short last lines.
All figures are tabular. A score changing from 9 to 10 must not shift the layout around it.
Every gap resolves to one of these. Card padding is 24, gaps between cards are 24, and rail internals use 16.
Radius scales with footprint. A uniform radius across every element is the clearest tell of a templated interface, because real objects do not share a corner treatment across scales.
0 1px 2px rgba(34,30,20,.05)
Buttons, chips, small controls.
+ 0 14px 30px -14px rgba(38,42,72,.20)
Cards and rail panels.
+ 0 36px 64px -22px rgba(38,42,72,.32)
Tour card, palette, floating sheets.
cubic-bezier(.16,1,.3,1)
620ms · stagger 60ms
cubic-bezier(.4,0,1,1)
220ms
cubic-bezier(.32,.72,0,1)
320ms
Entrances ease out and stagger so content is read in sequence. Exits are faster and sharper, because leaving content should get out of the way. Duration scales with distance travelled, so a toast animates briefly and a sheet takes longer. Reduced motion collapses every one of these to an instant state change, and content stays visible rather than stranded at zero opacity.
Toolbar, tour card, keyboard palette, toast. Surfaces that float above content and carry controls.
Behind body copy, behind the evidence column, or on a hero. Legibility must never depend on what is behind a surface.
An opaque tint, a bevelled rim built from per side inset shadows, a darkened inner edge for figure and ground separation, and a specular sheen behind the content. Where the engine can displace a live backdrop, a runtime displacement map bends it near the edges and leaves the middle flat, with a chromatic split held under four percent. Support is detected by probing the engine, because the obvious feature query returns true in browsers that then paint nothing.
Plain, specific, and never cheerful about a problem. The product is helping someone make a decision that affects a person’s career, so it does not perform enthusiasm.
| Situation | We write | Not |
|---|---|---|
| Missing walkthrough | No walkthrough attached. You are inferring intent from code alone. | Oops! Nothing here yet. |
| Failed build | The deploy is not responding. | Something went wrong. |
| Low score note | A low score needs a reason. What specifically fell short? | Please provide additional feedback. |
| Verified stack | Found in the repository. | Verified! ✅ |
| Saved review | Review saved for Maya. Advancing to next. | Success! Your review has been submitted successfully. |
Name the thing that happened, then say what it means for the reader. Second person for the reviewer, third person for the candidate. No exclamation marks. No emoji in product copy. Never apologise on behalf of a candidate, and never editorialise about their work in system text.