Theming - Saturation UI

Looking for the full design system spec? See Design — the rendered DESIGN.md with all 96 color tokens, typography roles, component recipes (including hover/focus/active variants), and dark-mode pairs. This page covers how to customize the system in a consumer project.

Color System

Saturation UI uses the oklch() color space for perceptually uniform colors. All theme tokens are defined as CSS custom properties in globals.css.

Light Mode

:root {
  --primary: oklch(0.468 0.194 263.5);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.92 0.004 286.32);
  --muted: oklch(0.967 0.001 286.375);
  --accent: oklch(0.967 0.001 286.375);
  --destructive: oklch(0.577 0.245 27.325);
}

Dark Mode

.dark {
  --primary: oklch(0.512 0.211 263.5);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.21 0.006 285.885);
  --muted: oklch(0.21 0.006 285.885);
  --accent: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.704 0.191 22.216);
}

Customizing Colors

Override any CSS variable in your globals.css to match your brand:

:root {
  --primary: oklch(0.6 0.2 150); /* Your brand color */
  --primary-foreground: oklch(1 0 0);
}

All components automatically pick up your custom colors through Tailwind's theme system.

Typography

Saturation UI uses Inter as the default sans-serif font. To change fonts, update your root layout:

import { YourFont } from "next/font/google"

const font = YourFont({
  subsets: ["latin"],
  variable: "--font-sans",
})

Then update the --font-sans variable in globals.css:

:root {
  --font-sans: var(--font-your-font), ui-sans-serif, system-ui, sans-serif;
}

Border Radius

The global border radius is controlled by the --radius variable:

:root {
  --radius: 0.8rem; /* Default */
}

Components use computed values like rounded-md (which maps to calc(var(--radius) - 2px)).