Loading navigation…
User
Semantic color system for dark-first UI, with surfaces, intent tokens, and category tokens built on Radix scales.
Learn how to work with our color system. Prepared UI builds on Radix color scales with P3 support and exposes semantic tokens so components never hard-code raw steps.
The gray scale powers all neutral surfaces, borders, text, and icons. Twelve steps plus alpha variants, from darkest canvas to lightest contrast.
Gray 1
--gray-1
Gray 2
--gray-2
Gray 3
--gray-3
Gray 4
--gray-4
Gray 5
--gray-5
Gray 6
--gray-6
Gray 7
--gray-7
Gray 8
--gray-8
Gray 9
--gray-9
Gray 10
--gray-10
Gray 11
--gray-11
Gray 12
--gray-12
The blue scale is used for accent and info intents across the product.
Blue 1
--blue-1
Blue 2
--blue-2
Blue 3
--blue-3
Blue 4
--blue-4
Blue 5
--blue-5
Blue 6
--blue-6
Blue 7
--blue-7
Blue 8
--blue-8
Blue 9
--blue-9
Blue 10
--blue-10
Blue 11
--blue-11
Blue 12
--blue-12
Two background levels for pages and UI panels. Use Background base as the default; Background alt provides subtle elevation.
Background base
--color-background-base
Background alt
--color-background-alt
Background alt2
--color-background-alt2
Background overlay
--color-background-overlay
Scrim strong
--color-scrim-strong
Background hover
--color-background-hover
Background disabled
--color-background-disabled
Three border levels from quiet to strong. Use base for most containers, alt for emphasis, and alt2 for high-contrast separation.
Border base
--color-border-base
Border alt
--color-border-alt
Border alt2
--color-border-alt2
Border overlay
--color-border-overlay
Text and icon tokens at four contrast levels, each with an inverted counterpart for use on colored backgrounds.
Text base
--color-text-base
Text alt
--color-text-alt
Text alt 2
--color-text-alt-2
Text disabled
--color-text-disabled
Icon base
--color-icon-base
Icon alt
--color-icon-alt
Icon alt 2
--color-icon-alt-2
Icon disabled
--color-icon-disabled
Intent tokens follow --color-intent-{name}-{slot} where slot is bg, bg-subtle, text, border, border-strong, or icon. Use the matching slots from the same intent to keep contrast predictable.
Accent bg
--color-intent-accent-bg
Accent bg subtle
--color-intent-accent-bg-subtle
Accent text
--color-intent-accent-text
Accent border
--color-intent-accent-border
Accent border strong
--color-intent-accent-border-strong
Accent icon
--color-intent-accent-icon
Info bg
--color-intent-info-bg
Info bg subtle
--color-intent-info-bg-subtle
Info text
--color-intent-info-text
Info border
--color-intent-info-border
Info border strong
--color-intent-info-border-strong
Info icon
--color-intent-info-icon
Success bg
--color-intent-success-bg
Success bg subtle
--color-intent-success-bg-subtle
Success text
--color-intent-success-text
Success border
--color-intent-success-border
Success border strong
--color-intent-success-border-strong
Success icon
--color-intent-success-icon
Warning bg
--color-intent-warning-bg
Warning bg subtle
--color-intent-warning-bg-subtle
Warning text
--color-intent-warning-text
Warning border
--color-intent-warning-border
Warning border strong
--color-intent-warning-border-strong
Warning icon
--color-intent-warning-icon
In Progress bg
--color-intent-in-progress-bg
In Progress bg subtle
--color-intent-in-progress-bg-subtle
In Progress text
--color-intent-in-progress-text
In Progress border
--color-intent-in-progress-border
In Progress border strong
--color-intent-in-progress-border-strong
In Progress icon
--color-intent-in-progress-icon
Destructive bg
--color-intent-destructive-bg
Destructive bg subtle
--color-intent-destructive-bg-subtle
Destructive text
--color-intent-destructive-text
Error bg
--color-intent-error-bg
Error bg subtle
--color-intent-error-bg-subtle
Error text
--color-intent-error-text
Neutral bg
--color-intent-neutral-bg
Neutral bg subtle
--color-intent-neutral-bg-subtle
Neutral text
--color-intent-neutral-text
Neutral border
--color-intent-neutral-border
Neutral icon
--color-intent-neutral-icon
Live bg
--color-intent-live-bg
Live bg subtle
--color-intent-live-bg-subtle
Live text
--color-intent-live-text
Live border
--color-intent-live-border
Live icon
--color-intent-live-icon
Domain-specific color assignments for product areas. Follow the same slot convention as intents.
ANET
--color-category-anet-bg-subtle
Police
--color-category-police-bg-subtle
Fire
--color-category-fire-bg-subtle
EMS
--color-category-ems-bg-subtle
AI
--color-category-ai-bg-subtle
Protocols
--color-category-protocol-bg-subtle
Review
--color-category-review-bg-subtle
Supervisor
--color-category-supervisor-bg-subtle
Brightness and transparent-background tokens for hover and active states on interactive elements.
Surface accent hover
--color-surface-accent-hover
Surface accent selected hover
--color-surface-accent-selected-hover
Transparent bg hover
--color-transparent-background-hover
Transparent bg active
--color-transparent-background-active
--color-text-accent, --color-background-info-subtle, intents above) before raw Radix steps.--color-category-fire-* for fire-related UI).