Design System
A living style guide showcasing our AAA premium gaming UI foundation, built with Tailwind CSS and CSS Variables.
Typography Hierarchy
Display XL
Play Now
Display
Tournaments
Heading 1
Choose Team
Heading 2
Leaderboards
Heading 3
Player Stats
Heading 4
Match Details
Body Large
Compete against players worldwide in real-time football challenges.
Body Normal
Enter the ultimate football arena and build your dream squad today.
Small
By continuing, you agree to our terms of service.
Caption
Verified Account
AAA Gaming Specs
Score Text
4 - 2
HUD Text
Possession
Timer Text
89:45
Color Palette
Brand Semantic
Primary
Secondary
Brand 50
Brand 900
UI Semantics
Success
Warning
Error
Info
Surfaces
Surface Primary
Surface Secondary
Surface Glass
Interactive Elements & Spacing
Buttons (Placeholder)
Shadows & Radii
SM
MD
LG
FULL
Shared UI Component Library (Tasks 014 – 022)
Interactive demonstration of our AAA-grade accessible UI primitives.
Badges & Tags (Task 022)
Live MatchRank #1Quarter-Final98% AccuracyExtra TimeSudden DeathWorld ClassFIFA Verified
Penalty ShootoutTrivia MasterDismissable Filter ✕
Input Component (Task 017)
Must be 3-16 characters without spaces
Select Component with Keyboard Nav (Task 018)
Arrow keys navigate, Enter selects, Escape closes
Modal Dialog (Task 016)
Features focus-trap, ESC keyboard listener, background scroll lock, and ARIA roles.
Toast Notifications (Task 019)
Auto-dismissing notifications with animated entrance and exit.