Framework
v1.0.80
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
Daily reward
Empty states
Header
List items
Loaders
Reward ladder
Scrollbars
Separator
Tables
Tooltips
Tournament brackets
NAVIGATION
Accordion
Breadcrumbs
Drawer
Links & hovers
Menu
Navbar
Pagination
Tabs
STATS & NUMBERS
Countdown
Gauge
Icon holder
Progress bars
Stats
Steps
FORM
File inputs
Form example
Radio, checkbox, toggle
Range inputs
Select inputs
Text inputs
CARDS
Brawl cards
Content cards
Mission cards
Tournament cards
EFFECTS
Explosion
Glow
TYPOGRAPHY
Format
Lists
TEMPLATES
Achievements
Brawl info
Footer
Notifications
Colors
references
Base / UI
Base UI
100
ui-100
#F9F9FB
Base UI
200
ui-200
#C6C6DB
Base UI
300
ui-300
#9595B9
Base UI
400
ui-400
#666695
Base UI
500
ui-500
#383870
Base UI
600
ui-600
#2C2C5E
Base UI
700
ui-700
#21214A
Base UI
800
ui-800
#171736
Base UI
850
ui-850
#12122C
Base UI
900
ui-900
#0D0D22
Base / Mono
Base Mono
100
mono-100
#FFFFFF
Base Mono
900
mono-900
#000000
Brand
Brand
500
main
#13F094
Brand / premium
Premium Light
300
premium-300
#FDE268
Premium Medium
500
premium-500
#FBC02D
Premium Dark
700
premium-700
#F9A825
Brand / interaction
Interaction Light
300
interaction-300
#56FFB9
Interaction Medium
500
interaction-500
#14EF94
Interaction Dark
700
interaction-700
#06C977
Decorative
Blue Light
300
blue-300
#4CB5FF
Blue Medium
500
blue-500
#0297FE
Blue Dark
700
blue-700
#0243A8
Purple Light
300
purple-300
#F1ADFF
Purple Medium
500
purple-500
#D254FE
Purple Dark
700
purple-700
#8A24C8
Teal Light
300
teal-300
#2EFFCA
Teal Medium
500
teal-500
#11F7BD
Teal Dark
700
teal-700
#05C996
Decorative / reward
Gold Light
300
gold-300
#FEFA43
Gold Main
500
gold-500
#FFE200
Gold Dark
700
gold-700
#FF9C03
Silver Light
300
silver-300
#D4D5D7
Silver Main
500
silver-500
#AEB1B6
Silver Dark
700
silver-700
#686982
Bronze Light
300
bronze-300
#FAEA94
Bronze Main
500
bronze-500
#F2BE51
Bronze Dark
700
bronze-700
#BC8131
Decorative / gradient
Teal blue
300
gradient-to-r from-teal-500 to-blue-500
Purple blue
500
gradient-to-r from-purple-700 to-blue-500
System
Attention Light
300
attention-300
#FB8C00
Attention Main
500
attention-500
#F57C01
Attention Dark
700
attention-700
#EF6C00
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
Error Light
300
error-300
#FF5958
Error Main
500
error-500
#FF3333
Error Dark
700
error-700
#B32424
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
#EF3E35
League of Legends
500
game-leagueoflegends
#C69549
Rocket League
500
game-rocketleague
#2D71C6
PUBG: BATTLEGROUNDS
500
game-pubg
#F2A900
VALORANT
500
game-valorant
#FF4655