Color Palette

Here is your color palette, which reflects the state in the Primitives section and is applied to the Theme tokens.

These raw values are mapped to design tokens, which are then used throughout the system to ensure consistency. Palette is entirely under the user’s control, allowing you to define and adjust them to align with your brand’s unique requirements.

Our color palette is built on a foundation of essential and widely-used colors in design. Each color scale is thoughtfully crafted with accessibility in mind, ensuring usability for a diverse range of users. Each scale includes nine lighter shades (100-900) and five darker variations (1100-1500) of the base color (1000), providing flexibility and depth for consistent, accessible design across all components.

Cloudy

light-on-brand / cloudy

100

#f9f9f9

200

#f2f2f2

300

#e5e5e5

400

#d9d9d9

500

#cccccc

600

#bfbfbf

700

#b2b2b2

800

#a5a5a5

900

#999999

1000

#7f7f7f

1100

#727272

1200

#666666

1300

#535353

1400

#404040

1500

#202020

Purple

light-on-brand / purple

100

#f8f6ff

200

#f1edff

300

#e4daff

400

#d6c8ff

500

#c9b5ff

600

#bba3ff

700

#ae91ff

800

#a07eff

900

#936cff

1000

#7847ff

1100

#6c40e5

1200

#6039cc

1300

#4e2ea6

1400

#3c2480

1500

#1e1240

Green

light-on-brand / green

100

#f5faf6

200

#ecf5ed

300

#d8ebdc

400

#c5e1ca

500

#b2d7b9

600

#9ecda7

700

#8bc395

800

#78b984

900

#65af72

1000

#3e9b4f

1100

#388b47

1200

#327c3f

1300

#286533

1400

#1f4e28

1500

#102714

Orange

light-on-brand / orange

100

#fef8f2

200

#fef2e5

300

#fce5cc

400

#fbd8b2

500

#facb99

600

#f9be80

700

#f7b166

800

#f6a44d

900

#f59733

1000

#f27d00

1100

#da7100

1200

#c26400

1300

#9d5100

1400

#793f00

1500

#3d1f00

Blue

light-on-brand / blue

100

#f2f7fd

200

#e5f0fb

300

#cce0f7

400

#b2d1f3

500

#99c2ef

600

#80b2eb

700

#66a3e8

800

#4d94e4

900

#3385e0

1000

#0066d8

1100

#005cc2

1200

#0052ad

1300

#00428c

1400

#00336c

1500

#001a36

Red

light-on-brand / red

100

#fef2f2

200

#fce5e5

300

#facccc

400

#f7b2b2

500

#f49999

600

#f18080

700

#ef6666

800

#ec4d4d

900

#e93333

1000

#e40000

1100

#cd0000

1200

#b60000

1300

#940000

1400

#720000

1500

#390000

Yellow

light-on-brand / yellow

100

#fffcf2

200

#fff8e5

300

#fff2cc

400

#ffebb2

500

#ffe599

600

#ffdf80

700

#ffd866

800

#ffd24d

900

#ffcb33

1000

#ffbe00

1100

#e5ab00

1200

#cc9800

1300

#a67c00

1400

#805f00

1500

#403000

Alpha

Our palette includes a range of black and white colors with opacity levels from 0% to 50%. These transparent shades are used for elements like modal backgrounds, hover states, and other overlay effects, providing subtle depth and layering while maintaining a cohesive design aesthetic.

Alpha-dark

light-on-brand / alpha-dark

rgba(26,27,27,0)

100

rgba(26,27,27,0.05)

200

rgba(26,27,27,0.1)

300

rgba(26,27,27,0.15)

400

rgba(26,27,27,0.2)

500

rgba(26,27,27,0.25)

600

rgba(26,27,27,0.3)

700

rgba(26,27,27,0.35)

800

rgba(26,27,27,0.4)

900

rgba(26,27,27,0.45)

1000

rgba(26,27,27,0.5)

1100

rgba(26,27,27,0.55)

Alpha-light

light-on-brand / alpha-light

rgba(255,255,255,0)

100

rgba(255,255,255,0.05)

200

rgba(255,255,255,0.1)

300

rgba(255,255,255,0.15)

400

rgba(255,255,255,0.2)

500

rgba(255,255,255,0.25)

600

rgba(255,255,255,0.3)

700

rgba(255,255,255,0.35)

800

rgba(255,255,255,0.4)

900

rgba(255,255,255,0.45)

1000

rgba(255,255,255,0.5)

Theme Tokens

See how Theme Tokens work