Design Tokens

Last updated on 2026-04-05

The Sales Dashboard 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. The kit ships with a sales-focused theme optimized for data-dense dashboards.

oklch Color System

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, so your palette looks balanced without manual tweaking
Wider gamut -- access to more vibrant colors on modern displays (P3, Rec. 2020)
Easy palette generation -- change one hue angle to produce a cohesive brand palette across all semantic tokens

The format is oklch(lightness chroma hue) where lightness is 0-1, chroma is 0-0.4 (saturation intensity), and hue is 0-360 (color angle on the color wheel).

Color Tokens

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

:root {
  --background: oklch(0.99 0.002 250);
  --foreground: oklch(0.17 0.02 250);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.17 0.02 250);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.17 0.02 250);
  --primary: oklch(0.50 0.18 250);
  --primary-foreground: oklch(0.98 0.005 250);
  --secondary: oklch(0.75 0.12 165);
  --secondary-foreground: oklch(0.25 0.05 165);
  --muted: oklch(0.96 0.005 250);
  --muted-foreground: oklch(0.4 0.03 250);
  --accent: oklch(0.94 0.02 250);
  --accent-foreground: oklch(0.35 0.15 250);
  --destructive: oklch(0.58 0.22 27);
  --border: oklch(0.91 0.01 250);
  --input: oklch(0.91 0.01 250);
  --ring: oklch(0.55 0.18 250);
}

Dedicated tokens for the sales dashboard sidebar navigation:

--sidebar: oklch(0.97 0.008 250);
--sidebar-foreground: oklch(0.17 0.02 250);
--sidebar-primary: oklch(0.50 0.18 250);
--sidebar-primary-foreground: oklch(0.98 0.005 250);
--sidebar-accent: oklch(0.93 0.025 250);
--sidebar-accent-foreground: oklch(0.35 0.15 250);
--sidebar-border: oklch(0.91 0.01 250);
--sidebar-ring: oklch(0.55 0.18 250);

Chart Colors

Five chart-specific color tokens used by the Recharts dashboard and reporting charts:

--chart-1: oklch(0.55 0.18 250);   /* Blue (primary) */
--chart-2: oklch(0.60 0.18 165);   /* Teal (secondary) */
--chart-3: oklch(0.65 0.20 290);   /* Purple */
--chart-4: oklch(0.60 0.18 145);   /* Green (won/success) */
--chart-5: oklch(0.70 0.15 30);    /* Orange (warning) */

These chart colors are carefully selected to be visually distinct for data visualization while maintaining WCAG AA contrast against both light and dark backgrounds. They are used consistently across the revenue chart, conversion funnel, quota attainment bars, win rate analysis, and forecast stacked bars.

Usage in Tailwind

Tokens map directly to Tailwind utility classes. Use them like standard Tailwind colors:

<div className="bg-background text-foreground border-border">
  <button className="bg-primary text-primary-foreground">
    Close Deal
  </button>
  <span className="text-muted-foreground">Last updated 2 hours ago</span>
  <div className="bg-sidebar text-sidebar-foreground">
    Sidebar content
  </div>
</div>

Dark Mode

The kit uses next-themes with class-based dark mode. The ThemeToggle component handles the switch:

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

<ThemeToggle />

Dark mode values are defined in the .dark selector within globals.css. All semantic tokens automatically switch when the theme changes. The ThemeToggle component includes proper aria-label text that updates to reflect the current action ("Switch to light mode" / "Switch to dark mode").

Typography

The kit uses three font families configured in app/layout.tsx:

Token	Font	Usage
`--font-sans`	Inter	Body text
`--font-heading`	DM Sans	Headings (h1-h6)
`--font-mono`	JetBrains Mono	Code blocks

Headings use tighter letter-spacing (-0.025em) and shorter line-height (1.2) for visual weight. Body text uses -0.011em letter-spacing with 1.6 line-height for readability.

Customizing for Your Brand

To rebrand the kit, change the hue value in app/globals.css. The default theme uses hue 250. Update it to your brand color and all 9 screens adapt automatically:

:root {
  /* Change hue from 250 (blue) to 160 (teal) */
  --primary: oklch(0.50 0.18 160);
  --primary-foreground: oklch(0.98 0 0);
  --ring: oklch(0.55 0.18 160);
  /* Update remaining tokens to match... */
}

.dark {
  --primary: oklch(0.70 0.18 160);
  --primary-foreground: oklch(0.15 0.02 160);
  /* ... */
}

All components automatically inherit the new palette -- buttons, badges, links, charts, sidebar accents, pipeline stage indicators, progress bars, and focus rings all update at once.

For full customization details, see the Customization guide.

Leaderboard & Reports

Accessibility