Moodboard

Not a Pinterest board. A set of read-closely references, each with a specific extraction — what we take, and just as importantly what we refuse. A moodboard that only says "I like this" produces pastiche. A moodboard that says "I take this one decision and reject that one" produces a system.

The reference set

1. Mercury — the observatory

What it is: Business banking. Near-black canvas (#171721), content floating as marginally lighter graphite surfaces, ivory text, a single cobalt (#5266eb) reserved exclusively for the primary action. Proprietary Arcadia / Arcadia Display, body at 400 and display at an unusual 480 — confident without shouting. 18 color tokens, of which only 2 are brand.

Take:

• Accent scarcity as a discipline. One chromatic event per view, spent on the single most important action. Everything else is neutral. This is the highest-leverage decision in the entire moodboard.
• The two-brand-tokens ratio. 16 structural tokens to 2 brand tokens is the correct proportion for financial UI.
• Decorative blues that never touch a button. Mercury's pale blues (#9cb4e8, #cdddff) live in washes and mockups. They are scenery, not affordance. 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, not a fallback. Ramp invests real craft in row density, column hierarchy, hover affordances, and bulk selection. Our TransactionTable gets the same investment as our BalanceCard.
• Surface the exception, not the aggregate. A finance dashboard's job is to tell you what changed and what's wrong. That's why AnomalyCard is in the core catalog and a generic "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 independently converged here; it's correct because the symbol is a unit label, not data.
• Consistent decimal places within a column, always. $1,200.00, never $1,200.
• The docs site is the product. Interactive, touchable, copy-paste-ready. Sonner's adoption came from the same insight. Our docs site is a milestone, not an afterthought.

Refuse:

• The gradient-mesh marketing aesthetic. It belongs on stripe.com and nowhere near a ledger.

4. Linear — the keyboard-first tempo

Take:

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

Refuse:

• The purple. And more generally the "developer tool dark" register — Lopifi's users are not all 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. This shape is our ConversionBreakdown.
• The rate is a perishable fact. Show it with an as-of time and a lock countdown. A rate without a timestamp is a lie.

Refuse:

• The consumer-brand green as a system color. We keep green strictly semantic (positive value), never brand — otherwise "green" stops meaning "favourable".

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 delight is not just allowed but required — you see it rarely, it's emotionally loaded, and it's the physical anchor of the whole 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. Forty years of traders reading it proves it works, and it solves the exact problem a count-up animation creates: it draws the eye to a change without ever rendering an intermediate false value.
• Density is respect. Power users want more on screen, not more whitespace. Hence three density modes.

Refuse:

• Everything else. Chromatic chaos, 11px type, no hierarchy. We take one idea.

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. This is centuries-old typographic grammar, it's still what accountants look for, and essentially zero web products implement it. It costs us two CSS declarations and buys enormous credibility.
• The em dash for nil. — for a true zero in a statement. Blank for not-applicable. n/a for unknown. Three states, three glyphs.
• 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 — volume without photorealism, built from our own palette. Full system in foundations/08-imagery-and-isometric.md.

Refuse: Isometric art anywhere inside a data-dense surface. It's a narrative device — it appears where there is no data yet, or where a concept must be explained. Never as decoration on a working screen.

Synthesis: the resulting character

If you had to describe Lopifi in one line: an accountant's ledger, typeset properly, that responds instantly.

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. The single most satisfying thing 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.