Design

Colors

Velyx uses OKLCH tokens for consistent surfaces, actions, borders, charts, and dark mode.

Color Tokens

Components do not hard-code colors. They consume CSS variables, so themes can change without rewriting component markup.

Token	Preview	Usage
Background `--background`		Page and app surface color.
Foreground `--foreground`		Primary text and icon color.

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
}

Semantic Colors

Semantic pairs define the background and readable foreground for common component states.

Primary

--primary / --primary-foreground

Main actions, links, and high-emphasis controls.

Secondary

--secondary / --secondary-foreground

Secondary actions and lower-emphasis UI.

Muted

--muted / --muted-foreground

Subtle backgrounds, help text, and disabled states.

Accent

--accent / --accent-foreground

Hover states and interactive highlights.

Destructive

--destructive / --destructive-foreground

Dangerous actions like delete or remove.

--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);

--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);

--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);

--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);

--destructive: oklch(0.58 0.22 27);

Border Colors

Token	Preview	Usage
Border `--border`		Borders around cards, tables, separators, and panels.
Input `--input`		Input and form control borders.
Ring `--ring`		Focus rings and keyboard navigation outlines.

--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);

Component Colors

Surface tokens used by cards, popovers, and floating panels.

--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);

Using Colors

Reference Tailwind utility names generated from the Velyx tokens.

<button class="bg-primary text-primary-foreground hover:bg-primary/90">
    Click me
</button>

<div class="rounded-lg border border-border bg-card p-4 text-card-foreground">
    Card content
</div>

Dark Mode

Dark mode is activated by adding the .dark class to the HTML element.

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --primary: oklch(0.87 0 0);
  --primary-foreground: oklch(0.205 0 0);
}

Automatic Dark Mode

Components keep the same classes in both themes. Only token values change, so contrast and surfaces adapt automatically.

Chart Colors

Velyx includes chart tokens for data visualizations and dashboard widgets.

--chart-1

--chart-2

--chart-3

--chart-4

--chart-5

--chart-1: oklch(0.809 0.105 251.813);
--chart-2: oklch(0.623 0.214 259.815);
--chart-3: oklch(0.546 0.245 262.881);
--chart-4: oklch(0.488 0.243 264.376);
--chart-5: oklch(0.424 0.199 265.638);

Typography

Text scale, rhythm, and font usage.

Spacing

Layout spacing and density rules.

Theming

Override tokens for your brand.