Design System v1.0
Build with clarity
A minimal, dark-first design system built on rgba(5, 158, 209) and deep charcoal surfaces.
Color Palette
Core blue scale from 50 → 900 opacity steps, plus surface and semantic colors.
Blue Scale
Surfaces
Semantic
● Success
● Warning
● Danger
● Info
● Outline
Gradients
All gradients derive from the primary blue for a cohesive look.
Blue Soft--ds-grad-blue-soft
Blue Radial--ds-grad-blue-radial
Typography
Inter for UI, JetBrains Mono for data and code.
4xlDisplay Heading
3xlPage Heading
2xlSection Title
xlCard Title
lgSubtitle text for descriptions
baseBody text — the default paragraph style for reading.
smSmall text for captions and metadata
mono$48,290.37 ↑ 12.5%
Buttons
Three variants, three sizes. Gradient primary with glow on hover.
Primary
Secondary
Ghost
Stat Cards
KPI tiles with monospace numbers and delta indicators.
Total Revenue$48,290↑ 12.5%
Table
| Symbol | Price | Change | Volume | Status |
|---|
| AAPL | $198.42 | ↑ 2.14% | 54.2M | Active |
| TSLA | $241.87 | ↓ 1.38% | 98.7M | Active |
| NVDA | $878.34 | ↑ 5.62% | 42.1M | Active |
| META | $502.19 | ↓ 0.73% | 18.3M | Paused |
| AMZN | $182.56 | ↑ 1.29% | 31.9M | Active |
Avatars & Tags
TagsReactTypeScriptVuePythonFeatured
Feature Cards
Combining surfaces, gradients, and typography into real UI patterns.
Layered Architecture
Token-based surfaces stack cleanly. Cards, overlays, and popovers maintain clear depth hierarchy.
Accessible Contrast
Four foreground tiers ensure readability without harsh whites on dark surfaces.
One Blue, Infinite Shades
Every accent derives from a single rgba(5,158,209) root — no palette drift.
Pricing Card
- All strategy modules
- Real-time market data
- Option walls and dark pools
- Factor and cluster analytics
- Priority support
Notifications
ℹ
Deployment started
Your changes are being deployed to production.
✓
Payment received
Invoice #4821 has been paid successfully.
!
Build failed
Check the logs for error details.