A reusable fintech design system for the moments people check balances, send money, approve payments, and decide whether something feels trustworthy.
03
example screens
04
palette stories
10
component families
17
money flows
Example screens
The system is shown through a treasury command center, a high-risk payment review, and a mobile wallet. The component library also extends into brokerage and crypto-wallet flows without changing the visual grammar.
Desktop screen
Treasury command
Total operating cash
$482,490.24
Inflow
+$42.8k
Outflow
$18.2k
Runway
11.4 mo
Cash flow forecast
Projected runway over 12 weeks
Runway
12.4 wk
Low point
W3
Peak
W12
Wire approval needed
Review queue
$24,000 to Northstar Payroll requires one more approver.
Recent transactions
Ledger activity across accounts
Stripe payout
Today, 10:42
Settled+$12,804.20
AWS Marketplace
Yesterday
Posted-$1,482.10
Wire to Mercury
Jun 7
Review-$24,000.00
FX gain
Jun 6
Booked+$842.90
Risk screen
Payment review
Send amount
$24,000.00
This transfer cannot be recalled after submission.
Biometric approval is required before money leaves the account.
Mobile screen
Wallet mobile
Wallet balance
$8,420
Activity
Live
Foundations
The system keeps the basics restrained: a small palette, readable type, steady spacing, and clear status language. The goal is to help people scan money without making the interface feel clinical.
Green is reserved for the thing someone can confidently do next: add, send, approve, confirm, or continue.
Surfaces stay close to the portfolio shell so balances, names, and decisions remain the loudest elements.
Risk, warning, safe, and error states always carry a label. Color supports the decision; it never becomes the decision.
Income, expense, profit, and loss use familiar financial cues so rows can be scanned quickly without feeling like alerts.
Display
type.display
Operating balance
Page title
type.page
Treasury dashboard
Section title
type.section
Cash movement
Card title
type.card
Available credit
Body
type.body
Settlement completes by 5:00 PM today.
Caption
type.caption
Updated 2 minutes ago
Label
type.label
AVAILABLE CASH
Data numeric
type.numeric
$482,490.24
Table
type.table
ACH credit - Stripe payout
Button
type.button
Send money
2px
4px
8px
12px
16px
24px
32px
48px
64px
elevation.0
elevation.1
elevation.2
elevation.risk
Dashboards use 12 columns on desktop, 6 on tablet, and single-column priority stacking on mobile.
Analytics pages keep filters pinned above charts and reserve the right rail for explainers or saved views.
Transaction lists use dense rows with persistent amount, counterparty, date, status, and action affordances.
Detail pages use a summary header, ledger facts, timeline, documents, then support actions.
Settings pages separate profile, security, limits, notifications, and billing into predictable groups.
Onboarding screens use one primary decision per step with visible progress and save/resume behavior.
Mobile layouts prioritize balance, primary action, pending risk, and recent activity above the fold.
Navigation icons identify destinations, not decoration.
Action icons must be paired with labels unless the action is globally familiar.
Status icons always pair with text and tone.
Security icons are reserved for verified, encrypted, locked, and risky states.
Empty-state icons stay quiet and explain what data is missing.
Component library
Instead of showing every state as a technical inventory, the catalog groups components by what they help a person do: move money, trade assets, manage crypto wallets, review risk, read activity, recover from errors, and trust a session.
Keeps orientation simple across desktop, tablet, and mobile without adding another layer of product chrome.
Makes the next action clear while keeping destructive and secondary decisions deliberately quieter.
Handles money, identity, credentials, search, and dates with readable helper states instead of noisy validation.
Frames balances, cards, alerts, and insights as small decisions people can understand at a glance.
4829 •••• 1048
Turns dense transactions, KPIs, filters, charts, and tables into scannable financial rhythm.
Covers quote views, watchlists, order tickets, positions, fills, and market-state language for brokerage products.
NVDA
Market open
$142.64
+2.18%
Covers asset balances, network selection, wallet addresses, receive QR, swaps, gas fees, and irreversible transfer warnings.
Portfolio value
$27,763
Confirms what happened, what is still processing, and what needs recovery without sounding robotic.
Receipt saved to statements.
No money moved. Try another card.
Treats consent, risk, authentication, and session prompts as calm trust moments.
Verify payment
Confirm before sending $24,000.
Keeps modals, drawers, sheets, popovers, and confirmations focused on the consequence of the choice.
Selected specimens
A few living examples show the tone: compact, calm, and focused on the decision in front of the user.
Available balance
+12.4%$482,490
Risk exposure
Review$18,442
Instant debit
4829••••••••1048
Cardholder
Avery Stone
Limit
$8,000
Payroll reserve is below target
Move $14,800 from operating to maintain the next payroll buffer.
Wire cut-off in 42 minutes
Submit reviewed transfers now for same-day settlement.
Price target
Target range
$95,260
Current price
Available balance mix
73%
Cash
Cash balance
$1,460.00
Savings
$140.00
$160 to goal
Bitcoin
$110.00
1.18% today
Stocks
$210.00
2.55% today
1.01%
Rangoon Bistro
Open until 10pm · Restaurant
Lovejoy Bakery
Open until 5pm · Bakery
Wallflower Coffee Co
Open until 11pm · Cafe
Yesterday at 12:25pm
For boy's haircut
$41.20
Net cash movement
+8.8%+$42,884
Burn multiple
Safe1.28x
Exceptions
Pending7
Cash flow forecast
Projected runway over 12 weeks
Runway
12.4 wk
Low point
W3
Peak
W12
Recent transactions
Ledger activity across accounts
Stripe payout
Today, 10:42
Settled+$12,804.20
AWS Marketplace
Yesterday
Posted-$1,482.10
Wire to Mercury
Jun 7
Review-$24,000.00
FX gain
Jun 6
Booked+$842.90
| Account | Balance | Status | Action |
|---|---|---|---|
| Operating | $482,490.24 | Safe | |
| Payroll reserve | $88,200.00 | Pending | |
| AP clearing | $34,910.16 | Risk review | |
| Card liability | $18,442.90 | Warning |
May activity
Best day
$84
Average
$32
Runway health
Target coverage
62%
covered
Above minimum, below target
Add $18.4k to reach the recommended 90-day buffer.
Current
$56k
Target
$90k
NVDA
NVIDIA Corporation
$142.64
2.18%
Estimated order value: $1,772.50. Market price can move before fill.
Watchlist
Live quote rows with signed movement
Apple
AAPL
$203.92
+1.2%
Tesla
TSLA
$178.48
-0.8%
Vanguard Total
VTI
$288.10
+0.4%
Coinbase
COIN
$246.33
+3.7%
Position summary
Average cost, unrealized gain, allocation weight, and tax lot labels stay visible before sell actions.
12.5
shares
$1,708
cost
+$74
gain
Crypto wallet
Multi-asset balances by network
Portfolio value
$27,763.32
Bitcoin
0.1842 BTC
$12,824.90
+2.4%
Ethereum
3.20 ETH
$10,118.42
+2.4%
USD Coin
4,820 USDC
$4,820.00
stable
Receive BTC
Bitcoin network only
Wallet address
bc1q9v...8m42r7
Sending the wrong asset or network can permanently lose funds.
Swap review
Shows received amount, slippage tolerance, network fee, route, and final irreversible broadcast state.
Verify this payment
Confirm with device biometrics before sending $24,000.00 to a new beneficiary.
New device trust prompt
Chrome on macOS requested access from Mumbai, India. Trust only if this was you.
Share account balances with LedgerOps
Access includes balances and transaction history for 90 days. You can revoke it anytime.
Your session ends in 01:28
Stay signed in only on trusted devices.
Financial UX patterns
Each pattern records trigger, required data, primary states, and compliance or risk behavior so teams can scale decisions across payments, cards, lending, trading, crypto wallets, wealth, analytics, and admin workflows.
Add money
User chooses a funding method from wallet or account balance.
Surface limits, settlement timing, fees, and reversible/irreversible status before confirmation.
Send money
User initiates payment to a saved recipient, bank account, or wallet handle.
High-value or new-recipient sends require step-up verification and consequence copy.
Request money
User creates a payable request or invoice link.
Warn about expired links and unverified payer identities.
Card payment
User authorizes a card transaction or configures a virtual card.
Show merchant, amount, card, and liability language in the same confirmation surface.
Bank transfer
User starts ACH, wire, IMPS, NEFT, or local bank transfer.
Verify beneficiary details and show cut-off time, fees, and recall policy.
Transaction details
User opens any ledger item from a list, chart, alert, or statement.
Status explanation and support path must be visible without hiding key ledger facts.
Dispute flow
User reports an unknown, incorrect, duplicate, or failed transaction.
Disclose provisional credit rules, evidence deadlines, and false claim consequences.
Payment confirmation
User reaches the final step before money movement.
Critical irreversible payments require explicit acknowledgement before action unlocks.
Spending insights
System detects a meaningful trend, anomaly, or comparison.
Use confidence framing when insight could affect a financial decision.
Budget tracking
User creates, monitors, or adjusts spend limits.
Warn before limits are exceeded and make resets explicit.
Risk alert
System flags suspicious device, transaction, exposure, or account behavior.
Use persistent, non-dismissable UI for high-risk account protection actions.
KYC onboarding
User must verify identity before product access or increased limits.
Explain why data is required and how review status affects access.
Consent-based data sharing
User connects accounts, grants open-banking access, or shares financial data.
Scopes must be readable, revocation must be discoverable, and consent duration must be explicit.
Account connection
User links an external bank, card, payroll, brokerage, or wallet account.
Show security handling, last sync, and broken-connection recovery.
Subscription management
User manages a recurring plan, mandate, or billing agreement.
Make recurring charge timing, cancellation effect, and mandate status explicit.
Stock order ticket
User buys, sells, or adjusts an equity, ETF, option-lite, or fractional share position.
Show live price freshness, market hours, estimated total, and order-type consequences before submission.
Crypto transfer
User sends, receives, swaps, or bridges a digital asset from a custodial or self-custody wallet.
Network mismatch, irreversible transfer, address truncation, and gas volatility must be explicit before broadcast.
Accessibility and trust
Financial interfaces need more than attractive defaults. The system includes explicit accessibility and decision-safety rules for color, focus, motion, charts, status, and irreversible actions.
All status, risk, and financial movement colors pair with text labels and icons.
Interactive controls use a visible focus ring mapped to --fin-focus.
Money, balances, percentages, and table values use tabular numerals.
Critical irreversible actions require review state, consequence copy, and explicit confirmation.
Charts include nearby textual interpretation and never rely on color alone.
Reduced motion should disable non-essential transitions while preserving state feedback.