Foundation
Core design tokens and principles that form the foundation of the pawabloX design system.
Brand UI
Primary brand colors for CTAs, highlights, and key interactions
50
#F5FEE4
100
#E6FCB8
200
#D2FAA8
300
#BEF789
400
#A2F42C
500
#9CE800
600
#80C63F
700
#76AC08
800
#588506
900
#0B5504
Neutral UI
Grayscale colors for text, backgrounds, and borders
50
#FFFFFF
100
#F2F2F3
200
#E4E6E7
300
#CACBCE
400
#AAAEB0
500
#7A8185
600
#484F52
700
#2F3437
800
#252A2D
900
#171A1C
Orange
Warning colors for hot tags, boosted odds, and alerts
50
#FFF5E6
100
#FFE3BF
200
#FFCD94
300
#FFB368
400
#FF9940
500
#FF7A00
600
#CC6200
700
#994D00
800
#813D00
900
#633000
Purple
Accent colors for special features and promotions
50
#F3E8FD
100
#E0D1FB
200
#CDA3F8
300
#B576F4
400
#9C48F1
500
#831AED
600
#6915BE
700
#4F108E
800
#430B7A
900
#340A5F
Teal
Info colors for links, information banners, and success states
50
#E9F8FB
100
#D3F2F8
200
#A6E6F1
300
#7AD9EA
400
#4DCDE3
500
#22BFDB
600
#1CA4BA
700
#158599
800
#0F6578
900
#0A4B5A
Yellow
Attention colors for highlights and important information
50
#FFF9E6
100
#FFEEC2
200
#FFE192
300
#FFD161
400
#FFC133
500
#FFBA0C
600
#DB9C09
700
#B57F05
800
#8C6103
900
#684902
Red
Error colors for danger states, loss indicators, and critical alerts
50
#FFF1EE
100
#FFDAD4
200
#FFB7AA
300
#FF8976
400
#F86147
500
#CC371B
600
#B02F17
700
#8E2613
800
#6B1D0F
900
#50160B
--bp-primary-green
#9CE800
--bp-charcoal
#252A2D
--bp-warning-orange
#FF7A00
--bp-danger-red
#CC371B
--bp-info-blue
#22BFDB
--bp-light-grey
#F2F4F7