Design Tokens

The kit uses oklch color tokens defined in app/globals.css for consistent styling across all routes in both light and dark mode. The primary hue is 255 (blue-indigo), with a warm amber secondary at hue 66.

Token System

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

:root {
  --background: oklch(0.99 0.002 255);
  --foreground: oklch(0.17 0.02 255);
  --primary: oklch(0.45 0.2 255);
  --primary-foreground: oklch(0.98 0.005 255);
  --secondary: oklch(0.78 0.14 66);
  --secondary-foreground: oklch(0.25 0.05 66);
  /* ... */
}

.dark {
  --background: oklch(0.16 0.02 255);
  --foreground: oklch(0.96 0.005 255);
  --primary: oklch(0.7 0.18 255);
  --primary-foreground: oklch(0.15 0.02 255);
  --secondary: oklch(0.72 0.14 66);
  /* ... */
}

Core Tokens

Token	Purpose	Light Value	Dark Value	Tailwind Usage
--background	Page background	oklch(0.99 0.002 255)	oklch(0.16 0.02 255)	bg-background
--foreground	Primary text	oklch(0.17 0.02 255)	oklch(0.96 0.005 255)	text-foreground
--card	Card backgrounds	oklch(1 0 0) (white)	oklch(0.21 0.025 255)	bg-card
--card-foreground	Card text	oklch(0.17 0.02 255)	oklch(0.96 0.005 255)	text-card-foreground
--muted	Subtle backgrounds	oklch(0.96 0.005 255)	oklch(0.27 0.025 255)	bg-muted
--muted-foreground	Secondary text	oklch(0.4 0.03 255)	oklch(0.7 0.03 255)	text-muted-foreground
--primary	Brand color, CTAs	oklch(0.45 0.2 255)	oklch(0.7 0.18 255)	bg-primary, text-primary
--secondary	Amber accent	oklch(0.78 0.14 66)	oklch(0.72 0.14 66)	bg-secondary
--accent	Hover states	oklch(0.94 0.02 255)	oklch(0.32 0.05 255)	bg-accent
--destructive	Error states, delete	oklch(0.58 0.22 27)	oklch(0.704 0.191 22.216)	bg-destructive
--border	Borders, dividers	oklch(0.91 0.01 255)	oklch(1 0 0 / 12%)	border-border
--input	Input borders	oklch(0.91 0.01 255)	oklch(1 0 0 / 15%)	border-input
--ring	Focus rings	oklch(0.55 0.18 255)	oklch(0.6 0.16 255)	ring-ring

Status Tokens

Status colors are used throughout the kit for task statuses, priority indicators, capacity badges, and goal statuses:

Token	Purpose	Light Value	Dark Value	Example Usage
--success	Positive status	oklch(0.62 0.19 145)	oklch(0.7 0.19 145)	Done status, active cycle, balanced capacity
--warning	Caution state	oklch(0.75 0.18 66)	oklch(0.78 0.16 66)	Medium priority, paused project
--info	Informational	oklch(0.58 0.18 255)	oklch(0.65 0.16 255)	In Review status, upcoming cycle, under capacity
--destructive	Error/danger	oklch(0.58 0.22 27)	oklch(0.704 0.191 22.216)	Urgent priority, cancelled status, over capacity

Task Status Colors

Each task status has a dedicated color used in Kanban columns, status badges, and charts:

Status	Color Hex	Usage
Backlog	#6b7280 (gray)	Kanban column, cumulative flow, status donut
Todo	#8b5cf6 (violet)	Kanban column, cumulative flow, status donut
In Progress	#f59e0b (amber)	Kanban column, timeline bars, cumulative flow
In Review	#3b82f6 (blue)	Kanban column, timeline bars, cumulative flow
Done	#22c55e (green)	Kanban column, cumulative flow, milestones
Cancelled	#ef4444 (red)	Kanban column, timeline bars

Task Priority Colors

Priority	Color Hex	Usage
Urgent	#ef4444 (red)	Priority badge, workload bar, analytics chart
High	#f97316 (orange)	Priority badge, workload bar, analytics chart
Medium	#eab308 (yellow)	Priority badge, workload bar, analytics chart
Low	#3b82f6 (blue)	Priority badge, workload bar, analytics chart
None	#6b7280 (gray)	Priority badge, workload bar, analytics chart

Chart Tokens

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

/* Light mode */
--chart-1: oklch(0.55 0.2 255);    /* blue-indigo (primary) */
--chart-2: oklch(0.75 0.14 66);    /* amber (secondary) */
--chart-3: oklch(0.65 0.2 141);    /* green */
--chart-4: oklch(0.6 0.18 321);    /* pink */
--chart-5: oklch(0.7 0.15 191);    /* teal */

/* Dark mode */
--chart-1: oklch(0.7 0.18 255);
--chart-2: oklch(0.72 0.14 66);
--chart-3: oklch(0.65 0.2 141);
--chart-4: oklch(0.65 0.18 321);
--chart-5: oklch(0.7 0.15 191);

These are referenced in Recharts components via var(--chart-1), etc.

Sidebar Tokens

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

/* Light mode */
--sidebar: oklch(0.97 0.008 255);
--sidebar-foreground: oklch(0.17 0.02 255);
--sidebar-primary: oklch(0.45 0.2 255);
--sidebar-primary-foreground: oklch(0.98 0.005 255);
--sidebar-accent: oklch(0.93 0.025 255);
--sidebar-accent-foreground: oklch(0.35 0.15 255);
--sidebar-border: oklch(0.91 0.01 255);
--sidebar-ring: oklch(0.55 0.18 255);

/* Dark mode */
--sidebar: oklch(0.19 0.025 255);
--sidebar-foreground: oklch(0.96 0.005 255);
--sidebar-primary: oklch(0.7 0.18 255);
--sidebar-accent: oklch(0.28 0.04 255);
--sidebar-border: oklch(1 0 0 / 12%);

Border Radius

Radius values are derived from a single --radius base value of 0.625rem:

Token	Calculation	Approximate
--radius-sm	0.6 * 0.625rem	6px
--radius-md	0.8 * 0.625rem	8px
--radius-lg	0.625rem	10px
--radius-xl	1.4 * 0.625rem	14px
--radius-2xl	1.8 * 0.625rem	18px

Changing the Brand Color

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

/* Change from blue-indigo (hue 255) to teal (hue 180) */
:root {
  --primary: oklch(0.45 0.2 180);        /* was 255 */
  --primary-foreground: oklch(0.98 0.005 180);
}

.dark {
  --primary: oklch(0.7 0.18 180);
}

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

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

Typography

The kit uses three font families loaded via next/font/google in app/layout.tsx:

CSS Variable	Font	Weight	Usage
--font-inter (body/sans)	Inter	400-700	Body text, form labels, table cells
--font-dm-sans (heading)	DM Sans	500, 600, 700	Headings, section titles, stat numbers
--font-jetbrains (mono)	JetBrains Mono	400	Task IDs, code, metric numbers

Headings use letter-spacing: -0.025em and line-height: 1.2 for tighter, more refined typography. Body text uses letter-spacing: -0.011em and line-height: 1.6.

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. The ThemeProvider is configured with attribute="class", defaultTheme="system", and enableSystem. No component code changes are needed -- all styling uses semantic tokens.

Customization

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