ORBIT

ORBIT is a self-initiated WEXILAR concept: an imagined personal-finance product, designed and built end to end to show how we approach a complex digital product — from the first mark to a working app and dashboard. It is not a real bank or app, it has no users, and it never touches real money. Every balance, merchant and person in these screens is sample data.

The idea behind it fits in a sentence: your balance at the centre, and everything else — payments, bills, plans — moving around it on a clear, predictable path.

Most money apps show everything at once — balances, offers, charts and alerts all compete, so the one thing you opened the app for is the hardest to find. We treated clarity as the feature: fewer numbers on screen, each one explained, and an interface that only raises its voice when something needs you.

ORBIT is designed for busy people managing a salary, shared bills and a few savings goals, who want confidence in thirty seconds rather than a finance hobby. Every screen answers a single question — how much do I have, where did it go, what is it for.

The mark is an open ring with one violet point riding its edge — the balance at the centre, and money in motion around it. It is drawn on a 32-unit grid from a single 11-unit radius and a 2.6-unit stroke, with the break set at 50° so the point reads as moving rather than resting. The lower-case wordmark is set in Geist, tightly spaced, so the two sit together as one calm lockup.

The app icon keeps the same idea at its smallest: warm white on graphite, one violet point. It reads at 32 pixels and survives on any wallpaper.

One set of tokens drives two themes: a dark theme for the phone, where the app lives in the hand at night as often as in the day, and a light theme for the web dashboard, where people sit down to plan. Violet is the only accent, reserved for the single action or number that matters on each screen; green and red carry money in and out, and always sit beside words, so meaning never depends on colour alone.

Geist does all the interface work in three weights. Geist Mono is kept for figures that must line up — card numbers, references, tokens — and every amount is tabular, with whole pounds leading and pence stepping back.

Home answers “how much do I have?” before anything else, with this month's change beneath it and the four things people do most — send, request, add money, goals — one tap away. Activity, insights and cards live in the tab bar, and sending money is the single violet action in its centre.

The app runs from onboarding and sign-in through accounts, activity, a single payment, insights, goals, cards, transfers, notifications, profile and security. Each screen is a real route in the prototype, not a flat mock-up.

Checking a balance and a payment: two taps from the total to a single transaction, and every level keeps the number you started from in view. Sending money: recipient, amount and source account on one screen, then a confirmation that says what happened in plain words and gets out of the way. Planning: insights explain the month in one sentence, and a goal is three decisions — name, target, date — while ORBIT works out the monthly amount.

ORBIT's screens are assembled from one component library: buttons with a single accent variant, inputs with focus and error states, segmented tabs, switches, status badges, avatars, progress bars, transaction rows, payment cards, toasts and confirmation sheets — plus area, bar, donut and ring charts drawn for the product. Both boards below are rendered from those live components, not redrawn for the presentation.

The web dashboard is where people sit down with their finances rather than glance at them: an overview of balance, accounts, the month's spending, recent transactions and goals; a full transaction table with filters and a detail panel; and dedicated views for insights, cards, goals and settings. It shares the app's tokens and components, in the light theme.

At 1440 pixels the dashboard has a full sidebar; at tablet width it folds into an icon rail; on a phone it becomes a tab bar with stacked cards. The tokens, data and components stay the same at every size — only the layout changes.

To design the product honestly we sketched how it would work: app and web clients behind one API contract, passkey sign-in with short-lived sessions, domain services for accounts, payments, insights, goals and notifications, and an append-only ledger feeding an event stream — so a card payment becomes a categorised transaction, an updated budget and, only when a rule you set is crossed, a notification.

This architecture is illustrative. The prototype itself is a Next.js app running on sample data: one token file drives the light and dark themes, one component library renders both the phone app and the web dashboard, and every screen in this case study is a screenshot of it. None of the services, providers or integrations shown exist in production.

A physical card in graphite or pearl with the orbit engraved as fine lines, a violet virtual card for online payments, and launch graphics built from the product itself — real screens and real components, never a promise the app can't keep.

The ORBIT prototype is live at wexilar.com/concepts/orbit (web dashboard) and wexilar.com/concepts/orbit/app (mobile app, best viewed at phone width). It runs entirely on sample data.