Semantic colors

Semantic colors are colors that are assigned based on their functional purpose or meaning within a design system, rather than their visual attributes. This helps maintain consistency and ensures clarity when applied across different UI components.

Background

Base

white-1000
gray-100
gray-250
gray-100
gray-200
gray-250
gray-200
gray-250
gray-300
gray-900
gray-800
gray-700
gray-800
gray-700
gray-600
gray-700
gray-600
gray-500

Base Inverse

gray-900
gray-700
gray-600
gray-100
gray-200
gray-250

Brand

blue-sky-600
blue-sky-700
blue-sky-800
blue-sky-100
blue-sky-200
blue-sky-300
blue-sky-900
blue-sky-600
blue-sky-700
blue-sky-800
blue-sky-200
blue-sky-300
blue-sky-400
blue-sky-900

Disabled

gray-200
gray-250
gray-700
gray-400

Alpha

black-400-alpha
white-400-alpha
gray-100-alpha
black-200-alpha
white-200-alpha
gray-200-alpha

Positive

green-900
green-700
green-800
green-100
green-200
green-700
green-800
green-900
green-200
green-300

Warning

apricot-400
apricot-500
apricot-600
apricot-100
apricot-200
apricot-300
apricot-500
apricot-600
apricot-700
apricot-200
apricot-300
apricot-400

Danger

red-600
red-700
red-800
red-100
red-200
red-300
red-700
red-800
red-900
red-200
red-300
red-400

Border

Base

gray-250
gray-300
gray-600
black-1000
white-1000
gray-600
gray-400
gray-250
gray-100
black-1000

Brand

blue-sky-600
blue-sky-500

Disabled

gray-250
gray-600

Positive

green-700
green-500

Warning

apricot-600
apricot-500

Danger

red-600
red-500

Text

Base

Agblack-1000
Aggray-700
Aggray-400
Agblack-1000
Aggray-600
Agwhite-1000
Aggray-200
Aggray-300
Agblack-1000
Aggray-600

Base Inverse

Agwhite-1000
Agwhite-1000
Agblack-1000
Agwhite-1000

Brand

Agblue-sky-600
Agblue-sky-600
Agblue-sky-600
Agmagenta-600
Agblue-sky-400
Agblue-sky-700
Agblue-sky-700
Agmagenta-400

Disabled

Aggray-300
Aggray-300
Aggray-600
Aggray-400

Positive

Aggreen-600
Aggreen-700
Aggreen-500
Aggreen-800

Warning

Agapricot-700
Agapricot-700
Agapricot-500
Agapricot-800

Danger

Agred-600
Agred-700
Agred-500
Agred-800

Icon

Base

black-1000
gray-600
gray-400
black-1000
gray-600
white-1000
gray-200
gray-300
black-1000
gray-600

Base Inverse

white-1000
white-1000
black-1000
white-1000

Brand

blue-sky-600
blue-sky-600
magenta-600
blue-sky-400
blue-sky-700
magenta-400

Disabled

gray-300
gray-300
gray-600
gray-400

Positive

green-600
green-700
green-500
green-800

Warning

apricot-600
apricot-700
apricot-500
apricot-800

Danger

red-600
red-700
red-500
red-800