Design Tokens

Last updated on 2026-09-03

The kit uses oklch color tokens defined in app/globals.css for consistent styling across the public blog, admin CMS, and all pages 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 250);
  --foreground: oklch(0.15 0.01 250);
  --primary: oklch(0.55 0.15 250);
  --primary-foreground: oklch(0.98 0.005 250);
  /* ... */
}

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

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`
`--popover`	Popover backgrounds	`bg-popover`
`--popover-foreground`	Popover text	`text-popover-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`
`--input`	Input borders	`border-input`

Status Tokens

Status colors have both foreground and background variants, used for post statuses, comment moderation, and notification states:

Token	Purpose	Example
`--success`	Positive status	Post published, comment approved
`--warning`	Caution state	Post draft, comment pending review
`--info`	Informational	Scheduled post, newsletter sent
`--destructive`	Error/danger	Post unpublished, comment spam

Usage pattern for badges:

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

Chart Tokens

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

--chart-1: oklch(0.55 0.15 250);
--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 on the admin analytics dashboard.

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

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

Changing the Brand Color

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

/* Change from blue (hue 250) to teal (hue 180) */
:root {
  --primary: oklch(0.55 0.15 180);        /* was 250 */
  --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), 250 (indigo), 270 (purple), 330 (pink).

Update the secondary, accent, chart, and sidebar tokens to maintain visual harmony. Because all tokens share the same hue angle, changing one value and applying it consistently updates the entire theme.

Typography

The kit uses a four-font system to support both the admin CMS and article reading experience:

Token	Font	Usage
`--font-heading`	DM Sans	Headings, section titles, post titles
`--font-body`	Inter	UI text, form labels, sidebar, admin CMS
`--font-mono`	JetBrains Mono	Code blocks, inline code in articles
`--font-serif`	Lora	Article body text for comfortable long-form reading

The serif font is applied to the article content area only, keeping the admin CMS and navigation in the standard sans-serif stack.

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