Meridian: a private-wealth terminal with no backend

Meridian is a UI study with a premise: what does a Bloomberg terminal look like if you design it today for private wealth? The answer is a dark, dense, onyx-and-gold portfolio front-end for a fictional family office — dashboard, performance attribution, holdings, composition, fixed income, and a full order-entry screen, wrapped in a shell with a live-ticking NAV bar, a scrolling ticker tape, and a Cmd+K command palette. Every number on screen is simulated, and the piece is honest about it: there is no market feed, no backend, no persistence — just a deterministic client-side simulator and a lot of front-end discipline.

Lines of code

4,595

Routes

9

Dependencies

6

Chart libraries

0

One book, no contradictions

The core design decision is a single source of truth for prices: one React context holds every quote, namespaced by domain so a symbol can exist as both a watchlist index and a holding. The NAV top bar, dashboard hero, ticker tape, table rows, footer totals, position panel, and trade ticket all derive from that one book — so when a tick lands, every figure on screen moves together and nothing ever contradicts anything else. A 1.4-second interval ticks roughly a fifth of the instruments per cycle with per-asset-class volatility: bonds barely breathe, crypto lurches, and private-market marks — PE and hedge funds — never move at all, because in the real world, they don't.

The domain details got real care: bond prices are handled per-100-of-par throughout, derived tax lots reconcile exactly with a position's average cost, and comparison charts rebase both series to 100 at the window start so the percentage axis stays honest. The “Atlas” assistant's talking points are largely computed from the same mock data the screens render, rather than hardcoded, so its copy stays grounded in the book it describes.

Hand-rolled charts, by choice

There are no chart libraries in the bundle. The equity curve with its hover crosshair, the three-series yield curve on a square-root time axis, the sector treemap, the allocation donuts, the sparklines, and a 25-year stacked bond ladder are all inline SVG, built from scratch in a few hundred lines total. At terminal density, a chart library fights you on every pixel; owning the SVG means owning the density.

Determinism as discipline

Like the studio's other builds, hydration safety comes from seeding: all base data flows from a seeded PRNG, and randomness only enters inside useEffectafter mount — server HTML and first client render always match. It's a house pattern at this point: determinism first, then motion. The tick-flash micro-interaction rides the same rails — each changed figure remounts a keyed span that replays a gold-or-red flash keyframe, and the aggregate NAV direction is derived by re-pricing the whole book before and after the tick.

Honest edges

• ▸All market data is simulated, and order submission toggles a local three-second “Filled” state — the piece is a UI study, not a trading system.
• ▸Atlas is keyword-matched canned replies with simulated streaming — a design exploration of where an assistant sits in a terminal, not an AI integration.
• ▸Three of nine routes are designed “In design” placeholders rather than dead links; several per-symbol quote stats are static.
• ▸Desktop-first by intent: the sidebar collapses away on mobile without a replacement nav, and the command palette is keyboard-first, with no touch trigger on small screens.
• ▸Accessibility is partial — good focus management, aria-sort, and reduced-motion coverage, but no dialog focus traps and the SVG charts lack text alternatives yet.

Terminal-grade density is a design position: 10px tracked labels, tabular numerals everywhere a number appears, and hairline borders — the information wants to be close together.

What we'd tell a client

• ▸One store for anything that appears in two places — consistency bugs are the most corrosive kind in a data-dense UI.
• ▸Fake data deserves real modeling: per-asset-class volatility and reconciling tax lots make a simulation feel true, and stakeholders judge the feel.
• ▸Owning your charts is viable — at high density it's often less work than bending a library.
• ▸Ship placeholders as designed states, not dead ends; three “In design” cards read as intent, three 404s read as neglect.