Every AI-built product converges on the same aesthetic — and keeps converging, feature by feature, long after launch. Variel gives your product a structural point of view, then serves it to every agent and checks it on every commit.
Ask the agent for a screen. It looks fine. Ship it. Then the next feature is a little off, and the one after that, and six months in every screen has drifted back to the mean — the same mean your competitor's agent is drifting toward.
A brand kit can't stop this. Static guidelines don't run when the agent does. What you need is a position the agents are held to — on every output, every commit.
Nine companies. One template. This is the mean every AI-built product drifts toward — unless something holds it back.
Design systems are only as strong as the position they encode. Without a position, any system is decoration.
Variel runs the step that's missing: positioning → divergent concept vectors → a brand system. "Vectors" is the word. A direction and a magnitude. Not a color, not a mood board — coordinates in brand space that tell every agent where your product stands and why.
Start with a positioning interview: what you're building, for whom, against what alternatives, what you refuse to be. The Studio returns concept routes — structurally different, not recolors.
Choose a route. Refine it at the system level — “warmer” reshapes everything, coherently. Your brand object is ready.
The brand becomes a live system served to your agents over MCP. One install. Every feature an agent builds inherits the full system — and every output is checked against it.
# add to Claude Code once
claude mcp add variel \
-e BRAND_API_KEY=vrl_… \
-- node .../server.js
Static guidelines don't run when the agent does. The Server is the part that does — continuously.
Connect once over MCP. From then on, every design an agent produces is checked against your brand — automatically, in the loop, before it ships. This is the part competitors can't copy without a divergence engine behind the verdict.
validate_designToken, contrast, and voice conformance — deterministic. Catches raw hex, off-scale spacing, off-brand words the moment an agent writes them.
grade_visual_qualityA vision judge scores the rendered screen on hierarchy, type, spacing, color, and coherence — it catches “on-token but still looks generic.”
validate_copyBrand voice enforced on the words, not just the pixels — every heading, button, and error message.
propose_tokenWhen no token fits, the agent proposes one for review instead of inventing a raw value off-system.
drift reportA conformance score tracked over time. See exactly when, where, and how far the product slipped.
Drop the Variel check into your repo. Every PR gets an on-brand status and a drift comment — the score, what regressed, and the fix. The enforcement stops being invisible: the person paying for it sees it work on every change.
Real output from the same engine. Not recolors — different form language, type voice, spatial density, and color strategy. This is the engine behind every verdict the Server makes.
The same system serves every agent in your stack, and the same brand is shared across your whole team. Switch tools, add teammates; the position holds.
Generation is free — the whole aha, no card. You pay when you want the position enforced: live on your agents and on every PR.
Set your position once. Variel keeps every commit on it.
Generate your brand
Pricing.tsx— raw#7C3AED→ usevar(--color-accent)Hero.tsx— contrast 3.1:1 on muted text → below AA; use--color-ink-mutedEmptyState.tsx— copy “just click here!” → drop the hedge + exclamation (voice)