Answers

Why AI frontends look alike, and what design tokens change

AI-built frontends look alike because the agent guesses every value nobody gave it: typeface, colour, spacing, radius, motion. Guesses land on the most common answer. Design tokens are named, fixed values for those choices, written once and referenced everywhere, so the agent builds from your decisions instead of the average. Tokens narrow the guessing. They don't guarantee good design.

Facts checked against the live site and catalog on 7 October 2026

The boundary first

Tokens change which values the agent uses. They don't decide layout, hierarchy, or copy. The terms say we can't guarantee that anything built with Motif will look good or meet a standard. Check what you ship.

Why the agent lands on the same values

A coding agent has to pick a value for every font size, colour, gap, corner, shadow, and transition on a page. When the brief doesn't say, it picks what it has seen most. Do that a few hundred times and you get the familiar result: the same type pairing, the same accent, the same rounded cards.

Banning one look just moves the guess somewhere else. The public posts about this pattern, and the wider reasons, are on Why AI-built sites look the same. This page is about the values half of the fix.

What a design token is

A design token is a named value for one design decision, such as color.action.primary or space.4. Components reference the name, never the raw value, so a decision is made once and used everywhere. Most systems use two tiers: primitive tokens hold the raw palette and scales, and semantic tokens say what each value is for.

The Design Tokens Community Group (DTCG) format reached its first stable version, 2025.10, on 28 October 2025. Motif's free guide on that format, printed in full on the site, uses this shape:

{"space": {"$type": "dimension",
 "4": {"$value": {"value": 16, "unit": "px"}}},
 "color": {"action": {"primary": {"$value": "{color.blue.600}"}}}}

Any object with $value is a token, any object without one is a group, and {color.blue.600} is an alias to another token. For three colours in a throwaway prototype, the same guide says plain CSS custom properties are fine until a second theme or platform appears. Read it at Authoring design tokens in the DTCG format.

Which tokens change the look most

These are general starting points, not a Motif rule set.

Decision	What to fix	Why it matters for sameness
Type	One or two families, a size scale, line heights	The default sans with a big bold headline is one of the most common guesses.
Colour	A small palette plus semantic roles: surface, text, action, border, danger	Roles stop the agent inventing a new accent for each component.
Space	One spacing scale, for example steps of 4 or 8 px	One-off gaps make a page feel assembled rather than designed.
Shape	Corner radius, borders, and shadow levels	The same large radius and soft shadow on every card is a familiar default.
Motion	Duration and easing tokens	Without them, every transition gets the same guessed timing, or none.

For motion values, the duration and easing scale guide sets durations from 100 to 500 ms, ease-out to enter and ease-in to leave, and the reduced motion guide maps each motion type to a reduced equivalent.

Tokens are not the whole fix

Tokens fix values, not structure. A wall of equal cards in your palette is still a wall of equal cards. Two lessons printed in full on the site cover the structural half: decide the page's job before choosing components, and avoid card walls when the content is a story, a process, or an explanation. Use tokens for the values and those rules for the layout.

How to give tokens to a coding agent

Decide a short set first: type, a palette with roles, spacing, radius, and motion. A few decisions you made beat fifty the agent guessed.
Put them in one file the build reads: a .tokens.json file in DTCG format, or CSS custom properties for a small project.
Tell the agent to reference tokens only, with no raw hex values, pixel sizes, or durations in component code.
Check the output. Search the diff for raw values, and measure contrast and target sizes rather than trusting the palette.
Keep the decisions where the next session will read them, so a new chat does not reinvent them.

Where Motif fits

Motif is a design library your agent calls over MCP. Three of its tools touch tokens and decisions. get_design_pack returns an authored design pack that fits a product brief: a direction, tokens, the guides to follow, and the checks to run. No hosted model writes it on the fly.

Project profiles keep your brief and the decisions you approved, such as a type scale, so every agent you use builds to the same choices. An agent can suggest a decision with propose_project_decision, but it can't approve or overwrite one itself. check_design_contract checks facts your agent measured, such as contrast ratios, target sizes, and motion timing. Missing evidence is reported as unknown, never as a pass. The tool reference lists each call.

Editorial review of the library is in progress. On 7 October 2026 the catalog stats endpoint reported 110 of 738 guides reviewed (catalog release corpus-v0.3.9-editorial-r9). Reviewed means an AI review agent under the owner's authority approved that version, not a person. Free runs 30 days from sign-up, with no card. Creator is $9 a month, with no overage charges.

A hand-written token file or a free prompt skill can also do this. Motif is not required. What the hosted library adds is on Motif vs free agent design skills.

Questions

Why do AI-generated websites all look the same?

The agent fills every value nobody specified with the most common choice it has seen, so type, colour, spacing, and layout converge. Public posts describe one wave as purple gradients and rounded cards, and a later one as cream pages with a serif face.

Do design tokens stop AI-built sites looking generic?

They help with values, not structure. Tokens make the agent use your typeface, palette, spacing, and motion instead of guessing. Layout and hierarchy still need rules, such as deciding the page's job first and avoiding card walls. Nothing guarantees a good result, so check what you ship.

Which design tokens should I give a coding agent first?

Start with type (families and a size scale), a small palette with semantic roles, one spacing scale, corner radius, and motion duration and easing. Then tell the agent to reference those tokens only and never write raw hex, pixel, or millisecond values in components.

What format should design tokens use?

The DTCG format is the vendor-neutral JSON option, saved as .tokens.json. It reached its first stable version, 2025.10, on 28 October 2025. For a small prototype with one theme, plain CSS custom properties are fine.

Does Motif give my agent design tokens?

Its get_design_pack tool returns an authored pack for a product brief with a direction, tokens, guides to follow, and checks to run. Project profiles store the decisions you approve, and an agent can propose a decision but not approve it. Motif does not guarantee the result will look good.

Next step

Read the DTCG guide on the site, write a short token file, and point your agent at it. If you want the agent to call the rest of the free subset, start an account and connect the server.