Theme Builder

Tune the two colours a theme is built on, accent and ink, and watch the whole page re-theme. When it looks right, copy the CSS into your own `app.css`. Your tweaks are saved as you go and shared with the floating theme widget on the other docs pages; hit Reset to clear them.

Accent

Your brand colour: buttons, links, focus rings and active states. Use it anywhere via *-accent utilities (bg-accent, text-accent).

Custom

Ink

The neutral base: text, borders, surfaces and the off-accent fill. Re-tones the *-ink-* scale (bg-ink-100, text-ink-500).

Dark depth

Form controls

Radius

Button radius

Shadow

Focus ring

Structural

Radius

Shadow

Card border

Surface lift (light)

Surface lift (dark)

Buttons

Select

Radio

Starter

Pro

Team

Checkbox & switch

Automatic backups

Audit log

Notifications

Input

Badges

Operational Degraded Tag

Generated CSS

Copy this into the inline <style> from your base template (no build) or your app.css after the kit import (custom build), to make this theme yours. It overrides the kit's default tokens, so no component files change. See the Theming guide for how it works, or the full token reference.

Ink is the kit's themeable neutral (--color-ink-*), defaulting to the zinc look, so re-toning it is just a token override (no rebuild). Your own zinc usage is untouched.

bg-red-50 bg-red-100 bg-red-200 bg-red-300 bg-red-400 bg-red-500 bg-red-600 bg-red-700 bg-red-800 bg-red-900 bg-red-950 bg-orange-50 bg-orange-100 bg-orange-200 bg-orange-300 bg-orange-400 bg-orange-500 bg-orange-600 bg-orange-700 bg-orange-800 bg-orange-900 bg-orange-950 bg-amber-50 bg-amber-100 bg-amber-200 bg-amber-300 bg-amber-400 bg-amber-500 bg-amber-600 bg-amber-700 bg-amber-800 bg-amber-900 bg-amber-950 bg-yellow-50 bg-yellow-100 bg-yellow-200 bg-yellow-300 bg-yellow-400 bg-yellow-500 bg-yellow-600 bg-yellow-700 bg-yellow-800 bg-yellow-900 bg-yellow-950 bg-lime-50 bg-lime-100 bg-lime-200 bg-lime-300 bg-lime-400 bg-lime-500 bg-lime-600 bg-lime-700 bg-lime-800 bg-lime-900 bg-lime-950 bg-green-50 bg-green-100 bg-green-200 bg-green-300 bg-green-400 bg-green-500 bg-green-600 bg-green-700 bg-green-800 bg-green-900 bg-green-950 bg-emerald-50 bg-emerald-100 bg-emerald-200 bg-emerald-300 bg-emerald-400 bg-emerald-500 bg-emerald-600 bg-emerald-700 bg-emerald-800 bg-emerald-900 bg-emerald-950 bg-teal-50 bg-teal-100 bg-teal-200 bg-teal-300 bg-teal-400 bg-teal-500 bg-teal-600 bg-teal-700 bg-teal-800 bg-teal-900 bg-teal-950 bg-cyan-50 bg-cyan-100 bg-cyan-200 bg-cyan-300 bg-cyan-400 bg-cyan-500 bg-cyan-600 bg-cyan-700 bg-cyan-800 bg-cyan-900 bg-cyan-950 bg-sky-50 bg-sky-100 bg-sky-200 bg-sky-300 bg-sky-400 bg-sky-500 bg-sky-600 bg-sky-700 bg-sky-800 bg-sky-900 bg-sky-950 bg-blue-50 bg-blue-100 bg-blue-200 bg-blue-300 bg-blue-400 bg-blue-500 bg-blue-600 bg-blue-700 bg-blue-800 bg-blue-900 bg-blue-950 bg-indigo-50 bg-indigo-100 bg-indigo-200 bg-indigo-300 bg-indigo-400 bg-indigo-500 bg-indigo-600 bg-indigo-700 bg-indigo-800 bg-indigo-900 bg-indigo-950 bg-violet-50 bg-violet-100 bg-violet-200 bg-violet-300 bg-violet-400 bg-violet-500 bg-violet-600 bg-violet-700 bg-violet-800 bg-violet-900 bg-violet-950 bg-purple-50 bg-purple-100 bg-purple-200 bg-purple-300 bg-purple-400 bg-purple-500 bg-purple-600 bg-purple-700 bg-purple-800 bg-purple-900 bg-purple-950 bg-fuchsia-50 bg-fuchsia-100 bg-fuchsia-200 bg-fuchsia-300 bg-fuchsia-400 bg-fuchsia-500 bg-fuchsia-600 bg-fuchsia-700 bg-fuchsia-800 bg-fuchsia-900 bg-fuchsia-950 bg-pink-50 bg-pink-100 bg-pink-200 bg-pink-300 bg-pink-400 bg-pink-500 bg-pink-600 bg-pink-700 bg-pink-800 bg-pink-900 bg-pink-950 bg-rose-50 bg-rose-100 bg-rose-200 bg-rose-300 bg-rose-400 bg-rose-500 bg-rose-600 bg-rose-700 bg-rose-800 bg-rose-900 bg-rose-950 bg-slate-50 bg-slate-100 bg-slate-200 bg-slate-300 bg-slate-400 bg-slate-500 bg-slate-600 bg-slate-700 bg-slate-800 bg-slate-900 bg-slate-950 bg-gray-50 bg-gray-100 bg-gray-200 bg-gray-300 bg-gray-400 bg-gray-500 bg-gray-600 bg-gray-700 bg-gray-800 bg-gray-900 bg-gray-950 bg-ink-50 bg-ink-100 bg-ink-200 bg-ink-300 bg-ink-400 bg-ink-500 bg-ink-600 bg-ink-700 bg-ink-800 bg-ink-900 bg-ink-950 bg-neutral-50 bg-neutral-100 bg-neutral-200 bg-neutral-300 bg-neutral-400 bg-neutral-500 bg-neutral-600 bg-neutral-700 bg-neutral-800 bg-neutral-900 bg-neutral-950 bg-stone-50 bg-stone-100 bg-stone-200 bg-stone-300 bg-stone-400 bg-stone-500 bg-stone-600 bg-stone-700 bg-stone-800 bg-stone-900 bg-stone-950 bg-taupe-50 bg-taupe-100 bg-taupe-200 bg-taupe-300 bg-taupe-400 bg-taupe-500 bg-taupe-600 bg-taupe-700 bg-taupe-800 bg-taupe-900 bg-taupe-950 bg-mauve-50 bg-mauve-100 bg-mauve-200 bg-mauve-300 bg-mauve-400 bg-mauve-500 bg-mauve-600 bg-mauve-700 bg-mauve-800 bg-mauve-900 bg-mauve-950 bg-mist-50 bg-mist-100 bg-mist-200 bg-mist-300 bg-mist-400 bg-mist-500 bg-mist-600 bg-mist-700 bg-mist-800 bg-mist-900 bg-mist-950 bg-olive-50 bg-olive-100 bg-olive-200 bg-olive-300 bg-olive-400 bg-olive-500 bg-olive-600 bg-olive-700 bg-olive-800 bg-olive-900 bg-olive-950

Theme Builder

Tune the two colours a theme is built on, accent and ink, and watch the whole page re-theme. When it looks right, copy the CSS into your own app.css. Your tweaks are saved as you go and shared with the floating theme widget on the other docs pages; hit Reset to clear them.

Tune the two colours a theme is built on, accent and ink, and watch the whole page re-theme. When it looks right, copy the CSS into your own `app.css`. Your tweaks are saved as you go and shared with the floating theme widget on the other docs pages; hit Reset to clear them.