Color System
Dual personality color system: embracing the order of Paper and the chaos of Neon.
Values come from the active theme. Ratios compare this foreground with the named background, including alpha compositing and sRGB conversion. They do not certify page accessibility.
Paper Series
Warm, tactile light mode foundation.
paper-0
var(--paper-0)Reading values; measurements remain unavailable in unsupported browsers.
paper-50
var(--paper-50)Reading values; measurements remain unavailable in unsupported browsers.
paper-100
var(--paper-100)Reading values; measurements remain unavailable in unsupported browsers.
paper-150
var(--paper-150)Reading values; measurements remain unavailable in unsupported browsers.
paper-200
var(--paper-200)Reading values; measurements remain unavailable in unsupported browsers.
Carbon Series
Deep, rich dark mode backgrounds.
carbon-950
var(--carbon-950)Reading values; measurements remain unavailable in unsupported browsers.
carbon-900
var(--carbon-900)Reading values; measurements remain unavailable in unsupported browsers.
carbon-800
var(--carbon-800)Reading values; measurements remain unavailable in unsupported browsers.
carbon-700
var(--carbon-700)Reading values; measurements remain unavailable in unsupported browsers.
carbon-600
var(--carbon-600)Reading values; measurements remain unavailable in unsupported browsers.
carbon-500
var(--carbon-500)Reading values; measurements remain unavailable in unsupported browsers.
Brand & Neon
Core identity and high-energy accent colors.
brand-b700
var(--brand-b700)Reading values; measurements remain unavailable in unsupported browsers.
brand-b600
var(--brand-b600)Reading values; measurements remain unavailable in unsupported browsers.
brand-b500
var(--brand-b500)Reading values; measurements remain unavailable in unsupported browsers.
brand-b300
var(--brand-b300)Reading values; measurements remain unavailable in unsupported browsers.
brand-b200
var(--brand-b200)Reading values; measurements remain unavailable in unsupported browsers.
neon-teal-strong
var(--neon-teal-strong)Reading values; measurements remain unavailable in unsupported browsers.
neon-teal-soft
var(--neon-teal-soft)Reading values; measurements remain unavailable in unsupported browsers.
neon-cyan-strong
var(--neon-cyan-strong)Reading values; measurements remain unavailable in unsupported browsers.
neon-cyan-soft
var(--neon-cyan-soft)Reading values; measurements remain unavailable in unsupported browsers.
neon-magenta-strong
var(--neon-magenta-strong)Reading values; measurements remain unavailable in unsupported browsers.
neon-magenta-soft
var(--neon-magenta-soft)Reading values; measurements remain unavailable in unsupported browsers.
Typography Colors
Contrast definitions for reading hierarchy.
text-strong
var(--text-strong)Reading values; measurements remain unavailable in unsupported browsers.
text-normal
var(--text-normal)Reading values; measurements remain unavailable in unsupported browsers.
text-muted
var(--text-muted)Reading values; measurements remain unavailable in unsupported browsers.
text-disabled
var(--text-disabled)Reading values; measurements remain unavailable in unsupported browsers.
Dark Mode Text
carbon-text-strong
var(--carbon-text-strong)Reading values; measurements remain unavailable in unsupported browsers.
carbon-text-normal
var(--carbon-text-normal)Reading values; measurements remain unavailable in unsupported browsers.
carbon-text-muted
var(--carbon-text-muted)Reading values; measurements remain unavailable in unsupported browsers.
Semantic States
Functional colors for feedback states.
info
var(--info)Reading values; measurements remain unavailable in unsupported browsers.
success
var(--success)Reading values; measurements remain unavailable in unsupported browsers.
warning
var(--warning)Reading values; measurements remain unavailable in unsupported browsers.
danger
var(--danger)Reading values; measurements remain unavailable in unsupported browsers.
Surface Colors
surface-info
var(--surface-info)Reading values; measurements remain unavailable in unsupported browsers.
surface-success
var(--surface-success)Reading values; measurements remain unavailable in unsupported browsers.
surface-warning
var(--surface-warning)Reading values; measurements remain unavailable in unsupported browsers.
surface-danger
var(--surface-danger)Reading values; measurements remain unavailable in unsupported browsers.
surface-brand
var(--surface-brand)Reading values; measurements remain unavailable in unsupported browsers.
Data Visualization
Categorical colors for charts and graphs.
chart-1
var(--chart-1)Reading values; measurements remain unavailable in unsupported browsers.
chart-2
var(--chart-2)Reading values; measurements remain unavailable in unsupported browsers.
chart-3
var(--chart-3)Reading values; measurements remain unavailable in unsupported browsers.
chart-4
var(--chart-4)Reading values; measurements remain unavailable in unsupported browsers.
chart-5
var(--chart-5)Reading values; measurements remain unavailable in unsupported browsers.
chart-6
var(--chart-6)Reading values; measurements remain unavailable in unsupported browsers.
Borders & Dividers
Structure definitions for containers and separators.
border-subtle
var(--border-subtle)Reading values; measurements remain unavailable in unsupported browsers.
border-strong
var(--border-strong)Reading values; measurements remain unavailable in unsupported browsers.
divider-xs
var(--divider-xs)Reading values; measurements remain unavailable in unsupported browsers.
divider-sm
var(--divider-sm)Reading values; measurements remain unavailable in unsupported browsers.
carbon-border-subtle
var(--carbon-border-subtle)Reading values; measurements remain unavailable in unsupported browsers.
carbon-border-strong
var(--carbon-border-strong)Reading values; measurements remain unavailable in unsupported browsers.
Utility Colors
Glass effects and structural borders.
panel-border
var(--panel-border)Reading values; measurements remain unavailable in unsupported browsers.
glass-bg
var(--glass-bg)Reading values; measurements remain unavailable in unsupported browsers.
Glass Lab
Physical material based on background blur and transparency.
Structural Anatomy
Line system for building component physical boundaries.