Design System Test
Typography
Display Large - Aeonik TRIAL 57/64
The quick brown fox
Display Medium - Aeonik TRIAL 45/52
The quick brown fox
Headline Large - Aeonik TRIAL Bold 32/40
The quick brown fox jumps
Body Large - Aeonik TRIAL 16/24
The quick brown fox jumps over the lazy dog. Typography should be clear and readable.
Game Numbers - Oxanium
1234567890
Game Accent - Jersey 10
JACKPOT WIN!
Primary Colors (Yellow)
P-0
P-10
P-20
P-30
P-40
P-50
P-60
P-70
P-80
P-90
P-95
P-99
P-100
Neutral Colors (Grayscale)
N-0
N-10
N-20
N-30
N-40
N-50
N-60
N-70
N-80
N-90
N-95
N-99
N-100
Semantic Colors
Primary
On Primary Text
Primary Container
On Primary Container Text
Secondary
On Secondary Text
Secondary Container
On Secondary Container Text
Surface Variants
Surface Dim
Surface
Surface Bright
Surface Container
Buttons
Buttons help people take actions, such as sending an email, sharing a document, or liking a comment.
Primary
Secondary
Text
Success
Outline
Form Inputs
Form input components with various states and features from Figma design.
Text Inputs
We'll never share your email
Invalid email format
Dropdown
This field is required
Please select a valid option
Password Inputs
Your password is encrypted
Password must be at least 8 characters
Password Creation
Password must contain the following:
Complete Form Example
Dialogs
Modal dialog components with various configurations from Figma design.
Navbar
Navigation bar components with authentication states and responsive behavior.
Test Page
3Features:
- Responsive layout (mobile, tablet, desktop breakpoints)
- Authentication states (signed in vs signed out)
- Balance display with deposit button
- Navigation links: Games, Rewards, Leaderboard
- Focus bar for mobile inner pages
- Mobile hamburger menu
- Accessible keyboard navigation