Foundation

Core design tokens and principles that form the foundation of the pawabloX design system.

Color Palette

Defines the brand's core color palette, used to create consistency, hierarchy, and accessible experiences across all products.

Brand UI

Primary brand colors for CTAs, highlights, and key interactions

#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

#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

#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

#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

#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

#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

#FFF1EE

100

#FFDAD4

200

#FFB7AA

300

#FF8976

400

#F86147

500

#CC371B

600

#B02F17

700

#8E2613

800

#6B1D0F

900

#50160B

Brand Colors

Original brand colors with CSS variable names for backward compatibility.

--bp-primary-green

#9CE800

--bp-charcoal

#252A2D

--bp-warning-orange

#FF7A00

--bp-danger-red

#CC371B

--bp-info-blue

#22BFDB

--bp-light-grey

#F2F4F7