How it works
brand.css
Define raw color variables with light and dark values
theme.css
Maps variables to Tailwind utilities via @theme inline
Templates
Use semantic classes like bg-primary, text-foreground
/* Use Tailwind utilities in templates */
bg-primary text-primary-foreground
bg-destructive-soft text-destructive-soft-foreground
border-border
/* Or CSS variables in custom styles */
background-color: var(--color-primary);
color: var(--color-foreground);Layout
Background
--background
Foreground
--foreground
Card
--card
Popover
--popover
Muted
--muted
Border
--border
Primary & Secondary
Primary
primary
Primary Hover
primary-hover
Primary FG
primary-foreground
Secondary
secondary
Secondary FG
secondary-foreground
Accent
accent
Status Colors
Soft, border and hover variants are auto-generated via relative-color-syntax.
destructive
base
soft
success
base
soft
warning
base
soft
info
base
soft
Brand File
Create your own brand.css to customize the theme. Only raw variables — no computed values needed.
:root {
--background: oklch(1 0 0);
--foreground: oklch(0.141 0.005 285.823);
--overlay: oklch(0.21 0.006 264 / 0.5);
--card: oklch(1 0 0);
--card-foreground: var(--foreground);
--popover: oklch(1 0 0);
--popover-foreground: var(--foreground);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--input-focus: oklch(from var(--primary) l c h / 40%);
--input-ring: oklch(from var(--primary) l c h / 10%);
--destructive: oklch(0.577 0.245 27);
--success: oklch(0.6 0.19 145);
--warning: oklch(0.8 0.16 85);
--info: oklch(0.6 0.19 240);
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
/* ... override all variables for dark mode */
}