Design Tokens

The AI UX Kit uses CSS custom properties (design tokens) to define colors, spacing, typography, and other visual properties. These tokens live in app/globals.css and integrate with Tailwind CSS 4's theme system.

Color Tokens

The kit defines semantic color tokens that adapt automatically in dark mode via next-themes:

:root {
  --background: ...;
  --foreground: ...;
  --card: ...;
  --card-foreground: ...;
  --popover: ...;
  --popover-foreground: ...;
  --primary: ...;
  --primary-foreground: ...;
  --secondary: ...;
  --secondary-foreground: ...;
  --muted: ...;
  --muted-foreground: ...;
  --accent: ...;
  --accent-foreground: ...;
  --destructive: ...;
  --destructive-foreground: ...;
  --border: ...;
  --input: ...;
  --ring: ...;
}

Sidebar Colors

Dedicated tokens for sidebar navigation:

--sidebar-background: ...;
--sidebar-foreground: ...;
--sidebar-primary: ...;
--sidebar-primary-foreground: ...;
--sidebar-accent: ...;
--sidebar-accent-foreground: ...;
--sidebar-border: ...;
--sidebar-ring: ...;

Chart Colors

Five chart-specific color tokens for data visualization:

--chart-1: ...;
--chart-2: ...;
--chart-3: ...;
--chart-4: ...;
--chart-5: ...;

Utility Colors

--black: ...;
--white: ...;
--indicator: ...;
--translucent: ...;

Using Tokens in Tailwind

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

<div className="bg-background text-foreground">
  <button className="bg-primary text-primary-foreground">
    Click me
  </button>
  <p className="text-muted-foreground">Supporting text</p>
</div>

Dark Mode

The kit uses next-themes for dark mode toggling. The ThemeToggle composite component handles the switch:

import { ThemeToggle } from "@/components/ui/composites/theme-toggle";

// Renders a toggle button that switches between light and dark modes
<ThemeToggle />

Dark mode values are defined in the .dark selector within globals.css. All semantic tokens automatically switch when the theme changes.

Typography

The kit uses the system font stack by default. You can customize fonts through Tailwind configuration:

/* In globals.css or your Tailwind config */
--font-sans: ui-sans-serif, system-ui, sans-serif;
--font-mono: ui-monospace, monospace;

Customizing Tokens

To customize the design tokens for your brand:

1. Open app/globals.css
2. Modify the CSS custom property values under :root (light mode) and .dark (dark mode)
3. All components automatically inherit the new values

:root {
  /* Change primary color to your brand */
  --primary: 220 90% 56%;
  --primary-foreground: 0 0% 100%;
}

Tip: Tokens use the HSL color format without the hsl() wrapper. Tailwind CSS 4 handles the function wrapping automatically.

Spacing and Radius

The kit follows Tailwind CSS defaults for spacing and border radius. The components.json configuration defines the base radius:

{
  "tailwind": {
    "cssVariables": false
  }
}

Override radius values in your Tailwind config if you want rounder or sharper corners across all components.