Design tokens

Colors

Novix UI ships an OKLCH-based semantic color system. Perceptually uniform lightness makes theme switching predictable — a token's role stays constant while its hue shifts with the mode.

Philosophy

Never reference a raw color in a component. Reference a role — the role decides which hue, which lightness, which contrast to apply.

OKLCH lets us tune lightness independently of hue. Contrast pairings stay AA in light, dark, and every custom theme generated from these tokens.

Semantic tokens

Click any card to copy its CSS custom property or Tailwind utility class:

background

Page background

foreground

Primary text

surface

Elevated surfaces

subtle

Muted fills, hover states

muted

Subdued surfaces & badges

border

Hairline strokes

border-strong

High-contrast borders

muted-foreground

Secondary text

primary

Neutral emphasis actions

accent

Hero actions & focus rings

success

Positive intent & badges

warning

Alerts & caution states

danger

Destructive intent & errors

CSS tokens code

Here is the complete CSS code defining all OKLCH color tokens for both Light and Dark themes:

css

:root {
  /* Light Theme */
  --background: oklch(0.995 0 0);
  --foreground: oklch(0.145 0.01 260);
  --surface: oklch(0.985 0.002 260);
  --subtle: oklch(0.965 0.004 260);
  --muted: oklch(0.955 0.005 260);
  --muted-foreground: oklch(0.505 0.015 260);
  --border: oklch(0.918 0.006 260);
  --border-strong: oklch(0.86 0.008 260);
  --primary: oklch(0.19 0.02 260);
  --accent: oklch(0.62 0.19 265);
  --success: oklch(0.68 0.15 155);
  --warning: oklch(0.78 0.15 75);
  --danger: oklch(0.6 0.22 27);
}
 
.dark {
  /* Dark Theme */
  --background: oklch(0.145 0.008 260);
  --foreground: oklch(0.975 0.003 260);
  --surface: oklch(0.185 0.01 260);
  --subtle: oklch(0.22 0.012 260);
  --muted: oklch(0.24 0.013 260);
  --muted-foreground: oklch(0.68 0.015 260);
  --border: oklch(1 0 0 / 9%);
  --border-strong: oklch(1 0 0 / 16%);
  --primary: oklch(0.975 0.003 260);
  --accent: oklch(0.7 0.18 265);
  --success: oklch(0.75 0.16 155);
  --warning: oklch(0.82 0.15 75);
  --danger: oklch(0.6 0.22 27);
}

Usage

In JSX, use Tailwind utility classes generated from tokens: bg-surface, text-foreground, border-border. Never hardcode bg-white or hex values — they break dark mode and custom themes.

tsx

// Example: Card styled exclusively with semantic color tokens
export function FeatureCard() {
  return (
    <div className="bg-surface text-foreground border border-border rounded-xl p-5 shadow-sm">
      <h3 className="font-semibold text-foreground">Semantic Palette</h3>
      <p className="text-muted-foreground text-sm mt-1">Automatically switches between light and dark.</p>
      <button className="mt-4 bg-accent text-white px-3 py-1.5 rounded-lg text-sm font-medium">
        Action
      </button>
    </div>
  );
}