Why AI-Generated Interfaces Drift Off-Brand

On Monday you ask an AI coding tool for a dashboard, and the primary buttons come back in #2563eb. On Wednesday you ask for a settings page — same project, same instructions — and the buttons arrive in #3b82f6. On Friday a signup modal shows up in #1d4ed8. Three views, three blues. Each screen looks reasonable on its own; nothing errored, nothing failed. Put them side by side and the project holds three slightly different opinions about its own brand color.

AI-generated interfaces drift off-brand because a language model samples each response fresh: unless an exact value is present in its context, every color, size and spacing decision is a new guess — plausible, close to the last one, and not identical to it. Drift is not a malfunction to patch; it is the default behavior of a generative system working without a locked source. The fix is to give the model a deterministic source of values — design tokens — to reference instead of invent.

That is the short version. The rest of this article — part of our guide to AI and design systems — unpacks why the drift happens, why it survives review, and what a locked source actually changes.

Why does the same prompt produce different values?

A language model does not retrieve your brand blue from anywhere, because unless the value sits in its context there is nowhere to retrieve it from. It generates output by sampling: at each step it chooses among continuations that are statistically plausible given everything it has read. The model has seen a very large number of interfaces, so its idea of “a good blue for a primary button” is not one value — it is a distribution over values, with #2563eb, #3b82f6 and #1d4ed8 all sitting comfortably inside it. Ask three times and you get three draws.

This is a behavior pattern of the technology, not a defect of any particular tool, and turning the randomness down does not remove it: the context differs between sessions — the conversation so far, the files in view, the order of requests — and the draw moves with the context.

Why is “plausible” not the same as “consistent”?

Because plausibility is judged one answer at a time, and consistency is a property of the whole set. Each of the three blues is defensible in isolation: a reviewer looking at Friday’s modal sees a coherent screen with a credible primary color and approves it. The drift is invisible in any single view and only appears across views — which means it slips past the review process most teams actually run, the per-screen “does this look right?” check.

Color is just the easiest place to see it. The same pattern produces 15px body text on one screen and 16px on the next, a 500 font weight beside a 600, a 12px gap where its neighbor got 14px. Every choice is fine; the set is noise.

Why do users notice drift they can’t name?

Interfaces are read partly by recognition. Once a user has met the primary button a few times, they stop reading it — its color, weight and shape are processed as a known signal, at close to no cognitive cost. Consistency is what makes that shortcut possible. When the values wobble, the shortcut degrades quietly: the user does not consciously register that Wednesday’s blue differs from Monday’s, but the interface reads as slightly less put-together, off in a way that is hard to articulate. Brand recognition works the same way at a larger scale: it is built from repeated identical signals, and near-identical signals dilute it rather than reinforce it.

What does a locked source change?

It takes value-level decisions out of the sampling loop. A design token file stores each decision as named data — accent holds one exact color, space-4 one exact gap; our article on what design tokens are covers the mechanics. Once that file is in the project, the model’s job changes shape — tokens become the interface between design and AI: not “produce a plausible blue” but “reference the name accent”. Producing a correct name from a short list it can see is a task a language model handles reliably; holding a hex value identical across twenty sessions is not what it is built for.

The values themselves come from calculation rather than sampling. Open a locked color ramp in Scale Composer — one seed color, ten steps placed on a lightness curve in OKLCH, each step carrying a name and an exact value. It comes out the same way every time, because it is computed, not guessed.

Where does AI still earn its place?

The point is a division of labor, not a verdict. Generative tools are strong at structure and variation: scaffolding a view, wiring components, laying out a form, proposing three alternatives before lunch. What they do not do well is hold many exact values stable over time — or the parts of a design system that are calculations rather than choices. Contrast requirements such as WCAG’s minimums are arithmetic on lightness; perceptually even color steps are curve placement. Those have right answers, and right answers should be checked, not sampled. Scale Composer computes them: semantic roles — background, text, accent — are derived from the ramp with a contrast floor and scored with APCA, so the pairings hold before anything reaches a prompt.

The working arrangement, then: the deterministic system holds the values, and the AI builds with them.

From ramp to roles

A ramp is raw material; what an AI ends up referencing are role names. Open the semantic roles derived from that same locked ramp — background, text and accent assigned from the ramp’s steps, each pairing checked against the contrast floor. That short list of names is what replaces the distribution the model would otherwise sample from: give it the list, ask it to reference the names, and the three-blues problem has nothing left to drift.