Colors
One neutral scale plus status palettes. Each scale runs from subtle backgrounds to solid colors to accessible text.
Palette usage
Read each palette from left to right. Lower steps are subtle surfaces, middle steps are interaction and border tones, and higher steps are for solid fills and high-contrast text.
Backgrounds
Interactions
Borders
Solids
Text
Neutral
Success
Warning
Info
Danger
Neutral
Token
Value
--source-neutral-0
#FFFFFF
--source-neutral-50
#FAF8F5
--source-neutral-100
#F2EEE8
--source-neutral-200
#E5DFD8
--source-neutral-300
#CBC6BF
--source-neutral-400
#A9A39D
--source-neutral-500
#89847F
--source-neutral-600
#686462
--source-neutral-700
#4C4946
--source-neutral-800
#302F2C
--source-neutral-900
#1D1B1A
--source-neutral-950
#0E0D0C
Success
Token
Value
--source-success-0
#F0FDF4
--source-success-50
#DCFCE7
--source-success-100
#BBF7D0
--source-success-200
#86EFAC
--source-success-300
#4ADE80
--source-success-400
#22C55E
--source-success-500
#16A34A
--source-success-600
#15803D
--source-success-700
#166534
--source-success-800
#14532D
--source-success-900
#052E16
--source-success-950
#022212
Warning
Token
Value
--source-warning-0
#FFFDF5
--source-warning-50
#FFF5D6
--source-warning-100
#FEF0C0
--source-warning-200
#FDE280
--source-warning-300
#FCC53C
--source-warning-400
#F5A800
--source-warning-500
#DC8A00
--source-warning-600
#B86A00
--source-warning-700
#924D00
--source-warning-800
#703500
--source-warning-900
#522200
--source-warning-950
#2A1100
Info
Token
Value
--source-info-0
#F5F8FF
--source-info-50
#E8F0FF
--source-info-100
#D5E5FF
--source-info-200
#A6C4FF
--source-info-300
#6EA0FF
--source-info-400
#3678FF
--source-info-500
#0F62FE
--source-info-600
#0043CE
--source-info-700
#002D9C
--source-info-800
#001D6C
--source-info-900
#001141
--source-info-950
#000820
Danger
Token
Value
--source-danger-0
#FFF5F5
--source-danger-50
#FFE6E6
--source-danger-100
#FFD7D9
--source-danger-200
#FFB3B8
--source-danger-300
#FF8389
--source-danger-400
#FA4D56
--source-danger-500
#DA1E28
--source-danger-600
#A2191F
--source-danger-700
#750E13
--source-danger-800
#520408
--source-danger-900
#3B0000
--source-danger-950
#1C0000
What accent themes do
Accent themes switch the identity hue for interactive tokens (--source-color-accent, --source-color-accent-subtle, --source-color-accent-text, --source-color-accent-foreground). The default is blue. Set a theme on html or body with data-source-theme.
<html data-source-theme="green">
...
</html>Accent palette overview
Each theme exposes stops 50 to 900. Accent semantic tokens map to this scale depending on mode, for example --source-color-accent uses -600 in light and -400 in dark.
Backgrounds
Interactions
Borders
Solids
Text
blue
green
red
orange
yellow
pink
purple
teal
Component palettes vs accent theme
A component palette controls local semantic color intent (neutral, accent, success, warning, danger, info). The global accent theme changes what accent means across the system.
<Tabs palette="neutral" /> // neutral visuals
<Tabs palette="accent" /> // uses current theme accent
<Badge palette="danger" /> // stays danger regardless of accent themeDark mode mapping
In dark mode, accent semantic tokens shift to higher-contrast stops (for example accent uses -400 instead of -600). This keeps contrast stable without changing component APIs.
Light mode
Token
Value
Resolves to
--source-color-bg
var(--source-neutral-50)
#FAF8F5
--source-color-surface
var(--source-neutral-0)
#FFFFFF
--source-color-surface-raised
var(--source-neutral-100)
#F2EEE8
--source-color-border
var(--source-neutral-200)
#E5DFD8
--source-color-border-strong
var(--source-neutral-300)
#CBC6BF
--source-color-text
var(--source-neutral-900)
#1D1B1A
--source-color-text-secondary
var(--source-neutral-600)
#686462
--source-color-text-label
var(--source-neutral-500)
#89847F
--source-color-text-disabled
var(--source-neutral-400)
#A9A39D
--source-color-text-subtle
var(--source-neutral-400)
#A9A39D
--source-color-text-inverse
var(--source-neutral-0)
#FFFFFF
--source-color-success
var(--source-success-600)
#15803D
--source-color-success-subtle
var(--source-success-50)
#DCFCE7
--source-color-warning
var(--source-warning-600)
#B86A00
--source-color-warning-subtle
var(--source-warning-50)
#FFF5D6
--source-color-info
var(--source-info-600)
#0043CE
--source-color-info-subtle
var(--source-info-100)
#D5E5FF
--source-color-danger
var(--source-danger-500)
#DA1E28
--source-color-danger-subtle
var(--source-danger-50)
#FFE6E6
--source-color-background
var(--source-color-bg)
#FAF8F5
--source-color-bg-default
var(--source-color-bg)
#FAF8F5
--source-color-surface-default
var(--source-color-surface)
#FFFFFF
--source-color-border-default
var(--source-color-border)
#E5DFD8
--source-color-text-default
var(--source-color-text)
#1D1B1A
--source-color-status-success-default
var(--source-color-success)
#15803D
--source-color-status-success-subtle
var(--source-color-success-subtle)
#DCFCE7
--source-color-status-warning-default
var(--source-color-warning)
#B86A00
--source-color-status-warning-subtle
var(--source-color-warning-subtle)
#FFF5D6
--source-color-status-info-default
var(--source-color-info)
#0043CE
--source-color-status-info-subtle
var(--source-color-info-subtle)
#D5E5FF
--source-color-status-danger-default
var(--source-color-danger)
#DA1E28
--source-color-status-danger-subtle
var(--source-color-danger-subtle)
#FFE6E6
Dark mode
Token
Value
Resolves to
--source-color-bg
var(--source-neutral-950)
#0E0D0C
--source-color-surface
var(--source-neutral-900)
#1D1B1A
--source-color-surface-raised
var(--source-neutral-800)
#302F2C
--source-color-border
var(--source-neutral-700)
#4C4946
--source-color-border-strong
var(--source-neutral-600)
#686462
--source-color-text
var(--source-neutral-50)
#FAF8F5
--source-color-text-secondary
var(--source-neutral-400)
#A9A39D
--source-color-text-label
var(--source-neutral-500)
#89847F
--source-color-text-disabled
var(--source-neutral-600)
#686462
--source-color-text-subtle
var(--source-neutral-600)
#686462
--source-color-text-inverse
var(--source-neutral-900)
#1D1B1A
--source-color-success
var(--source-success-400)
#22C55E
--source-color-success-subtle
var(--source-success-900)
#052E16
--source-color-warning
var(--source-warning-400)
#F5A800
--source-color-warning-subtle
var(--source-warning-900)
#522200
--source-color-info
var(--source-info-400)
#3678FF
--source-color-info-subtle
var(--source-info-900)
#001141
--source-color-danger
var(--source-danger-400)
#FA4D56
--source-color-danger-subtle
var(--source-danger-900)
#3B0000
Import
@import "path/to/tokens/colors.css";Semantic tokens
/* Surface and background */
--source-color-background: var(--source-neutral-50);
--source-color-surface: var(--source-neutral-0);
--source-color-surface-raised: var(--source-neutral-100);
/* Text */
--source-color-text: var(--source-neutral-900);
--source-color-text-secondary: var(--source-neutral-600);
--source-color-text-disabled: var(--source-neutral-400);
/* Borders */
--source-color-border: var(--source-neutral-200);
--source-color-border-strong: var(--source-neutral-300);
/* Status */
--source-color-success: var(--source-success-600);
--source-color-success-subtle: var(--source-success-50);
--source-color-warning: var(--source-warning-600);
--source-color-warning-subtle: var(--source-warning-50);
--source-color-info: var(--source-info-600);
--source-color-info-subtle: var(--source-info-50);
--source-color-danger: var(--source-danger-500);
--source-color-danger-subtle: var(--source-danger-50);Dark mode overrides
.dark {
--source-color-background: var(--source-neutral-950);
--source-color-surface: var(--source-neutral-900);
--source-color-surface-raised: var(--source-neutral-800);
--source-color-text: var(--source-neutral-50);
--source-color-text-secondary: var(--source-neutral-400);
--source-color-text-disabled: var(--source-neutral-600);
--source-color-border: var(--source-neutral-700);
--source-color-border-strong: var(--source-neutral-600);
--source-color-success: var(--source-success-400);
--source-color-success-subtle: var(--source-success-900);
--source-color-warning: var(--source-warning-400);
--source-color-warning-subtle: var(--source-warning-900);
--source-color-info: var(--source-info-400);
--source-color-info-subtle: var(--source-info-900);
--source-color-danger: var(--source-danger-400);
--source-color-danger-subtle: var(--source-danger-900);
}