Foundations
Color
Two-axis color system — the base and portfolio brands × light and dark modes. Axis-aware tokens show a 2×2 grid: base·light, base·dark, portfolio·light, portfolio·dark.
Neutral scale
The raw warm-gray palette. Every semantic token resolves to a value in this scale.
--neutral-50--neutral-100--neutral-200--neutral-300--neutral-400--neutral-500--neutral-600--neutral-700--neutral-800--neutral-900Surface
Background layers — from page background to elevated containers and inverse surfaces.
--surface-primary--surface-secondary--surface-tertiary--surface-inverseText
Three levels of text hierarchy plus an inverse for use on colored backgrounds.
--text-primary--text-secondary--text-inverseAccent
Interactive and highlight color. Switches between charcoal (default) and teal (bold expression).
--accent-default--accent-hover--accent-foregroundBorder
Dividers, focus rings, and the navigation curtain used during page transitions.
--border-default--border-strong--border-focus--curtainFeedback
Status communication — error, success, warning, and info states. Each has background, foreground, and border variants.
--feedback-error--feedback-error-background--feedback-error-foreground--feedback-error-border--feedback-success-background--feedback-success-foreground--feedback-success-border--feedback-warning-background--feedback-warning-foreground--feedback-warning-border--feedback-info-background--feedback-info-foreground--feedback-info-borderSkeleton
Loading state pulse — animates from base to highlight.
--skeleton-base--skeleton-highlight