Color palette: light tokens
Near-monochrome cool neutrals (hue 250°, chroma 0.01). Blue accent is the ONE chromatic token: oklch(0.58 0.19 254) = #0077f7. Two-axis rule: cool neutral scale plus one blue accent.
| Name | Light | Dark | Description | Tailwind utility |
|---|---|---|---|---|
--background | oklch(0.99 0.003 250) | oklch(0.16 0.01 250) | page surface — the dominant body fill. Barely-tinted paper in light mode. | color: background |
--foreground | oklch(0.18 0.015 250) | oklch(0.96 0.005 250) | default text colour on --background. | color: foreground |
--card | oklch(1 0 0) | oklch(0.2 0.012 250) | card surface — sits on --background with a 1px border, never a shadow. | color: card |
--card-foreground | oklch(0.18 0.015 250) | oklch(0.96 0.005 250) | text on a --card surface. | color: card-foreground |
--popover | oklch( 0.99 0.003 250 ) | oklch(0.22 0.012 250) | floating surface for popover, dropdown, hover card, and command list — overlaid via --vueda-shadow-popover. | color: popover |
--popover-foreground | oklch(0.18 0.015 250) | oklch(0.96 0.005 250) | text on a --popover surface. | color: popover-foreground |
--primary | oklch( 0.58 0.19 254 ) | oklch(0.68 0.17 254) | VUEDA blue. Bound to the primary CTA, focus rings (--ring aliases this), selected-row markers, and the brand mark. | color: primary |
--primary-foreground | oklch( 0.99 0.003 250 ) | oklch(0.16 0.01 250) | text painted on a --primary fill (primary Button label, selected sidebar item text). | color: primary-foreground |
--primary-hover | oklch( 0.48 0.19 254 ) | oklch(0.76 0.13 254) | primary fill, hover. One perceptual lightness step (~0.10 OKLCH L) darker than --primary so the state change clears the glance-detection threshold on poor displays, instead of washing out the way an alpha fade over the page surface does. | color: primary-hover |
--primary-active | oklch(0.4 0.16 254) | oklch(0.84 0.1 254) | primary fill, pressed — a second lightness step darker again. | color: primary-active |
--secondary | oklch( 0.965 0.005 250 ) | oklch(0.24 0.012 250) | secondary neutral surface — kept distinct from --muted for shadcn compat; resolves to the same tint. | color: secondary |
--secondary-foreground | oklch(0.22 0.015 250) | oklch(0.96 0.005 250) | text on a --secondary surface. | color: secondary-foreground |
--secondary-hover | oklch( 0.9 0.006 250 ) | oklch(0.32 0.013 250) | secondary surface, hover. A visible lightness step darker than --secondary; the alpha-over-surface recipe this replaces was near-invisible because secondary already sits almost on top of the page surface. | color: secondary-hover |
--secondary-active | oklch(0.83 0.008 250) | oklch(0.4 0.014 250) | secondary surface, pressed. | color: secondary-active |
--muted | oklch( 0.965 0.005 250 ) | oklch(0.24 0.012 250) | muted neutral surface — disabled control fills, subdued chips, low-emphasis backgrounds. | color: muted |
--muted-foreground | oklch(0.5 0.015 250) | oklch(0.68 0.012 250) | muted text — captions, supporting labels, table th. | color: muted-foreground |
--accent | oklch( 0.92 0.008 250 ) | oklch( 0.31 0.014 250 ) | hover / selected surface, one step darker than --muted. Tuned to sit a perceptible lightness step (~0.07 L) below the --background / --popover surfaces so the menu / list highlight and row hover (bg-accent/50) clear the glance threshold per § 2.5; half-strength (bg-accent/50) stays the canonical "current section" treatment. | color: accent |
--accent-foreground | oklch(0.18 0.015 250) | oklch(0.96 0.005 250) | text on a --accent surface. | color: accent-foreground |
--accent-active | oklch( 0.85 0.01 250 ) | oklch(0.39 0.014 250) | pressed neutral surface for outline / ghost buttons: one step below --accent (which serves as their hover) so press reads deeper than hover, without disturbing the --accent selection / row-hover semantics. | color: accent-active |
--destructive | oklch( 0.52 0.18 27 ) | oklch(0.65 0.2 27) | red status — destructive actions, error state, the Calendar strikethrough rule. | color: destructive |
--destructive-foreground | oklch(0.99 0.003 250) | text on a --destructive fill; identical in light and dark. | color: destructive-foreground | |
--destructive-hover | oklch(0.44 0.18 27) | oklch(0.6 0.18 27) | destructive fill, hover — darker than --destructive. | color: destructive-hover |
--destructive-active | oklch(0.37 0.16 27) | oklch(0.66 0.19 27) | destructive fill, pressed. | color: destructive-active |
--success | oklch(0.5 0.12 155) | oklch(0.72 0.16 155) | green status — success confirmation; pair with /10 surface and /50 border. | color: success |
--warning | oklch(0.58 0.14 70) | oklch(0.78 0.15 70) | amber status — warning state; pair with /10 surface and /50 border. | color: warning |
--info | oklch(0.58 0.19 254) | oklch(0.68 0.17 254) | informational status — aliased to --primary because info IS the accent. | color: info |
--border | oklch(0.9 0.008 250) | oklch(1 0 0 / 0.08) | default hairline colour for separators, card edges, and border defaults. | color: border |
--border-strong | oklch( 0.82 0.012 250 ) | oklch(1 0 0 / 0.16) | one step darker than --border. Hover-border tint on input-shell controls (SelectTrigger, etc): signals affordance without triggering the focus ring. | color: border-strong |
--input | oklch( 0.9 0.008 250 ) | oklch(0.26 0.009 250) | input edge — default colour painted by the hairline-input variant. Matches --border at rest; controls swap to --border-strong on hover and --ring on focus. | color: input |
--ring | var( --primary ) | var(--primary) | focus-ring colour. Aliases --primary so focus tracks the accent; destructive controls swap to --destructive via focus-ring-destructive. | color: ring |
--overlay | oklch( 0.12 0.015 250 / 0.6 ) | scrim fill for dialog / sheet / drawer overlays; identical in light and dark. | color: overlay | |
--sunken | oklch( 0.95 0.008 250 ) | oklch(0.12 0.01 250) | inset surface, one step below --background. Recessed areas: command-palette stage, code blocks, empty table trays. | color: sunken |
--sidebar | oklch(0.97 0.005 250) | oklch(0.14 0.01 250) | sidebar chrome surface. | color: sidebar |
--sidebar-foreground | oklch(0.22 0.015 250) | oklch(0.92 0.005 250) | text on the sidebar surface. | color: sidebar-foreground |
--sidebar-primary | oklch( 0.58 0.19 254 ) | oklch(0.68 0.17 254) | accent colour inside the sidebar (active rail, primary signals). Mirrors --primary so the sidebar tracks the brand accent. | color: sidebar-primary |
--sidebar-primary-foreground | oklch(0.99 0.003 250) | oklch(0.16 0.01 250) | text on a --sidebar-primary fill. | color: sidebar-primary-foreground |
--sidebar-accent | oklch( 0.93 0.008 250 ) | oklch(0.2 0.012 250) | hover / selected fill inside the sidebar — a neutral tint between --sidebar and --sidebar-border. | color: sidebar-accent |
--sidebar-accent-foreground | oklch(0.18 0.015 250) | oklch(0.96 0.005 250) | text on a --sidebar-accent surface. | color: sidebar-accent-foreground |
--sidebar-accent-active | oklch( 0.86 0.01 250 ) | oklch( 0.26 0.012 250 ) | pressed sidebar fill: one step below --sidebar-accent (its hover) so a sidebar control presses deeper than it hovers, the sidebar-context analogue of --accent-active. | color: sidebar-accent-active |
--sidebar-border | oklch(0.88 0.008 250) | oklch(1 0 0 / 0.06) | hairline colour for sidebar separators and item edges. | color: sidebar-border |
--sidebar-ring | var( --ring ) | var(--ring) | focus-ring inside the sidebar; aliases --ring so focus state stays consistent across chrome and content. | color: sidebar-ring |
Tokens
--background
| Field | Value |
|---|---|
| Light | oklch(0.99 0.003 250) |
| Dark | oklch(0.16 0.01 250) |
| Tailwind utility | color: background |
| Source | client/lib/theme/vueda-tailwind/base.css:396 |
page surface — the dominant body fill. Barely-tinted paper in light mode.
--foreground
| Field | Value |
|---|---|
| Light | oklch(0.18 0.015 250) |
| Dark | oklch(0.96 0.005 250) |
| Tailwind utility | color: foreground |
| Source | client/lib/theme/vueda-tailwind/base.css:397 |
default text colour on --background.
--card
| Field | Value |
|---|---|
| Light | oklch(1 0 0) |
| Dark | oklch(0.2 0.012 250) |
| Tailwind utility | color: card |
| Source | client/lib/theme/vueda-tailwind/base.css:398 |
card surface — sits on --background with a 1px border, never a shadow.
--card-foreground
| Field | Value |
|---|---|
| Light | oklch(0.18 0.015 250) |
| Dark | oklch(0.96 0.005 250) |
| Tailwind utility | color: card-foreground |
| Source | client/lib/theme/vueda-tailwind/base.css:399 |
text on a --card surface.
--popover
| Field | Value |
|---|---|
| Light | oklch( 0.99 0.003 250 ) |
| Dark | oklch(0.22 0.012 250) |
| Tailwind utility | color: popover |
| Source | client/lib/theme/vueda-tailwind/base.css:400 |
floating surface for popover, dropdown, hover card, and command list — overlaid via --vueda-shadow-popover.
--popover-foreground
| Field | Value |
|---|---|
| Light | oklch(0.18 0.015 250) |
| Dark | oklch(0.96 0.005 250) |
| Tailwind utility | color: popover-foreground |
| Source | client/lib/theme/vueda-tailwind/base.css:403 |
text on a --popover surface.
--primary
| Field | Value |
|---|---|
| Light | oklch( 0.58 0.19 254 ) |
| Dark | oklch(0.68 0.17 254) |
| Tailwind utility | color: primary |
| Source | client/lib/theme/vueda-tailwind/base.css:406 |
VUEDA blue. Bound to the primary CTA, focus rings (--ring aliases this), selected-row markers, and the brand mark.
--primary-foreground
| Field | Value |
|---|---|
| Light | oklch( 0.99 0.003 250 ) |
| Dark | oklch(0.16 0.01 250) |
| Tailwind utility | color: primary-foreground |
| Source | client/lib/theme/vueda-tailwind/base.css:409 |
text painted on a --primary fill (primary Button label, selected sidebar item text).
--primary-hover
| Field | Value |
|---|---|
| Light | oklch( 0.48 0.19 254 ) |
| Dark | oklch(0.76 0.13 254) |
| Tailwind utility | color: primary-hover |
| Source | client/lib/theme/vueda-tailwind/base.css:412 |
primary fill, hover. One perceptual lightness step (~0.10 OKLCH L) darker than --primary so the state change clears the glance-detection threshold on poor displays, instead of washing out the way an alpha fade over the page surface does.
--primary-active
| Field | Value |
|---|---|
| Light | oklch(0.4 0.16 254) |
| Dark | oklch(0.84 0.1 254) |
| Tailwind utility | color: primary-active |
| Source | client/lib/theme/vueda-tailwind/base.css:415 |
primary fill, pressed — a second lightness step darker again.
--secondary
| Field | Value |
|---|---|
| Light | oklch( 0.965 0.005 250 ) |
| Dark | oklch(0.24 0.012 250) |
| Tailwind utility | color: secondary |
| Source | client/lib/theme/vueda-tailwind/base.css:418 |
secondary neutral surface — kept distinct from --muted for shadcn compat; resolves to the same tint.
--secondary-foreground
| Field | Value |
|---|---|
| Light | oklch(0.22 0.015 250) |
| Dark | oklch(0.96 0.005 250) |
| Tailwind utility | color: secondary-foreground |
| Source | client/lib/theme/vueda-tailwind/base.css:421 |
text on a --secondary surface.
--secondary-hover
| Field | Value |
|---|---|
| Light | oklch( 0.9 0.006 250 ) |
| Dark | oklch(0.32 0.013 250) |
| Tailwind utility | color: secondary-hover |
| Source | client/lib/theme/vueda-tailwind/base.css:422 |
secondary surface, hover. A visible lightness step darker than --secondary; the alpha-over-surface recipe this replaces was near-invisible because secondary already sits almost on top of the page surface.
--secondary-active
| Field | Value |
|---|---|
| Light | oklch(0.83 0.008 250) |
| Dark | oklch(0.4 0.014 250) |
| Tailwind utility | color: secondary-active |
| Source | client/lib/theme/vueda-tailwind/base.css:425 |
secondary surface, pressed.
--muted
| Field | Value |
|---|---|
| Light | oklch( 0.965 0.005 250 ) |
| Dark | oklch(0.24 0.012 250) |
| Tailwind utility | color: muted |
| Source | client/lib/theme/vueda-tailwind/base.css:426 |
muted neutral surface — disabled control fills, subdued chips, low-emphasis backgrounds.
--muted-foreground
| Field | Value |
|---|---|
| Light | oklch(0.5 0.015 250) |
| Dark | oklch(0.68 0.012 250) |
| Tailwind utility | color: muted-foreground |
| Source | client/lib/theme/vueda-tailwind/base.css:429 |
muted text — captions, supporting labels, table th.
--accent
| Field | Value |
|---|---|
| Light | oklch( 0.92 0.008 250 ) |
| Dark | oklch( 0.31 0.014 250 ) |
| Tailwind utility | color: accent |
| Source | client/lib/theme/vueda-tailwind/base.css:430 |
hover / selected surface, one step darker than --muted. Tuned to sit a perceptible lightness step (~0.07 L) below the --background / --popover surfaces so the menu / list highlight and row hover (bg-accent/50) clear the glance threshold per § 2.5; half-strength (bg-accent/50) stays the canonical "current section" treatment.
--accent-foreground
| Field | Value |
|---|---|
| Light | oklch(0.18 0.015 250) |
| Dark | oklch(0.96 0.005 250) |
| Tailwind utility | color: accent-foreground |
| Source | client/lib/theme/vueda-tailwind/base.css:433 |
text on a --accent surface.
--accent-active
| Field | Value |
|---|---|
| Light | oklch( 0.85 0.01 250 ) |
| Dark | oklch(0.39 0.014 250) |
| Tailwind utility | color: accent-active |
| Source | client/lib/theme/vueda-tailwind/base.css:434 |
pressed neutral surface for outline / ghost buttons: one step below --accent (which serves as their hover) so press reads deeper than hover, without disturbing the --accent selection / row-hover semantics.
--destructive
| Field | Value |
|---|---|
| Light | oklch( 0.52 0.18 27 ) |
| Dark | oklch(0.65 0.2 27) |
| Tailwind utility | color: destructive |
| Source | client/lib/theme/vueda-tailwind/base.css:439 |
red status — destructive actions, error state, the Calendar strikethrough rule.
--destructive-foreground
| Field | Value |
|---|---|
| Light | oklch(0.99 0.003 250) |
| Tailwind utility | color: destructive-foreground |
| Source | client/lib/theme/vueda-tailwind/base.css:442 |
text on a --destructive fill; identical in light and dark.
--destructive-hover
| Field | Value |
|---|---|
| Light | oklch(0.44 0.18 27) |
| Dark | oklch(0.6 0.18 27) |
| Tailwind utility | color: destructive-hover |
| Source | client/lib/theme/vueda-tailwind/base.css:443 |
destructive fill, hover — darker than --destructive.
--destructive-active
| Field | Value |
|---|---|
| Light | oklch(0.37 0.16 27) |
| Dark | oklch(0.66 0.19 27) |
| Tailwind utility | color: destructive-active |
| Source | client/lib/theme/vueda-tailwind/base.css:444 |
destructive fill, pressed.
--success
| Field | Value |
|---|---|
| Light | oklch(0.5 0.12 155) |
| Dark | oklch(0.72 0.16 155) |
| Tailwind utility | color: success |
| Source | client/lib/theme/vueda-tailwind/base.css:445 |
green status — success confirmation; pair with /10 surface and /50 border.
--warning
| Field | Value |
|---|---|
| Light | oklch(0.58 0.14 70) |
| Dark | oklch(0.78 0.15 70) |
| Tailwind utility | color: warning |
| Source | client/lib/theme/vueda-tailwind/base.css:446 |
amber status — warning state; pair with /10 surface and /50 border.
--info
| Field | Value |
|---|---|
| Light | oklch(0.58 0.19 254) |
| Dark | oklch(0.68 0.17 254) |
| Tailwind utility | color: info |
| Source | client/lib/theme/vueda-tailwind/base.css:447 |
informational status — aliased to --primary because info IS the accent.
--border
| Field | Value |
|---|---|
| Light | oklch(0.9 0.008 250) |
| Dark | oklch(1 0 0 / 0.08) |
| Tailwind utility | color: border |
| Source | client/lib/theme/vueda-tailwind/base.css:450 |
default hairline colour for separators, card edges, and border defaults.
--border-strong
| Field | Value |
|---|---|
| Light | oklch( 0.82 0.012 250 ) |
| Dark | oklch(1 0 0 / 0.16) |
| Tailwind utility | color: border-strong |
| Source | client/lib/theme/vueda-tailwind/base.css:451 |
one step darker than --border. Hover-border tint on input-shell controls (SelectTrigger, etc): signals affordance without triggering the focus ring.
--input
| Field | Value |
|---|---|
| Light | oklch( 0.9 0.008 250 ) |
| Dark | oklch(0.26 0.009 250) |
| Tailwind utility | color: input |
| Source | client/lib/theme/vueda-tailwind/base.css:454 |
input edge — default colour painted by the hairline-input variant. Matches --border at rest; controls swap to --border-strong on hover and --ring on focus.
--ring
| Field | Value |
|---|---|
| Light | var( --primary ) |
| Dark | var(--primary) |
| Tailwind utility | color: ring |
| Source | client/lib/theme/vueda-tailwind/base.css:457 |
focus-ring colour. Aliases --primary so focus tracks the accent; destructive controls swap to --destructive via focus-ring-destructive.
--overlay
| Field | Value |
|---|---|
| Light | oklch( 0.12 0.015 250 / 0.6 ) |
| Tailwind utility | color: overlay |
| Source | client/lib/theme/vueda-tailwind/base.css:461 |
scrim fill for dialog / sheet / drawer overlays; identical in light and dark.
--sunken
| Field | Value |
|---|---|
| Light | oklch( 0.95 0.008 250 ) |
| Dark | oklch(0.12 0.01 250) |
| Tailwind utility | color: sunken |
| Source | client/lib/theme/vueda-tailwind/base.css:464 |
inset surface, one step below --background. Recessed areas: command-palette stage, code blocks, empty table trays.
--sidebar
| Field | Value |
|---|---|
| Light | oklch(0.97 0.005 250) |
| Dark | oklch(0.14 0.01 250) |
| Tailwind utility | color: sidebar |
| Source | client/lib/theme/vueda-tailwind/base.css:469 |
sidebar chrome surface.
--sidebar-foreground
| Field | Value |
|---|---|
| Light | oklch(0.22 0.015 250) |
| Dark | oklch(0.92 0.005 250) |
| Tailwind utility | color: sidebar-foreground |
| Source | client/lib/theme/vueda-tailwind/base.css:470 |
text on the sidebar surface.
--sidebar-primary
| Field | Value |
|---|---|
| Light | oklch( 0.58 0.19 254 ) |
| Dark | oklch(0.68 0.17 254) |
| Tailwind utility | color: sidebar-primary |
| Source | client/lib/theme/vueda-tailwind/base.css:471 |
accent colour inside the sidebar (active rail, primary signals). Mirrors --primary so the sidebar tracks the brand accent.
--sidebar-primary-foreground
| Field | Value |
|---|---|
| Light | oklch(0.99 0.003 250) |
| Dark | oklch(0.16 0.01 250) |
| Tailwind utility | color: sidebar-primary-foreground |
| Source | client/lib/theme/vueda-tailwind/base.css:474 |
text on a --sidebar-primary fill.
--sidebar-accent
| Field | Value |
|---|---|
| Light | oklch( 0.93 0.008 250 ) |
| Dark | oklch(0.2 0.012 250) |
| Tailwind utility | color: sidebar-accent |
| Source | client/lib/theme/vueda-tailwind/base.css:475 |
hover / selected fill inside the sidebar — a neutral tint between --sidebar and --sidebar-border.
--sidebar-accent-foreground
| Field | Value |
|---|---|
| Light | oklch(0.18 0.015 250) |
| Dark | oklch(0.96 0.005 250) |
| Tailwind utility | color: sidebar-accent-foreground |
| Source | client/lib/theme/vueda-tailwind/base.css:478 |
text on a --sidebar-accent surface.
--sidebar-accent-active
| Field | Value |
|---|---|
| Light | oklch( 0.86 0.01 250 ) |
| Dark | oklch( 0.26 0.012 250 ) |
| Tailwind utility | color: sidebar-accent-active |
| Source | client/lib/theme/vueda-tailwind/base.css:479 |
pressed sidebar fill: one step below --sidebar-accent (its hover) so a sidebar control presses deeper than it hovers, the sidebar-context analogue of --accent-active.
--sidebar-border
| Field | Value |
|---|---|
| Light | oklch(0.88 0.008 250) |
| Dark | oklch(1 0 0 / 0.06) |
| Tailwind utility | color: sidebar-border |
| Source | client/lib/theme/vueda-tailwind/base.css:482 |
hairline colour for sidebar separators and item edges.
--sidebar-ring
| Field | Value |
|---|---|
| Light | var( --ring ) |
| Dark | var(--ring) |
| Tailwind utility | color: sidebar-ring |
| Source | client/lib/theme/vueda-tailwind/base.css:483 |
focus-ring inside the sidebar; aliases --ring so focus state stays consistent across chrome and content.