ShadoU Design System
Component Library · v1.0 · Dark Theme · April 2026
🎨 Color Palette
Primary brand colors with semantic usage
📝 Typography
Inter font family with weight scale
Display — Inter 900 — 36px
Heading 1 — Inter 800 — 24px
Heading 2 — Inter 700 — 18px
Heading 3 — Inter 600 — 15px
Body — Inter 500 — 14px
Body Small — Inter 400 — 13px
Caption — Inter 600 — 11px Uppercase
Micro — Inter 500 — 10px
🔘 Buttons
Primary actions, secondary, ghost, icon, danger, and success variants
Book/Purchase
📋 Input Fields
Search, text input, dropdown selectors
Search Input
Search athletes, routes...
Dropdown
🃏 Cards
Activity, post, marketplace, and stat card variants
Activity Card
AJ
Ana Jamnik
🏃 Morning Run · 42m ago
Stat Card
Distance
10.24
kilometers
Marketplace Listing
PK
Coach Petra Kos
Marathon Specialist
★★★★★ (234)
2:42 marathon PR · 147 athletes coached
🏷️ Badges
Sport icons, achievements, performance scores, status indicators
Sport Badges
🏃 Running
🚴 Cycling
🚣 Rowing
⛷️ XC Skiing
🏋️ Gym
Performance Scores
Score 87
Score 94
Score 79
Status Badges
● Online
● Live
Pro Athlete
👤 Avatars
Small (28px), Medium (40px), Large (64px) with gradient backgrounds
💰 Token Display
ŠADO token formatting, coin icon, and display variants
Inline Token
Š 4,832 ŠADO
Rate Display
10 Š/km × 1.25 spd × 1.38 grade = 17.3 Š/km
🧭 Navigation
Desktop sidebar, top bar, and mobile bottom navigation
Top Bar
Search athletes, routes...
Tabs
Bottom Nav (Mobile)
📊 Data Visualization
Line charts, bar charts, progress rings, and donut charts
💬 Modals
Confirmation dialogs and token transfer modals
Send ŠADO Tokens
End Activity?
You ran 5.82 km in 27:48. This activity will earn approximately 83 ŠADO tokens.
🏋️ Sport-Specific Stat Blocks
Metric display adapted per sport with correct units
⚡ Scoring Visualization
ŠADO token earning calculation breakdown
Full Scoring Breakdown
Š
ŠADO Performance Scoring
Base Rate
10.0 ŠADO/km
Speed Factor
× 1.25
Grade / Elevation Factor
× 1.38
Consistency Bonus
× 1.05
Effective Rate
18.1 ŠADO/km
10.24 km × 18.1 Š/km
185 ŠADO
Formula: base_rate × speed_factor × grade_factor × consistency × distance = total ŠADO
📐 Spacing & Grid
4px base unit, consistent spacing scale