Finance Value — Design System
UI Design System · 2025
The visual language and component library behind the Finance Value prototype.
Colour Tokens
Base Surfaces
--background
#f8f9fa
--surface-low
#f3f4f5
--surface-container
#edeeef
--card
#ffffff
Brand & Interactive
--primary
#0e1c2b
--primary-container
#233141
--secondary
#4b607c
--accent
#4a90d9
--tertiary
#1a3149
--primary-fixed-dim
#bac8dc
Semantic
--destructive
#e02424
--muted-foreground
#798596
--on-surface-variant
#798596
--border
#e2e3e4
Sidebar
--sidebar-background
#0e1c2b
--sidebar-foreground
#bac8dc
--sidebar-accent
#233141
Chart
--chart-1
#0e1c2b
--chart-2
#4b607c
--chart-3
#4a90d9
--chart-4
#1a8a7a
--chart-5
#1a3149
Typography
$2.85T
.text-display-lg — Manrope 800 · 3.5rem · tracking -0.02em
Global Tech Corp
.text-headline-sm — Manrope 700 · 1.5rem
Total Shareholder Returns
.text-title-sm — Inter 600 · 1rem
Market share in high-end cloud services expanded 220bps year-over-year.
.text-body-md — Inter 400 · 0.875rem
NASDAQ: GTC · REFINED 2M AGO
.text-label-sm — Inter 500 · 0.6875rem · uppercase · tracking 0.04em
Display / Headings: Manrope — font-display · Body / UI: Inter — font-body
Spacing & Radius
Spacing Scale
Border Radius
Shadows & Effects
Ambient
--shadow-ambient
0 12px 40px rgba(14,28,43,0.06)
Elevated
--shadow-elevated
0 4px 20px rgba(14,28,43,0.08)
Glass Dark
.glass-dark
rgba(35,49,65,0.6) + blur(10px)
Components
Buttons
Form Elements
Badges / Status Chips
Data Card
Total Revenue
$2.85T
+12.3% YoY
Navigation Tabs
Sidebar Row
Revenue growth shows strong momentum across all segments with Q3 outperforming estimates.
Progress Bar
72% complete
Animations
fade-in
accordion-down / up
hover:scale
Iconography