Colors

Aidash uses a small, semantic colour system built on oklch. Brand, neutral, and three status hues — nothing else. Every component references CSS variables so dark mode is a token swap, not a rewrite.

Brand

Aidash blue scale — reserved for primary CTAs, focus rings, active navigation.

Neutral

Pure grayscale — surfaces, text, borders. No chroma so it stays neutral in every context.

Success

Confirmations, approvals, positive validation.

Warn

Attention, caution, non-blocking warnings.

Danger

Destructive actions, errors, validation failures.

Semantic tokens

Names components actually reach for — background, foreground, muted, primary, ring. Split into light and dark blocks.

Token	Light	Dark	Usage
--background	oklch(1 0 0)	oklch(0.145 0 0)	Page background
--foreground	oklch(0.145 0 0)	oklch(0.985 0 0)	Primary text
--card	oklch(1 0 0)	oklch(0.18 0 0)	Card surface
--muted	oklch(0.97 0 0)	oklch(0.22 0 0)	Muted surface (inputs, tables)
--muted-foreground	oklch(0.556 0 0)	oklch(0.68 0 0)	Muted / secondary text
--border	oklch(0.92 0 0)	oklch(0.26 0 0)	Hairline borders
--primary	brand-500	brand-400	Primary CTA
--ring	brand-500	brand-400	Focus ring

Why oklch

Perceptually uniform lightness makes it possible to build harmonious scales that stay legible across dark and light themes.

Predictable contrast

oklch lightness (L) is a percentage of perceived brightness, so the maths behaves the way you expect — dropping L from 0.62 to 0.31 halves the perceived lightness. L is also independent of hue, so every colour at the same L reads at the same weight.

Legacy support

oklch has 90%+ browser support. For older browsers, add a hex fallback next to the oklch value in your token definitions.

Also see

Token source

The complete color token block. Paste into your @theme.

app/globals.css

css

@theme {
  /* Brand — Aidash blue */
  --color-brand-500: oklch(0.62 0.20 255);
  --color-brand-600: oklch(0.54 0.20 255);

  /* Semantic status */
  --color-success: oklch(0.70 0.17 150);
  --color-warn:    oklch(0.78 0.16 80);
  --color-danger:  oklch(0.65 0.22 25);
  --color-info:    oklch(0.62 0.15 255);
}