Color System
Scales
primary
50
--color-primary-50
100
--color-primary-100
200
--color-primary-200
300
--color-primary-300
400
--color-primary-400
500
--color-primary-500
600
--color-primary-600
700
--color-primary-700
800
--color-primary-800
900
--color-primary-900
950
--color-primary-950
accent
50
--color-accent-50
100
--color-accent-100
200
--color-accent-200
300
--color-accent-300
400
--color-accent-400
500
--color-accent-500
600
--color-accent-600
700
--color-accent-700
800
--color-accent-800
900
--color-accent-900
950
--color-accent-950
neutral
50
--color-neutral-50
100
--color-neutral-100
200
--color-neutral-200
300
--color-neutral-300
400
--color-neutral-400
500
--color-neutral-500
600
--color-neutral-600
700
--color-neutral-700
800
--color-neutral-800
900
--color-neutral-900
950
--color-neutral-950
success
50
--color-success-50
100
--color-success-100
200
--color-success-200
300
--color-success-300
400
--color-success-400
500
--color-success-500
600
--color-success-600
700
--color-success-700
800
--color-success-800
900
--color-success-900
950
--color-success-950
warning
50
--color-warning-50
100
--color-warning-100
200
--color-warning-200
300
--color-warning-300
400
--color-warning-400
500
--color-warning-500
600
--color-warning-600
700
--color-warning-700
800
--color-warning-800
900
--color-warning-900
950
--color-warning-950
error
50
--color-error-50
100
--color-error-100
200
--color-error-200
300
--color-error-300
400
--color-error-400
500
--color-error-500
600
--color-error-600
700
--color-error-700
800
--color-error-800
900
--color-error-900
950
--color-error-950
info
50
--color-info-50
100
--color-info-100
200
--color-info-200
300
--color-info-300
400
--color-info-400
500
--color-info-500
600
--color-info-600
700
--color-info-700
800
--color-info-800
900
--color-info-900
950
--color-info-950
Semantic Tokens
Surfaces
Background --color-background
Surface --color-surface
Surface Raised --color-surface-raised
Overlay --color-overlay
Borders
Border --color-border
Border Strong --color-border-strong
Text
Text --color-text
Text Muted --color-text-muted
Text Subtle --color-text-subtle
Text Inverse --color-text-inverse
Interactive
Interactive --color-interactive
Interactive Hover --color-interactive-hover
Interactive Active --color-interactive-active
Interactive Muted --color-interactive-muted
Focus --color-focus
Accent
Accent --color-accent
Accent Hover --color-accent-hover
Accent Muted --color-accent-muted
Success
Success --color-success
Success Surface --color-success-surface
Success Text --color-success-text
Warning
Warning --color-warning
Warning Surface --color-warning-surface
Warning Text --color-warning-text
Error
Error --color-error
Error Surface --color-error-surface
Error Text --color-error-text
Info
Info --color-info
Info Surface --color-info-surface
Info Text --color-info-text
Header
Header Background --color-header-background
Header Text --color-header-text
Header Border --color-header-border