Design Tokens

The Finance 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 6 color themes, the default being Mint Ledger (oklch hue 170).

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. The default Mint Ledger theme (hue 170):

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

Sidebar Tokens

Dedicated tokens for the finance sidebar navigation:

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

Chart Colors

Five chart-specific color tokens used by Recharts dashboards:

--chart-1: oklch(0.55 0.2 170);   /* Teal (primary) */
--chart-2: oklch(0.75 0.14 341);  /* Rose */
--chart-3: oklch(0.65 0.2 56);    /* Amber */
--chart-4: oklch(0.6 0.18 236);   /* Blue */
--chart-5: oklch(0.7 0.15 106);   /* Lime */

Built-in Color Themes

The kit ships with 6 complete color themes, each with full light and dark mode definitions:

Theme	CSS Class	Hue	Description
Mint Ledger	:root (default)	170	Teal -- professional finance aesthetic
Midnight	.theme-midnight	250	Deep blue/indigo -- sophisticated, corporate
Sunset	.theme-sunset	25	Warm coral/orange -- energetic, approachable
Emerald	.theme-emerald	150	Rich green -- wealth, growth, prosperity
Lavender	.theme-lavender	290	Soft purple -- creative, modern
Slate	.theme-slate	0	Neutral monochrome -- minimal, understated

Themes are applied as CSS classes on the root element and managed through the ThemeSwitcher component in settings:

import { ThemeSwitcher } from "@/components/settings/theme-switcher"

<ThemeSwitcher />

Usage in Tailwind

Tokens map directly to Tailwind utility classes:

<div className="bg-background text-foreground border-border">
  <button className="bg-primary text-primary-foreground">
    Add Transaction
  </button>
  <span className="text-muted-foreground">Last synced 2 hours ago</span>
</div>

Financial amounts use tabular numbers for aligned columns:

<span className="tabular-nums text-lg font-semibold">
  $12,450.00
</span>

Dark Mode

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

import { ModeToggle } from "@/components/layout/mode-toggle"

<ModeToggle />

Dark mode values are defined in the .dark selector within globals.css. All semantic tokens automatically switch when the theme changes. Each of the 6 color themes has its own dark mode variant.

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.

Financial figures use font-variant-numeric: tabular-nums via the .tabular-nums utility class to ensure numbers align in columns.

Animations

The kit includes several CSS animations for micro-interactions:

Animation	Class	Description
Fade in up	.animate-fade-in-up	Element fades in while sliding up
Fade in	.animate-fade-in	Simple opacity fade
Scale in	.animate-scale-in	Element scales from 95% to 100%
Float	.animate-float	Gentle floating motion
Shimmer	.animate-shimmer	Loading shimmer effect
Count up	.animate-count-up	Number count-up entrance

Stagger delays (.stagger-1 through .stagger-6) allow sequential animation timing for card grids and stat rows.

All animations respect prefers-reduced-motion -- when enabled, animation duration is reduced to near-instant.

Customizing for Your Brand

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

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

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

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

For full customization details, see the Customization guide.