Source: specs/ux/tokens/Light.tokens.json.
Color tokens use the --color-* naming pattern and map semantic UI roles to foundation color primitives from specs/ux/foundations/color.md.
If a primitive changes in specs/ux/foundations/color.md, update the matching semantic token in this file.
Primitive color scales from the source JSON, such as purple.100, mint.500, or red.250, are not duplicated here because they are documented in specs/ux/foundations/color.md.
Usage
Use color tokens for:
colorbackgroundborder-color- icon fills and strokes
- component state colors
Token Mapping
Text And Icon
| CSS Token |
Source Token |
Foundation Primitive |
Value |
--color-text-icon-primary |
text icon.primary |
black.800 |
#242429 |
--color-text-icon-primary-inverted |
text icon.primaryInverted |
alpha.light.100 |
#FFFFFF |
--color-text-icon-secondary |
text icon.secondary |
gray.500 |
#8F8FA3 |
--color-text-icon-tertiary |
text icon.tertiary |
gray.300 |
#C4C4D4 |
--color-text-icon-accent |
text icon.accent |
purple.500 |
#7F30E3 |
--color-text-icon-accent-inverted |
text icon.accentInverted |
purple.300 |
#C3A6FF |
--color-text-icon-success |
text icon.success |
green.500 |
#1DAF66 |
--color-text-icon-success-inverted |
text icon.successInverted |
green.400 |
#1DCB74 |
--color-text-icon-warning |
text icon.warning |
orange.500 |
#FF8533 |
--color-text-icon-warning-inverted |
text icon.warningInverted |
orange.350 |
#FF973C |
--color-text-icon-danger |
text icon.danger |
red.500 |
#FA2B55 |
--color-text-icon-danger-inverted |
text icon.dangerInverted |
red.400 |
#FF4760 |
--color-text-icon-black-contrast |
text icon.blackContr |
black.800 |
#242429 |
--color-text-icon-white-constant |
text icon.whiteConst |
alpha.light.100 |
#FFFFFF |
Background
| CSS Token |
Source Token |
Foundation Primitive |
Value |
--color-background-level-1 |
bg.level-1 |
gray.100 |
#F6F6F9 |
--color-background-level-1-base |
bg.level 1 base |
alpha.light.100 |
#FFFFFF |
--color-background-level-1-base-inverted |
bg.level 1 base (dark mode) |
black.900 |
#18181B |
--color-background-level-2 |
bg.level2 |
gray.100 |
#F6F6F9 |
--color-background-dropdown |
bg.dropdown |
alpha.light.100 |
#FFFFFF |
--color-background-dropdown-hover |
bg.dropdown hover |
gray.100 |
#F6F6F9 |
--color-background-dropdown-active |
bg.dropdown active |
- |
#F0F0F5 |
--color-background-accent |
bg.accent |
purple.500 |
#7F30E3 |
--color-background-accent-secondary |
bg.accent sec |
purple.100 |
#F2E6FE |
--color-background-accent-secondary-hover |
bg.accent sec hover |
purple.150 |
#EDD8FF |
--color-background-accent-secondary-pressed |
bg.accent sec pressed |
purple.200 |
#E2CFFC |
--color-background-accent-secondary-inverted |
bg.accent sec inverted |
purple.900 |
#2F2640 |
--color-background-tooltip |
bg.tooltip |
- |
rgba(24, 24, 27, 0.9) |
--color-background-toast |
bg.toast |
black.900 |
#18181B |
--color-background-white-contrast |
bg.whiteContr |
alpha.light.100 |
#FFFFFF |
--color-background-black-contrast |
bg.blackContr |
- |
#000000 |
Stroke
| CSS Token |
Source Token |
Foundation Primitive |
Value |
--color-stroke-accent |
stroke.accent |
purple.500 |
#7F30E3 |
--color-stroke-secondary |
stroke.secondary |
gray.200 |
#E0E0EB |
--color-stroke-secondary-inverted |
stroke.secondary (dark mode) |
gray.900 |
#2F2F37 |
--color-stroke-white-contrast |
stroke.whiteContr |
alpha.light.100 |
#FFFFFF |
--color-stroke-black-contrast |
stroke.blackContr |
black.900 |
#18181B |
--color-stroke-danger |
stroke.danger |
red.500 |
#FA2B55 |
--color-stroke-contrast-inverted |
stroke.contrastInverted |
alpha.light.100 |
#FFFFFF |
--color-stroke-focused |
stroke.focused |
purple.100 |
#F2E6FE |
Button Primary Background And Flat Primary Text
The source token group btn.PR (bg) + flat PR (txt) covers both primary button backgrounds and flat primary button text.
| CSS Token |
Source Token |
Foundation Primitive |
Value |
--color-button-primary-background-default |
btn.PR (bg) + flat PR (txt).default |
purple.500 |
#7F30E3 |
--color-button-primary-background-hover |
btn.PR (bg) + flat PR (txt).hover |
purple.600 |
#7021D4 |
--color-button-primary-background-pressed |
btn.PR (bg) + flat PR (txt).pressed |
purple.700 |
#6117BE |
--color-button-primary-background-disabled |
btn.PR (bg) + flat PR (txt).disabled |
gray.100 |
#F6F6F9 |
--color-button-flat-primary-default |
btn.PR (bg) + flat PR (txt).default |
purple.500 |
#7F30E3 |
--color-button-flat-primary-hover |
btn.PR (bg) + flat PR (txt).hover |
purple.600 |
#7021D4 |
--color-button-flat-primary-pressed |
btn.PR (bg) + flat PR (txt).pressed |
purple.700 |
#6117BE |
--color-button-flat-primary-disabled |
btn.PR (bg) + flat PR (txt).disabled |
gray.100 |
#F6F6F9 |
Button Text
| CSS Token |
Source Token |
Foundation Primitive |
Value |
--color-button-primary-text |
btn.PR (txt) + PR dngr (txt).main |
alpha.light.100 |
#FFFFFF |
--color-button-primary-text-disabled |
btn.PR (txt) + PR dngr (txt).disabled |
gray.300 |
#C4C4D4 |
--color-button-danger-text |
btn.PR (txt) + PR dngr (txt).main |
alpha.light.100 |
#FFFFFF |
--color-button-danger-text-disabled |
btn.PR (txt) + PR dngr (txt).disabled |
gray.300 |
#C4C4D4 |
--color-button-secondary-text |
btn.Sec (txt).main |
purple.500 |
#7F30E3 |
--color-button-secondary-text-disabled |
btn.Sec (txt).disabled |
gray.300 |
#C4C4D4 |
| CSS Token |
Source Token |
Foundation Primitive |
Value |
--color-button-secondary-background-default |
btn.Sec (bg).default |
gray.100 |
#F6F6F9 |
--color-button-secondary-background-hover |
btn.Sec (bg).hover |
gray.200 |
#E0E0EB |
--color-button-secondary-background-pressed |
btn.Sec (bg).pressed |
gray.250 |
#D1D1E0 |
--color-button-secondary-background-disabled |
btn.Sec (bg).disabled |
gray.100 |
#F6F6F9 |
Button Flat Secondary Text
| CSS Token |
Source Token |
Foundation Primitive |
Value |
--color-button-flat-secondary-default |
btn.Flat Sec (txt).default |
gray.500 |
#8F8FA3 |
--color-button-flat-secondary-hover |
btn.Flat Sec (txt).hover |
gray.600 |
#777788 |
--color-button-flat-secondary-pressed |
btn.Flat Sec (txt).pressed |
gray.650 |
#5F5F6D |
--color-button-flat-secondary-disabled |
btn.Flat Sec (txt).disabled |
gray.300 |
#C4C4D4 |
Button Flat Success Text
| CSS Token |
Source Token |
Foundation Primitive |
Value |
--color-button-flat-success-default |
btn.Flat Success (txt).default |
green.500 |
#1DAF66 |
--color-button-flat-success-hover |
btn.Flat Success (txt).hover |
green.600 |
#199959 |
--color-button-flat-success-pressed |
btn.Flat Success (txt).pressed |
green.700 |
#16844D |
Button Flat Warning Text
| CSS Token |
Source Token |
Foundation Primitive |
Value |
--color-button-flat-warning-default |
btn.Flat Warn (txt).default |
orange.500 |
#FF8533 |
--color-button-flat-warning-hover |
btn.Flat Warn (txt).hover |
orange.600 |
#FF761A |
--color-button-flat-warning-pressed |
btn.Flat Warn (txt).pressed |
orange.700 |
#FF6700 |
Button Danger Background And Flat Danger Text
The source token group btn.Dngr (bg) + Flat dngr (txt) covers both danger button backgrounds and flat danger button text.
| CSS Token |
Source Token |
Foundation Primitive |
Value |
--color-button-danger-background-default |
btn.Dngr (bg) + Flat dngr (txt).default |
red.500 |
#FA2B55 |
--color-button-danger-background-hover |
btn.Dngr (bg) + Flat dngr (txt).hover |
red.600 |
#F90637 |
--color-button-danger-background-pressed |
btn.Dngr (bg) + Flat dngr (txt).pressed |
red.700 |
#E00532 |
--color-button-danger-background-disabled |
btn.Dngr (bg) + Flat dngr (txt).disabled |
gray.100 |
#F6F6F9 |
--color-button-flat-danger-default |
btn.Dngr (bg) + Flat dngr (txt).default |
red.500 |
#FA2B55 |
--color-button-flat-danger-hover |
btn.Dngr (bg) + Flat dngr (txt).hover |
red.600 |
#F90637 |
--color-button-flat-danger-pressed |
btn.Dngr (bg) + Flat dngr (txt).pressed |
red.700 |
#E00532 |
--color-button-flat-danger-disabled |
btn.Dngr (bg) + Flat dngr (txt).disabled |
gray.100 |
#F6F6F9 |
| CSS Token |
Source Token |
Foundation Primitive |
Value |
--color-button-inverted-background-default |
btn inverted.bg.default |
gray.900 |
#2F2F37 |
--color-button-inverted-background-hover |
btn inverted.bg.hover |
gray.800 |
#3B3B44 |
--color-button-inverted-background-pressed |
btn inverted.bg.pressed |
gray.750 |
#474752 |
--color-button-inverted-background-disabled |
btn inverted.bg.disabled |
gray.900 |
#2F2F37 |
--color-button-inverted-text |
btn inverted.txt.main |
purple.300 |
#C3A6FF |
--color-button-inverted-text-disabled |
btn inverted.txt.disabled |
gray.700 |
#53535F |
Content
Use content tokens for colored content labels, pills, badges, and status accents that are not button or text/icon roles.
| CSS Token |
Source Token |
Foundation Primitive |
Value |
--color-content-red |
content.red |
red.500 |
#FA2B55 |
--color-content-green |
content.green |
green.500 |
#1DAF66 |
--color-content-orange |
content.orange |
orange.500 |
#FF8533 |
--color-content-blackberry |
content.blackberry |
purple.500 |
#7F30E3 |
--color-content-mint |
content.mint |
mint.500 |
#059DAE |
--color-content-mint-hover |
content.mint hover |
mint.600 |
#048B9B |
--color-content-mint-pressed |
content.mint pressed |
mint.700 |
#037988 |
--color-content-sky |
content.sky |
sky.500 |
#0088C2 |
--color-content-sky-hover |
content.sky hover |
sky.600 |
#0078AD |
--color-content-sky-pressed |
content.sky pressed |
sky.700 |
#006999 |
--color-content-river |
content.river |
river.500 |
#0098FE |
--color-content-river-hover |
content.river hover |
river.600 |
#0089E5 |
--color-content-river-pressed |
content.river pressed |
river.700 |
#007ACC |
--color-content-lavender |
content.lavender |
lavender.500 |
#7158FE |
--color-content-lavender-hover |
content.lavender hover |
lavender.600 |
#6247F0 |
--color-content-lavender-pressed |
content.lavender pressed |
lavender.700 |
#5538DE |
--color-content-raspberry |
content.raspberry |
raspberry.500 |
#DC1984 |
--color-content-raspberry-hover |
content.raspberry hover |
raspberry.600 |
#C91475 |
--color-content-raspberry-pressed |
content.raspberry pressed |
raspberry.700 |
#B10F66 |
--color-content-neutral-primary |
content.neutralPrimary |
- |
#242429 |
--color-content-neutral-secondary |
content.neutralSecondary |
- |
#8F8FA3 |
--color-content-no-filled |
content.noFilled |
- |
#E0E0EB |
Content Background
Use content background tokens with the matching --color-content-* foreground token.
| CSS Token |
Source Token |
Foundation Primitive |
Value |
--color-content-background-red |
content bg.red |
red.100 |
#FEEAEE |
--color-content-background-red-hover |
content bg.red hover |
red.200 |
#FFDCE3 |
--color-content-background-red-pressed |
content bg.red pressed |
red.250 |
#FFC9D3 |
--color-content-background-orange |
content bg.orange |
orange.100 |
#FFF2EA |
--color-content-background-orange-hover |
content bg.orange hover |
orange.200 |
#FFE7D8 |
--color-content-background-orange-pressed |
content bg.orange pressed |
orange.250 |
#FFD9C0 |
--color-content-background-green |
content bg.green |
green.100 |
#E4F8EE |
--color-content-background-green-hover |
content bg.green hover |
green.200 |
#D4F4E4 |
--color-content-background-green-pressed |
content bg.green pressed |
green.250 |
#BFF0D6 |
--color-content-background-blackberry |
content bg.blackberry |
blackberry (bg).100 |
#F2E6FE |
--color-content-background-blackberry-hover |
content bg.blackberry hover |
blackberry (bg).200 |
#E7D2FF |
--color-content-background-blackberry-pressed |
content bg.blackberry pressed |
blackberry (bg).250 |
#DBBEFF |
--color-content-background-mint |
content bg.mint |
mint.100 |
#D8FBFD |
--color-content-background-mint-hover |
content bg.mint hover |
mint.200 |
#C5F6F9 |
--color-content-background-mint-pressed |
content bg.mint pressed |
mint.250 |
#AEEEF3 |
--color-content-background-raspberry |
content bg.raspberry |
raspberry.100 |
#FCE8F3 |
--color-content-background-raspberry-hover |
content bg.raspberry hover |
raspberry.200 |
#F9DCEC |
--color-content-background-raspberry-pressed |
content bg.raspberry pressed |
raspberry.250 |
#F5CCE2 |
--color-content-background-sky |
content bg.sky |
sky.100 |
#D8F2FD |
--color-content-background-sky-hover |
content bg.sky hover |
sky.200 |
#C4EAFE |
--color-content-background-sky-pressed |
content bg.sky pressed |
sky.250 |
#AEDFFD |
--color-content-background-river |
content bg.river |
river.100 |
#D1ECFF |
--color-content-background-river-hover |
content bg.river hover |
river.200 |
#BFE3FF |
--color-content-background-river-pressed |
content bg.river pressed |
river.250 |
#A8D7FF |
--color-content-background-lavender |
content bg.lavender |
lavender.100 |
#EFECFF |
--color-content-background-lavender-hover |
content bg.lavender hover |
lavender.200 |
#E4DEFF |
--color-content-background-lavender-pressed |
content bg.lavender pressed |
lavender.250 |
#D7CEFF |
--color-content-background-neutral |
content bg.neutral |
gray.100 |
#F6F6F9 |
Deprecated Source Groups
The JSON includes deprecated icon and notification groups marked with a no-entry prefix. Do not use those groups for new component specs; use text icon, content, and content bg tokens instead.
Raw Values
Do not use raw color values in component styles.
/* Wrong */
.button {
background: #7f30e3;
color: #ffffff;
}
/* Correct */
.button {
background: var(--color-button-primary-background-default);
color: var(--color-button-primary-text);
}