Color
A two-tier color system: primitive palette values, then semantic aliases that components consume.
Semantic tokens alias primitives so themes can change without rewriting components. This page renders the implemented CSS variables, not a screenshot of Figma.
Public subset only: brand ramps, representative semantic aliases, and the Button color tokens those components bind. Partnership palettes are not included.
Primitive palette
Raw brand ramps. Components should not use these directly.
neutral
color.brand.neutral.50--color-brand-neutral-50 · #FFFFFFcolor.brand.neutral.100--color-brand-neutral-100 · #FAFAFAcolor.brand.neutral.200--color-brand-neutral-200 · #F2F2F2color.brand.neutral.250--color-brand-neutral-250 · #E9E9E9color.brand.neutral.300--color-brand-neutral-300 · #CCCCCCcolor.brand.neutral.350--color-brand-neutral-350 · #B4B4B4color.brand.neutral.400--color-brand-neutral-400 · #666666color.brand.neutral.450--color-brand-neutral-450 · #404040color.brand.neutral.500--color-brand-neutral-500 · #333333color.brand.neutral.600--color-brand-neutral-600 · #2C2B2Acolor.brand.neutral.750--color-brand-neutral-750 · #181716color.brand.neutral.800--color-brand-neutral-800 · #101010color.brand.neutral.900--color-brand-neutral-900 · #000000purple
color.brand.purple.50--color-brand-purple-50 · #F9F8FFcolor.brand.purple.100--color-brand-purple-100 · #F2EEFFcolor.brand.purple.200--color-brand-purple-200 · #E3BDF8color.brand.purple.300--color-brand-purple-300 · #C26EFFcolor.brand.purple.500--color-brand-purple-500 · #570D80color.brand.purple.700--color-brand-purple-700 · #360950color.brand.purple.800--color-brand-purple-800 · #230533red
color.brand.red.50--color-brand-red-50 · #FDE7E9color.brand.red.300--color-brand-red-300 · #EB6A63color.brand.red.400--color-brand-red-400 · #F73B32color.brand.red.500--color-brand-red-500 · #E1251Bcolor.brand.red.700--color-brand-red-700 · #C22D2Acolor.brand.red.900--color-brand-red-900 · #3D0A07blue
color.brand.blue.25--color-brand-blue-25 · #F9FAFCcolor.brand.blue.50--color-brand-blue-50 · #E6F0FAcolor.brand.blue.200--color-brand-blue-200 · #9DC2F1color.brand.blue.500--color-brand-blue-500 · #0A67DCcolor.brand.blue.800--color-brand-blue-800 · #031F42green
color.brand.green.50--color-brand-green-50 · #E6F4EAcolor.brand.green.200--color-brand-green-200 · #87C499color.brand.green.500--color-brand-green-500 · #1D7D38color.brand.green.900--color-brand-green-900 · #06190Byellow
color.brand.yellow.50--color-brand-yellow-50 · #FBE9BCcolor.brand.yellow.100--color-brand-yellow-100 · #F9DE99color.brand.yellow.400--color-brand-yellow-400 · #DD6911color.brand.yellow.500--color-brand-yellow-500 · #A9500Dcolor.brand.yellow.900--color-brand-yellow-900 · #221003Semantic colors
Each semantic token aliases a primitive. Light is the default; dark is the same name with a different alias.
Background
| Token | Role | Light | Dark |
|---|---|---|---|
page/page-bg-primary--color-page-bg-primary | Primary page background | #FFFFFF color.brand.neutral.50 | #181716 color.brand.neutral.750 |
page/page-bg-secondary--color-page-bg-secondary | Secondary page background | #F9FAFC color.brand.blue.25 | #181716 color.brand.neutral.750 |
surface/surface-neutral-01--color-surface-neutral-01 | Default raised surface | #FFFFFF color.brand.neutral.50 | #2C2B2A color.brand.neutral.600 |
surface/surface-neutral-02--color-surface-neutral-02 | Secondary surface | #FAFAFA color.brand.neutral.100 | #2C2B2A color.brand.neutral.600 |
Text
| Token | Role | Light | Dark |
|---|---|---|---|
text/text-primary--color-text-primary | Primary body and heading text | #333333 color.brand.neutral.500 | #FFFFFF color.brand.neutral.50 |
text/text-secondary--color-text-secondary | Supporting text | #666666 color.brand.neutral.400 | #CCCCCC color.brand.neutral.300 |
text/text-disabled--color-text-disabled | Disabled text | #CCCCCC color.brand.neutral.300 | #666666 color.brand.neutral.400 |
text/text-placeholder--color-text-placeholder | Placeholder text | #666666 color.brand.neutral.400 | #B4B4B4 color.brand.neutral.350 |
text/text-on-color--color-text-on-color | Text on a saturated color fill | #FFFFFF color.brand.neutral.50 | #333333 color.brand.neutral.500 |
text/text-brand-primary-01--color-text-brand-primary-01 | Brand-colored text | #570D80 color.brand.purple.500 | #F9F8FF color.brand.purple.50 |
Border
| Token | Role | Light | Dark |
|---|---|---|---|
border/border-subtle-01--color-border-subtle-01 | Subtle divider | #F2F2F2 color.brand.neutral.200 | #101010 color.brand.neutral.800 |
border/border-subtle-02--color-border-subtle-02 | Default border | #E9E9E9 color.brand.neutral.250 | #404040 color.brand.neutral.450 |
border/border-interactive-default--color-border-interactive-default | Interactive control border | #666666 color.brand.neutral.400 | #666666 color.brand.neutral.400 |
border/border-interactive-error--color-border-interactive-error | Error border | #C22D2A color.brand.red.700 | #EB6A63 color.brand.red.300 |
Interactive
| Token | Role | Light | Dark |
|---|---|---|---|
link/link-primary--color-link-primary | Primary link and focus color | #570D80 color.brand.purple.500 | #C26EFF color.brand.purple.300 |
link/link-primary-disabled--color-link-primary-disabled | Disabled link | #CCCCCC color.brand.neutral.300 | #666666 color.brand.neutral.400 |
surface Interactive/surface-brand-hover--color-surface-brand-hover | Brand hover surface | #F9F8FF color.brand.purple.50 | #230533 color.brand.purple.800 |
Feedback
| Token | Role | Light | Dark |
|---|---|---|---|
notification/surface-info--color-surface-info | Info surface | #E6F0FA color.brand.blue.50 | #031F42 color.brand.blue.800 |
notification/surface-success--color-surface-success | Success surface | #E6F4EA color.brand.green.50 | #06190B color.brand.green.900 |
notification/surface-warning--color-surface-warning | Warning surface | #FBE9BC color.brand.yellow.50 | #221003 color.brand.yellow.900 |
notification/surface-error--color-surface-error | Error surface | #FDE7E9 color.brand.red.50 | #3D0A07 color.brand.red.900 |
notification/decor-info--color-decor-info | Info indicator | #0A67DC color.brand.blue.500 | #9DC2F1 color.brand.blue.200 |
notification/decor-success--color-decor-success | Success indicator | #1D7D38 color.brand.green.500 | #87C499 color.brand.green.200 |
notification/decor-warning--color-decor-warning | Warning indicator | #A9500D color.brand.yellow.500 | #F9DE99 color.brand.yellow.100 |
notification/decor-error--color-decor-error | Error indicator | #C22D2A color.brand.red.700 | #F73B32 color.brand.red.400 |
Button
| Token | Role | Light | Dark |
|---|---|---|---|
buttons/btn-primary-bg-default--color-btn-primary-bg-default | Primary button background | #360950 color.brand.purple.700 | #F2EEFF color.brand.purple.100 |
buttons/btn-primary-bg-hover--color-btn-primary-bg-hover | Primary button hover and pressed background | #230533 color.brand.purple.800 | #E3BDF8 color.brand.purple.200 |
buttons/btn-primary-text--color-btn-primary-text | Primary button label and icon | #F9F8FF color.brand.purple.50 | #360950 color.brand.purple.700 |
buttons/btn-secondary-border--color-btn-secondary-border | Secondary button border | #360950 color.brand.purple.700 | #F9F8FF color.brand.purple.50 |
buttons/btn-secondary-text--color-btn-secondary-text | Secondary button label and icon | #360950 color.brand.purple.700 | #F9F8FF color.brand.purple.50 |
buttons/btn-secondary-bg-hover--color-btn-secondary-bg-hover | Secondary button hover and pressed background | #F2EEFF color.brand.purple.100 | #360950 color.brand.purple.700 |
Usage
Components consume semantic names. The same token resolves differently in light and dark.
Light
Page title
Supporting copy uses text-secondary on page-bg-primary.
Interactive link
Feedback
Success surface with a matching indicator color.
Dark
Page title
Supporting copy uses text-secondary on page-bg-primary.
Interactive link
Feedback
Success surface with a matching indicator color.
Accessibility
Color is never the only indicator. Pair semantic color with text or labels. Check contrast for `text-primary` and `text-secondary` on `page-bg-primary` and `surface-neutral-01`.