Design Tokens

The SaaS Starter Kit uses the same design token system as the AI UX Kit. Tokens are CSS custom properties defined in app/globals.css and consumed by Tailwind CSS 4.

Color Tokens

Semantic color tokens that adapt in dark mode:

: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 Tokens

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

Chart Colors

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

Usage in Tailwind

<div className="bg-background text-foreground border-border">
  <button className="bg-primary text-primary-foreground">
    Save Changes
  </button>
  <span className="text-muted-foreground">Last updated 2 hours ago</span>
</div>

Dark Mode

Use the ThemeToggle composite component. Tokens switch automatically:

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

<ThemeToggle />

Dark mode values are defined in .dark selector within globals.css.

Customizing for Your Brand

Update app/globals.css to change colors project-wide:

:root {
  --primary: 220 90% 56%;
  --primary-foreground: 0 0% 100%;
}

.dark {
  --primary: 220 90% 68%;
  --primary-foreground: 0 0% 100%;
}

All 135+ components automatically inherit the new palette.

For full customization details, see the Customization guide.