Design Tokens

The kit uses oklch color tokens defined in app/globals.css with Tailwind CSS v4. All colors adapt automatically between light and dark mode.

Color Tokens

Core Colors

Token	Light Mode	Dark Mode	Usage
--background	White	Dark gray	Page background
--foreground	Near black	Near white	Primary text
--card	White	Elevated dark	Card backgrounds
--card-foreground	Near black	Near white	Card text
--muted	Light gray	Muted dark	Secondary backgrounds
--muted-foreground	Medium gray	Medium gray	Secondary text
--primary	Brand color	Brand color	Primary actions
--primary-foreground	White	White	Text on primary
--destructive	Red	Red	Destructive actions
--border	Light gray	Dark gray	Borders and dividers

Status Colors

Token	Usage
--success	Completed, active, enrolled
--warning	Pending, in review, low stock
--info	Information, learning, course-related
--destructive	Failed, cancelled, overdue

Status badges use the pattern: bg-[var(--success)]/10 text-[var(--success)]

Chart Colors

Token	Usage
--chart-1 through --chart-5	Recharts series colors

Typography

Font	Variable	Usage
Inter	--font-inter	Body text
DM Sans	--font-dm-sans	Headings
JetBrains Mono	--font-mono	Code, data values

Type Scale

Level	Class	Usage
Page title	text-2xl font-bold	Main heading per page
Section title	text-lg font-semibold	Section headings
Card title	text-base font-medium	Card headings
Body	text-sm	Default text
Meta	text-xs text-muted-foreground	Timestamps, labels

Spacing

All spacing follows a 4px / 8px grid:

Scale	Tailwind	Usage
4px	p-1, gap-1	Tight spacing
8px	p-2, gap-2	Small gaps
12px	p-3, gap-3	Card padding
16px	p-4, gap-4	Section gaps
24px	p-6, gap-6	Page sections
32px	p-8, gap-8	Large sections

Border Radius

Token	Value	Usage
--radius	0.625rem	Default radius for cards, inputs, buttons

Dark Mode

The kit uses class-based dark mode via next-themes. Toggle is in the app header.

All components use semantic tokens -- no hardcoded colors like bg-white or text-gray-500.