Framework
v1.0.116
ABOUT
About
Getting started
COLORS
Introduction
References
TYPOGRAPHY
Introduction
References
ICONS
Introduction
References
BASICS
Animation
Surfaces
ACTIONS
Buttons
Dropdown
Modals
Switch
Toasts
CONTENT
Alert
Avatars
Badge
Carousel
Chat
Checkmarks
Chips
Empty states
Header
List items
Loaders
Reward ladder
Scrollbars
Separator
Tables
Tooltips
NAVIGATION
Accordion
Breadcrumbs
Drawer
Links & hovers
Menu
Navbar
Pagination
Tabs
STATS & NUMBERS
Countdown
Gauge
Icon holder
Progress bars
Stats
Stepper
Steps
FORM
File inputs
Form example
Radio, checkbox, toggle
Range inputs
Select inputs
Text inputs
CARDS
Content
Ladder
Mission
Recap
Tournament
EFFECTS
Explosion
TYPOGRAPHY
Format
Lists
TEMPLATES
Achievements
Battle Pass
Currencies
Daily reward
Footer
Ladder info
Notifications
Tournament brackets
Colors
references
Base / UI
Base UI
100
ui-100
#DEDEE2
Base UI
200
ui-200
#AFB0B9
Base UI
300
ui-300
#81838F
Base UI
400
ui-400
#545665
Base UI
500
ui-500
#27293A
Base UI
600
ui-600
#212333
Base UI
700
ui-700
#1C1D2C
Base UI
800
ui-800
#161825
Base UI
850
ui-850
#11121E
Base UI
900
ui-900
#0C0D16
Base / Mono
Base Mono
100
mono-100
#FFFFFF
Base Mono
900
mono-900
#000000
Brand
Brand
500
main
#F3C351
Brand / premium
Premium Light
300
premium-300
#B07EFF
Premium Medium
500
premium-500
#A372FF
Premium Dark
700
premium-700
#8252D1
Brand / interaction
Interaction Light
300
interaction-300
#FED574
Interaction Medium
500
interaction-500
#F3C351
Interaction Dark
700
interaction-700
#CCA23D
Brand / currencies
Currency #1 Light
300
currency-1-300
#FED574
Currency #1 Medium
500
currency-1-500
#F3C351
Currency #1 Dark
700
currency-1-700
#CCA23D
Currency #2 Light
300
currency-2-300
#FFA9A3
Currency #2 Medium
500
currency-2-500
#FBA09A
Currency #2 Dark
700
currency-2-700
#D17C76
Currency #3 Light
300
currency-3-300
#FFF9E5
Currency #3 Medium
500
currency-3-500
#FFF6E3
Currency #3 Dark
700
currency-3-700
#D1CBB8
Decorative
Blue Light
300
blue-300
#6999FF
Blue Medium
500
blue-500
#5082F2
Blue Dark
700
blue-700
#376CDD
Purple Light
300
purple-300
#B07EFF
Purple Medium
500
purple-500
#A372FF
Purple Dark
700
purple-700
#8252D1
Teal Light
300
teal-300
#69F3BE
Teal Medium
500
teal-500
#4EDDA6
Teal Dark
700
teal-700
#37CC93
Decorative / reward
Gold Light
300
gold-300
#FED574
Gold Main
500
gold-500
#F3C351
Gold Dark
700
gold-700
#CCA23D
Silver Light
300
silver-300
#BCBFC4
Silver Main
500
silver-500
#AEB1B6
Silver Dark
700
silver-700
#8E9196
Bronze Light
300
bronze-300
#B39582
Bronze Main
500
bronze-500
#9C7E6C
Bronze Dark
700
bronze-700
#846655
System
Error Light
300
error-300
#FF6969
Error Main
500
error-500
#F35151
Error Dark
700
error-700
#DD3838
Attention Light
300
attention-300
#FFAF61
Attention Main
500
attention-500
#F39E51
Attention Dark
700
attention-700
#D18135
Success Light
300
success-300
#98EBA8
Success Main
500
success-500
#52DD6C
Success Dark
700
success-700
#1C9935
Info Light
300
info-300
#4CB5FF
Info Main
500
info-500
#0297FE
Info Dark
700
info-700
#0243A8
Disabled Light
300
disabled-300
#565B6B
Disabled Main
500
disabled-500
#343847
Disabled Dark
700
disabled-700
#191A2F
Game
Apex Legends
500
game-apexlegends
#FF3333
CS:GO
500
game-csgo
#F98000
Dota 2
500
game-dota2
#7A1FA1
Fortnite
500
game-fortnite
#5FCEEA
League of Legends
500
game-leagueoflegends
#C69549
Rocket League
500
game-rocketleague
#2D71C6
PUBG: BATTLEGROUNDS
500
game-pubg
#F2A900
VALORANT
500
game-valorant
#FF4655