Hypernova Logo

Hypernova

Design System — A comprehensive component library for financial dashboards. Dark navy foundation, Helvetica Neue typography, precision-crafted for trust and clarity.

Color System

A navy-first palette where dark blues form the canvas and greens signal positive outcomes. Red for errors, amber for warnings, blue for neutral/interactive.

Navy — Primary / Surfaces
950
#060a14
900
#0b1120
800
#111a30
700
#172240
600
#1e2d54
500
#283d6e
400
#3a5a99
300
#5e86c4
200
#8aaddc
100
#b8d0ee
50
#e0ebf7
Green — Success / Gains
600
#1a9f55
500
#2ecc71
400
#55d98d
300
#82e6aa
200
#b0f0cb
100
#dcf7e8
Red — Error / Losses
600
#c0392b
500
#e74c3c
400
#ec7063
300
#f1948a
200
#f5b7b1
100
#fadbd8
Amber — Warning / Caution
600
#d68910
500
#f39c12
400
#f5b041
300
#f8c471
200
#fad7a0
100
#fdebd0
Semantic Tokens
Primary
Interactive, CTA, links
Success
Gains, confirmed, done
Error
Losses, errors, danger
Warning
Caution, moderate risk
Text Primary
#e6ecf5 — Headings, body
Text Secondary
#8fa4c4 — Descriptions
Text Muted
#4e6588 — Captions, hints
Text Disabled
#2d3f5e — Disabled UI
Typography

Helvetica Neue for all UI text. JetBrains Mono for numeric data, code, and labels. Two fonts, zero ambiguity.

Display
3.2rem / 700 / -0.02em
Portfolio Overview
H1
2.4rem / 700 / -0.02em
Market Summary
H2
1.8rem / 700 / -0.01em
Asset Allocation
H3
1.35rem / 600 / normal
Transaction Details
H4
1.15rem / 600 / normal
Wallet Balance
Body
0.95rem / 400 / 1.6
Your portfolio has grown 12.4% this month, outperforming the market benchmark by 3.8 percentage points. Consider rebalancing your altcoin exposure.
Small
0.8rem / 500 / 1.4
Updated 2 minutes ago · Data provided by CoinGecko
Caption
0.7rem / 500 / muted
24H VOLUME · CIRCULATING SUPPLY · MARKET DOMINANCE
Overline
0.7rem / 600 / 0.15em
02 — PERFORMANCE
Mono / Numbers
JetBrains Mono / 500
$847,291.43 0x7a3b...9f2e +12.4%
Spacing Scale

4px base unit. Consistent rhythm across all components.

--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-6
24px
--space-8
32px
--space-10
40px
--space-12
48px
--space-16
64px
--space-20
80px
--space-24
96px
Shadows & Elevation
SM
Cards, subtle lift
MD
Dropdowns, popovers
LG
Elevated cards
XL
Modals, overlays
Glow Blue
Focus states, CTAs
Glow Green
Success emphasis
Border Radius
4px
XS
6px
SM
10px
MD
16px
LG
24px
XL
Full
Pill
Z-Index Scale

Structured layering system to prevent z-index wars.

toast
z-50
modal
z-40
overlay
z-30
sticky
z-20
dropdown
z-10
cards
z-1
base
z-0
Animation & Easing

Two easing curves and three duration tiers. Hover each row to preview.

ease-default
0.15s
ease-default
0.2s
ease-default
0.35s
ease-spring
0.15s
ease-spring
0.2s
ease-spring
0.35s
Responsive Breakpoints
sm
640px
md
768px
lg
1024px
xl
1280px
2xl
1440px
Icon Set

20 stroke-based SVG icons (24×24, stroke-width 1.5) for fintech interfaces.

wallet
chart-line
chart-bar
arrow-up
arrow-down
search
bell
settings
user
lock
eye
eye-off
copy
check
x-close
plus
minus
filter
calendar
download
Color Accessibility

WCAG contrast ratios for primary color combinations on navy-900 (#0b1120).

text-primary on navy-900
Contrast: 13.2:1
✓ AA ✓ AAA
text-secondary on navy-900
Contrast: 5.8:1
✓ AA ✓ AAA
navy-300 on navy-900
Contrast: 4.1:1
✓ AA ✗ AAA
green-400 on navy-900
Contrast: 8.5:1
✓ AA ✓ AAA
text-muted on navy-900
Contrast: 2.8:1
✗ AA ✗ AAA
red-400 on navy-900
Contrast: 4.6:1
✓ AA ✗ AAA
02 — Components
Buttons
Badges, Tags & Chips
Bullish Bearish Neutral Stable Draft Online Offline Away ↑ 12.4% ↓ 3.8%
Bitcoin Ethereum DeFi Staking + Add filter
Form Elements
Text Inputs
Minimum deposit: $100
⚠ Please enter a valid number
Controls
Toggles
Two-factor auth
Email notifications
Disabled toggle
Checkboxes
Radio Buttons
Slider
65%
Portfolio allocation
Alerts & Toasts
ℹ️ Info: Your portfolio will be rebalanced at market close. No action needed.
Success: Transaction confirmed. 0.125 BTC has been added to your wallet.
⚠️ Warning: Unusual activity detected. Please verify your recent transactions.
🚫 Error: Insufficient funds. Deposit at least $500 to complete this trade.
Toast Notifications
Order Executed
Bought 0.125 BTC at $84,291
⚠️
Price Alert
ETH dropped below $2,200 (-4.2%)
Tooltips & Keyboard Shortcuts
View portfolio details
Analytics dashboard
Bullish
Strong upward trend (7d)
Keyboard Shortcuts
Quick trade
T
Search assets
K
Toggle sidebar
B
Refresh data
R
Modal
Tabs
Underline Tabs
Portfolio content goes here...
Pill Tabs
Chart for selected period...
Navigation
Breadcrumbs
Dropdown Menu
Avatars
A
JM
JM
BT
ET
JM
AK
RG
Online · Busy · Offline
Ξ
+4
Avatar Stack
Progress Bars
Portfolio goal 72%
Monthly target 94%
Risk exposure 58%
Margin usage 87%
Pagination
Showing 1–10 of 118 transactions
Loading States
Skeleton Card
Skeleton Table
Empty State
📭
No transactions yet
Once you make your first trade, it will appear here. Start by depositing funds to your wallet.
Dividers
Content above
Content below
Or continue with
More content here
Accordion
We support over 200 cryptocurrencies including Bitcoin, Ethereum, Solana, and all major ERC-20 tokens. New assets are added weekly based on community voting.
Trading fees are 0.1% for makers and 0.15% for takers. Volume-based discounts apply for traders exceeding $100K monthly.
Yes, all custodial assets are insured up to $250,000 per account through our partnership with Lloyd's of London.
Sidebar / Drawer
Command Palette

Quick-access search overlay triggered by ⌘K.

🔍 ESC
Assets
Bitcoin (BTC)
📈 Bitcoin Price Chart
Actions
🔄 Buy Bitcoin B
📋 Copy BTC Address C
Pages
📊 Bitcoin Analytics
Date Picker
March 2026
SuMoTuWeThFrSa 1234567 891011121314 15161718192021 22232425262728 293031
Notification Center
Notifications 3
BTC price alert triggered
Bitcoin crossed $85,000
2m ago
Deposit confirmed
5,000 USDT added to your wallet
15m ago
🔒
New login detected
macOS · Mexico City
1h ago
📊
Weekly report ready
Your portfolio summary is available
1d ago
Search Input
Default with clear button
🔍
Loading state
🔍
Vertical Stepper
Identity Verification
Upload government-issued ID and complete facial recognition scan.
Link Bank Account
Connect your primary bank account for deposits and withdrawals.
3
Set Up 2FA
Enable two-factor authentication using an authenticator app.
4
Start Trading
Fund your account and make your first trade.
OTP / Pin Input
Enter the 6-digit code sent to your email
Didn't receive it? Resend code
Hover Card / Popover
Bitcoin
BTC · Rank #1
$84,291
Price
$1.64T
Market Cap
+2.1%
24h
Inline Confirm
Empty — Button disabled
Type DELETE to confirm account deletion
Matched — Button enabled
Type DELETE to confirm account deletion
Copy to Clipboard
Default
Copied state
With address
0x7a3b...9f2e4d1c
Drag & Drop Zone
Default
📁
Drag files here or click to browse
PNG, JPG, PDF up to 10MB
Active / Hover
📥
Drop your files here
Release to upload
Breadcrumbs

Hierarchical navigation showing current location within the app structure.

Default
With Icons
Collapsed (Truncated)
Segmented Control

Inline toggle between mutually exclusive options — an alternative to tabs for compact selections.

Time Range
Order Side
View Mode
Small Variant
Tag Input / Multi-Select

Token-based input for selecting multiple items, with removable chips.

Watchlist Assets
BTC ETH SOL
Press Enter to add, click × to remove
Alert Conditions
Price > $90K RSI < 30 Vol > 2x avg
Timeline / Activity Feed

Chronological event display for transaction history, system events, and audit logs.

Transaction Timeline
Buy Order Filled 2 min ago
Purchased 0.5 BTC at $84,291.43
Completed
Limit Order Placed 18 min ago
Sell 2.0 ETH at $3,850.00 — awaiting fill
Pending
Deposit Confirmed 1h ago
$10,000.00 USDC credited to spot wallet
Stop-Loss Triggered 3h ago
Sold 1.2 SOL at $142.30 — stop at $145.00
Executed
Account Verified Yesterday
KYC Level 2 verification completed
Security Activity
🔐
2FA enabled via authenticator app
Today at 09:14 AM · IP 192.168.1.x
🔑
API key created — "Trading Bot v3"
Today at 08:42 AM · Read-only permissions
⚠️
Login from new device — MacBook Pro, Mexico City
Yesterday at 11:30 PM · Verified via email
🚫
Failed login attempt — wrong password (3rd try)
Yesterday at 11:28 PM · IP 203.0.113.x
📧
Withdrawal address added — 0x8f3a…c71e
Mar 1 at 2:15 PM · 24h lock active
Snackbar / Toast with Actions

Ephemeral feedback messages with optional actions — positioned at the bottom of the viewport.

ℹ️ Order #4821 has been submitted to the exchange.
Withdrawal of 2.5 ETH confirmed. TX pending on-chain.
⚠️ Your API key "Trading Bot v2" expires in 48 hours.
Insufficient balance. Deposit funds to continue trading.
Removed BTC from watchlist.
Description List / Data Pairs

Key-value layout for displaying structured details — asset info, account settings, transaction receipts.

Asset Details
Asset
Bitcoin (BTC)
Current Price
$84,291.43
24h Change
+2.34%
Market Cap
$1.67T
Volume (24h)
$42.8B
Circulating Supply
19,832,412 BTC
All-Time High
$109,114.88 (Jan 20, 2025)
Transaction Receipt
Transaction ID
0x8f3a7b2c…d91ec71e
Type
Buy
Amount
0.50000000 BTC
Price per Unit
$84,291.43
Total Cost
$42,145.72
Fee
$42.15 (0.1%)
Status
Confirmed
Timestamp
Mar 3, 2026 · 11:42:18 UTC
Avatar Group / Stacked

Overlapping avatar stacks for showing multiple participants, validators, or holders.

Default Stack
JM
AK
RS
LN
+5
With Status Indicators
JM
AK
RS
LN
2 online · 1 away · 1 offline
Large Variant
BTC
ETH
SOL
Context Menu

Right-click contextual actions — for rows, cards, or custom surfaces.

Asset Actions
📊 View Chart ⌘ C
🔔 Set Alert ⌘ A
⭐ Add to Watchlist ⌘ W
📋 Copy Address ⌘ ⇧ C
↗️ View on Explorer
🗑️ Remove Position
Table Row Actions
Order #TX-4821
📝 Edit Order
📑 Duplicate
📤 Export as CSV
Status
Priority
❌ Cancel Order
Banner / Callout

Persistent informational banners for announcements, promotions, or system-wide notices.

Tree View

Hierarchical data browser — for portfolio structures, account categories, or nested navigation.

Portfolio Structure
📁 All Portfolios $284,521
💰 Crypto Holdings $198,420
Bitcoin $126,437
Ethereum $52,780
Solana $19,203
📈 Stocks $64,200
🍎 AAPL $32,100
🔍 GOOGL $18,600
🚗 TSLA $13,500
💵 Stablecoins $21,901
💲 USDC $15,000
💲 USDT $6,901
Account Permissions
🏦 Organization
👤 Admin Full Access
Trade execution
Withdrawals
API management
👤 Trader Limited
Trade execution
Withdrawals
API management
👤 Viewer Read Only
Trade execution
Withdrawals
API management
Rating / Score

Star ratings, risk scores, and trust levels for assets, strategies, and counterparties.

Star Rating
4.0 / 5
Interactive Rating
Click to rate
Risk Score
A+
Low Risk
B
Medium
D
High Risk
Trust Score (Gauge)
74
Trusted
Based on 1,247 transactions
Carousel / Card Slider

Horizontally scrollable card strip for featured assets, news, or promotions.

Trending Assets
Stat Comparison Cards

Side-by-side metric comparisons with trend indicators and sparklines.

Total Balance ↑ 12.4%
$284,521.63
vs $253,090 last month
Unrealized P&L ↑ $8,421
+$18,442.30
Across 14 open positions
Win Rate (30d) ↓ 3.2%
67.8%
42 wins / 20 losses
Skeleton Patterns

Content placeholder shapes while data is loading — matching the layout of common components.

Card Skeleton
Table Skeleton
Circular Progress

Donut-style progress indicators for portfolio allocation, goals, and KPI gauges.

80%
Goal Met
50%
Allocated
25%
Risk Used
100%
Complete
File Upload with Progress

Upload states from selection through progress to completion — for document verification, CSV imports, and proof uploads.

📄
identity_verification.pdf
2.4 MB · Uploaded Mar 3, 2026
Complete
📊
transactions_export_2026.csv
8.1 MB · 67% uploaded
🖼️
screenshot_proof.png
File exceeds 10MB limit
📎
tax_report_2025.pdf
Queued — waiting for previous upload
03 — Documentation
Do / Don't
✅ Do
Use a clear, specific action verb. The user knows what will happen.
❌ Don't
Vague labels force users to think. "Submit" doesn't describe the action.
✅ Do
🚫Insufficient funds. You need $500 more to complete this trade.
Be specific about the problem and suggest a fix.
❌ Don't
🚫Error occurred. Please try again.
Generic errors frustrate users. Tell them what went wrong.
✅ Do
Primary action is visually dominant. Secondary action is understated.
❌ Don't
Two high-emphasis buttons compete. Users can't quickly identify the primary action.
Spacing in Context

Annotated card showing where each spacing token applies.

margin-bottom: --space-8 (32px)
padding: 32px
JM
gap: --space-3 (12px)
José Manuel
Premium Member
mb: --space-4 (16px)
Portfolio up 12.4% this month. Next rebalance scheduled for Friday.
gap: --space-2 (8px)
04 — Composed
Sign In
Welcome back
Enter your credentials to access your portfolio
Forgot password?
or continue with
Create Account
Account
2
Security
3
Verify
Set up security
Create a strong password to protect your account
Password Recovery
🔑
Reset password
Enter your email and we'll send you a reset link
ℹ️ The link expires in 15 minutes. Check your spam folder if you don't see it.
KPI Cards
📈 Total Balance
$847,291
↑ 12.4%
📊 Monthly P&L
$24,518
↑ 3.2%
⚡ Open Positions
14
↓ 2
🛡️ Risk Score
67/100
Moderate
Portfolio Performance
Portfolio Value
Last 30 days · All assets
$847,291
Asset Allocation
$847K
Total
Bitcoin
42%
Ethereum
28%
Solana
15%
Others
15%
Holdings Table
Portfolio Holdings
5 assets · Sorted by value
Asset Price 24h Holdings Value 7d Trend Status
Bitcoin
BTC
$84,291.43 +2.14% 4.218 $355,564 Bullish
Ξ
Ethereum
ETH
$2,247.18 -0.83% 105.6 $237,302 Neutral
Solana
SOL
$142.87 +5.61% 889.2 $127,023 Bullish
BNB
BNB
$618.42 +1.07% 112.3 $69,449 Stable
Cardano
ADA
$0.7841 -2.39% 74,210 $58,183 Bearish
Transaction History
Recent Transactions
Last 7 days
Date Type Asset Amount Total Status
2026-03-01 14:23 Buy BTC 0.125 $10,536.43 ✓ Completed
2026-03-01 09:47 Sell ADA 5,000 $3,920.50 ✓ Completed
2026-02-28 21:15 Transfer ETH 2.5 $5,617.95 ✓ Completed
2026-02-28 16:02 Buy SOL 50 $7,143.50 ⏳ Pending
2026-02-27 11:38 Buy BTC 0.085 $7,164.77 ✓ Completed
Compact Table
Order Book Snapshot
BTC/USDT — tighter row height for high-density updates
Side Price Size Total
Buy$84,291.210.3124$26,328.22
Buy$84,291.000.5000$42,145.50
Sell$84,291.600.2250$18,965.61
Buy$84,290.841.0142$85,497.20
Sell$84,292.100.1420$11,954.29
Buy$84,290.102.5000$210,727.75
Sell$84,292.880.0900$7,586.36
Buy$84,289.953.1000$261,302.05
Striped Table
Wallet Movements
Alternating rows for long feeds
Chain Asset Amount USD Value Status
EthereumETH12.4301$27,972.14Confirmed
SolanaSOL248.60$35,538.76Confirmed
PolygonMATIC4,200$1,323.48Pending
BitcoinBTC0.0890$7,500.73Failed
ArbitrumARB8,400$2,104.16Confirmed
BaseUSDC6,500$6,500.00Settled
Sticky Header Table
Liquidity Pool Ledger
Scroll to see rows beyond the fold
Pool Token 0 Token 1 TVL APR
CurveUSDCUSDT$18,420,112+11.2%
Uniswap v3WETHWBTC$9,870,442+4.8%
RaydiumSOLUSDC$4,112,509-0.9%
BalancerETHUSDC$6,901,200+2.7%
Trader JoeJOESOL$1,223,991-1.4%
PancakeSwapCAKEBUSD$2,882,774+0.7%
Uniswap v2DAIUSDC$2,144,301+1.5%
ConvexCRVETH$1,009,770-3.2%
AerodromeOPETH$3,450,981+6.1%
SushiswapSUSHIWETH$1,901,220+3.2%
GMXARBUSDG$4,700,130-0.4%
KyberKNCETH$890,110-1.9%
Balancer V2LINKETH$742,550+1.2%
Expandable Rows
Transaction Ledger
Click a row to reveal details
TransactionAmountAssetSubmitted
0x8f4c...1a9d 0.8421 BTC Transfer Today, 14:22 UTC
TX Hash: 8f4c2b1a9d0e4f6c8ab1...c4d2e1f7
Network: Bitcoin (Bitcoin Mainnet)
Fee: 0.00012 BTC
Confirmations: 7 / 7
0x11a8...7c2f 1,250.00 USDC Swap Today, 13:41 UTC
TX Hash: 11a8c3d5b7f64ea2a3c...d6b4e9
Network: Ethereum (Arbitrum One)
Fee: 0.00021 ETH
Confirmations: 12 / 12
0x6c9e...4bde 15.00 ETH Sell Today, 12:03 UTC
Selectable Rows
Unconfirmed Transactions
Rows can be selected in bulk for actions
3 selected — Export | Delete | Archive
Asset Chain Amount Status
BTCBitcoin0.0421Verified
ETHEthereum6.200Verified
SOLSolana58Pending
USDCArbitrum1,250Pending
ADACardano5,000Queued
Row Hover Actions
Watchlist Orders
Action toolbar appears on hover
AssetDirectionLimitCurrentSizeActions
BTCBuy$84,050$84,2920.45
ETHSell$2,190$2,24712.6
SOLBuy$138$14318.0
Row Click → Modal Detail
Live Transaction Feed
Click row opens details (static example)
TimeAssetAmountPriceTotal
10:12:14BTC0.184$84,190.50$15,490.65
10:09:02ETH3.100$2,238.22$6,939.48
10:05:55SOL40$142.71$5,708.40
Transaction Detail
TX opened from row select
Asset
BTC
Amount
0.184 BTC
Price
$84,190.50
Fee
0.00018 BTC
TX Hash
9a1b2c3d4e5f6a...0f9e8d
Timestamp
2026-03-02 10:12:14 UTC
Status
Completed
Confirmations
7 / 7
Row Click → Slide Panel
Exchange Settlements
Row click opens a right-side panel
IDRouteAmountFeeStatus
TX-EV-7712BTC → USDC0.2500.0009 BTCCompleted
TX-EV-7713ETH → USDT2.4200.0016 ETHCompleted
TX-EV-7714SOL → USDC35.000.0041 SOLPending
Settlement Detail
Panel in open state
BatchEV-7713
SourceCoinbase Institutional API
DestinationKraken Spot
Fee Paid0.0016 ETH
StatusPending sweep
TX Hash0x77f1...c9d2
Timestamp2026-03-02 09:47:12
Click to Edit Cell
Trade Parameters
Editing a limit price inline
Order IDAssetLimit PriceQtyClient
ORD-11092BTC84,500.000.250Hypernova Custody
ORD-11093ETH4.000Primary Liquidity
ORD-11094SOL143.20120.00Horizon Fund
Inline Status Dropdown
Operations Queue
Inline status control inside a cell
TaskServiceAssetStatus
RebalanceIndex EngineBTCPending
Settlement Gateway ETH
Pending ▼
Pending
Completed
Failed
ReconcileLedgerUSDCCompleted
Sortable Headers
Sortable Portfolio
Active sort: Value ↑
Asset ▲▼ 24h ▲▼ Price Quantity ▲▼ Value
BTC+2.3%84,320.004.218$355,564
ETH-0.7%2,236.40105.6$236,120
SOL+5.0%143.11889.2$127,198
Filter Row
Wallet Filters
Column-level filtering controls
TokenTypeAmountValue
SOLHold850.15$121,122.21
BTCBorrowed0.5400$45,527.90
ETHStaked42.200$94,500.80
USDCStable7,500$7,500.00
Search with Highlight
Search
PairSourceDirectionAmount
SOL/USDCSolana DEXBuy120
ETH/USDGatewaySell20
BTC/SOLCrosschainSwap3.25
AVAX/USDHedge DeskBuy100
SUI/SOLLiquidity BotSwap50
Loading Table
Live Market Feed
Skeleton shimmer placeholders
PairLastSpreadVolumeStatus
Empty Table
Filtered Results
No records after applying filters
AssetAmountValueStatus
📭
No results found
Try adjusting your filters
Error Table
Exchange Connector
Failed fetch state
EndpointLatencyRegionLast Check
⚠️ Failed to load transaction feed from the exchange API. API key unauthorized or rate-limited.
Infinite Scroll Indicator
Historical Transactions
Continuous load indicator
TimeEventAssetAmount
2026-03-02 10:00TradeBTC0.120
2026-03-02 09:40DepositETH3.500
2026-03-02 09:10WithdrawalUSDT25,000
Heat Map Cells
Portfolio Performance Heatmap
Cell intensity by magnitude and direction
AssetAllocation24h7d30d
BTC38%+8.2%+6.7%+5.1%
ETH29%+5.4%-1.2%+2.3%
SOL15%+7.8%+4.2%-1.5%
USDC10%0.0%-0.3%+1.1%
ARB5%-3.9%-8.0%-4.6%
DOT3%+1.8%-4.1%-2.2%
Inline Mini Bar Charts
Fund Allocation
Values with inline progress bars
AssetAllocationAllocation %Target %
BTC42%
40%
ETH28%
30%
SOL14%
15%
LAYER-1 Basket9%
8%
Stable Assets7%
5%
Comparison Table
Portfolio Comparison
Current vs Previous reporting snapshots
MetricCurrentPreviousDelta
Portfolio Value$847,291$812,104+4.33%
Daily P&L$11,720$9,810+1.91%
Holdings Count6461+4.92%
Risk Score6771-5.63%
01 — Dashboard Overview

Full desktop dashboard composition with existing tokens, nav patterns, charts, cards, and compact tables.

Hypernova • Dashboard Overview
Overview
Real-time positions, risk and market flow at a glance
MJ
Portfolio Balance
$1,248,904.31
+$21,442.17
Today P&L
$18,904.50
+1.56%
Open Positions
24
6 at risk
Risk Score
72
Moderate caution
Portfolio Value Trend
7-day rolling performance
Allocation
Asset mix by exposure
100%
Total
BTC
38%
ETH
25%
SOL
19%
Stablecoins
18%
Holdings
5 largest positions
AssetQtyValueP&LLast 24hSparkline
BTC
BTC/USD
14.2210 $1,198,120.00 +$8,920 +3.1%
Ξ
ETH
ETH/USD
112.44 $223,450.80 +$3,101 +2.2%
SOL
SOL/USD
420.00 $78,590.40 -$1,240 -1.4%
ADA
ADA/USD
11,500 $6,230.00 +$430 +0.9%
BNB
BNB/USD
64.2 $13,780.20 -$260 -0.4%
02 — Trading View

Single-screen trading environment with live-looking candles, order controls, open positions, and depth visualizations.

Hypernova • Trading View
BTC / USD
$84,291.43 +2.14%
High $84,760.11 · Low $83,812.40 · Volume 1,428.34 BTC
24h active
Price Action
1H candles
84,800 84,500 84,200 83,900 09:00 10:00 11:00 12:00 13:00
Order Entry
BTC/USD spot
Estimated total
$42,145.72
Open positions
AssetEntryCurrentP&L
BTC 0.2500$82,100.00$84,291.00+2.66%
ETH 3.000$1,940.00$1,987.00+2.42%
SOL 30.000$186.80$187.12+0.17%
Order Book
BTC depth by cumulative volume
Live
BidsUSDBTC
84,290.408.122684,120
84,286.705.450458,800
84,280.103.920330,490
84,275.002.810236,915
84,268.902.300193,817
84,264.201.870157,583
84,258.101.12094,368
84,251.300.93078,353
AsksUSDBTC
84,300.009.200775,760
84,306.906.780571,000
84,312.404.120347,846
84,319.703.030255,570
84,325.202.640222,456
84,332.101.800151,795
84,338.901.330112,117
84,347.200.96080,874
03 — Portfolio Detail

A focused single-asset page for drilldown on holdings and market context.

Hypernova • Portfolio Detail
Bitcoin (BTC)
BTC/USD $84,291.43 +2.14% Bullish
Holdings Value
$1,198,120.00
Across spot and derivatives
Avg Buy Price
$77,450.12
Weighted over 14.22 BTC
Total P&L
+$95,620.11
+8.82%
24h Change
-1.4%
Low volume around 83,812
BTC Price History
Zoom and trend controls
Transaction History
Recent BTC buys and sells
DateTypeAmountPrice
2026-03-01 10:20Buy0.3120 BTC$81,220.50
2026-02-28 14:04Buy0.4200 BTC$79,910.00
2026-02-27 16:12Sell0.1200 BTC$82,140.90
2026-02-26 08:44Sell0.0800 BTC$80,920.30
2026-02-25 11:59Buy0.1880 BTC$78,760.11
Asset Info
Live metrics and chain stats
Market Cap
$1,657,000,000,000
Volume (24h)
$31,420,000,000
Circulating
19,680,000 BTC
All-time High
$73,987.00 (Apr 2021)
Market Dominance
51.9%
Hash Rate
555 EH/s
Related News
Top BTC headlines
Institutional flows keep BTC ETF premiums near two-week highs
Bloomberg22m ago
Options skew rises as volatility resets after spot ETF inflows
Reuters47m ago
BTC mining firms report higher network revenue in latest cycle
CryptoSlate1h ago
04 — Settings Page

Account settings screen with reusable forms, security controls, preferences, and danger flow.

Hypernova • Settings
Account Settings
Manage account information, security posture, and environment preferences.
Profile
MJ
Security
Two-Factor Authentication
Protect account actions with TOTP
Password
Last changed 28 days ago
Change Password
Active Sessions
DeviceLocationLast Active
MacBook Pro 16"New York, US2026-03-02 11:14
iPhone 16 ProToronto, CA2026-03-02 09:03
Notifications
Price Alerts
Trade Confirmations
Security Alerts
Newsletter
Preferences
Danger Zone
Account deletion is permanent and removes all API keys and saved strategies.
03 — Foundation
Grid System

12-column baseline grid, breakpoint collapse, gutter and margin context.

12-Column Grid / Breakpoints
12 columns gutter: 24px Container margin: 20px
1
2
3
4
5
6
7
8
9
10
11
12
1200px+ : 12 columns
1-2
3-4
5-6
7-8
9-10
11-12
768px : 6 columns
1-3
4-6
7-9
10-12
480px : 4 columns
margin gutter 24px
03 — Foundation
Motion Guidelines

Animation timings and hover examples for live interaction behavior.

Micro — 100ms
hover, focus
Standard — 200ms
tooltips, small transitions
Emphasis — 300ms
modals, panels
Complex — 500ms
page transitions
03 — Foundation
Dark / Light Theme Tokens

Side-by-side token mapping for semantic values across modes.

Dark mode
TokenValueUse
surface-0#060a14Global canvas
surface-1rgba(17,26,48,.6)Primary surfaces
surface-2rgba(23,34,64,.7)Inputs, modals, cards
surface-3rgba(30,45,84,.6)Emphasis & overlays
text-primary#e6ecf5Main copy
text-secondary#8fa4c4Support copy
borderrgba(255,255,255,.07)Splitters
Light mode
TokenValueUse
surface-0#ffffffGlobal canvas
surface-1#f8f9fcPrimary surfaces
surface-2#f1f3f8Inputs, modals, cards
surface-3#e8ecf2Emphasis & overlays
text-primary#1a1f36Main copy
text-secondary#4e5d78Support copy
border#e2e6eeSplitters
04 — Finance-Specific
04 — Finance
Ticker / Price Display

Asset price variants with high-legibility monochrome values and movement deltas.

Stocks
AAPL · Nasdaq
$189.42
+$2.14 (+1.15%)
Crypto
BTC · USDT
$84,291.43
+0.94% (+$782)
Forex
EUR/USD · Spot
1.08344
-0.00024 (-0.22%)
Index
S&P 500 · INX
5,287.12
+3.64 (+0.69%)
04 — Finance
Time Range, P&L, Risk, Orderbook

Compact financial interaction widgets and trading context visuals.

Sparkline Inline
+1.8%
-1.2%
0.0%
Time Range Selector
Compact + wide variants
P&L Display
Total P&L
+$7,982.14 +4.21%
Trades: 18Avg cost: +$0.94
Alternative Set
-$2,104.90 -2.98%
Position: 0.84 BTCFees: $11.20
Total portfolio P&L +$34,120.56 (+12.6%)
Risk Indicator
LowMediumHighCritical
Conservative
LowMediumHighCritical
Balanced
LowMediumHighCritical
04 — Finance
Order Book & Candlestick
Order Book
PriceSizeAmount
Bid
84,280.000.4312$36,346
84,279.501.1203$94,398
84,279.100.8001$67,429
84,278.701.2400$104,456
84,278.202.0100$169,389
84,278.001.4400$121,339
84,277.600.9200$77,590
84,277.200.9000$75,849
Ask
84,292.000.5530$46,592
84,292.501.1001$92,712
84,293.201.2200$102,899
84,293.900.4700$39,622
84,294.101.8800$158,531
84,295.002.0200$170,129
84,295.501.1700$98,652
84,296.100.7300$61,545
Spread: 12.0
Candlestick
Chart: Candlestick
05 — Patterns
05 — Interaction
Real-time Update Animation

Price cell flashes up or down for live data updates.

BTC/USD +0.00%
$84,291.43
05 — Interaction
Bulk Actions Bar

Floating selection bar with persistent counter and action controls.

See the sticky demo at the bottom of the page:

5 items selected
05 — Interaction
Filter Panel

Sidebar filter panel with searchable and collapsible groups.

Asset Type 4
42
18
12
9
Status 3
61
7
21
Date Range 2
Amount Range 3
$1K
$1-10K
$10K+
Active filters (3)Clear all
Crypto Active Last 30 days
Onboarding Tooltip Sequence
Step target
Step 1 of 3
Welcome to dashboard controls and filters.
1/3Prev
Trade actions
Step 2 of 3
Set order size, choose side, and execute safely.
2/3Action
Risk meter
Step 3 of 3
Review risk and confirm before publishing.
3/3Done
05 — Interaction
Optimistic UI

Immediate success feedback with graceful rollback on errors.

Ready
Ready
06 — Writing & Usage
06 — Writing
Number Formatting
FormatExampleDoDon't
Currency$1,234.56Use grouping and fixed decimals$1.234,56
Short currency$1.2KUse for cards and lists$1200K
Short currency$1.2MUse for large market values$1200000
Short currency$1.2BUse for mega market caps$1200000000
Percent+2.34%Keep sign and decimals2.34%
Percent-1.5%Keep sign and context-1.50 percent
Large numbers1,234,567Show full in details1.23e6
Crypto precision0.00023847 BTCPreserve precision0.0002 BTC
06 — Usage
Surface Token Usage

Use the right token depth for visual hierarchy and data confidence.

surface-0
Base canvas
Use at app background and full-page shell.
surface-1
Primary surfaces
Use for cards, containers, section wrappers.
surface-2
Interactive surfaces
Use for inputs, dense data tables, modals.
surface-3
Elevated emphasis
Use for selected items and elevated blocks.
HierarchyGuidance
Background → surface-0lowest
Primary card → surface-1default
Interactive module → surface-2focus region
Call-outs / popovers → surface-3highest
07 — QA & Technical
07 — Validation
Component States

Visual matrix for main component states used in this showcase (Default, Hover, Focus, Active, Disabled, Error, Loading).

State Button Input Badge Card
Default Default Default card
Hover Hover Hover card
Focus Focus Focus card
Active Active Active card
Disabled Disabled Disabled card
Error Error Error card
Loading Loading Loading card
07 — Reference
Token Reference

Compact cheat-sheet of custom properties used by this file (visual, compact, technical format).

Current variable source: :root.
Colors
--color-primary var(--navy-400)
--color-primary-hover var(--navy-300)
--color-success var(--green-500)
--color-warning var(--amber-500)
--color-error var(--red-500)
--navy-700 #172240
--green-500 #2ecc71
--red-500 #e74c3c
--amber-500 #f39c12
Typography
--font-sans var(--font-sans) Aa
--font-mono var(--font-mono) Aa
--text-xs 0.7rem 18 09 24
--text-sm 0.8rem Aa
--text-md 1rem Aa
--text-lg 1.15rem Aa
--text-xl 1.35rem Aa
--text-2xl 1.8rem Aa
--text-3xl 2.4rem Aa
--text-4xl 3.2rem Aa
--leading-tight 1.15 line-height
--leading-snug 1.3 line-height
--leading-normal 1.6 line-height
--tracking-wider 0.1em SPACING
--leading-relaxed 1.75 line-height
--tracking-tight -0.02em TRACK
--tracking-normal 0 TRACK
--tracking-wide 0.05em TRACK
Spacing
--space-14px
--space-28px
--space-312px
--space-416px
--space-520px
--space-624px
--space-832px
--space-1040px
--space-1248px
--space-1664px
--space-2080px
--space-2496px
Radius & Surfaces
--radius-xs 4px
--radius-sm 6px
--radius-md 10px
--radius-lg 16px
--radius-xl 24px
--radius-full 9999px
--surface-1 rgba(17,26,48,.6) #
--surface-2 rgba(23,34,64,.7) #
--border-focus rgba(58,90,153,.6) #
Shadows
--shadow-sm 0 1px 2px rgba(0,0,0,.3)
--shadow-md 0 2px 8px rgba(0,0,0,.3)
--shadow-lg 0 4px 20px rgba(0,0,0,.35)
--shadow-xl 0 8px 40px rgba(0,0,0,.5)
--shadow-glow-green 0 0 20px rgba(46,204,113,.2)
--shadow-glow-blue 0 0 20px rgba(58,90,153,.3)
Motion / Timing
--ease-springcubic-bezier(0.16, 1, 0.3, 1)ease
--duration-fast0.15sms
--duration-normal0.2sms
--transition0.2s var(--ease-spring)trans