Design Tokens

The E-commerce Starter Kit uses oklch color tokens defined as CSS custom properties in app/globals.css. All components reference these tokens through Tailwind CSS v4 — never hardcoded colors.

Color Tokens

Semantic color tokens that automatically adapt between light and dark mode:

:root {
  --background: ...;
  --foreground: ...;
  --card: ...;
  --card-foreground: ...;
  --popover: ...;
  --popover-foreground: ...;
  --primary: ...;
  --primary-foreground: ...;
  --secondary: ...;
  --secondary-foreground: ...;
  --muted: ...;
  --muted-foreground: ...;
  --accent: ...;
  --accent-foreground: ...;
  --destructive: ...;
  --destructive-foreground: ...;
  --border: ...;
  --input: ...;
  --ring: ...;
}

Sidebar Tokens

--sidebar-background: ...;
--sidebar-foreground: ...;
--sidebar-primary: ...;
--sidebar-primary-foreground: ...;
--sidebar-accent: ...;
--sidebar-accent-foreground: ...;
--sidebar-border: ...;
--sidebar-ring: ...;

Chart Colors

--chart-1: ...; --chart-2: ...; --chart-3: ...; --chart-4: ...; --chart-5: ...;

Usage in Tailwind

<div className="bg-background text-foreground border-border">
  <button className="bg-primary text-primary-foreground">
    Add to Cart
  </button>
  <span className="text-muted-foreground">In stock</span>
</div>

Dark Mode

Toggle dark mode using the ThemeToggle component:

import { ThemeToggle } from "@/components/layout/theme-toggle"

<ThemeToggle />

Dark mode values are defined in the .dark selector within globals.css. The kit uses next-themes with class-based dark mode.

Why oklch?

The kit uses oklch (Oklab Lightness Chroma Hue) instead of hex or hsl:

• Perceptually uniform — equal steps in lightness look equal to the human eye
• Wider gamut — access to more vibrant colors on modern displays
• Easy palette generation — adjust hue angle to create a cohesive brand palette

Customizing for Your Brand

Update app/globals.css to change colors project-wide:

:root {
  --primary: oklch(0.55 0.2 250);       /* Your brand blue */
  --primary-foreground: oklch(0.98 0 0); /* White text on primary */
}

.dark {
  --primary: oklch(0.7 0.18 250);        /* Lighter in dark mode */
  --primary-foreground: oklch(0.98 0 0);
}

All components automatically inherit the new palette — buttons, badges, links, charts, and focus rings all update at once.

For full customization details, see the Customization guide.