Brand Blue Scale
SLDS-inspired #0176D3 family, 50–900
04Colors
The complete palette, end to end: primary blue and its ten shades, the secondary navy, the neutral reading layer, status, and how every role flips in dark mode. Each dual chip shows light on the left, dark on the right.
Primary — brand blue, ten shades
The one signal color. 500 is the working blue for fills and active states; 600 is interactive text on light; 300 is interactive text on dark; 50–100 are wash-free — they exist for charts and rare tint borders, never for status washes.
--color-brand-50
var(--ns-brand-50)
--color-brand-100
var(--ns-brand-100)
--color-brand-200
var(--ns-brand-200)
--color-brand-300
var(--ns-brand-300)
--color-brand-400
var(--ns-brand-400)
--color-brand-500
var(--ns-brand-500)
--color-brand-600
var(--ns-brand-600)
--color-brand-700
var(--ns-brand-700)
--color-brand-800
var(--ns-brand-800)
--color-brand-900
var(--ns-brand-900)
Secondary — the navy console
The dark end of the same scale is the brand's second color: hero bands, the admin rail, dark mode's canvas. It is a surface family, not a second signal — nothing navy is clickable by virtue of being navy.
--color-brand-700
var(--ns-brand-700)
--color-brand-800
var(--ns-brand-800)
--color-brand-900
var(--ns-brand-900)
--color-on-brand
var(--ns-on-brand)
--color-on-dark
var(--ns-on-dark)
Neutrals — the reading layer, light ⇄ dark
Product code reaches for these roles, never raw hex: surfaces, hairline, ink for prose, muted for secondary text, label for mono labels. Every one re-resolves under [data-theme="dark"] to the navy scale — dark mode is this brand's console, not a gray reskin.
--color-scrim
var(--ns-scrim)
--color-surface
var(--ns-surface)
--color-surface-raised
var(--ns-surface-raised)
--color-surface-sunken
var(--ns-surface-sunken)
--color-border
var(--ns-border)
--color-ink
var(--ns-ink)
--color-muted
var(--ns-muted)
--color-label
var(--ns-label)
--color-grid
var(--ns-grid)
Status — raw hues, for dots, borders and icons only
--color-success
#2e844a
--color-warning
#fe9339
--color-error
#ea001e
Status ink — the only tokens allowed under status text, light ⇄ dark
--color-success-ink
var(--ns-success-ink)
--color-warning-ink
var(--ns-warning-ink)
--color-error-ink
var(--ns-error-ink)
--color-info-ink
var(--ns-info-ink)
Everything else
Chart colors live in the Charts section — seven categorical slots plus sequential and diverging ramps, CI-checked for colorblind separation and contrast in both modes. --color-accent-* is a deprecated alias of brand blue; new code never references it.
Semantic Surface & Ink
Light mode — flips automatically under data-theme=dark
Status Colors
Success / Warning / Error — used sparingly, one mark at a time
Dark Mode = Brand Navy
data-theme=\