Stopping the Slow Drift of Colors and Spacing on Every Regeneration with a Single Source of Design Tokens

Make the AI reference tokens every time

Creating the file is not enough. When you have Rork generate a screen, fix a prompt convention that forbids writing raw style values. The instruction I use looks roughly like this.

1. Styles must reference values from tokens.ts. Do not write raw numbers or color codes directly
2. If a new color or spacing is needed, do not write it in the component; first propose it as a candidate addition to tokens.ts
3. If existing tokens can express the look, reuse them instead of inventing a new value

Placing those three lines at the top of every generation instruction visibly raised the rate at which output references tokens. AI follows "where to look" more obediently than it follows prohibitions.

Detect deviations in CI

Even so, raw numbers slip into output. Relying on human review alone misses them, so detect them mechanically. Drop in a light script that fails if a bare color code or magic number appears inside a component.

// check-tokens.mjs — scan components for raw style values
import { readFileSync } from "node:fs";
import { globSync } from "glob";
 
const files = globSync("src/components/**/*.tsx");
const hexColor = /#[0-9a-fA-F]{3,8}\b/;
// Disallowed outside tokens.ts (white may be an operational exception)
let violations = 0;
 
for (const f of files) {
  const lines = readFileSync(f, "utf8").split("\n");
  lines.forEach((line, i) => {
    if (line.includes("tokens.")) return;        // token-referencing lines exempt
    if (hexColor.test(line) && !line.includes("#FFFFFF")) {
      console.log(`${f}:${i + 1} raw color code: ${line.trim()}`);
      violations++;
    }
  });
}
 
if (violations > 0) {
  console.log(`\nFAIL: ${violations} raw style values found. Move them into tokens.ts`);
  process.exit(1);
}
console.log("OK: no raw style values");

Run this before push and any raw #3B82F6 that slipped in during regeneration shows up in a list. When flagged, replace the value with an existing token from tokens.ts, or register it formally as a new token. The point is not to "fix" the drift but to place a mechanism that "notices" the moment drift enters.

A caution when keeping consistency across many apps

Running six apps in parallel, you will want to share tokens fully across all of them. But in my experience, over-sharing means one app's brand change ripples into the other five, which actually slows you down.

What worked in practice is sharing only the structure while each app holds its own values. Keep the key names and the number of steps in radius and space (sm/md/lg…) aligned across all apps, but close the actual colors and numbers inside each app's tokens.ts. That way, porting a new screen to another app lets the components run as-is, while each app grows its own brand color independently.

Numbers that paid off in production, and a pitfall I hit

After putting this into real operation, the effect showed up in numbers in a few places. Before tokenizing, I spent about 10 minutes reviewing the look every time I regenerated a single screen, visually checking that colors and spacing matched the previous version. After consolidating into tokens, that comparison nearly vanished and review time shrank to two or three minutes. In a week where I touch several screens a day, that difference stacks up into a real change.

Let me share a pitfall I hit myself. At first, even after adopting tokens, the drift would not stop, and I chased the cause for half a day. Checking the production build, one generated component imported tokens.color.brand while, right beside it, also wrote the same color "#2563EB" raw. Since they looked identical, no runtime error appeared and review missed it. That is exactly why the CI detection below is needed: the human eye does not register "the same color" as an anomaly.

Another pitfall was slicing the tokens too finely. When I prepared ten spacing steps where six would do, the AI hesitated over which to pick, and consistency actually dropped. I recommend keeping the number of steps small. Personally, six spacing steps from xs to xxl and four radius steps was the grain that was easiest to judge for both AI and human. Even on screens where I drop in an AdMob banner, fewer spacing steps made layout breakage easier to predict and cut how often I had to retake App Store screenshots.

As a guiding rule: when you feel the urge to add a new token, pause and first ask whether an existing step can stand in. Tokens grant more freedom the more you add, but the more freedom you grant, the more the regeneration drift returns.

Your next move

From your current app's components, extract just the colors into tokens.ts first. Color is where drift is most visible, so the effect is easiest to feel. Then wedge check-tokens.mjs in before push, and from the next regeneration you escape the state of "drifting without noticing."

It is a humble bit of plumbing, but it pays off the longer an app lives. I would be glad if it helps anyone facing the same trouble.