Design Tokens

Last updated on 2026-08-30

The kit uses oklch color tokens defined in app/globals.css for consistent styling across all 53 routes in both light and dark mode.

Token System

All colors are defined as CSS custom properties using the oklch color space:

:root {
  --background: oklch(0.99 0.002 90);
  --foreground: oklch(0.15 0.01 90);
  --primary: oklch(0.55 0.15 45);
  --primary-foreground: oklch(0.98 0.005 45);
  /* ... */
}

.dark {
  --background: oklch(0.15 0.01 90);
  --foreground: oklch(0.95 0.005 90);
  --primary: oklch(0.65 0.15 45);
  /* ... */
}

Core Tokens

Token	Purpose	Usage
`--background`	Page background	`bg-background`
`--foreground`	Primary text	`text-foreground`
`--card`	Card backgrounds	`bg-card`
`--card-foreground`	Card text	`text-card-foreground`
`--muted`	Subtle backgrounds	`bg-muted`
`--muted-foreground`	Secondary text	`text-muted-foreground`
`--primary`	Brand color, CTAs	`bg-primary`, `text-primary`
`--secondary`	Secondary actions	`bg-secondary`
`--accent`	Hover states	`bg-accent`
`--destructive`	Error states, delete	`bg-destructive`
`--border`	Borders, dividers	`border-border`
`--ring`	Focus rings	`ring-ring`

Status Tokens

Status colors have both foreground and background variants:

Token	Purpose	Example
`--success`	Positive status	Order delivered, in stock
`--warning`	Caution state	Low stock, pending review
`--info`	Informational	Processing, standard
`--destructive`	Error/danger	Out of stock, cancelled

Usage pattern for badges:

// Success badge
<Badge className="bg-[hsl(var(--success))]/10 text-[hsl(var(--success))]">
  Delivered
</Badge>

Chart Tokens

Charts use dedicated color variables:

--chart-1: oklch(0.55 0.15 45);
--chart-2: oklch(0.55 0.12 200);
--chart-3: oklch(0.55 0.12 140);
--chart-4: oklch(0.55 0.12 280);
--chart-5: oklch(0.55 0.12 340);

These are used in Recharts components for consistent chart styling.

Changing the Brand Color

To change the primary brand color, update the hue value in globals.css:

/* Change from terracotta (hue 45) to blue (hue 250) */
:root {
  --primary: oklch(0.55 0.15 250);        /* was 45 */
  --primary-foreground: oklch(0.98 0.005 250);
}

.dark {
  --primary: oklch(0.65 0.15 250);
}

Update the secondary, accent, chart colors, and sidebar tokens to match.

Typography

The kit uses the Storefront profile fonts:

Token	Font	Usage
`--font-heading`	DM Sans	Headings, product names
`--font-body`	Inter	Body text, descriptions
`--font-mono`	JetBrains Mono	Prices, order numbers

Spacing

All spacing follows a 4px/8px grid:

gap-2 (8px) between related elements
gap-4 (16px) between card sections
gap-6 (24px) between page sections
gap-8 (32px) between major sections

Dark Mode

Dark mode is handled by next-themes with class-based switching. The .dark class on <html> activates the dark token values. No component code changes are needed — all styling uses semantic tokens.

Customization

See Customization for a step-by-step guide to rebranding the kit.

Server Actions

Accessibility