Theme
Colors
Color palette with primary, neutral, and semantic scales following Neo-Minimal principles of visual calm and comfort.
Purpose
The color system provides a carefully curated palette that embodies Neo-Minimal principles: slightly desaturated colors, comfortable for extended viewing, with progressive contrast that never shouts.
All colors use the OKLCH color space for perceptual uniformity, ensuring consistent lightness perception across different hues.
Tokens
Error
| Token | Light | Dark | Description |
|---|---|---|---|
--luma-color-error-50 | oklch(0.62 0.11 25) | oklch(0.70 0.13 25) | Error default - destructive actions, errors |
--luma-color-error-60 | oklch(0.56 0.10 25) | oklch(0.62 0.12 25) | Error strong |
--luma-color-error-70 | oklch(0.50 0.09 25) | oklch(0.56 0.11 25) | Error hover |
--luma-color-error-80 | oklch(0.44 0.08 25) | oklch(0.50 0.10 25) | Error active |
Neutral
| Token | Light | Dark | Description |
|---|---|---|---|
--luma-color-neutral-50 | oklch(0.99 0 0) | oklch(0.20 0.005 265) | Neutral lightest - nested card backgrounds, subtle surfaces |
--luma-color-neutral-60 | oklch(0.92 0.008 265) | oklch(0.25 0.008 265) | Neutral light - borders, dividers |
--luma-color-neutral-70 | oklch(0.85 0.01 265) | oklch(0.30 0.01 265) | Neutral medium - disabled text, placeholders |
--luma-color-neutral-80 | oklch(0.45 0.01 265) | oklch(0.70 0.01 265) | Neutral dark - secondary text (WCAG AA compliant) |
--luma-color-neutral-90 | oklch(0.45 0.01 265) | oklch(0.70 0.01 265) | Neutral darker - emphasized secondary text |
--luma-color-neutral-100 | oklch(0.22 0.01 265) | oklch(0.90 0.01 265) | Neutral darkest - primary text, shadows |
Primary
| Token | Light | Dark | Description |
|---|---|---|---|
--luma-color-primary-50 | oklch(0.63 0.14 232.13) | oklch(0.70 0.14 232.13) | Primary default - main brand color for buttons, links, actions |
--luma-color-primary-60 | oklch(0.56 0.13 232.13) | oklch(0.64 0.13 232.13) | Primary strong - emphasized elements |
--luma-color-primary-70 | oklch(0.49 0.12 232.13) | oklch(0.58 0.12 232.13) | Primary hover - hover state for primary elements |
--luma-color-primary-80 | oklch(0.43 0.11 232.13) | oklch(0.52 0.11 232.13) | Primary active - pressed/active state |
Ring
| Token | Light | Dark | Description |
|---|---|---|---|
--luma-focus-ring-color | oklch(0.63 0.14 232.13 / 0.45) | oklch(0.70 0.14 232.13 / 0.45) | Global focus ring color - accessible, visible in both themes |
--luma-focus-ring-width | 2px | — | Focus ring width - WCAG 2.4.7 minimum |
--luma-focus-ring-offset | 2px | — | Focus ring offset from element |
Success
| Token | Light | Dark | Description |
|---|---|---|---|
--luma-color-success-50 | oklch(0.72 0.08 150) | oklch(0.80 0.10 150) | Success default - positive feedback, confirmations |
--luma-color-success-60 | oklch(0.65 0.07 150) | oklch(0.72 0.09 150) | Success strong |
--luma-color-success-70 | oklch(0.58 0.06 150) | oklch(0.65 0.08 150) | Success hover |
--luma-color-success-80 | oklch(0.52 0.05 150) | oklch(0.58 0.07 150) | Success active |
Surface
| Token | Light | Dark | Description |
|---|---|---|---|
--luma-color-surface-base | oklch(1 0 0) | oklch(0.15 0.005 265) | Base surface background color (pure white avoided per Neo-Minimal) |
Warning
| Token | Light | Dark | Description |
|---|---|---|---|
--luma-color-warning-50 | oklch(0.78 0.10 85) | oklch(0.85 0.12 85) | Warning default - caution states, alerts |
--luma-color-warning-60 | oklch(0.72 0.09 85) | oklch(0.78 0.11 85) | Warning strong |
--luma-color-warning-70 | oklch(0.65 0.08 85) | oklch(0.72 0.10 85) | Warning hover |
--luma-color-warning-80 | oklch(0.58 0.07 85) | oklch(0.65 0.09 85) | Warning active |