Token naming instinct: a blind study of how five AI models name design tokens

A design system that agents will read raises a practical question: which token names does a model already expect, and which does it have to be told? If every model calls the main text colour color.text.primary, that name needs no documentation. If every model names the medium spacing step differently, it does. This study of design token naming measured where that line falls.

When this matters

The main use is building a design system for a project that agents will work on, where the aim is to minimise drift: the same thing getting a different name across sessions, pages and models. Drift shows up in three forms. An agent builds a page and invents token names as it goes. Agents from more than one vendor read the same system, and their guesses need to land on real tokens. Or someone writes the instructions for an agent and has to decide what to document and what to leave implicit.

Predictability is the point. An agent that edits a site writes CSS against your tokens. A name that does not exist fails quietly: the browser falls back, or the agent invents a duplicate token, or it reads the whole token file before every change. So the aim is a scheme models already expect, with documentation spent only where they do not agree.

Method

The test was blind. Five briefs described a product in plain words: a SaaS dashboard, an editorial site, an online store, a marketing site and a generic website design system. Each listed twenty things to name. Every brief went to five models:

• Claude Opus 5.5
• GPT-5.6
• Claude Fable 5.1
• Grok 4.7
• Muse Spark 1.3

Each model ran in a fresh session with no files, tools or examples, and JSON as the only output. Each brief has 20 items in five groups; five versions of every brief rotated those groups so the items came in a different order while every line stayed word for word the same. Each model saw all five versions: 125 runs, 2,500 names. Names were compared with separators and case removed.

What came back

This is the dashboard brief in full. Each line is a thing to name, described without naming it. The model saw nothing else.

Context: A responsive analytics product with a navigation rail,
KPI cards, charts, data tables, filters, and account controls.

Create one design-token identifier for each concept below.
Choose the naming syntax, hierarchy, vocabulary, prefixes,
separators, and casing you consider most appropriate.
Do not omit, combine, or add concepts.

- S1-C01: The central product-brand color
- S1-C02: The lowest page background layer
- S1-C03: A raised panel background layer
- S1-C04: A subtle divider color
- S1-C05: Primary readable text
- S1-C06: De-emphasized supporting text
- S1-C07: The default primary action color
- S1-C08: The hovered primary action color
- S1-C09: The largest dashboard page heading
- S1-C10: A heading for a dashboard section
- S1-C11: Default interface body copy
- S1-C12: Compact metadata and helper copy
- S1-C13: The smallest repeated interface gap
- S1-C14: The standard content-group gap
- S1-C15: The corner rounding used by controls
- S1-C16: The elevation used by floating panels
- S1-C17: The primary button background
- S1-C18: The primary button label color
- S1-C19: The internal padding of a KPI card
- S1-C20: The maximum width of the main content region

Return JSON only. Do not use Markdown fences, commentary,
rationale, or additional keys.

All 100 things the models were asked to name, by brief

SaaS analytics dashboard. A responsive analytics product with a navigation rail, KPI cards, charts, data tables, filters, and account controls.

1. The central product-brand color
2. The lowest page background layer
3. A raised panel background layer
4. A subtle divider color
5. Primary readable text
6. De-emphasized supporting text
7. The default primary action color
8. The hovered primary action color
9. The largest dashboard page heading
10. A heading for a dashboard section
11. Default interface body copy
12. Compact metadata and helper copy
13. The smallest repeated interface gap
14. The standard content-group gap
15. The corner rounding used by controls
16. The elevation used by floating panels
17. The primary button background
18. The primary button label color
19. The internal padding of a KPI card
20. The maximum width of the main content region

Editorial site. A digital magazine with a masthead, issue navigation, feature stories, article pages, author metadata, pull quotes, and newsletters.

1. The publication's distinctive accent color
2. The base reading-page background
3. The strongest ink-like color
4. A quiet rule or separator color
5. The default inline-link color
6. The hovered inline-link color
7. The background of selected text
8. The color used for urgent editorial notices
9. The publication masthead lettering
10. The main article headline
11. Long-form article copy
12. Bylines, dates, and reading-time copy
13. A compact spacing step for metadata
14. A generous spacing step between article sections
15. The corner rounding used by article imagery
16. The elevation used by an overlaid story card
17. The active issue-navigation item color
18. The border color of a story preview card
19. The readable maximum width of article prose
20. The viewport threshold for the wide article layout

Ecommerce store. A modern storefront with category navigation, product grids, product detail pages, price and inventory states, a cart drawer, and checkout actions.

1. The store's main brand color
2. The storefront page background
3. The product-card surface color
4. The strongest neutral color
5. The color indicating an available product
6. The color indicating an unavailable product
7. The default purchase-action color
8. The disabled purchase-action color
9. A product-detail title
10. The current product price
11. Default product-description copy
12. Small inventory and shipping copy
13. The gap between compact product attributes
14. The gap between major product-page regions
15. The corner rounding used by product cards
16. The elevation used by the cart drawer
17. The add-to-cart button background
18. The sale-badge background
19. The gap between cards in a product grid
20. The viewport threshold where the product grid gains columns

Professional-services marketing site. A consulting firm's marketing site with a confident hero, service summaries, case studies, testimonials, team profiles, and lead-generation forms.

1. The firm's primary identity color
2. The base page background
3. A contrasting section background
4. A restrained decorative-line color
5. The strongest heading and body text color
6. The supporting-copy color
7. The default call-to-action color
8. The keyboard-focus indicator color
9. The high-impact hero statement
10. A heading introducing a service group
11. Default marketing body copy
12. Testimonial attribution copy
13. The compact gap used inside small content groups
14. The vertical separation between major page sections
15. The corner rounding used by form controls
16. The elevation used by a featured case-study card
17. The consultation button background
18. The consultation button label color
19. The internal padding of a testimonial card
20. The maximum width of a standard marketing section

Generic website design system. A reusable website foundation intended to support content pages, marketing sections, forms, navigation, cards, dialogs, and responsive layouts.

1. The foundational brand hue
2. The lightest neutral step
3. A middle neutral step
4. The darkest neutral step
5. The default page surface
6. The default readable content color
7. The color communicating successful completion
8. The color communicating a destructive action
9. The largest display-text role
10. A middle-level content heading
11. The default paragraph role
12. The smallest supporting-text role
13. The smallest nonzero spacing step
14. A middle spacing step
15. The standard control corner rounding
16. The standard floating-overlay elevation
17. The default button background
18. The invalid form-field border
19. The internal padding of a generic card
20. The viewport threshold where compact navigation becomes expanded navigation

And the first answer from each model, eight of the twenty rows.

Token	Opus 5.5	GPT-5.6	Fable 5.1	Grok 4.7	Muse 1.3
Primary text	color-text-primary	color.text.primary	color.text.primary	color.text.primary	color.text.primary
Primary action, hovered	color-action-primary-hover	color.action.primary.hover	color.action.primary.hover	color.action.primary.hover	color.action.primary.hover
Lowest page background	color-surface-base	color.surface.page	color.background.base	color.background.canvas	color.background.page
Section heading	font-heading-section	typography.heading.section	typography.heading.section	typography.heading.section	type.heading.section
Compact helper copy	font-body-caption	typography.body.compact	typography.body.caption	typography.meta	type.meta.helper
Standard group gap	space-gap-md	space.gap.md	space.gap.md	space.group	space.gap.group
Floating panel elevation	shadow-elevation-floating	shadow.panel.floating	elevation.overlay	elevation.floating	shadow.panel.floating
Primary button background	button-primary-color-background	component.button.primary.background	button.primary.background	color.button.primary.background	component.button-primary.background

Every model builds the same kind of name: a category, then what the token is for, then which one, then a state if there is one. Eight first words (color, typography, space, radius, spacing, breakpoint, type, elevation) open 87% of the 2,500 names. The agreement is uneven, though: colours match, while spacing, depth and the button tokens go five different ways.

Share of tokens where three or more models chose the same name

Colour roles (text, action, link)75%

Colour primitives (brand, neutral, border)70%

Spacing, radius, elevation39%

Component tokens (button, card)36%

Typography34%

Where the models already agree

A colour role has a 75% chance of coming back with a name most models would also choose. All five models independently produced color.text.primary, color.link.hover, color.action.primary.hover, color.brand.primary and radius.control, among 32 names in total. Those need no documentation.

Typography sizes, spacing steps, shadows and status colours are the opposite. “A middle spacing step” came back as space-md, spacing.400, space.4 and space.500. “The smallest supporting-text role” produced sixteen different names from twenty-five answers. No model will guess these; they have to be written down.

Why the names differ

When two models disagree, they rarely disagree about the structure. Two thirds of the mismatched pairs share the first word and at least half of the words. The difference is one synonym: secondary, muted or supporting for quiet text. Three forks stand out. The table counts how many of each model’s 500 names contain the word.

Word	Opus 5.5	GPT-5.6	Fable 5.1	Grok 4.7	Muse 1.3
space	61	14	56	69	28
spacing	0	52	0	0	35
shadow	15	19	14	0	11
elevation	11	6	11	25	14
typography	59	100	72	72	52
font	25	0	16	4	0
type	4	0	4	19	40
text	12	0	8	4	4

GPT and Muse say spacing; the other three never do. Grok never says shadow. Muse opens almost half of its text roles with type. Listing the other word as an alias lets an agent’s guess still resolve.

The brief matters more than the model

The two concrete products, the store and the dashboard, scored about one and a half times as high as the generic design system. A brief with real nouns in it (product, cart, article, KPI) gives the model something to attach the name to. It even changed the syntax: Fable wrote CSS custom properties like --space-md in all five generic runs and in none of the editorial runs.

Share of tokens where three or more models chose the same name

Ecommerce store64%

SaaS dashboard60%

Editorial site49%

Marketing site42%

Generic design system39%

You will not get the same names twice

Listing the same items in a different order changed nothing about the task, but a model repeated its own name only 54% of the time on average, and Opus only 24% of the time on typography. GPT was the exception: one fixed grammar for text roles, kept to every time. The table shows the share of runs with the same name.

Kind of token	Opus 5.5	GPT-5.6	Fable 5.1	Grok 4.7	Muse 1.3
Colour primitives	72%	63%	70%	66%	62%
Colour roles	76%	64%	73%	71%	61%
Typography	24%	56%	43%	28%	38%
Spacing, radius, elevation	54%	51%	46%	51%	31%
Components	60%	45%	45%	56%	38%
All tokens	57%	56%	55%	54%	46%

In practice

For a project where agents build pages against one design system, the aim is to stop names drifting. The study suggests this order of work.

1. Start the project with a short tokens file: the type scale, the spacing steps, the shadows and three alias pairs (space and spacing, shadow and elevation, typography and font). These names drift most, so write them before the first agent session.
2. Use the standard colour-role names and leave them undocumented. Every model produced them unprompted, so they do not drift.
3. Brief every agent with the product and its parts, not “a design system”. Concrete nouns keep names stable from page to page.
4. Generate names once, at the start. Keep the agent’s colour-role names, replace its type, spacing and shadow names from the file, and point every later session at that file. Asking again is where drift begins.
5. Review agent CSS for the three drift points: fork words, component-first against property-first names, and a state word that is not last.
6. If agents from several vendors will work on the project, draft the system with Opus or Fable, whose names overlap most with the others. If one model does all the work, GPT drifts least on typography.

Limits and data

This is one sample per prompt per model, at default settings, on 13 October 2026. It shows a pattern, not a ranking, and the model versions will date faster than the findings about colours, type and briefs. The full report, the prompts, the raw responses and the analysis are on GitHub, so the test can be rerun with other models.

Study, data and reports on GitHub