Quantum design system · 45 screens
v0.1 · mockup Claude DESIGN.md
Index / Sitemap / 45 screens

A complete on-chain quant terminal — composed in 45 screens.

Quantum is a DEX-native quantitative trading system. Compose strategies in code or no-code, backtest on aggregated venue data, deploy to solver-routed execution with MEV protection, and manage portfolios across spot, perps, vaults and LP positions.

Open trading dashboard → Download design tokens
Screens
45
10 modules · full coverage
Color tokens
32
cream canvas + dark surface + coral accent
Typography scale
11
Instrument Serif + Inter + JB Mono
Component library
64
buttons · cards · charts · tables · forms
01 · MARKETING
Front door
First impressions — landing narrative, wallet connection, new-user onboarding.
01.01
Landing
Editorial hero · feature bands · CTA
marketing
01.02
Connect wallet
EVM · Solana · social login
auth
01.03
Onboarding
4-step setup · risk profile
flow
"The first quant terminal that feels like Claude."
— design notes
brand
Voice & tone
Editorial · humanist · warm
brand
02 · TRADING TERMINAL
The desk
Where humans take over from the bots — manual fills, deep books, advanced order types.
02.01 ★
Trading dashboard
KPIs · K-line · book · strategy
core
02.02
Spot trade
Buy/sell ticket · slippage
trade
02.03
Perp trade
Leverage · funding · liq price
perp
02.04
Limit / OCO builder
Advanced order types · brackets
orders
02.05
Order book deep view
Depth heat · venue breakdown
depth
02.06
Swap
Quick token swap · routing
utility
03 · STRATEGY LIFECYCLE
From idea to alpha
Browse community strategies, fork to your sandbox, code or compose, backtest, then go live.
03.01
Strategy marketplace
Browse · filter · sort by Sharpe
discover
03.02
Strategy detail
Live perf · author · fork
detail
03.03
Visual builder
Node graph · drag connect
build
03.04
Code editor
Python · TS · LSP · run
code
03.05
Backtest setup
Date range · venue · costs
test
03.06 ★
Backtest result
Equity · drawdown · trades
core
03.07
Walk-forward
Rolling windows · stability
analyze
03.08
Multi-strategy compare
Overlay · correlation
analyze
04 · PORTFOLIO & WALLET
Where the capital lives
Cross-strategy P&L, asset breakdown, on-chain deposit/withdraw flows and tax-ready history.
04.01
Portfolio overview
Total value · allocation pie
portfolio
04.02
Positions detail
Open trades · per-strategy
positions
04.03
PnL analytics
Daily · monthly · cohorts
analytics
04.04
Deposit
Chain · token · QR
flow
04.05
Withdraw
Confirmation · gas
flow
04.06
Tx history
On-chain · CSV export
data
05 · VAULTS
Capital, productized
Subscription products built on top of curated strategy bundles. Author earns mgmt + perf fees.
05.01
Vault list
Featured · APY · TVL
browse
05.02
Vault detail
Strategy mix · fees · subscribe
product
05.03
Subscribe
Deposit · lock period · terms
flow
05.04
Performance report
Monthly · subscriber view
report
06 · LP & POOLS
Passive on-chain yield
Concentrated liquidity, hooks, and automated rebalancing for stable-pair LPs.
06.01
LP positions
Range · IL · fees earned
lp
06.02
Add liquidity
Range slider · simulation
flow
06.03
Pool detail
TVL · volume · APR breakdown
detail
3 of 3
—
module complete
no additional screens
07 · RISK CONTROL
Limits before losses
Portfolio-wide VaR, per-strategy stop-loss, liquidation warnings — all in one nerve center.
82
07.01
Risk dashboard
VaR · exposure · scenarios
risk
07.02
Liquidation monitor
Margin · health factor
risk
07.03
Stop-loss config
Trailing · partial · time
config
3 of 3
—
module complete
08 · COMMUNITY
Social proof at the edge
Strategy authors as creators — leaderboard, profile pages, threaded discussions, learn hub.
08.01
Leaderboard
Top authors · 30d Sharpe
social
08.02
Author profile
Bio · strategies · followers
profile
08.03
Discussion thread
Comments · code snippets
social
08.04
Learn hub
Tutorials · video · docs
edu
09 · ACCOUNT
Plumbing
Profile, API keys, billing, alerts and referrals — workmanlike but treated with the same care as the trading screens.
09.01
Settings
Profile · security · prefs
account
09.02
Notifications
Filters · channels · history
comms
09.03
API keys
Scopes · rotate · webhooks
dev
09.04
Plan / billing
Tiers · invoices · usage
billing
09.05
Referrals
Code · earnings · leaderboard
growth
10 · UTILITY
Edge cases done right
Search, empty states, modals — the screens users only see when something interesting happens.
10.01
Search results
Global · scoped · ⌘K
util
10.02
Empty / error
No-data · 404 · 500
util
10.03
Modal / alert
Confirm · dialog · toast
util
Sitemap
you are here
10.04
Sitemap
This page · 45 screens index
meta