# 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. Source: https://lopifi.com/docs/02-moodboard Part of: Lopifi — US GAAP books on autopilot, reviewed by a CPA (https://lopifi.com) --- # 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`](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.** | 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 reconciliation match) | | Loud ↔ Quiet | | Quiet. One accent. Silence is the brand. | | 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. 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.