DESIGN SYSTEM V3
RIOT-INSPIRED COMPONENT TOKENS
Interactive style guide demonstrating exact adherence to the design brief specifications, CSS variables, and responsive UI components.
1. Color Tokens & CSS Variables
Standard design brief tokens mapped to CSS variables in globals.css
Riot Red
#D13639--color-riot-red
Riot Red Dark
#B52B2E--color-riot-red-dark
Near-Black
#111111--color-near-black
White
#FFFFFF--background
Light Section
#F2F2F2--color-light-section
Card Gray
#EDEDED--color-card-gray
Muted Gray
#6B6B6B--color-muted-gray
Hextech Gold
#C4A15B--color-hex-gold
2. Typography Scale
Archivo Black for dominant headings, Oswald for uppercase subheaders, and Inter for clean body copy.
Heading 9XL (Hero) / Archivo Black
CYRONIC STUDIO
Heading 4XL (Section Titles) / Archivo Black
WE BUILD ENGINE TECH. YOU SHIP GREAT GAMES.
Subheading / Oswald Uppercase Tracking-Widest
HIGH-PERFORMANCE GAME DEV & CONSOLE PORTING
Body Text / Inter
From early vertical slice prototyping to post-launch live-ops support, we write robust engine code, handle player movement physics, UI implementation, and server networking.
3. Button Variants & Badges
Signature fully rounded red pill, bold uppercase, prefixed with “/ ” slash token.
Primary Pill Button Token Variants
Badge Tokens
GAME DEVUNREAL 5.4OPEN SOURCEFEATURED CASECERTIFIED PS5
4. Stat Callout Boxes
Light-gray rounded boxes with large bold numbers and small plain labels (clean, modern, without glowing borders).
164/ Open Positions
24+/ Titles Shipped
50M+/ Active Players
Dark Background Stat Box Variant
100%/ First-Pass Pass
<12s/ Delta Validation
0.01%/ Crash Rate