Workspace overview
TodayKPI cards and a sparkline using the brand ramp. Hue shift propagates to every shade.
Requests
4,231
+12%Success
99.2%
stableSpend
$487
Theme customizer
Drag the hue. Watch every component retune.
Tailwind v4 oklch tokens flow through every shade in the ramp. Pick a color, fine-tune chroma and radius, copy the @theme block, paste it into theme/tokens/theme.css — done. No bundle rebuild.
New
Sample · grounded answer2.1s · 3 sources
Your brand color flows through every component — buttons, badges, links, focus rings, sparklines, dot indicators. Tailwind v4 oklch tokens make this work without rebuilding the bundle.
Connected to workspace docs
01 · Pick a hue
The whole ramp (50 → 950) recomputes from one degree value. Lightness stays constant per step — only the hue rotates.
02 · Tune chroma + radius
Chroma multiplier mutes (≤1) or punches up (≥1) the saturation. Radius drives the global rounding scale used in the brand surface mockups.
03 · Copy the @theme block
Paste into theme/tokens/theme.css or download the file. Re-run dev — you’re rebranded.
Why this matters
No other AI template lets you brand without code.
Generic SaaS templates ship a hardcoded palette. To rebrand you grep CSS and pray. Vexell uses Tailwind v4 oklch tokens through a single @theme block — change one number, every surface listens.
- No bundle rebuild. Variables resolve in the browser.
- oklch perceptual ramps keep contrast WCAG AA across hues — no surprise dark mode failures.
- Both stacks share the file. The HTML+Vite and Next.js editions read the same tokens — one rebrand covers both.
Where it lives
theme/ ├── index.css (entrypoint) ├── tokens/ │ ├── theme.css ← paste @theme block here │ └── semantic.css ← light/dark overrides ├── fonts/ └── utilities.css
Tokens, fonts and utilities live next to your code in theme/. Edit a token, see it everywhere on next reload.
Don’t love the indigo? Pick yours.
Every demo, every dashboard surface, every chart cell respects the override. Brand consistency that survives 9 verticals.