Foundations

Color Palette

A set of core colors that stay consistent across themes, alongside themeable colors that adapt seamlessly to the active theme.

gray

gray-0

var(--gray-0)

gray-50

var(--gray-50)

gray-100

var(--gray-100)

gray-200

var(--gray-200)

gray-300

var(--gray-300)

gray-400

var(--gray-400)

gray-500

var(--gray-500)

gray-600

var(--gray-600)

gray-700

var(--gray-700)

gray-800

var(--gray-800)

gray-900

var(--gray-900)

gray-950

var(--gray-950)

gray Alpha

gray-alpha-24

var(--gray-alpha-24)

gray-alpha-16

var(--gray-alpha-16)

gray-alpha-10

var(--gray-alpha-10)

slate

slate-0

var(--slate-0)

slate-50

var(--slate-50)

slate-100

var(--slate-100)

slate-200

var(--slate-200)

slate-300

var(--slate-300)

slate-400

var(--slate-400)

slate-500

var(--slate-500)

slate-600

var(--slate-600)

slate-700

var(--slate-700)

slate-800

var(--slate-800)

slate-900

var(--slate-900)

slate-950

var(--slate-950)

slate Alpha

slate-alpha-24

var(--slate-alpha-24)

slate-alpha-16

var(--slate-alpha-16)

slate-alpha-10

var(--slate-alpha-10)

blue

blue-50

var(--blue-50)

blue-100

var(--blue-100)

blue-200

var(--blue-200)

blue-300

var(--blue-300)

blue-400

var(--blue-400)

blue-500

var(--blue-500)

blue-600

var(--blue-600)

blue-700

var(--blue-700)

blue-800

var(--blue-800)

blue-900

var(--blue-900)

blue-950

var(--blue-950)

blue Alpha

blue-alpha-24

var(--blue-alpha-24)

blue-alpha-16

var(--blue-alpha-16)

blue-alpha-10

var(--blue-alpha-10)

orange

orange-50

var(--orange-50)

orange-100

var(--orange-100)

orange-200

var(--orange-200)

orange-300

var(--orange-300)

orange-400

var(--orange-400)

orange-500

var(--orange-500)

orange-600

var(--orange-600)

orange-700

var(--orange-700)

orange-800

var(--orange-800)

orange-900

var(--orange-900)

orange-950

var(--orange-950)

orange Alpha

orange-alpha-24

var(--orange-alpha-24)

orange-alpha-16

var(--orange-alpha-16)

orange-alpha-10

var(--orange-alpha-10)

red

red-50

var(--red-50)

red-100

var(--red-100)

red-200

var(--red-200)

red-300

var(--red-300)

red-400

var(--red-400)

red-500

var(--red-500)

red-600

var(--red-600)

red-700

var(--red-700)

red-800

var(--red-800)

red-900

var(--red-900)

red-950

var(--red-950)

red Alpha

red-alpha-24

var(--red-alpha-24)

red-alpha-16

var(--red-alpha-16)

red-alpha-10

var(--red-alpha-10)

green

green-50

var(--green-50)

green-100

var(--green-100)

green-200

var(--green-200)

green-300

var(--green-300)

green-400

var(--green-400)

green-500

var(--green-500)

green-600

var(--green-600)

green-700

var(--green-700)

green-800

var(--green-800)

green-900

var(--green-900)

green-950

var(--green-950)

green Alpha

green-alpha-24

var(--green-alpha-24)

green-alpha-16

var(--green-alpha-16)

green-alpha-10

var(--green-alpha-10)

yellow

yellow-50

var(--yellow-50)

yellow-100

var(--yellow-100)

yellow-200

var(--yellow-200)

yellow-300

var(--yellow-300)

yellow-400

var(--yellow-400)

yellow-500

var(--yellow-500)

yellow-600

var(--yellow-600)

yellow-700

var(--yellow-700)

yellow-800

var(--yellow-800)

yellow-900

var(--yellow-900)

yellow-950

var(--yellow-950)

yellow Alpha

yellow-alpha-24

var(--yellow-alpha-24)

yellow-alpha-16

var(--yellow-alpha-16)

yellow-alpha-10

var(--yellow-alpha-10)

purple

purple-50

var(--purple-50)

purple-100

var(--purple-100)

purple-200

var(--purple-200)

purple-300

var(--purple-300)

purple-400

var(--purple-400)

purple-500

var(--purple-500)

purple-600

var(--purple-600)

purple-700

var(--purple-700)

purple-800

var(--purple-800)

purple-900

var(--purple-900)

purple-950

var(--purple-950)

purple Alpha

purple-alpha-24

var(--purple-alpha-24)

purple-alpha-16

var(--purple-alpha-16)

purple-alpha-10

var(--purple-alpha-10)

sky

sky-50

var(--sky-50)

sky-100

var(--sky-100)

sky-200

var(--sky-200)

sky-300

var(--sky-300)

sky-400

var(--sky-400)

sky-500

var(--sky-500)

sky-600

var(--sky-600)

sky-700

var(--sky-700)

sky-800

var(--sky-800)

sky-900

var(--sky-900)

sky-950

var(--sky-950)

sky Alpha

sky-alpha-24

var(--sky-alpha-24)

sky-alpha-16

var(--sky-alpha-16)

sky-alpha-10

var(--sky-alpha-10)

pink

pink-50

var(--pink-50)

pink-100

var(--pink-100)

pink-200

var(--pink-200)

pink-300

var(--pink-300)

pink-400

var(--pink-400)

pink-500

var(--pink-500)

pink-600

var(--pink-600)

pink-700

var(--pink-700)

pink-800

var(--pink-800)

pink-900

var(--pink-900)

pink-950

var(--pink-950)

pink Alpha

pink-alpha-24

var(--pink-alpha-24)

pink-alpha-16

var(--pink-alpha-16)

pink-alpha-10

var(--pink-alpha-10)

teal

teal-50

var(--teal-50)

teal-100

var(--teal-100)

teal-200

var(--teal-200)

teal-300

var(--teal-300)

teal-400

var(--teal-400)

teal-500

var(--teal-500)

teal-600

var(--teal-600)

teal-700

var(--teal-700)

teal-800

var(--teal-800)

teal-900

var(--teal-900)

teal-950

var(--teal-950)

teal Alpha

teal-alpha-24

var(--teal-alpha-24)

teal-alpha-16

var(--teal-alpha-16)

teal-alpha-10

var(--teal-alpha-10)

static

static-black

var(--static-black)

static-white

var(--static-white)

neutral

neutral-0

var(--neutral-0)

neutral-50

var(--neutral-50)

neutral-100

var(--neutral-100)

neutral-200

var(--neutral-200)

neutral-300

var(--neutral-300)

neutral-400

var(--neutral-400)

neutral-500

var(--neutral-500)

neutral-600

var(--neutral-600)

neutral-700

var(--neutral-700)

neutral-800

var(--neutral-800)

neutral-900

var(--neutral-900)

neutral-950

var(--neutral-950)

neutral Alpha

neutral-alpha-24

var(--neutral-alpha-24)

neutral-alpha-16

var(--neutral-alpha-16)

neutral-alpha-10

var(--neutral-alpha-10)

text

text-strong-950

var(--text-strong-950)

text-sub-600

var(--text-sub-600)

text-soft-400

var(--text-soft-400)

text-disabled-300

var(--text-disabled-300)

text-white-0

var(--text-white-0)

bg-strong-950

var(--bg-strong-950)

bg-surface-800

var(--bg-surface-800)

bg-sub-300

var(--bg-sub-300)

bg-soft-200

var(--bg-soft-200)

bg-weak-50

var(--bg-weak-50)

bg-white-0

var(--bg-white-0)

stroke

stroke-strong-950

var(--stroke-strong-950)

stroke-sub-300

var(--stroke-sub-300)

stroke-soft-200

var(--stroke-soft-200)

stroke-white-0

var(--stroke-white-0)

primary

primary-dark

var(--primary-dark)

primary-darker

var(--primary-darker)

primary-base

var(--primary-base)

primary Alpha

primary-alpha-24

var(--primary-alpha-24)

primary-alpha-16

var(--primary-alpha-16)

primary-alpha-10

var(--primary-alpha-10)

faded

faded-dark

var(--faded-dark)

faded-base

var(--faded-base)

faded-light

var(--faded-light)

faded-lighter

var(--faded-lighter)

information

information-dark

var(--information-dark)

information-base

var(--information-base)

information-light

var(--information-light)

information-lighter

var(--information-lighter)

warning

warning-dark

var(--warning-dark)

warning-base

var(--warning-base)

warning-light

var(--warning-light)

warning-lighter

var(--warning-lighter)

error

error-dark

var(--error-dark)

error-base

var(--error-base)

error-light

var(--error-light)

error-lighter

var(--error-lighter)

success

success-dark

var(--success-dark)

success-base

var(--success-base)

success-light

var(--success-light)

success-lighter

var(--success-lighter)

away

away-dark

var(--away-dark)

away-base

var(--away-base)

away-light

var(--away-light)

away-lighter

var(--away-lighter)

feature

feature-dark

var(--feature-dark)

feature-base

var(--feature-base)

feature-light

var(--feature-light)

feature-lighter

var(--feature-lighter)

verified

verified-dark

var(--verified-dark)

verified-base

var(--verified-base)

verified-light

var(--verified-light)

verified-lighter

var(--verified-lighter)

highlighted

highlighted-dark

var(--highlighted-dark)

highlighted-base

var(--highlighted-base)

highlighted-light

var(--highlighted-light)

highlighted-lighter

var(--highlighted-lighter)

stable

stable-dark

var(--stable-dark)

stable-base

var(--stable-base)

stable-light

var(--stable-light)

stable-lighter

var(--stable-lighter)

social

social-apple

var(--social-apple)

social-twitter

var(--social-twitter)

social-github

var(--social-github)

social-notion

var(--social-notion)

social-tidal

var(--social-tidal)

social-amazon

var(--social-amazon)

social-zendesk

var(--social-zendesk)

Getting Started

All Products

Foundations

All Components

Color Palette