Design System

Trade with
precision.

A dark trading terminal optimized for dense financial data. Sharp geometry, compact spacing, and the signature yellow accent for critical actions.

16 color tokens 20+ type steps 4px grid 4 surface levels compact density
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Deep neutrals with Binance Yellow accent and semantic Bull/Bear colors for directional financial data. 16 tokens.

Obsidian
#0b0e11
Primary page background
Void Black
#000000
Elevated surfaces, modals
Carbon
#1e2329
Cards, panels, sections
Graphite
#2b3139
Borders, dividers
Slate
#3a4150
Inactive states, disabled
Bone White
#eaecef
Primary text, headings
Silver Mist
#b7bdc6
Secondary text, labels
Ash
#848e9c
Placeholders, timestamps
Binance Yellow
#f0b90b
Brand accent, CTAs
Bright Gold
#fcd535
Hover states, highlights
Bull Green
#0ecb81
Price up, buy, positive
Bear Red
#f6465d
Price down, sell, negative
Info Blue
#1e90ff
Links, informational
Depth Violet
#7b61ff
Premium accents
Chart Cyan
#00d4ff
Chart lines, data viz
Typography

Type Scale

Binance Sans (Inter substitute) for UI text. Binance Mono (JetBrains Mono) for all numerical and tabular data. Tight, precise, scannable.

Display-lg Trade 48px / 1.0 / −0.02em
Display BTC/USDT 40px / 1.0 / −0.02em
Heading-lg Spot Trading 28px / 1.2 / −0.02em
Heading Order Book 24px / 1.25 / −0.02em
Body Default body text for readable content 16px / 1.5 / 0
Body-sm Dense data, comparison rows, table cells 14px / 1.5 / 0
Micro Order book entries, trade history 13px / 1.5 / 0.01px
Caption Meta info · Timestamps · Labels 12px / 1.5 / 0.02px

Price Display (Mono)

price-lg $67,234.50
price $67,234.50
price-sm 67,234.50

Fonts

Primary Binance Sans 400–700 · 12–48px
Mono Binance Mono 400–600 · Prices & data only
Fallback Inter Substitute for all above
Layout

Spacing & Shapes

Base unit 4px. Compact density for data-heavy interfaces. 13-step spacing scale, 4 border radius values — all sharp.

Spacing Scale (4px base)

22px
44px
66px
88px
1212px
1616px
2424px
3232px
4848px
8080px

Border Radius

sm 2px
default 4px
lg 8px
pill 500px
Elevation

Depth & Surfaces

Flat, functional surfaces. No shadows or glows — elevation through color differentiation only.

Depth Levels

Obsidian
Base page background — the canvas
Level 0
Carbon
Cards, panels, content sections
Level 1
Graphite
Elevated panels, modals, popovers
Level 2
Void Black
Deepest layer, fullscreen overlays
Level 3

Surface System

Obsidian #0b0e11
Carbon #1e2329
Graphite #2b3139
Void Black #000000
Components

Trading UI Elements

Primary yellow CTA, danger red for sell, ghost for secondary. Sharp 4px radius throughout.

Primary Action Button
Buy, trade, deposit — highest visual weight
.btn-primary
Binance Yellow (#F0B90B) background, Obsidian text, 4px radius. Use exclusively for primary trade actions.
Danger Button
Sell, withdraw, destructive actions
.btn-danger
Bear Red (#f6465d) background, Bone White text. Signals sell-side or destructive actions.
Secondary Button
Filters, navigation, tertiary actions
.btn-secondary
Bone White text, Graphite border. For less prominent actions.
Ghost Outline Button
Secondary trade actions
.btn-ghost
Binance Yellow text and border. Clear interactive target without competing with primary yellow fill.
Tab Navigation
Market categories, section switching
.tabs
Spot Margin Futures Options
Active tab: Binance Yellow bottom border, Bone White text. Inactive: Ash text, no border.
Input Field
Trade amount, search, forms
input
Graphite background, Bone White text, 4px radius. Focus state uses Binance Yellow border. Use Mono for numeric inputs.

Data Table

Pair Price 24h Change Volume
BTC/USDT $67,234.50 +2.15% $1.2B
ETH/USDT $3,456.78 -0.82% $580M
BNB/USDT $589.20 +1.43% $320M
SOL/USDT $142.65 +5.67% $890M

Price Ticker Cards

BTC
$67,234.50
+2.15%
ETH
$3,456.78
-0.82%
BNB
$589.20
+1.43%
SOL
$142.65
+5.67%
Guidelines

Do's & Don'ts

Do — Embrace
  • Obsidian (#0b0e11) as primary background
  • Bone White (#eaecef) for all primary text
  • Binance Yellow (#F0B90B) for primary CTAs only
  • Bull Green / Bear Red for directional data
  • Binance Mono for all prices and numbers
  • 4px border radius for sharp, precise UI
  • Compact spacing with clear row separation
Don't — Avoid
  • Binance Yellow for large backgrounds
  • Swapping Bull/Bear color semantics
  • Border radius larger than 8px
  • Decorative shadows or gradient glows
  • Proportional fonts for price data
  • Dense rows without separator borders
  • Font families outside the system