Color

Color serves as a fundamental element that conveys mood, establishes brand identity, and ensures visual consistency across all user interfaces.

Semantic

Semantic tokens map a role (text, background, icon, border, surface, overlay) to a primitive value per theme — reference these, never raw hex. The swatches below are live, so to compare light and dark, use the mode toggle in the header.

Text

Name Usage Primitive Text Primary--sc-color-text-primary Headings and labels Neutral 900Neutral 50--sc-color-neutral-900--sc-color-neutral-50 Text Secondary--sc-color-text-secondary Main body text Neutral 800Neutral 100--sc-color-neutral-800--sc-color-neutral-100 Text Tertiary--sc-color-text-tertiary Supporting text, captions Neutral 600Neutral 200--sc-color-neutral-600--sc-color-neutral-200 Text Primary Static--sc-color-text-primary-static Headings and labels (non-adaptive) Neutral 900Neutral 900--sc-color-neutral-900--sc-color-neutral-900 Text Secondary Static--sc-color-text-secondary-static Main body text (non-adaptive) Neutral 800Neutral 800--sc-color-neutral-800--sc-color-neutral-800 Text Tertiary Static--sc-color-text-tertiary-static Supporting text, captions (non-adaptive) Neutral 600Neutral 600--sc-color-neutral-600--sc-color-neutral-600 Text Primary Inverse--sc-color-text-primary-inverse Headings and labels on dark backgrounds Neutral 50Neutral 900--sc-color-neutral-50--sc-color-neutral-900 Text Secondary Inverse--sc-color-text-secondary-inverse Secondary inverse text Neutral 100Neutral 800--sc-color-neutral-100--sc-color-neutral-800 Text Tertiary Inverse--sc-color-text-tertiary-inverse Tertiary inverse text Neutral 200Neutral 600--sc-color-neutral-200--sc-color-neutral-600 Text Primary Inverse Static--sc-color-text-primary-inverse-static Always light (non-adaptive) Neutral 50Neutral 50--sc-color-neutral-50--sc-color-neutral-50 Text Secondary Inverse Static--sc-color-text-secondary-inverse-static Secondary inverse text (non-adaptive) Neutral 100Neutral 100--sc-color-neutral-100--sc-color-neutral-100 Text Tertiary Inverse Static--sc-color-text-tertiary-inverse-static Tertiary inverse text (non-adaptive) Neutral 200Neutral 200--sc-color-neutral-200--sc-color-neutral-200 Text Selected--sc-color-text-selected Selected state text Brand 500Brand 400--sc-color-brand-500--sc-color-brand-400 Text Disabled--sc-color-text-disabled Disabled text Neutral 300Neutral 700--sc-color-neutral-300--sc-color-neutral-700 Text Brand--sc-color-text-brand Brand-colored text Brand 500Brand 400--sc-color-brand-500--sc-color-brand-400 Text Link--sc-color-text-link Hyperlinks (default) Blue 500Blue 400--sc-color-blue-500--sc-color-blue-400 Text Link Hover--sc-color-text-link-hover Hyperlinks (hover) Blue 600Blue 300--sc-color-blue-600--sc-color-blue-300 Text Link Pressed--sc-color-text-link-pressed Hyperlinks (pressed) Blue 700Blue 200--sc-color-blue-700--sc-color-blue-200 Text Warning--sc-color-text-warning Warning messages Orange 700Orange 400--sc-color-orange-700--sc-color-orange-400 Text Negative--sc-color-text-negative Error messages Red 600Red 400--sc-color-red-600--sc-color-red-400 Text Negative Hover--sc-color-text-negative-hover Error messages (hover) Red 700Red 300--sc-color-red-700--sc-color-red-300 Text Negative Pressed--sc-color-text-negative-pressed Error messages (pressed) Red 800Red 200--sc-color-red-800--sc-color-red-200 Text Positive--sc-color-text-positive Success messages Green 600Green 400--sc-color-green-600--sc-color-green-400

Background

Name Usage Primitive Background Primary--sc-color-background-primary Main background Neutral 0Neutral 900--sc-color-neutral-0--sc-color-neutral-900 Background Hover--sc-color-background-hover Hover state backgrounds Neutral 50Neutral 800--sc-color-neutral-50--sc-color-neutral-800 Background Pressed--sc-color-background-pressed Active/pressed states Neutral 100Neutral 700--sc-color-neutral-100--sc-color-neutral-700 Background Neutral--sc-color-background-neutral Neutral containers Neutral 100Neutral 800--sc-color-neutral-100--sc-color-neutral-800 Background Neutral Hover--sc-color-background-neutral-hover Neutral hover states Neutral 150Neutral 750--sc-color-neutral-150--sc-color-neutral-750 Background Neutral Pressed--sc-color-background-neutral-pressed Neutral pressed states Neutral 200Neutral 700--sc-color-neutral-200--sc-color-neutral-700 Background Selected--sc-color-background-selected Selected item backgrounds Neutral 50Neutral 900--sc-color-neutral-50--sc-color-neutral-900 Background Subtle--sc-color-background-subtle Subtle emphasis Neutral 50Neutral 900--sc-color-neutral-50--sc-color-neutral-900 Background Inverse--sc-color-background-inverse Inverse backgrounds Neutral 900Neutral 50--sc-color-neutral-900--sc-color-neutral-50 Background Disabled--sc-color-background-disabled Disabled elements Neutral 100Neutral 900--sc-color-neutral-100--sc-color-neutral-900 Background Brand--sc-color-background-brand Primary brand actions Brand 500Brand 400--sc-color-brand-500--sc-color-brand-400 Background Brand Hover--sc-color-background-brand-hover Brand hover states Brand 600Brand 300--sc-color-brand-600--sc-color-brand-300 Background Brand Pressed--sc-color-background-brand-pressed Brand pressed states Brand 700Brand 200--sc-color-brand-700--sc-color-brand-200 Background Brand Subtle--sc-color-background-brand-subtle Subtle brand backgrounds Brand 100Brand 800--sc-color-brand-100--sc-color-brand-800 Background Info--sc-color-background-info Info messages Blue 500Blue 400--sc-color-blue-500--sc-color-blue-400 Background Info Subtle--sc-color-background-info-subtle Subtle info backgrounds Blue 100Blue 800--sc-color-blue-100--sc-color-blue-800 Background Warning--sc-color-background-warning Warning backgrounds Orange 500Orange 400--sc-color-orange-500--sc-color-orange-400 Background Warning Subtle--sc-color-background-warning-subtle Subtle warning backgrounds Orange 100Orange 800--sc-color-orange-100--sc-color-orange-800 Background Negative--sc-color-background-negative Error/destructive backgrounds Red 500Red 400--sc-color-red-500--sc-color-red-400 Background Negative Hover--sc-color-background-negative-hover Error hover states Red 600Red 300--sc-color-red-600--sc-color-red-300 Background Negative Pressed--sc-color-background-negative-pressed Error pressed states Red 700Red 200--sc-color-red-700--sc-color-red-200 Background Negative Subtle--sc-color-background-negative-subtle Subtle error backgrounds Red 100Red 800--sc-color-red-100--sc-color-red-800 Background Positive--sc-color-background-positive Success backgrounds Green 500Green 400--sc-color-green-500--sc-color-green-400 Background Positive Subtle--sc-color-background-positive-subtle Subtle success backgrounds Green 100Green 800--sc-color-green-100--sc-color-green-800 Background Mono--sc-color-background-mono Monochrome backgrounds Neutral 900Neutral 50--sc-color-neutral-900--sc-color-neutral-50 Background Mono Hover--sc-color-background-mono-hover Monochrome hover states Neutral 800Neutral 100--sc-color-neutral-800--sc-color-neutral-100 Background Mono Pressed--sc-color-background-mono-pressed Monochrome pressed states Neutral 700Neutral 200--sc-color-neutral-700--sc-color-neutral-200 Background Inverse Static--sc-color-background-inverse-static Inverse backgrounds (non-adaptive) Neutral 900Neutral 900--sc-color-neutral-900--sc-color-neutral-900 Background System Static--sc-color-background-system-static System background (non-adaptive) Neutral 1000Neutral 1000--sc-color-neutral-1000--sc-color-neutral-1000 Background System Inverse Static--sc-color-background-system-inverse-static Inverse system background (non-adaptive) Neutral 0Neutral 0--sc-color-neutral-0--sc-color-neutral-0

Icon

Name Usage Primitive Icon Primary--sc-color-icon-primary Primary (default) icons Neutral 900Neutral 50--sc-color-neutral-900--sc-color-neutral-50 Icon Subtle--sc-color-icon-subtle Secondary icons Neutral 600Neutral 600--sc-color-neutral-600--sc-color-neutral-600 Icon Inverse--sc-color-icon-inverse Icons on dark backgrounds Neutral 50Neutral 900--sc-color-neutral-50--sc-color-neutral-900 Icon Selected--sc-color-icon-selected Selected state icons Brand 500Brand 400--sc-color-brand-500--sc-color-brand-400 Icon Disabled--sc-color-icon-disabled Disabled icons Neutral 300Neutral 700--sc-color-neutral-300--sc-color-neutral-700 Icon Brand--sc-color-icon-brand Brand-colored icons Brand 500Brand 400--sc-color-brand-500--sc-color-brand-400 Icon Info--sc-color-icon-info Information icons Blue 500Blue 400--sc-color-blue-500--sc-color-blue-400 Icon Warning--sc-color-icon-warning Warning icons Orange 500Orange 400--sc-color-orange-500--sc-color-orange-400 Icon Negative--sc-color-icon-negative Error icons Red 500Red 400--sc-color-red-500--sc-color-red-400 Icon Positive--sc-color-icon-positive Success icons Green 500Green 400--sc-color-green-500--sc-color-green-400 Icon Primary Static--sc-color-icon-primary-static Primary (default) icons (non-adaptive) Neutral 900Neutral 900--sc-color-neutral-900--sc-color-neutral-900 Icon Inverse Static--sc-color-icon-inverse-static Icons on dark backgrounds (non-adaptive) Neutral 50Neutral 50--sc-color-neutral-50--sc-color-neutral-50

Border

Name Usage Primitive Border Primary--sc-color-border-primary Primary borders Neutral 300Neutral 700--sc-color-neutral-300--sc-color-neutral-700 Border Subtle--sc-color-border-subtle Subtle borders Neutral 100Neutral 750--sc-color-neutral-100--sc-color-neutral-750 Border Focus--sc-color-border-focus Focus state borders Blue 500Blue 400--sc-color-blue-500--sc-color-blue-400 Border Inverse--sc-color-border-inverse Borders on dark backgrounds Neutral 0Neutral 800--sc-color-neutral-0--sc-color-neutral-800 Border Selected--sc-color-border-selected Selected element borders Blue 500Blue 400--sc-color-blue-500--sc-color-blue-400 Border Disabled--sc-color-border-disabled Disabled borders Neutral 200Neutral 800--sc-color-neutral-200--sc-color-neutral-800 Border Brand--sc-color-border-brand Brand-colored borders Brand 500Brand 400--sc-color-brand-500--sc-color-brand-400 Border Info--sc-color-border-info Info borders Blue 500Blue 400--sc-color-blue-500--sc-color-blue-400 Border Warning--sc-color-border-warning Warning borders Orange 500Orange 400--sc-color-orange-500--sc-color-orange-400 Border Negative--sc-color-border-negative Error borders Red 500Red 400--sc-color-red-500--sc-color-red-400 Border Positive--sc-color-border-positive Success borders Green 500Green 400--sc-color-green-500--sc-color-green-400 Border Mono--sc-color-border-mono Monochrome borders Neutral 900Neutral 50--sc-color-neutral-900--sc-color-neutral-50

Surface

Name Usage Primitive Surface L0--sc-color-surface-l0 Base page background, lowest elevation Neutral 0Neutral 1000--sc-color-neutral-0--sc-color-neutral-1000 Surface L1--sc-color-surface-l1 Cards on page, subtle containers Neutral 0Neutral 950--sc-color-neutral-0--sc-color-neutral-950 Surface L2--sc-color-surface-l2 Dropdowns, popovers, panels Neutral 0Neutral 900--sc-color-neutral-0--sc-color-neutral-900 Surface L3--sc-color-surface-l3 Modals, dialogs, overlays Neutral 0Neutral 850--sc-color-neutral-0--sc-color-neutral-850 Surface L4--sc-color-surface-l4 Highest elevation, system alerts Neutral 0Neutral 800--sc-color-neutral-0--sc-color-neutral-800

Overlay

Name Usage Primitive Overlay 30--sc-color-overlay-30 30% opacity overlay (theme-aware) Neutral 0 Alpha 30Neutral 1000 Alpha 30--sc-color-neutral-0-alpha-30--sc-color-neutral-1000-alpha-30 Overlay 30 Static--sc-color-overlay-30-static 30% opacity overlay (fixed) Neutral 0 Alpha 30Neutral 0 Alpha 30--sc-color-neutral-0-alpha-30--sc-color-neutral-0-alpha-30 Overlay 30 Inverse--sc-color-overlay-30-inverse 30% opacity inverse overlay Neutral 1000 Alpha 30Neutral 0 Alpha 30--sc-color-neutral-1000-alpha-30--sc-color-neutral-0-alpha-30 Overlay 30 Inverse Static--sc-color-overlay-30-inverse-static 30% opacity inverse overlay (fixed) Neutral 1000 Alpha 30Neutral 1000 Alpha 30--sc-color-neutral-1000-alpha-30--sc-color-neutral-1000-alpha-30 Overlay 70--sc-color-overlay-70 70% opacity overlay Neutral 0 Alpha 70Neutral 1000 Alpha 70--sc-color-neutral-0-alpha-70--sc-color-neutral-1000-alpha-70 Overlay 70 Static--sc-color-overlay-70-static 70% opacity overlay (fixed) Neutral 0 Alpha 70Neutral 0 Alpha 70--sc-color-neutral-0-alpha-70--sc-color-neutral-0-alpha-70 Overlay 70 Inverse--sc-color-overlay-70-inverse 70% opacity inverse overlay Neutral 1000 Alpha 70Neutral 0 Alpha 70--sc-color-neutral-1000-alpha-70--sc-color-neutral-0-alpha-70 Overlay 70 Inverse Static--sc-color-overlay-70-inverse-static 70% opacity inverse overlay (fixed) Neutral 1000 Alpha 70Neutral 1000 Alpha 70--sc-color-neutral-1000-alpha-70--sc-color-neutral-1000-alpha-70

Primitives

Primitives are the raw, theme-independent values — the base palette every semantic token resolves to. Reference the semantic tokens above in product UI rather than these directly, so light/dark theming stays automatic — product UI should reference only the semantic tokens, never these. The contrast pill shows each value’s WCAG ratio against the background it reads best on — black or white.

Neutral

Contrast Name Variable Hex 21 : 1 Neutral 0 --sc-color-neutral-0 #FFFFFF 18.8 : 1 Neutral 50 --sc-color-neutral-50 #F2F2F2 16.7 : 1 Neutral 100 --sc-color-neutral-100 #E5E5E5 14.9 : 1 Neutral 150 --sc-color-neutral-150 #D9D9D9 13.1 : 1 Neutral 200 --sc-color-neutral-200 #CCCCCC 11.4 : 1 Neutral 250 --sc-color-neutral-250 #BFBFBF 10 : 1 Neutral 300 --sc-color-neutral-300 #B3B3B3 8.6 : 1 Neutral 350 --sc-color-neutral-350 #A6A6A6 7.4 : 1 Neutral 400 --sc-color-neutral-400 #999999 6.2 : 1 Neutral 450 --sc-color-neutral-450 #8C8C8C 5.3 : 1 Neutral 500 --sc-color-neutral-500 #808080 4.7 : 1 Neutral 550 --sc-color-neutral-550 #737373 5.7 : 1 Neutral 600 --sc-color-neutral-600 #666666 7 : 1 Neutral 650 --sc-color-neutral-650 #595959 8.6 : 1 Neutral 700 --sc-color-neutral-700 #4C4C4C 10.4 : 1 Neutral 750 --sc-color-neutral-750 #404040 12.6 : 1 Neutral 800 --sc-color-neutral-800 #333333 15.1 : 1 Neutral 850 --sc-color-neutral-850 #262626 17.4 : 1 Neutral 900 --sc-color-neutral-900 #1A1A1A 19.4 : 1 Neutral 950 --sc-color-neutral-950 #0D0D0D 21 : 1 Neutral 1000 --sc-color-neutral-1000 #000000

Brand

Contrast Name Variable Hex 14.9 : 1 Brand 100 --sc-color-brand-100 #D0D8FF 10.9 : 1 Brand 200 --sc-color-brand-200 #A9B7FF 7.7 : 1 Brand 300 --sc-color-brand-300 #8196FF 5.5 : 1 Brand 400 --sc-color-brand-400 #5A76FF 5.4 : 1 Brand 500 --sc-color-brand-500 #3355FF 7.4 : 1 Brand 600 --sc-color-brand-600 #2945CE 10.3 : 1 Brand 700 --sc-color-brand-700 #1F349D 14 : 1 Brand 800 --sc-color-brand-800 #16246C 17.9 : 1 Brand 900 --sc-color-brand-900 #0C133B

Purple

Contrast Name Variable Hex 14.5 : 1 Purple 100 --sc-color-purple-100 #DCD0FF 10.3 : 1 Purple 200 --sc-color-purple-200 #BEA9FF 7.1 : 1 Purple 300 --sc-color-purple-300 #A181FF 4.9 : 1 Purple 400 --sc-color-purple-400 #835AFF 6 : 1 Purple 500 --sc-color-purple-500 #6633FF 8.2 : 1 Purple 600 --sc-color-purple-600 #5229CE 11.1 : 1 Purple 700 --sc-color-purple-700 #3F1F9D 14.6 : 1 Purple 800 --sc-color-purple-800 #2B166C 18.2 : 1 Purple 900 --sc-color-purple-900 #180C3B

Blue

Contrast Name Variable Hex 14.9 : 1 Blue 100 --sc-color-blue-100 #D0D8FF 10.9 : 1 Blue 200 --sc-color-blue-200 #A9B7FF 7.7 : 1 Blue 300 --sc-color-blue-300 #8196FF 5.5 : 1 Blue 400 --sc-color-blue-400 #5A76FF 5.4 : 1 Blue 500 --sc-color-blue-500 #3355FF 7.4 : 1 Blue 600 --sc-color-blue-600 #2945CE 10.3 : 1 Blue 700 --sc-color-blue-700 #1F349D 14 : 1 Blue 800 --sc-color-blue-800 #16246C 17.9 : 1 Blue 900 --sc-color-blue-900 #0C133B

Green

Contrast Name Variable Hex 15.7 : 1 Green 100 --sc-color-green-100 #C4E7D0 12.2 : 1 Green 200 --sc-color-green-200 #93D4A9 9.4 : 1 Green 300 --sc-color-green-300 #62C081 7.3 : 1 Green 400 --sc-color-green-400 #31AD5A 5.6 : 1 Green 500 --sc-color-green-500 #009933 5.4 : 1 Green 600 --sc-color-green-600 #007C29 8 : 1 Green 700 --sc-color-green-700 #005E1F 11.9 : 1 Green 800 --sc-color-green-800 #004116 16.9 : 1 Green 900 --sc-color-green-900 #00230C

Orange

Contrast Name Variable Hex 16.7 : 1 Orange 100 --sc-color-orange-100 #FCE1C7 13.8 : 1 Orange 200 --sc-color-orange-200 #F9C998 11.4 : 1 Orange 300 --sc-color-orange-300 #F7B06A 9.4 : 1 Orange 400 --sc-color-orange-400 #F4983B 7.8 : 1 Orange 500 --sc-color-orange-500 #F27F0D 5.3 : 1 Orange 600 --sc-color-orange-600 #C4670B 6.2 : 1 Orange 700 --sc-color-orange-700 #954E08 10 : 1 Orange 800 --sc-color-orange-800 #673606 15.6 : 1 Orange 900 --sc-color-orange-900 #381D03

Red

Contrast Name Variable Hex 14.3 : 1 Red 100 --sc-color-red-100 #F9CACA 10.2 : 1 Red 200 --sc-color-red-200 #F49E9E 7.4 : 1 Red 300 --sc-color-red-300 #F07272 5.5 : 1 Red 400 --sc-color-red-400 #EB4646 4.6 : 1 Red 500 --sc-color-red-500 #E61A1A 6.6 : 1 Red 600 --sc-color-red-600 #BA1515 9.4 : 1 Red 700 --sc-color-red-700 #8E1010 13.4 : 1 Red 800 --sc-color-red-800 #620B0B 17.8 : 1 Red 900 --sc-color-red-900 #350606

Guidelines

Do

  • Reference semantic tokens (--sc-color-text-*, -background-*, -border-*…) in product UI so light and dark theming stays automatic.
  • Match the token to its role — body copy on text tokens, containers on surface or background tokens, dividers on border tokens.
  • Use the -inverse tokens on dark or brand-filled surfaces, and -static tokens where a value must not flip with the theme.
  • Pair status colors (positive, warning, negative) with an icon, label, or shape so meaning survives for color-blind users.
  • Check every text-on-surface pairing against WCAG AA in both themes — the contrast ratio is listed beside each primitive.

Don’t

  • Don’t hardcode raw hex (e.g. #3355FF) when a semantic token exists.
  • Don’t use brand or accent colors for long-form body text or large fills where contrast falls short.
  • Don’t rely on color alone to communicate state — success, warning, and error must carry a second cue.
  • Don’t reference primitive tokens directly in product UI — they’re the raw palette the semantic layer resolves to.
  • Don’t override a token’s value inline — adjust the role or choose a token that already fits.
  • Don’t place text on a surface that fails 4.5:1 (3:1 for large text), even briefly in a hover or pressed state.

Accessibility