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

#f9f9f9

#f2f2f2

#e5e5e5

#d9d9d9

#cccccc

#bfbfbf

#b2b2b2

#a5a5a5

#999999

#7f7f7f

#727272

#666666

#535353

#404040

#202020

Purple

light-on-brand / purple

#f8f6ff

#f1edff

#e4daff

#d6c8ff

#c9b5ff

#bba3ff

#ae91ff

#a07eff

#936cff

#7847ff

#6c40e5

#6039cc

#4e2ea6

#3c2480

#1e1240

Green

light-on-brand / green

#f5faf6

#ecf5ed

#d8ebdc

#c5e1ca

#b2d7b9

#9ecda7

#8bc395

#78b984

#65af72

#3e9b4f

#388b47

#327c3f

#286533

#1f4e28

#102714

Orange

light-on-brand / orange

#fef8f2

#fef2e5

#fce5cc

#fbd8b2

#facb99

#f9be80

#f7b166

#f6a44d

#f59733

#f27d00

#da7100

#c26400

#9d5100

#793f00

#3d1f00

Blue

light-on-brand / blue

#f2f7fd

#e5f0fb

#cce0f7

#b2d1f3

#99c2ef

#80b2eb

#66a3e8

#4d94e4

#3385e0

#0066d8

#005cc2

#0052ad

#00428c

#00336c

#001a36

Red

light-on-brand / red

#fef2f2

#fce5e5

#facccc

#f7b2b2

#f49999

#f18080

#ef6666

#ec4d4d

#e93333

#e40000

#cd0000

#b60000

#940000

#720000

#390000

Yellow

light-on-brand / yellow

#fffcf2

#fff8e5

#fff2cc

#ffebb2

#ffe599

#ffdf80

#ffd866

#ffd24d

#ffcb33

#ffbe00

#e5ab00

#cc9800

#a67c00

#805f00

#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)

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