World Wise Charts
Design System Reference
Dark mode only · v1 · July 2026
01 — Foundation
Color Tokens
--background
#08090B
oklch(0.14 0.005 250)
Page background
--surface
#0D1012
oklch(0.17 0.006 250)
Cards, chart widget bg
--surface-2
#14171B
oklch(0.205 0.008 250)
Elevated surfaces, table rows
--muted
#191B1D
oklch(0.22 0.006 250)
Muted backgrounds
--secondary
#1A1D20
oklch(0.23 0.008 250)
Secondary buttons
--foreground
#F3F5F7
oklch(0.97 0.005 250)
Primary text
--muted-foreground
#CCD2D6
oklch(0.86 0.010 250)
Secondary / caption text
--primary-foreground
#050607
oklch(0.12 0.005 250)
Text on neon buttons
--neon / --primary
#E3FF00
oklch(0.95 0.22 118)
The accent. Used sparingly.
--neon-soft
#C4DD37
oklch(0.85 0.18 118)
Softer neon for glows
--border
#24272A
oklch(0.27 0.008 250)
Default borders & dividers
--border-strong
#373B3F
oklch(0.35 0.010 250)
Emphasis borders
--danger
#FFA0B9
rgb(255, 160, 185)
Error / destructive states
02 — Typography
Font Families
Display / Headings
Space Grotesk
--font-display
Trade Wise.
Hero H1, section headings, card titles
Body / UI
Inter
--font-sans
Body text.
Paragraphs, descriptions, UI labels
Mono / Labels
Chakra Petch
--font-mono
LIVE · 91%
Eyebrows, tags, prices, nav, CTA buttons
Download fonts
Space Grotesk Google Fonts · Variable · OFL ↗ Inter Google Fonts · Variable · OFL ↗ Chakra Petch Google Fonts · Static · OFL ↗
Hero H1
clamp(2.8rem, 7vw, 6rem)
font-display · weight 600
leading-[0.95] tracking-tight
Trade Wise.
font-display
animate-rise
Section H2
clamp(2rem, 4.4vw, 3.4rem)
font-display · weight 600
leading tight
The AI Edge.
font-display
text-[clamp(...)]
Card Title
22px / 20px
font-display · weight 600
Pattern Recognition
font-display
text-[22px]
Body — Lead
17px · font-sans
leading-relaxed · foreground/85
The trading platform that stops you repeating the same mistake on a bigger position.
font-sans
text-[17px]
Body — Standard
15–16px · font-sans
leading-relaxed · muted-foreground
AI analysis, a real development system, and a clear path to funded capital when your numbers earn it.
font-sans
text-[15px]
Eyebrow / Label
14px · font-mono
uppercase · tracking-[0.11em]
muted-foreground or white/75
Trader Growth · AI · Performance
font-mono
uppercase
tracking-[0.11em]
CTA Button
14px · font-mono · weight 600
uppercase · tracking-[0.08em]
Join the Movement →
font-mono
bg-neon
text-primary-foreground
Ticker / Caption
13px · font-mono
tracking-[0.07–0.09em]
BTCUSDT · BUY · 91%  ETHUSDT · SELL · 89%  SOLUSDT · BUY · 87%
font-mono
text-[13px]
Overline / Tag
11px · font-mono
uppercase · tracking-[0.10–0.14em]
Engineering & Design  ·  Human Resources  ·  Leadership
font-mono
text-[11px]
overline utility
03 — Spacing
Letter Spacing (font-mono contexts)
tracking-[0.07em]
Ticker · Live data
tracking-[0.08em]
CTA buttons · Nav
tracking-[0.09em]
Price labels · Stats
tracking-[0.10em]
Department labels
tracking-[0.11em]
Eyebrow text
tracking-[0.12em]
Small caps · Tags
04 — Utilities
CSS Utility Classes
56 × 56 px grid
.grid-bg
Hero & section backgrounds. 56px cell, border-color at 60%.
22 × 22 px dots
.dot-bg
Alternate background pattern. 22px pitch, border-strong at 80%.
LIVE · BUY · 91%
.neon-text
color: --neon + text-shadow glow at 40% mix. Used on live indicators.
Join the Movement
.neon-border
1px neon border + double box-shadow glow. Outline-style buttons.
Chart Widget
.hairline
1px solid --border. Replaces Tailwind's ring/border utilities for cards.
Trader Growth · AI · Performance
.overline
font-mono, 11px, uppercase, tracking-[0.11em], muted-foreground.
05 — Effects
Shadows & Radius
--shadow-neon
0 0 24px rgba(223,255,0, 0.18)
--shadow-neon-strong
0 0 40px rgba(223,255,0, 0.35)
rounded-none
0
rounded-sm
--radius-sm
rounded-md
--radius-md
rounded-lg
--radius (0.5rem)
rounded-xl
--radius-xl
rounded-full
9999px