Design Tokens

Last updated on 2026-09-02

The kit uses oklch color tokens defined in app/globals.css for consistent styling across all 45 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 270);
  --foreground: oklch(0.15 0.01 270);
  --primary: oklch(0.55 0.15 270);
  --primary-foreground: oklch(0.98 0.005 270);
  /* ... */
}

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

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, used extensively for pipeline stages, deal priorities, and task states:

Token	Purpose	Example
`--success`	Positive status	Deal won, task completed
`--warning`	Caution state	Overdue task, stalled deal
`--info`	Informational	In progress, qualified
`--destructive`	Error/danger	Deal lost, high priority

Usage pattern for badges:

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

Pipeline Stage Colors

Each pipeline stage has a dedicated color used in Kanban columns, stage badges, and charts:

Stage	Color Token	Usage
Lead	gray	Kanban column, stage badge
Qualified	blue	Kanban column, stage badge
Proposal	indigo	Kanban column, stage badge
Negotiation	violet	Kanban column, stage badge
Closed Won	green	Kanban column, stage badge
Closed Lost	red	Kanban column, stage badge

Chart Tokens

Charts use dedicated color variables for consistent multi-series styling:

--chart-1: oklch(0.55 0.15 270);
--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 referenced in ChartConfig objects for Recharts components.

The dashboard sidebar has its own set of tokens for independent styling:

--sidebar-background: oklch(0.97 0.005 270);
--sidebar-foreground: oklch(0.25 0.02 270);
--sidebar-primary: oklch(0.55 0.15 270);
--sidebar-accent: oklch(0.92 0.02 270);
--sidebar-border: oklch(0.90 0.01 270);

Changing the Brand Color

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

/* Change from indigo (hue 270) to teal (hue 180) */
:root {
  --primary: oklch(0.55 0.15 180);        /* was 270 */
  --primary-foreground: oklch(0.98 0.005 180);
}

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

Common hue values: 0 (red), 30 (orange), 60 (yellow), 120 (green), 180 (teal), 210 (blue), 270 (indigo/purple), 330 (pink).

Update the secondary, accent, chart, and sidebar tokens to maintain visual harmony.

Typography

The kit uses the Dashboard profile fonts:

Token	Font	Usage
`--font-heading`	DM Sans	Headings, section titles
`--font-body`	Inter	Body text, form labels, table cells
`--font-mono`	JetBrains Mono	Deal values, metric 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