Colours
ZUI uses Tailwind's colour palette.
Colours are exposed as CSS custom properties in the form --color-{name}-{shade}, e.g. --color-blue-500. A handful of special values have no shade: --color-black, --color-white, --color-transparent, --color-inherit, --color-current.
Colour Palette
Hover a swatch to see its CSS custom property value. Click to copy.
red
--color-red-50
--color-red-100
--color-red-200
--color-red-300
--color-red-400
--color-red-500
--color-red-600
--color-red-700
--color-red-800
--color-red-900
--color-red-950
orange
--color-orange-50
--color-orange-100
--color-orange-200
--color-orange-300
--color-orange-400
--color-orange-500
--color-orange-600
--color-orange-700
--color-orange-800
--color-orange-900
--color-orange-950
amber
--color-amber-50
--color-amber-100
--color-amber-200
--color-amber-300
--color-amber-400
--color-amber-500
--color-amber-600
--color-amber-700
--color-amber-800
--color-amber-900
--color-amber-950
yellow
--color-yellow-50
--color-yellow-100
--color-yellow-200
--color-yellow-300
--color-yellow-400
--color-yellow-500
--color-yellow-600
--color-yellow-700
--color-yellow-800
--color-yellow-900
--color-yellow-950
lime
--color-lime-50
--color-lime-100
--color-lime-200
--color-lime-300
--color-lime-400
--color-lime-500
--color-lime-600
--color-lime-700
--color-lime-800
--color-lime-900
--color-lime-950
green
--color-green-50
--color-green-100
--color-green-200
--color-green-300
--color-green-400
--color-green-500
--color-green-600
--color-green-700
--color-green-800
--color-green-900
--color-green-950
emerald
--color-emerald-50
--color-emerald-100
--color-emerald-200
--color-emerald-300
--color-emerald-400
--color-emerald-500
--color-emerald-600
--color-emerald-700
--color-emerald-800
--color-emerald-900
--color-emerald-950
teal
--color-teal-50
--color-teal-100
--color-teal-200
--color-teal-300
--color-teal-400
--color-teal-500
--color-teal-600
--color-teal-700
--color-teal-800
--color-teal-900
--color-teal-950
cyan
--color-cyan-50
--color-cyan-100
--color-cyan-200
--color-cyan-300
--color-cyan-400
--color-cyan-500
--color-cyan-600
--color-cyan-700
--color-cyan-800
--color-cyan-900
--color-cyan-950
sky
--color-sky-50
--color-sky-100
--color-sky-200
--color-sky-300
--color-sky-400
--color-sky-500
--color-sky-600
--color-sky-700
--color-sky-800
--color-sky-900
--color-sky-950
blue
--color-blue-50
--color-blue-100
--color-blue-200
--color-blue-300
--color-blue-400
--color-blue-500
--color-blue-600
--color-blue-700
--color-blue-800
--color-blue-900
--color-blue-950
indigo
--color-indigo-50
--color-indigo-100
--color-indigo-200
--color-indigo-300
--color-indigo-400
--color-indigo-500
--color-indigo-600
--color-indigo-700
--color-indigo-800
--color-indigo-900
--color-indigo-950
violet
--color-violet-50
--color-violet-100
--color-violet-200
--color-violet-300
--color-violet-400
--color-violet-500
--color-violet-600
--color-violet-700
--color-violet-800
--color-violet-900
--color-violet-950
purple
--color-purple-50
--color-purple-100
--color-purple-200
--color-purple-300
--color-purple-400
--color-purple-500
--color-purple-600
--color-purple-700
--color-purple-800
--color-purple-900
--color-purple-950
fuchsia
--color-fuchsia-50
--color-fuchsia-100
--color-fuchsia-200
--color-fuchsia-300
--color-fuchsia-400
--color-fuchsia-500
--color-fuchsia-600
--color-fuchsia-700
--color-fuchsia-800
--color-fuchsia-900
--color-fuchsia-950
pink
--color-pink-50
--color-pink-100
--color-pink-200
--color-pink-300
--color-pink-400
--color-pink-500
--color-pink-600
--color-pink-700
--color-pink-800
--color-pink-900
--color-pink-950
rose
--color-rose-50
--color-rose-100
--color-rose-200
--color-rose-300
--color-rose-400
--color-rose-500
--color-rose-600
--color-rose-700
--color-rose-800
--color-rose-900
--color-rose-950
slate
--color-slate-50
--color-slate-100
--color-slate-200
--color-slate-300
--color-slate-400
--color-slate-500
--color-slate-600
--color-slate-700
--color-slate-800
--color-slate-900
--color-slate-950
gray
--color-gray-50
--color-gray-100
--color-gray-200
--color-gray-300
--color-gray-400
--color-gray-500
--color-gray-600
--color-gray-700
--color-gray-800
--color-gray-900
--color-gray-950
zinc
--color-zinc-50
--color-zinc-100
--color-zinc-200
--color-zinc-300
--color-zinc-400
--color-zinc-500
--color-zinc-600
--color-zinc-700
--color-zinc-800
--color-zinc-900
--color-zinc-950
neutral
--color-neutral-50
--color-neutral-100
--color-neutral-200
--color-neutral-300
--color-neutral-400
--color-neutral-500
--color-neutral-600
--color-neutral-700
--color-neutral-800
--color-neutral-900
--color-neutral-950
stone
--color-stone-50
--color-stone-100
--color-stone-200
--color-stone-300
--color-stone-400
--color-stone-500
--color-stone-600
--color-stone-700
--color-stone-800
--color-stone-900
--color-stone-950
taupe
--color-taupe-50
--color-taupe-100
--color-taupe-200
--color-taupe-300
--color-taupe-400
--color-taupe-500
--color-taupe-600
--color-taupe-700
--color-taupe-800
--color-taupe-900
--color-taupe-950
mauve
--color-mauve-50
--color-mauve-100
--color-mauve-200
--color-mauve-300
--color-mauve-400
--color-mauve-500
--color-mauve-600
--color-mauve-700
--color-mauve-800
--color-mauve-900
--color-mauve-950
mist
--color-mist-50
--color-mist-100
--color-mist-200
--color-mist-300
--color-mist-400
--color-mist-500
--color-mist-600
--color-mist-700
--color-mist-800
--color-mist-900
--color-mist-950
olive
--color-olive-50
--color-olive-100
--color-olive-200
--color-olive-300
--color-olive-400
--color-olive-500
--color-olive-600
--color-olive-700
--color-olive-800
--color-olive-900
--color-olive-950
Semantic Colours
These tokens are defined in theme.css and adapt automatically between light and dark mode via light-dark(). Use these instead of raw palette tokens for UI surfaces, text, borders, and feedback states.
--color-theme Main theme colour used by buttons, links, focus rings, and active states. --color-accent Accent colour for alternative actions and highlights. --color-background Page background colour. --color-surface Elevated surface colour for cards, sidebars, and panels. --color-border Default border colour for inputs, cards, and dividers. --color-text Default text colour. --color-success Positive feedback — confirmations, success states. --color-error Negative feedback — errors, destructive actions, invalid inputs. --color-warning Cautionary feedback — warnings, attention needed. .my-element {
/* raw palette token */
background-color: var(--color-blue-500);
/* semantic token from theme.css */
color: var(--color-text);
}Adapting colours with CSS relative color syntax
Rather than shipping a separate variable for every possible transparency or tint, ZUI uses CSS relative color syntax to let you derive new values on the fly from any existing token.
Add transparency
.my-element {
/* 50% opacity blue */
background-color: oklch(from var(--color-blue-500) l c h / 50%);
/* 10% opacity — useful for subtle tinted backgrounds */
background-color: oklch(from var(--color-blue-500) l c h / 10%);
}Lighten or darken
.my-element {
/* Lighter — increase l toward 1 */
color: oklch(from var(--color-blue-500) calc(l + 0.15) c h);
/* Darker — decrease l toward 0 */
color: oklch(from var(--color-blue-500) calc(l - 0.15) c h);
}Desaturate or shift hue
.my-element {
/* Half the chroma (more muted) */
color: oklch(from var(--color-blue-500) l calc(c * 0.5) h);
/* Rotate hue by 30° */
color: oklch(from var(--color-blue-500) l c calc(h + 30));
}