Color tokens
The tokens every component reads, in src/styles/colors.css. Change these first.
Ground and ink
The cool lavender-white page and three text steps.
Background
--color-background
oklch(98.8% 0.006 275)
Foreground
--color-foreground
oklch(20% 0.04 275)
Muted foreground
--color-muted-foreground
oklch(48% 0.03 275)
Faint foreground
--color-faint-foreground
oklch(64% 0.025 275)
Fills and lines
Inputs, table rows and the lines between them.
Muted
--color-muted
oklch(97.2% 0.01 275)
Border
--color-border
oklch(91% 0.016 275)
Input
--color-input
oklch(82% 0.025 275)
Accent
The accent button, checks and focus rings.
Primary
--color-primary
oklch(52% 0.22 268)
Primary foreground
--color-primary-foreground
oklch(1 0 0)
Primary highlight
--color-primary-highlight
oklch(60% 0.2 268)
Tints
Pale grounds from the wave glow for stat cards and highlights.
Mist
--color-mist
oklch(95% 0.02 275)
Lilac
--color-lilac
oklch(91% 0.045 280)
Frost
--color-frost
oklch(94% 0.025 245)
Inverse
The default button, dark panels and text selection.
Inverse
--color-inverse
oklch(16% 0.05 270)
Inverse foreground
--color-inverse-foreground
oklch(1 0 0)
Inverse highlight
--color-inverse-highlight
oklch(30% 0.06 270)