Rever DESIGN SYSTEM · v3 — GRID
Principles
Calm surfaces, green DNA
Near-white with a green cast (#F6F9F6); panels pure white. The ruled paper retired — the green survives as undertone.
Hairlines, not ink walls
1px lines (#E1E8E2) structure everything; the strong dark rule is reserved for table totals — weight only where the number demands it.
Every number is a link
A figure that can't be traced is an opinion. Dashed green underline opens the formula bar: fx = its derivation, with source chips.
Chrome recedes, numbers advance
Hairline borders (1px), soft ambient shadows, radius 8/10. Depth comes from light, not weight — the grid stays disciplined inside.
Motion whispers
120–180ms, one easing curve, and it all disappears under prefers-reduced-motion.
Their words only
Transaction, not Event. Investigation, not Episode. The vocabulary lint is part of the system.
Color tokens — semantic over primitive
#F6F9F6 · page
#FFFFFF · cards
#F0F4F0 · wells
#182219 · AAA on surface
#57685D · AA at 11px+
#E1E8E2 · hairlines
#1E6B4F · credit · go
#9C372A · debit · stop
#8A6116 · attention
#8FD3B4 · accent on ink
Rule: components consume semantic tokens (--danger), never primitives (--debit), never hex. Contrast contract: body ≥ 7:1, muted ≥ 4.5:1, verified at declared sizes.
Spacing scale
Type scale — three voices
--t-xs 11 · --t-sm 12.5 · --t-base 14.5 · --t-lg 17 · --t-xl 22 · --t-2xl 27 · --t-3xl 34. Nothing interactive below 11px.
Elevation — light, not weight
Blur implies uncertainty about where things are. Ledgers don't have that problem.
Components — live, not screenshots
skeleton — shimmer honors reduced-motion
Inbox zero
Everything is handled or waiting properly. This state is the product's success metric — so it gets designed, not defaulted.
Voice — the vocabulary lint
| Never say | Always say |
|---|---|
| Event | Transaction |
| Diff / Mismatch | Control / Exception |
| Episode | Investigation |
| Motion | Prepared entry — for your approval |
| AutonomyGrade | Delegation level |
| Commit | Posted |
Enforced as a lint on product copy. Internal nouns appear only under the PACT engineering overlay.
Accessibility contract — guarantees, not aspirations
Focus is visible everywhere
2.5px green ring, offset 2px — the accent carries focus. Mint on dark surfaces.
Dialogs trap and restore
Modals hold Tab, close on Esc, and return focus to where you were.
Everything rows can do, keyboards can do
Every clickable row and tie-out is tabbable; Enter and Space activate.
Announcements are heard
Toasts live in an aria-live region; screen readers get what sighted users get.
Motion is optional
prefers-reduced-motion kills every animation, including Eve's pulse.
Contrast is contracted
Body 7:1+, muted text 4.5:1+ at its declared sizes, verified per token.
Governance
Rever DS v3 · July 2026. B-grid chrome (surfaces, hairlines, radius, soft depth, light nav, formula-bar tie-outs) with the Ledger type voice (Newsreader / Plex Sans / Plex Mono) kept. Extend with tokens, never hex; propose components with a usage note and one live example on this page; breaking changes require a version bump and a changelog line. The same rule as the product: nothing changes silently.
v3 — grid chrome: near-white surfaces, hairlines + ambient depth, radius 8/10, light rail with mark chips, green accent, eyebrow identity, formula-bar tie-outs. · v2 — semantic tokens, scales, a11y contract. · v1 — the ledger language.