Colors

Complete color system — base primitives, semantic tokens, and status colors. All values support light and dark modes.

Base / Brand
White
#FFFFFF
Dark
#02050D
Black
#000000
Neutral Grayscale palette for surfaces, text, borders, and UI chrome.
Neutral-0
#FFFFFF
Neutral-10
#FAFAFA
Neutral-20
#F5F5F5
Neutral-30
#EBEBEC
Neutral-40
#DEDEDE
Neutral-50
#BFBFBF
Neutral-60
#B0B0B0
Neutral-70
#A3A3A3
Neutral-80
#949494
Neutral-90
#858585
Neutral-100
#757575
Neutral-200
#666666
Neutral-300
#575757
Neutral-400
#4A4A4A
Neutral-500
#3B3B3B
Neutral-600
#2E2E2E
Neutral-700
#1C1C1C
Neutral-800
#0D0D0D
Neutral-900
#000000
Peggy Blue Brand color for interactive elements, links, and secondary actions.
Blue-50
#E8EAF9
Blue-100
#B8BDEC
Blue-200
#959DE3
Blue-300
#6571D6
Blue-400
#4755CE
Blue-500
#192BC2
Blue-600
#1727B1
Blue-700
#121F8A
Blue-800
#0E186B
Blue-900
#0B1251
Critical Error states, destructive actions, and validation failures.
Critical-25
#FFF5F6
Critical-50
#FDE6E9
Critical-100
#F9B0BB
Critical-200
#F78A9B
Critical-300
#F3546D
Critical-400
#F13351
Critical-500
#ED0025
Critical-600
#D80022
Critical-700
#A8001A
Critical-800
#820014
Critical-900
#640010
Warning Cautionary states, alerts, and non-blocking issues.
Warning-50
#FFFBE7
Warning-100
#FFF2B3
Warning-200
#FFEC8E
Warning-300
#FFE45B
Warning-400
#FFDE3B
Warning-500
#FFD60A
Warning-600
#E8C309
Warning-700
#B59807
Warning-800
#8C7606
Warning-900
#6B5A04
Success Positive states, confirmations, and completion indicators.
Success-50
#E6F4EC
Success-100
#B0DCC3
Success-200
#8ACBA5
Success-400
#33A463
Success-500
#008D3C
Success-600
#008037
Success-700
#00642B
Success-800
#004E21
Success-900
#003B19

Semantic Tokens

Semantic tokens map primitive colors to meaningful UI contexts. They automatically adapt between light and dark modes.

Background
TokenLightDark
--color-bg-canvasNeutral-20Neutral-900
--color-bg-defaultNeutral-0Neutral-800
--color-bg-subtleNeutral-10Neutral-700
--color-bg-mutedNeutral-30Neutral-600
--color-bg-emphasisNeutral-900Neutral-0
--color-bg-inverseNeutral-900Neutral-0
Surface
TokenLightDark
--color-surface-defaultNeutral-0Neutral-700
--color-surface-raisedNeutral-0Neutral-600
--color-surface-overlayNeutral-0Neutral-600
--color-surface-sunkenNeutral-10Neutral-800
--color-surface-sunken2Neutral-20Neutral-900
Text
TokenLightDark
--color-text-primaryNeutral-900Neutral-0
--color-text-secondaryNeutral-400Neutral-60
--color-text-tertiaryNeutral-200Neutral-90
--color-text-placeholderNeutral-90Neutral-200
--color-text-placeholder-subtleNeutral-30Neutral-600
--color-text-disabledNeutral-60Neutral-400
--color-text-inverseNeutral-0Neutral-900
--color-text-linkBlue-500Blue-300
--color-text-link-hoverBlue-600Blue-200
Brand
TokenLightDark
--color-brand-primaryNeutral-900Neutral-0
--color-brand-primary-hoverNeutral-700Neutral-10
--color-brand-primary-activeNeutral-600Neutral-30
--color-brand-on-primaryNeutral-0Neutral-900
--color-brand-secondaryBlue-500Blue-400
--color-brand-secondary-hoverBlue-600Blue-300
--color-brand-secondary-activeBlue-700Blue-200
--color-brand-on-secondaryNeutral-0Neutral-0
--color-brand-tertiaryNeutral-400Neutral-60
--color-brand-tertiary-hoverNeutral-900Neutral-0
--color-brand-tertiary-activeNeutral-700Neutral-10
Interactive
TokenLightDark
--color-interactive-primaryNeutral-900Neutral-0
--color-interactive-primary-hoverNeutral-700Neutral-10
--color-interactive-primary-activeNeutral-600Neutral-30
--color-interactive-primary-disabledNeutral-50Neutral-500
--color-interactive-secondaryNeutral-0Neutral-700
--color-interactive-secondary-hoverNeutral-10Neutral-600
--color-interactive-ghost-hoverNeutral-20Neutral-600
Border
TokenLightDark
--color-border-on-canvasNeutral-30Neutral-800
--color-border-subtleNeutral-30Neutral-700
--color-border-mediumNeutral-40Neutral-600
--color-border-defaultNeutral-50Neutral-500
--color-border-strongNeutral-700Neutral-90
--color-border-focusBlue-500Blue-400

Status Colors

Status colors provide consistent visual feedback for success, warning, and critical states.

Success
TokenLightDark
--color-success-bgSuccess-100Success-800
--color-success-bg-subtleSuccess-50Success-900
--color-success-borderSuccess-200Success-700
--color-success-textSuccess-700Success-200
--color-success-iconSuccess-500Success-400
--color-success-actionSuccess-500Success-400
--color-success-action-hoverSuccess-600Success-600
Warning
TokenLightDark
--color-warning-bgWarning-100Warning-800
--color-warning-bg-subtleWarning-50Warning-900
--color-warning-borderWarning-300Warning-700
--color-warning-textWarning-800Warning-200
--color-warning-iconWarning-600Warning-400
--color-warning-actionWarning-500Warning-400
--color-warning-action-hoverWarning-600Warning-300
Critical
TokenLightDark
--color-critical-bgCritical-50Critical-800
--color-critical-bg-subtleCritical-25Critical-900
--color-critical-borderCritical-200Critical-700
--color-critical-textCritical-700Critical-200
--color-critical-iconCritical-500Critical-400
--color-critical-actionCritical-500Critical-400
--color-critical-action-hoverCritical-600Critical-300
--color-critical-disabledCritical-100Critical-700

Usage Examples

Practical examples of semantic tokens in action.

Canvas background
background: var(--color-bg-canvas);
Surface with border
background: var(--color-surface-default);
border: 1px solid var(--color-border-default);
Secondary text
color: var(--color-text-secondary);
Link text
color: var(--color-text-link);
Success
background: var(--color-success-bg);
color: var(--color-success-text);
Warning
background: var(--color-warning-bg);
color: var(--color-warning-text);
Critical
background: var(--color-critical-bg);
color: var(--color-critical-text);
Primary Brand
background: var(--color-brand-primary);
color: var(--color-brand-on-primary);