One Token System, Zero One-Off Hex Values

Open the stylesheet of any vibe-coded app and count the hex values. You'll find #6366f1, #6365ef, #6464f0, and #6b6bf2 — four shades of the same purple that nobody chose, because the agent invented a fresh color every time it built a component. Multiply that across spacing, radii, and font sizes and you get an app that's technically themed and visibly incoherent. That's not a bad eye. It's a missing system.

A token system fixes this by construction. Instead of hardcoding values per component, you define colors, spacing, and type as CSS variables — generated from a single brand color — and every component reads from them. Consistency stops being something you police and becomes something the structure guarantees. The model can't invent a one-off hex if there's no place to put one. This post is about getting that system, fast, without becoming a color theorist.

Key Takeaways

• One-off hex values are the slop tell. Agents reach for a new literal color each time; a token system removes the option entirely.
• A real system is generated, not collected. A mood board is a pile of pretty colors; a token system is colors, spacing, and type ramps derived from one brand color with relationships intact.
• CSS variables are the enforcement layer. When every component reads var(--color-primary), drift is impossible — change one value, every screen updates.
• Generate the whole ramp from one color. theme-factory takes a single brand hex and produces the full token set — shades, semantic roles, spacing, type — in one pass.
• Tokens are the floor; the system doc is the ceiling. For the deeper architecture, the AI Design Systems series covers DESIGN.md token systems end to end.

Why Agents Invent Hex

An agent writing a component in isolation has no memory of the blue it used in the last one. So it picks a blue — a reasonable one, even — and moves on. The next component, fresh context, picks again. Each choice is locally fine and globally wrong, because design coherence is about relationships between values, not the values themselves. The agent optimizes each component; nobody optimizes the set.

This is why "just tell it to be consistent" doesn't work. Consistency isn't a behavior you can prompt reliably across dozens of generations — it's a property of having a single source of truth. Remove the agent's ability to invent and the problem disappears. That's what a token system does: it replaces "pick a color" with "reference the token," and there's only ever one token.

Mood Board vs Real System

These get confused constantly, and the difference is the whole game. A mood board is a selection — a palette of colors that look nice together. A token system is a structure — a set of values with defined relationships and semantic roles that an agent can apply mechanically.

A mood board still leaves the agent choosing. When does it use the dark purple vs the light one? It guesses, and the guesses don't agree. A token system answers the question before it's asked: dark purple is --color-primary-700, used for hover states, full stop. The decision is encoded, not re-litigated per component.

Generate the System From One Color

You don't build this by hand. The whole point is to skip the color-theory afternoon. theme-factory takes a single brand hex and generates the full token set — a complete shade ramp, semantic role assignments, spacing scale, and type ramp — as CSS variables. Install it:

npx skills add anthropics/skills --skill theme-factory

Then hand it your one decision — the brand color — and let it derive the rest:

"Generate a token system from brand color #FF6B35. Output CSS
variables: full shade ramp, semantic roles (primary, accent, muted,
destructive, foreground, background), an 8pt spacing scale, and a
type ramp. Write it to globals.css and reference nothing but tokens."

The output is a system where every color, gap, and font size is a named variable. From there, the enforcement is one line in your agent's instructions:

## Styling
Never write a literal hex, px spacing, or font-size. Reference CSS
variables only. If a value is missing, add a named token first.

Now the agent can't invent a one-off hex, because the instruction forbids literals and the system provides a token for every need. The four-shades-of-purple problem is structurally impossible.

From Tokens to a Real Design System

Tokens are the floor — they kill the hex problem and guarantee consistency. The ceiling is a full design system that documents when to use which token, what the component patterns are, and how the whole thing holds together as one voice. Tokens make your app consistent; a system doc makes it intentional.

That deeper layer is what the AI Design Systems series covers — turning a token block into a DESIGN.md the agent reads before every UI build, so the system isn't just enforced but reasoned about. If this post got you to "zero one-off hex," that series gets you to "looks like one designer built the whole thing." Start with the tokens here, graduate to the system there.

Frequently Asked Questions

Can't I just tell the agent to reuse colors?

Not reliably. Each generation is a fresh context with no memory of prior color choices, so "be consistent" is a hope, not a guarantee. Across dozens of components, the agent will drift. A token system removes the dependency on memory entirely — there's one source of truth and the agent references it. Structure beats instruction for anything that has to hold across many generations.

What's wrong with a few hand-picked colors?

Nothing, until you need a hover state, a disabled state, a border, and a muted background — and now your five colors aren't enough, so the agent invents the rest. A generated ramp gives you the full range up front (50 through 900), with relationships intact, so every state has a defined token. Hand-picking covers the happy path; a ramp covers the whole UI.

Does theme-factory lock me into one look?

The opposite. Because everything derives from one brand color expressed as tokens, rebranding is changing the base hex and regenerating — every screen updates at once. Hardcoded literals are what lock you in; you'd have to find and replace hundreds of values. A token system makes your design more portable, not less.

Where do spacing and type fit in?

Same principle as color. Agents invent 13px, 15px, 17px font sizes and mb-3.5-style one-off gaps for exactly the same reason they invent hex. theme-factory generates a spacing scale and type ramp alongside the colors, so the no-literals rule covers all three. Consistency in spacing and type is read as "professional" just as strongly as consistent color.

Browse theme-factory and the rest of the Designs category, or explore the full catalog at aiskill.market.