Design System

Trade with
precision.

A deep-space crypto cockpit with purple-drenched accents, compact data density, and a palette built for fast scanning under pressure.

18 color tokens 17 type steps 4px grid 4 surface levels Compact density
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Deep navy-purple surfaces with electric accent colors. 18 tokens across base surfaces, text, interaction, directional data, and decorative gradients.

Abyss
#1A1A2E
Primary page background
Void
#0F0F1A
Elevated surfaces, modals
Slate Depth
#16162A
Card backgrounds, sections
Border Dark
#2A2A40
Borders, dividers
Border Light
#3A3A55
Inactive borders, hints
Arctic White
#FFFFFF
Primary text, icons
Silver Mist
#E0E0F0
Secondary text
Steel Gray
#8888A0
Placeholders, labels
Ghost Gray
#5C5C7A
Disabled, captions
Kraken Purple
#7B61FF
Primary accent, buttons, links
Electric Violet
#9B7DFF
Hover states, gradients
Neon Cyan
#00D4FF
Data highlights, charts
Profit Green
#00C853
Positive movement, buy
Loss Red
#FF3B5C
Negative movement, sell
Warning Amber
#FFB300
Caution, pending states

Gradients

purple-glow
Ambient glow behind hero graphics
cyan-pulse
Data visualization ambient glow
gradient-purple
Button fills, accent highlights
Typography

Type Scale

Inter as primary typeface with Inter Mono for financial data. Compact scale optimized for dense trading interfaces.

Display-lg Trade with precision 48px / 1.0 / -0.03em
Display Build your portfolio 40px / 1.1 / -0.03px
Heading-lg Market Overview 32px / 1.1 / -0.02px
Heading Trading Pairs 24px / 1.2 / -0.02px
Subheading Portfolio Summary 18px / 1.4 / -0.01px
Body Default body text for readable content 16px / 1.5 / 0
Body-sm Dense data, comparison rows, tables 14px / 1.5 / 0
Label Form labels · Nav items 13px / 1.4 / 0.02px
Caption Helper text · Footnotes · Metadata 12px / 1.5 / 0.04px
Micro BADGES · TAGS · LABELS 11px / 1.4 / 0.06px

Fonts

Primary Inter 400-700 · 11-18px
Mono Inter Mono 400-700 · 12-16px · Prices, addresses, hashes
Layout

Spacing & Shapes

Base unit 4px. Compact density for data-dense trading interfaces. 14-step spacing scale, 6 border radius values.

Spacing Scale (4px base)

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

Border Radius

badge 4px
default 6px
buttons 8px
cards 12px
pill 9999px
Elevation

Depth & Surfaces

Subtle borders over heavy shadows. Translucent overlays for modals. 4 distinct surface levels in the deep navy-purple range.

Depth Levels

Abyss
Base page background — the canvas
Level 0
Slate Depth
Secondary sections, card backgrounds
Level 1
Void
Elevated panels, modals, deepest surfaces
Level 2
Translucent Overlay
Modals, drawers, frosted overlays
Level 3

Surface System

Abyss #1A1A2E
Slate Depth #16162A
Void #0F0F1A
Overlay rgba(15,15,26,.85)
Components

Button Variants

Primary purple for main actions, ghost for secondary, and outlined for tertiary interaction hierarchies.

Primary Purple Button
Main call to action — trade, sign up
.btn-primary
Kraken Purple (#7B61FF) background, Arctic White text, 8px radius. Use for the single most important action per screen.
Ghost Button
Secondary actions, filters
.btn-ghost
Kraken Purple text, Kraken Purple border, 8px radius. Clear interactive target without competing with primary.
Secondary Button
Tertiary actions, navigation
.btn-secondary
Arctic White text, Border Dark outline. For less prominent actions that still need visual presence.
Input Field
Trade amount, search, wallet address
input
Transparent background, Arctic White text, 8px radius. Focus state uses Kraken Purple border. Placeholder in Steel Gray.
Data

Trading Data Display

Dense tabular data with monospace prices, directional color coding, and compact row spacing for fast scanning.

Pair Price 24h Change Volume Market Cap
BTC/USD $67,234.50 +2.41% $1.2B $1.32T
ETH/USD $3,521.80 +1.87% $680M $423B
SOL/USD $178.45 -0.94% $320M $78B
XRP/USD $0.6234 +5.12% $1.8B $34B
ADA/USD $0.4812 -2.31% $890M $17B
Guidelines

Do's & Don'ts

Do — Embrace
  • Abyss (#1A1A2E) as primary background for all trading UIs
  • Kraken Purple (#7B61FF) for primary interactive elements only
  • Profit Green / Loss Red exclusively for directional price data
  • Inter Mono for all numerical data requiring alignment
  • Compact density with 4px-based spacing for dense data
  • Subtle borders (Border Dark) over heavy shadows
  • Arctic White (#FFFFFF) for all primary text
Don't — Avoid
  • Green/red for non-directional UI (buttons, links, decorations)
  • Bright saturated backgrounds outside deep navy-purple
  • Generic grays for borders — use Border Dark/Light tokens
  • Serif or decorative fonts — stick to Inter / Inter Mono
  • Overly spacious layouts that waste screen real estate
  • Kraken Purple for error/negative states
  • Hard corners on cards or buttons — keep 8-12px radius