Color Palette
The complete color system — primitives, brand palettes, and semantic mappings.
All color primitives available in the system, organized by family. Each row shows the full ramp from lightest to darkest.
Generated from dist/tokens/tokens.yaml.
Color Primitives
Raw color values from the Core layer. These are referenced by semantic and brand tokens — never used directly in components.
Neutral
| Name | Token | Contrast :1 | Hex | |
|---|---|---|---|---|
| Neutral 0 | --color-neutral-000 |
1.00 | #FFFFFF |
|
| Neutral 100 | --color-neutral-100 |
1.25 | #E6E6E6 |
|
| Neutral 200 | --color-neutral-200 |
1.61 | #CCCCCC |
|
| Neutral 300 | --color-neutral-300 |
2.10 | #B3B3B3 |
|
| Neutral 400 | --color-neutral-400 |
3.95 | #808080 |
|
| Neutral 500 | --color-neutral-500 |
3.95 | #808080 |
|
| Neutral 600 | --color-neutral-600 |
5.74 | #666666 |
|
| Neutral 700 | --color-neutral-700 |
8.45 | #4D4D4D |
|
| Neutral 800 | --color-neutral-800 |
12.63 | #333333 |
|
| Neutral 900 | --color-neutral-900 |
17.40 | #1A1A1A |
|
| Neutral 1000 | --color-neutral-1000 |
21.00 | #000000 |
Neutral / Alpha
| Name | Token | Contrast :1 | Hex | |
|---|---|---|---|---|
| Neutral / Alpha 0 | --color-neutral-alpha-000 |
NaN | rgba(0 0 0 / 0) |
|
| Neutral / Alpha 100 | --color-neutral-alpha-100 |
NaN | rgba(0 0 0 / 0.1) |
|
| Neutral / Alpha 200 | --color-neutral-alpha-200 |
NaN | rgba(0 0 0 / 0.2) |
|
| Neutral / Alpha 300 | --color-neutral-alpha-300 |
NaN | rgba(0 0 0 / 0.3) |
|
| Neutral / Alpha 400 | --color-neutral-alpha-400 |
NaN | rgba(0 0 0 / 0.4) |
|
| Neutral / Alpha 500 | --color-neutral-alpha-500 |
NaN | rgba(0 0 0 / 0.5) |
|
| Neutral / Alpha 600 | --color-neutral-alpha-600 |
NaN | rgba(0 0 0 / 0.6) |
|
| Neutral / Alpha 700 | --color-neutral-alpha-700 |
NaN | rgba(0 0 0 / 0.7) |
|
| Neutral / Alpha 800 | --color-neutral-alpha-800 |
NaN | rgba(0 0 0 / 0.8) |
|
| Neutral / Alpha 900 | --color-neutral-alpha-900 |
NaN | rgba(0 0 0 / 0.9) |
Neutral / Alpha Inverse
| Name | Token | Contrast :1 | Hex | |
|---|---|---|---|---|
| Neutral / Alpha Inverse 0 | --color-neutral-alpha-inverse-000 |
NaN | rgba(255 255 255 / 0) |
|
| Neutral / Alpha Inverse 100 | --color-neutral-alpha-inverse-100 |
NaN | rgba(255 255 255 / 0.1) |
|
| Neutral / Alpha Inverse 200 | --color-neutral-alpha-inverse-200 |
NaN | rgba(255 255 255 / 0.2) |
|
| Neutral / Alpha Inverse 300 | --color-neutral-alpha-inverse-300 |
NaN | rgba(255 255 255 / 0.3) |
|
| Neutral / Alpha Inverse 400 | --color-neutral-alpha-inverse-400 |
NaN | rgba(255 255 255 / 0.4) |
|
| Neutral / Alpha Inverse 500 | --color-neutral-alpha-inverse-500 |
NaN | rgba(255 255 255 / 0.5) |
|
| Neutral / Alpha Inverse 600 | --color-neutral-alpha-inverse-600 |
NaN | rgba(255 255 255 / 0.6) |
|
| Neutral / Alpha Inverse 700 | --color-neutral-alpha-inverse-700 |
NaN | rgba(255 255 255 / 0.7) |
|
| Neutral / Alpha Inverse 800 | --color-neutral-alpha-inverse-800 |
NaN | rgba(255 255 255 / 0.8) |
|
| Neutral / Alpha Inverse 900 | --color-neutral-alpha-inverse-900 |
NaN | rgba(255 255 255 / 0.9) |
Brand A / Green
| Name | Token | Contrast :1 | Hex | |
|---|---|---|---|---|
| Brand A / Green 100 | --color-brand-a-green-100 |
1.10 | #F3F6E9 |
|
| Brand A / Green 200 | --color-brand-a-green-200 |
1.28 | #DFE7C5 |
|
| Brand A / Green 300 | --color-brand-a-green-300 |
1.46 | #CFDBA9 |
|
| Brand A / Green 400 | --color-brand-a-green-400 |
1.68 | #BFCF8C |
|
| Brand A / Green 500 | --color-brand-a-green-500 |
1.93 | #AFC36F |
|
| Brand A / Green 600 | --color-brand-a-green-600 |
2.24 | #9FB752 |
|
| Brand A / Green 700 | --color-brand-a-green-700 |
2.99 | #899E42 |
|
| Brand A / Green 800 | --color-brand-a-green-800 |
4.30 | #708136 |
|
| Brand A / Green 900 | --color-brand-a-green-900 |
7.13 | #515D27 |
Brand A / Red
| Name | Token | Contrast :1 | Hex | |
|---|---|---|---|---|
| Brand A / Red 100 | --color-brand-a-red-100 |
1.03 | #FEFBFB |
|
| Brand A / Red 200 | --color-brand-a-red-200 |
1.24 | #FAE0E6 |
|
| Brand A / Red 300 | --color-brand-a-red-300 |
1.74 | #F4B3C3 |
|
| Brand A / Red 400 | --color-brand-a-red-400 |
2.44 | #EE87A0 |
|
| Brand A / Red 500 | --color-brand-a-red-500 |
3.41 | #E75A7C |
|
| Brand A / Red 600 | --color-brand-a-red-600 |
4.43 | #E12E59 |
|
| Brand A / Red 700 | --color-brand-a-red-700 |
6.07 | #BF1C43 |
|
| Brand A / Red 800 | --color-brand-a-red-800 |
8.76 | #931534 |
|
| Brand A / Red 900 | --color-brand-a-red-900 |
12.66 | #660F24 |
Brand A / Sand
| Name | Token | Contrast :1 | Hex | |
|---|---|---|---|---|
| Brand A / Sand 100 | --color-brand-a-sand-100 |
1.15 | #F0F0E5 |
|
| Brand A / Sand 200 | --color-brand-a-sand-200 |
1.37 | #DDDEC5 |
|
| Brand A / Sand 300 | --color-brand-a-sand-300 |
1.83 | #C0C1AC |
|
| Brand A / Sand 400 | --color-brand-a-sand-400 |
2.51 | #A4A593 |
|
| Brand A / Sand 500 | --color-brand-a-sand-500 |
3.56 | #88897A |
|
| Brand A / Sand 600 | --color-brand-a-sand-600 |
5.25 | #6C6D61 |
|
| Brand A / Sand 700 | --color-brand-a-sand-700 |
8.04 | #505148 |
|
| Brand A / Sand 800 | --color-brand-a-sand-800 |
12.51 | #34342F |
|
| Brand A / Sand 900 | --color-brand-a-sand-900 |
17.78 | #181816 |
Brand B / Blue
| Name | Token | Contrast :1 | Hex | |
|---|---|---|---|---|
| Brand B / Blue 100 | --color-brand-b-blue-100 |
1.38 | #CEDBFD |
|
| Brand B / Blue 200 | --color-brand-b-blue-200 |
1.98 | #9EB7FA |
|
| Brand B / Blue 300 | --color-brand-b-blue-300 |
2.93 | #6D93F8 |
|
| Brand B / Blue 400 | --color-brand-b-blue-400 |
4.38 | #3D6FF5 |
|
| Brand B / Blue 500 | --color-brand-b-blue-500 |
6.33 | #0C4BF3 |
|
| Brand B / Blue 600 | --color-brand-b-blue-600 |
8.61 | #0A3CC2 |
|
| Brand B / Blue 700 | --color-brand-b-blue-700 |
11.67 | #072D92 |
|
| Brand B / Blue 800 | --color-brand-b-blue-800 |
15.39 | #051E61 |
|
| Brand B / Blue 900 | --color-brand-b-blue-900 |
18.83 | #020F31 |
Brand B / Green
| Name | Token | Contrast :1 | Hex | |
|---|---|---|---|---|
| Brand B / Green 100 | --color-brand-b-green-100 |
1.03 | #F6FEFA |
|
| Brand B / Green 200 | --color-brand-b-green-200 |
1.16 | #C8F9DF |
|
| Brand B / Green 300 | --color-brand-b-green-300 |
1.30 | #9AF4C4 |
|
| Brand B / Green 400 | --color-brand-b-green-400 |
1.44 | #6CEFAA |
|
| Brand B / Green 500 | --color-brand-b-green-500 |
1.57 | #3EEA8F |
|
| Brand B / Green 600 | --color-brand-b-green-600 |
2.90 | #13AE5C |
|
| Brand B / Green 700 | --color-brand-b-green-700 |
4.95 | #0E8144 |
|
| Brand B / Green 800 | --color-brand-b-green-800 |
11.13 | #084524 |
|
| Brand B / Green 900 | --color-brand-b-green-900 |
16.42 | #042513 |
Brand B / Purple
| Name | Token | Contrast :1 | Hex | |
|---|---|---|---|---|
| Brand B / Purple 200 | --color-brand-b-purple-200 |
1.60 | #DEC0FF |
|
| Brand B / Purple 300 | --color-brand-b-purple-300 |
2.41 | #C48FFF |
|
| Brand B / Purple 600 | --color-brand-b-purple-600 |
4.51 | #9747FF |
|
| Brand B / Purple 700 | --color-brand-b-purple-700 |
6.23 | #7A14FF |
|
| Brand B / Purple 800 | --color-brand-b-purple-800 |
11.01 | #551A8B |
|
| Brand B / Purple 900 | --color-brand-b-purple-900 |
14.67 | #3A125F |
Brand B / Red
| Name | Token | Contrast :1 | Hex | |
|---|---|---|---|---|
| Brand B / Red 100 | --color-brand-b-red-100 |
1.00 | #FFFFFF |
|
| Brand B / Red 200 | --color-brand-b-red-200 |
1.42 | #FFCCCC |
|
| Brand B / Red 300 | --color-brand-b-red-300 |
2.05 | #FF9999 |
|
| Brand B / Red 400 | --color-brand-b-red-400 |
2.86 | #FF6666 |
|
| Brand B / Red 500 | --color-brand-b-red-500 |
3.64 | #FF3333 |
|
| Brand B / Red 600 | --color-brand-b-red-600 |
4.00 | #FF0000 |
|
| Brand B / Red 700 | --color-brand-b-red-700 |
8.92 | #990000 |
|
| Brand B / Red 800 | --color-brand-b-red-800 |
13.42 | #660000 |
|
| Brand B / Red 900 | --color-brand-b-red-900 |
18.41 | #330000 |
Brand C / Blue
| Name | Token | Contrast :1 | Hex | |
|---|---|---|---|---|
| Brand C / Blue 100 | --color-brand-c-blue-100 |
1.29 | #D8E2FD |
|
| Brand C / Blue 200 | --color-brand-c-blue-200 |
1.66 | #B6C8FC |
|
| Brand C / Blue 300 | --color-brand-c-blue-300 |
2.13 | #94B0FA |
|
| Brand C / Blue 400 | --color-brand-c-blue-400 |
2.93 | #6D93F8 |
|
| Brand C / Blue 500 | --color-brand-c-blue-500 |
4.75 | #3567F6 |
|
| Brand C / Blue 600 | --color-brand-c-blue-600 |
6.33 | #0C4BF3 |
|
| Brand C / Blue 700 | --color-brand-c-blue-700 |
8.61 | #0A3CC2 |
|
| Brand C / Blue 800 | --color-brand-c-blue-800 |
11.67 | #072D92 |
|
| Brand C / Blue 900 | --color-brand-c-blue-900 |
16.39 | #1B115C |
Brand C / Coolblue
| Name | Token | Contrast :1 | Hex | |
|---|---|---|---|---|
| Brand C / Coolblue 100 | --color-brand-c-coolblue-100 |
1.13 | #E2F4FD |
|
| Brand C / Coolblue 200 | --color-brand-c-coolblue-200 |
1.27 | #C6EAFB |
|
| Brand C / Coolblue 300 | --color-brand-c-coolblue-300 |
1.44 | #A9DFF8 |
|
| Brand C / Coolblue 400 | --color-brand-c-coolblue-400 |
1.82 | #70CBF4 |
|
| Brand C / Coolblue 500 | --color-brand-c-coolblue-500 |
2.23 | #38B9F5 |
|
| Brand C / Coolblue 600 | --color-brand-c-coolblue-600 |
2.61 | #0CAAF3 |
|
| Brand C / Coolblue 700 | --color-brand-c-coolblue-700 |
3.95 | #0A88C2 |
|
| Brand C / Coolblue 800 | --color-brand-c-coolblue-800 |
6.32 | #076692 |
|
| Brand C / Coolblue 900 | --color-brand-c-coolblue-900 |
10.47 | #054461 |
Brand C / Green
| Name | Token | Contrast :1 | Hex | |
|---|---|---|---|---|
| Brand C / Green 100 | --color-brand-c-green-100 |
1.06 | #EFFBF5 |
|
| Brand C / Green 200 | --color-brand-c-green-200 |
1.13 | #DFF6EB |
|
| Brand C / Green 300 | --color-brand-c-green-300 |
1.37 | #C5E4CD |
|
| Brand C / Green 400 | --color-brand-c-green-400 |
1.49 | #A9E0BF |
|
| Brand C / Green 500 | --color-brand-c-green-500 |
1.78 | #87D2A6 |
|
| Brand C / Green 600 | --color-brand-c-green-600 |
2.15 | #61C48D |
|
| Brand C / Green 700 | --color-brand-c-green-700 |
2.60 | #30B675 |
|
| Brand C / Green 800 | --color-brand-c-green-800 |
3.28 | #2BA168 |
|
| Brand C / Green 900 | --color-brand-c-green-900 |
6.10 | #246F49 |
|
| Brand C / Green 1000 | --color-brand-c-green-1000 |
11.33 | #05423D |
Brand C / Orange
| Name | Token | Contrast :1 | Hex | |
|---|---|---|---|---|
| Brand C / Orange 100 | --color-brand-c-orange-100 |
1.06 | #FFF7EB |
|
| Brand C / Orange 200 | --color-brand-c-orange-200 |
1.13 | #FFEFD6 |
|
| Brand C / Orange 300 | --color-brand-c-orange-300 |
1.27 | #FFE0B2 |
|
| Brand C / Orange 400 | --color-brand-c-orange-400 |
1.41 | #FFD28F |
|
| Brand C / Orange 500 | --color-brand-c-orange-500 |
1.60 | #FFC266 |
|
| Brand C / Orange 600 | --color-brand-c-orange-600 |
1.89 | #FFAB2E |
|
| Brand C / Orange 700 | --color-brand-c-orange-700 |
2.14 | #FF9900 |
|
| Brand C / Orange 800 | --color-brand-c-orange-800 |
3.31 | #CC7A00 |
|
| Brand C / Orange 900 | --color-brand-c-orange-900 |
5.40 | #995C00 |
|
| Brand C / Orange 1000 | --color-brand-c-orange-1000 |
9.41 | #663D00 |
Brand C / Purple
| Name | Token | Contrast :1 | Hex | |
|---|---|---|---|---|
| Brand C / Purple 100 | --color-brand-c-purple-100 |
1.15 | #F5ECFE |
|
| Brand C / Purple 200 | --color-brand-c-purple-200 |
1.33 | #ECD8FD |
|
| Brand C / Purple 300 | --color-brand-c-purple-300 |
1.73 | #DBB6FC |
|
| Brand C / Purple 400 | --color-brand-c-purple-400 |
2.30 | #CA94FA |
|
| Brand C / Purple 500 | --color-brand-c-purple-500 |
3.20 | #B76DF8 |
|
| Brand C / Purple 600 | --color-brand-c-purple-600 |
4.94 | #9C35F6 |
|
| Brand C / Purple 700 | --color-brand-c-purple-700 |
6.22 | #870CF3 |
|
| Brand C / Purple 800 | --color-brand-c-purple-800 |
8.54 | #6C0AC2 |
|
| Brand C / Purple 900 | --color-brand-c-purple-900 |
11.70 | #510792 |
|
| Brand C / Purple 1000 | --color-brand-c-purple-1000 |
14.91 | #39115C |
Brand C / Red
| Name | Token | Contrast :1 | Hex | |
|---|---|---|---|---|
| Brand C / Red 100 | --color-brand-c-red-100 |
1.14 | #FEECEC |
|
| Brand C / Red 200 | --color-brand-c-red-200 |
1.22 | #FDE2E3 |
|
| Brand C / Red 300 | --color-brand-c-red-300 |
1.67 | #FAB7B9 |
|
| Brand C / Red 400 | --color-brand-c-red-400 |
2.14 | #F89699 |
|
| Brand C / Red 500 | --color-brand-c-red-500 |
2.82 | #F66F74 |
|
| Brand C / Red 600 | --color-brand-c-red-600 |
3.85 | #F23A41 |
|
| Brand C / Red 700 | --color-brand-c-red-700 |
4.39 | #F00F17 |
|
| Brand C / Red 800 | --color-brand-c-red-800 |
6.36 | #C00C12 |
|
| Brand C / Red 900 | --color-brand-c-red-900 |
9.41 | #90090E |
|
| Brand C / Red 1000 | --color-brand-c-red-1000 |
13.75 | #600609 |
Brand Color Mapping
Each brand maps the same semantic keys to different primitives. Switch brands to compare.
Brand A
| Role | Token | Resolved Value | |
|---|---|---|---|
| accent | --brand-color-accent |
var(--color-neutral-600) |
|
| accent-dark | --brand-color-accent-dark |
var(--color-neutral-800) |
|
| border-default | --brand-color-border-default |
var(--color-neutral-800) |
|
| border-default-dark | --brand-color-border-default-dark |
var(--color-neutral-200) |
|
| border-disabled | --brand-color-border-disabled |
var(--color-neutral-500) |
|
| border-disabled-dark | --brand-color-border-disabled-dark |
var(--color-neutral-400) |
|
| border-strong | --brand-color-border-strong |
var(--color-neutral-1000) |
|
| border-strong-dark | --brand-color-border-strong-dark |
var(--color-neutral-000) |
|
| fill-disabled | --brand-color-fill-disabled |
var(--color-neutral-300) |
|
| fill-disabled-dark | --brand-color-fill-disabled-dark |
var(--color-neutral-700) |
|
| fill-surface | --brand-color-fill-surface |
var(--color-neutral-000) |
|
| fill-surface-dark | --brand-color-fill-surface-dark |
var(--color-neutral-1000) |
|
| functional-base | --brand-color-functional-base |
var(--color-neutral-900) |
|
| functional-base-dark | --brand-color-functional-base-dark |
var(--color-neutral-1000) |
|
| functional-danger | --brand-color-functional-danger |
var(--color-neutral-900) |
|
| functional-success | --brand-color-functional-success |
var(--color-neutral-800) |
|
| primary | --brand-color-primary |
var(--color-neutral-1000) |
|
| primary-dark | --brand-color-primary-dark |
var(--color-neutral-1000) |
|
| subtle | --brand-color-subtle |
var(--color-neutral-500) |
|
| subtle-dark | --brand-color-subtle-dark |
var(--color-neutral-800) |
|
| subtle-light | --brand-color-subtle-light |
var(--color-neutral-200) |
|
| text-default | --brand-color-text-default |
var(--color-neutral-800) |
|
| text-default-dark | --brand-color-text-default-dark |
var(--color-neutral-200) |
|
| text-disabled | --brand-color-text-disabled |
var(--color-neutral-600) |
|
| text-disabled-dark | --brand-color-text-disabled-dark |
var(--color-neutral-400) |
|
| text-on-active | --brand-color-text-on-active |
var(--color-neutral-000) |
|
| text-on-active-dark | --brand-color-text-on-active-dark |
var(--color-neutral-000) |
|
| text-on-brand | --brand-color-text-on-brand |
var(--color-neutral-000) |
|
| text-on-brand-dark | --brand-color-text-on-brand-dark |
var(--color-neutral-000) |
|
| text-on-danger | --brand-color-text-on-danger |
var(--color-neutral-000) |
|
| text-on-danger-dark | --brand-color-text-on-danger-dark |
var(--color-neutral-000) |
|
| text-on-disabled | --brand-color-text-on-disabled |
var(--color-neutral-800) |
|
| text-on-disabled-dark | --brand-color-text-on-disabled-dark |
var(--color-neutral-200) |
|
| text-on-success | --brand-color-text-on-success |
var(--color-neutral-000) |
|
| text-on-success-dark | --brand-color-text-on-success-dark |
var(--color-neutral-000) |
|
| text-strong | --brand-color-text-strong |
var(--color-neutral-1000) |
|
| text-strong-dark | --brand-color-text-strong-dark |
var(--color-neutral-000) |
Brand B
| Role | Token | Resolved Value | |
|---|---|---|---|
| accent | --brand-color-accent |
var(--color-brand-b-green-400) |
|
| accent-dark | --brand-color-accent-dark |
var(--color-brand-b-green-800) |
|
| border-default | --brand-color-border-default |
var(--color-neutral-800) |
|
| border-default-dark | --brand-color-border-default-dark |
var(--color-neutral-200) |
|
| border-disabled | --brand-color-border-disabled |
var(--color-neutral-500) |
|
| border-disabled-dark | --brand-color-border-disabled-dark |
var(--color-neutral-400) |
|
| border-strong | --brand-color-border-strong |
var(--color-neutral-1000) |
|
| border-strong-dark | --brand-color-border-strong-dark |
var(--color-neutral-000) |
|
| fill-disabled | --brand-color-fill-disabled |
var(--color-neutral-300) |
|
| fill-disabled-dark | --brand-color-fill-disabled-dark |
var(--color-neutral-700) |
|
| fill-surface | --brand-color-fill-surface |
var(--color-neutral-000) |
|
| fill-surface-dark | --brand-color-fill-surface-dark |
var(--color-neutral-1000) |
|
| functional-base | --brand-color-functional-base |
var(--color-brand-b-purple-700) |
|
| functional-base-dark | --brand-color-functional-base-dark |
var(--color-brand-b-purple-900) |
|
| functional-danger | --brand-color-functional-danger |
var(--color-brand-b-red-600) |
|
| functional-success | --brand-color-functional-success |
var(--color-brand-b-green-600) |
|
| primary | --brand-color-primary |
var(--color-brand-b-purple-600) |
|
| primary-dark | --brand-color-primary-dark |
var(--color-brand-b-purple-800) |
|
| subtle | --brand-color-subtle |
var(--color-neutral-500) |
|
| subtle-dark | --brand-color-subtle-dark |
var(--color-neutral-800) |
|
| subtle-light | --brand-color-subtle-light |
var(--color-neutral-200) |
|
| text-default | --brand-color-text-default |
var(--color-neutral-800) |
|
| text-default-dark | --brand-color-text-default-dark |
var(--color-neutral-200) |
|
| text-disabled | --brand-color-text-disabled |
var(--color-neutral-600) |
|
| text-disabled-dark | --brand-color-text-disabled-dark |
var(--color-neutral-400) |
|
| text-on-active | --brand-color-text-on-active |
var(--color-neutral-000) |
|
| text-on-active-dark | --brand-color-text-on-active-dark |
var(--color-neutral-000) |
|
| text-on-brand | --brand-color-text-on-brand |
var(--color-neutral-000) |
|
| text-on-brand-dark | --brand-color-text-on-brand-dark |
var(--color-neutral-000) |
|
| text-on-danger | --brand-color-text-on-danger |
var(--color-neutral-000) |
|
| text-on-danger-dark | --brand-color-text-on-danger-dark |
var(--color-neutral-000) |
|
| text-on-disabled | --brand-color-text-on-disabled |
var(--color-neutral-800) |
|
| text-on-disabled-dark | --brand-color-text-on-disabled-dark |
var(--color-neutral-200) |
|
| text-on-success | --brand-color-text-on-success |
var(--color-neutral-000) |
|
| text-on-success-dark | --brand-color-text-on-success-dark |
var(--color-neutral-000) |
|
| text-strong | --brand-color-text-strong |
var(--color-neutral-1000) |
|
| text-strong-dark | --brand-color-text-strong-dark |
var(--color-neutral-000) |
Brand C
| Role | Token | Resolved Value | |
|---|---|---|---|
| accent | --brand-color-accent |
var(--color-brand-c-coolblue-400) |
|
| accent-dark | --brand-color-accent-dark |
var(--color-brand-c-coolblue-900) |
|
| border-default | --brand-color-border-default |
var(--color-neutral-800) |
|
| border-default-dark | --brand-color-border-default-dark |
var(--color-neutral-200) |
|
| border-disabled | --brand-color-border-disabled |
var(--color-neutral-500) |
|
| border-disabled-dark | --brand-color-border-disabled-dark |
var(--color-neutral-400) |
|
| border-strong | --brand-color-border-strong |
var(--color-neutral-1000) |
|
| border-strong-dark | --brand-color-border-strong-dark |
var(--color-neutral-000) |
|
| fill-disabled | --brand-color-fill-disabled |
var(--color-neutral-300) |
|
| fill-disabled-dark | --brand-color-fill-disabled-dark |
var(--color-neutral-700) |
|
| fill-surface | --brand-color-fill-surface |
var(--color-neutral-000) |
|
| fill-surface-dark | --brand-color-fill-surface-dark |
var(--color-neutral-1000) |
|
| functional-base | --brand-color-functional-base |
var(--color-brand-c-blue-600) |
|
| functional-base-dark | --brand-color-functional-base-dark |
var(--color-brand-b-blue-900) |
|
| functional-danger | --brand-color-functional-danger |
var(--color-brand-c-red-800) |
|
| functional-success | --brand-color-functional-success |
var(--color-brand-c-green-800) |
|
| primary | --brand-color-primary |
var(--color-brand-c-blue-600) |
|
| primary-dark | --brand-color-primary-dark |
var(--color-brand-c-blue-900) |
|
| subtle | --brand-color-subtle |
var(--color-neutral-500) |
|
| subtle-dark | --brand-color-subtle-dark |
var(--color-neutral-800) |
|
| subtle-light | --brand-color-subtle-light |
var(--color-neutral-200) |
|
| text-default | --brand-color-text-default |
var(--color-neutral-800) |
|
| text-default-dark | --brand-color-text-default-dark |
var(--color-neutral-200) |
|
| text-disabled | --brand-color-text-disabled |
var(--color-neutral-600) |
|
| text-disabled-dark | --brand-color-text-disabled-dark |
var(--color-neutral-400) |
|
| text-on-active | --brand-color-text-on-active |
var(--color-neutral-000) |
|
| text-on-active-dark | --brand-color-text-on-active-dark |
var(--color-neutral-000) |
|
| text-on-brand | --brand-color-text-on-brand |
var(--color-neutral-000) |
|
| text-on-brand-dark | --brand-color-text-on-brand-dark |
var(--color-neutral-000) |
|
| text-on-danger | --brand-color-text-on-danger |
var(--color-neutral-000) |
|
| text-on-danger-dark | --brand-color-text-on-danger-dark |
var(--color-neutral-000) |
|
| text-on-disabled | --brand-color-text-on-disabled |
var(--color-neutral-800) |
|
| text-on-disabled-dark | --brand-color-text-on-disabled-dark |
var(--color-neutral-200) |
|
| text-on-success | --brand-color-text-on-success |
var(--color-neutral-000) |
|
| text-on-success-dark | --brand-color-text-on-success-dark |
var(--color-neutral-000) |
|
| text-strong | --brand-color-text-strong |
var(--color-neutral-1000) |
|
| text-strong-dark | --brand-color-text-strong-dark |
var(--color-neutral-000) |
Semantic Mapping — Light
Intent-based tokens for the light appearance mode. These resolve to primitives and adapt per brand.
Text
| Name | Token | Value | |
|---|---|---|---|
| text-brand | --color-text-brand |
var(--brand-color-primary) |
|
| text-danger | --color-text-danger |
var(--brand-color-functional-danger) |
|
| text-default | --color-text-default |
var(--brand-color-text-default) |
|
| text-disabled | --color-text-disabled |
var(--brand-color-text-disabled) |
|
| text-inverse | --color-text-inverse |
var(--color-neutral-000) |
|
| text-on-active | --color-text-on-active |
var(--brand-color-text-on-active) |
|
| text-on-brand | --color-text-on-brand |
var(--brand-color-text-on-brand) |
|
| text-on-danger | --color-text-on-danger |
var(--brand-color-text-on-danger) |
|
| text-on-disabled | --color-text-on-disabled |
var(--brand-color-text-on-disabled) |
|
| text-on-subtle | --color-text-on-subtle |
var(--brand-color-primary) |
|
| text-on-success | --color-text-on-success |
var(--brand-color-text-on-success) |
|
| text-strong | --color-text-strong |
var(--brand-color-text-strong) |
|
| text-subtle | --color-text-subtle |
var(--brand-color-subtle) |
|
| text-success | --color-text-success |
var(--brand-color-functional-success) |
Fill
| Name | Token | Value | |
|---|---|---|---|
| fill-active | --color-fill-active |
var(--brand-color-accent) |
|
| fill-brand | --color-fill-brand |
var(--brand-color-primary) |
|
| fill-danger | --color-fill-danger |
var(--brand-color-functional-danger) |
|
| fill-disabled | --color-fill-disabled |
var(--brand-color-fill-disabled) |
|
| fill-hover | --color-fill-hover |
var(--color-neutral-alpha-500) |
|
| fill-subtle | --color-fill-subtle |
var(--brand-color-subtle-light) |
|
| fill-success | --color-fill-success |
var(--brand-color-functional-success) |
|
| fill-surface | --color-fill-surface |
var(--brand-color-fill-surface) |
Border
| Name | Token | Value | |
|---|---|---|---|
| border-brand | --color-border-brand |
var(--brand-color-primary) |
|
| border-danger | --color-border-danger |
var(--brand-color-functional-danger) |
|
| border-default | --color-border-default |
var(--brand-color-border-default) |
|
| border-disabled | --color-border-disabled |
var(--brand-color-border-disabled) |
|
| border-strong | --color-border-strong |
var(--brand-color-border-strong) |
|
| border-subtle | --color-border-subtle |
var(--brand-color-subtle) |
Overlay
| Name | Token | Value | |
|---|---|---|---|
| overlay-active | --color-overlay-active |
var(--color-neutral-alpha-400) |
|
| overlay-backdrop | --color-overlay-backdrop |
var(--color-neutral-alpha-400) |
|
| overlay-hover | --color-overlay-hover |
var(--color-neutral-alpha-200) |
|
| overlay-selected | --color-overlay-selected |
var(--color-neutral-alpha-600) |
Semantic Mapping — Dark
Intent-based tokens for the dark appearance mode.
Text
| Name | Token | Value | |
|---|---|---|---|
| text-brand | --color-text-brand |
var(--brand-color-primary-dark) |
|
| text-danger | --color-text-danger |
var(--brand-color-functional-danger) |
|
| text-default | --color-text-default |
var(--brand-color-text-default-dark) |
|
| text-disabled | --color-text-disabled |
var(--brand-color-text-disabled-dark) |
|
| text-inverse | --color-text-inverse |
var(--color-neutral-1000) |
|
| text-on-active | --color-text-on-active |
var(--brand-color-text-on-active-dark) |
|
| text-on-brand | --color-text-on-brand |
var(--brand-color-text-on-brand-dark) |
|
| text-on-danger | --color-text-on-danger |
var(--brand-color-text-on-danger-dark) |
|
| text-on-disabled | --color-text-on-disabled |
var(--brand-color-text-on-disabled-dark) |
|
| text-on-subtle | --color-text-on-subtle |
var(--brand-color-primary-dark) |
|
| text-on-success | --color-text-on-success |
var(--brand-color-text-on-success-dark) |
|
| text-strong | --color-text-strong |
var(--brand-color-text-strong-dark) |
|
| text-subtle | --color-text-subtle |
var(--brand-color-subtle-dark) |
|
| text-success | --color-text-success |
var(--brand-color-functional-success) |
Fill
| Name | Token | Value | |
|---|---|---|---|
| fill-active | --color-fill-active |
var(--brand-color-accent) |
|
| fill-brand | --color-fill-brand |
var(--brand-color-primary) |
|
| fill-danger | --color-fill-danger |
var(--brand-color-functional-danger) |
|
| fill-disabled | --color-fill-disabled |
var(--brand-color-fill-disabled-dark) |
|
| fill-hover | --color-fill-hover |
var(--color-neutral-alpha-inverse-100) |
|
| fill-subtle | --color-fill-subtle |
var(--brand-color-subtle) |
|
| fill-success | --color-fill-success |
var(--brand-color-functional-success) |
|
| fill-surface | --color-fill-surface |
var(--brand-color-fill-surface-dark) |
Border
| Name | Token | Value | |
|---|---|---|---|
| border-brand | --color-border-brand |
var(--brand-color-primary) |
|
| border-danger | --color-border-danger |
var(--brand-color-functional-danger) |
|
| border-default | --color-border-default |
var(--brand-color-border-default-dark) |
|
| border-disabled | --color-border-disabled |
var(--brand-color-border-disabled-dark) |
|
| border-strong | --color-border-strong |
var(--brand-color-border-strong-dark) |
|
| border-subtle | --color-border-subtle |
var(--brand-color-subtle-dark) |
Overlay
| Name | Token | Value | |
|---|---|---|---|
| overlay-active | --color-overlay-active |
var(--color-neutral-alpha-inverse-200) |
|
| overlay-backdrop | --color-overlay-backdrop |
var(--color-neutral-alpha-inverse-400) |
|
| overlay-hover | --color-overlay-hover |
var(--color-neutral-alpha-inverse-100) |
|
| overlay-selected | --color-overlay-selected |
var(--color-neutral-alpha-inverse-300) |