Moodboard

Ten references we read closely, and for each one the specific decisions we took from it and the ones we refused. A board that only says "I like this" gets you pastiche. Naming the one decision you're taking and the one you're rejecting gets you a system.

---

The reference set#

1. Mercury — the observatory#

What it is: Business banking. Our reading of its interface, not a measured spec: a near-black canvas, content floating as marginally lighter graphite surfaces, ivory text, and a single blue kept for the primary action. A proprietary typeface used at restrained weights. Very little of the palette is brand color. Nearly all of it is structural.

Take:

• Accent scarcity as a discipline. One chromatic event per view, spent on the most important action. Everything else is neutral. Of everything on this page, this decision does the most.
• Structure outnumbers brand. Almost every token should be structural, with brand color a small minority.
• Decorative blues that never touch a button. Pale blues live in washes and mockups and never mark something clickable. We adopt the hard separation: a color used for decoration may never also signal action.
• Lead with one trusted number. The account balance is the page.

Refuse:

• Dark-first. Lopifi is light-first, because the primary users are accountants and finance teams reading dense numeric tables for eight hours, often next to a spreadsheet and often printing. Dark mode is a peer, not the default.
• A proprietary display face. We can't ship one, and the taste has to survive on Inter + Geist Mono.

2. Ramp — the anomaly surface#

What it is: Spend management. Leads with total spend and deviations. Dense tables treated as the hero rather than as a lesser page behind the dashboard.

Take:

• The table is a first-class design surface. Ramp puts serious craft into row density, column hierarchy, hover affordances and bulk selection. Our TransactionTable gets the same attention as our BalanceCard.
• Surface the exception. A finance dashboard should tell you what changed and what's wrong, which is why AnomalyCard is in the core catalog and a "welcome back" hero is not.

Refuse:

• Marketing-grade motion inside the product. Spend review is a high-frequency task; per Emil's frequency law it should be near-motionless.

3. Stripe — the documentation standard#

What it is: Payments infrastructure. The most-copied design language in developer fintech.

Take:

• Currency symbol set lighter than the value. $ at text-tertiary, digits at text-primary. Stripe and Mercury both landed here, and they're right: the symbol is a unit label.
• Consistent decimal places within a column, always. $1,200.00, never $1,200.
• The docs site is the product. Interactive and copy-paste-ready. Sonner grew the same way. Our docs site is a milestone with its own schedule.

Refuse:

• The gradient-mesh marketing aesthetic. Fine on stripe.com, wrong anywhere near a ledgerFoundationsLedgerA book of accounts, each holding the entries posted to it. The general ledger holds every account; a subledger — AR, AP, fixed assets — holds the detail behind one control account and must agree to it.

4. Linear — the keyboard-first tempo#

Take:

• Speed as an aesthetic. Keyboard-initiated actions get zero animation. The command palette opens instantly. The most common failure in AI-generated UI is animating something the user triggers 200 times a day.
• Hairline-defined surfaces. Linear separates regions with a 1px line. Shadows are reserved for things that float.
• A restrained, near-monochrome palette with high-contrast type.

Refuse:

• The purple, and the whole "developer tool dark" register with it. Most of Lopifi's users are not engineers.

5. Wise — the FX honesty pattern#

Take:

• The conversion breakdown as a component. Amount → fee (itemized) → rate (with timestamp) → recipient gets. Every line visible, no "estimated total" hand-wave. Our ConversionBreakdown has the same shape.
• The rate expires. Show it with an as-of time and a lock countdown. A rate without a timestamp misleads.

Refuse:

• The consumer-brand green as a system color. Green stays semantic (positive value) and never brand, or it stops meaning "favorable".

6. Monzo / Revolut — the card object#

Take:

• The payment card rendered as a physical object. Real proportions (ISO/IEC 7810 ID-1, 85.60 × 53.98 mm → aspect ratio 1.586), real corner radius (3.18mm → ~3.7% of width, ~5.9% of height), a card-flip for the CVV that uses actual 3D (rotateY + preserve-3d), and a subtle spring tilt on pointer move.
• Consumer warmth in a business product, used sparingly. The card is one of the few places in Lopifi where we want delight. You see it rarely, people care about it, and it's the one physical object in the product.

Refuse:

• Gradient card faces as the default. Ours are flat, tinted by a brand color the consumer sets, with a single specular sweep on hover.

7. Bloomberg Terminal — the tick#

Take:

• The value flash. When a number updates live, its cell background flashes (green up / red down) and decays to transparent over ~640ms. Traders have read it for forty years, and it fixes what a count-up animation breaks: the eye goes to the change without the screen ever showing an intermediate false value.
• Density. Power users want more on screen and less whitespace, hence three density modes.

Refuse:

• Everything else: the chromatic chaos, the 11px type, the missing hierarchy.

8. Apple (Wallet, Stocks, Numbers) — the physics#

Take:

• Interruptible, velocity-preserving motion. Springs for anything a finger can grab. A sheet you flick away mid-animation must reverse from where it is, not restart.
• Momentum dismissal over distance thresholds. A quick flick should be enough (velocity > ~0.11 px/ms).
• Damping at boundaries rather than hard walls.
• bounce: 0.2 maximum. Financial UI does not wobble.

9. Swiss / accounting print tradition — the rules#

Take:

• Rule lines carry meaning. A single hairline above a subtotal. A double rule beneath a grand total. Accountants have read totals this way for centuries and still look for it, and almost no web product draws it. It costs two CSS declarations.
• The em dash for nil. — for a true zero in a statement, blank for not-applicable, n/a for unknown.
• Right-aligned figures, left-aligned labels, leaders optional.

10. Isometric illustration (overflow.design/isometric register)#

Take: A flat-shaded, 30° axonometric illustration language for empty states, onboarding and flow diagrams. It gives volume without photorealism and uses only our palette. Full system in foundations/imagery-and-isometric.md.

Refuse: Isometric art anywhere inside a data-dense surface. It appears where there's no data yet or a concept needs explaining, never as decoration on a working screen.

---

Synthesis: the resulting character#

Lopifi in one line: an accountant's ledger, typeset properly, that responds instantly.

Axis	Where Lopifi sits
Warm ↔ Cool		Cool-neutral ink (hue 265, near-zero chroma) with a warm-white canvas
Dense ↔ Airy		Dense by default, three density modes, generous only in the 24px card inset
Flat ↔ Deep		Flat at rest, real depth only for floating surfaces
Playful ↔ Serious		Serious, with four sanctioned moments of delight (the card flip and tilt, the payment success, the reconciliationCloseReconciliationComparing our record to an external party's match)
Loud ↔ Quiet		Quiet, with one accent
Static ↔ Alive		Alive at the edges: ticks, draws, presence — never in the middle of a number

The four sanctioned "moments"#

Everything else is quiet, so these land:

1. The card flip (PaymentMethodCard) — 3D, spring, rare, emotional.
2. The pointer tilt (PaymentMethodCard) — desktop hover only, acceptable because the card is decorative.
3. The payment success (PaymentSuccess) — stroke-drawn check, one scale, seen rarely.
4. The reconciliation match (ReconciliationView) — two rows fly together and merge. It's the most satisfying moment in accounting software, and it happens maybe forty times a close.

The palette in one sentence#

Near-white canvas, pure-white surfaces, ink-black text, hairline borders, one ink-blue accent, and a green/red pair that is never the only signal.