I built a small demo: the same HTML, 9 different design token profiles, each producing a completely different product personality.
→ Try it live: yuki-uix.github.io/design-token-signals
There's a switcher in the bottom-right corner. Flip between a few — try Warm Organic → Neo-Brutalist, or Clean Light → AI Gradient. Spend a minute with it, then keep reading.
Here's what bothered me: all 9 looked fine. Every single one seemed to work.
Wait — this isn't just theme switching
My first instinct was that they all worked because they were all well-made — each with its own coherent character.
But that explanation breaks down fast.
Switch between Minimal Dark and AI Gradient. Both have dark backgrounds, similar color families. But they feel like completely different things. Minimal Dark says: precise, controlled, tool-like. AI Gradient says: ambitious, forward-looking, futuristic.
Same color range. Totally different feel. Why?
Because tokens aren't colors.
Minimal Dark has border-radius: 4px. AI Gradient has border-radius: 10px plus glow effects. Minimal Dark has tight spacing. AI Gradient breathes. Animation easing, font weight — all different.
Every value votes for a signal about what kind of product this is. That's what a token system actually is.
Swapping a theme color changes the expression. Swapping a token system changes the entire personality.
So why do all 9 work here?
After realizing tokens ≠ theme colors, I thought I'd cracked it: 9 different personalities, each valid, so they all work.
But push one step further: what actually determines whether a token set is appropriate or inappropriate for a given context?
My first guess: content subject matter. Serious content gets serious tokens, playful content gets playful tokens.
That breaks apart immediately. A fintech landing page and a corporate payment approval flow are both "financial content." Their token requirements are completely different.
The more accurate dimension: what cognitive work is this interface asking users to do?
A data dashboard asks users to scan, spot anomalies, make judgments. That task needs high contrast, dense spacing, clear state differentiation. Large border radii and glow effects aren't ugly here — they're friction. The user is trying to find the line that dropped, and the tokens are saying "relax, this is fun."
Technical documentation asks users to read, understand, follow steps. That task needs visual quiet. Playful gradients aren't ugly here — they're noise at exactly the wrong moment.
A payment flow asks users to review, confirm, and take responsibility. That task needs clarity and a sense of gravity. Gamified visuals aren't a style choice — they directly conflict with the cognitive register the task requires.
Cognitive task defines the functional boundary for token choices. Subject matter is surface-level. Task is where the real constraints come from.
Landing pages: where the cognitive task is the token
So what's the cognitive task of a landing page?
Feel out what kind of product this is.
Users aren't here to complete an action, read everything, or make precise decisions. They're doing one thing: in the shortest possible time, sensing the product's personality and deciding whether to engage further.
Here's what I found interesting: the answer to that cognitive task is the token system itself.
Stripe's tokens say "professional, serious, trustworthy" — that expression is what the user came to get. It's not serving some separate content. It is the content. AI Gradient's tokens say "ambitious, cutting-edge, futuristic" — same thing. The expression is the answer.
Other IA types are different. In a dashboard, data needs to be read. In a flow, a process needs to be completed. Those tasks exist independently of any token choice and create functional requirements that tokens must serve. That's where constraints come from.
Landing pages are different: the cognitive task and the token expression completely overlap. There's no separation.
That's why all 9 profiles work. Not because landing pages "accept anything" — but because in this IA, the token is the content. Any profile gives a valid brand answer.
What happens when you change the IA
I kept pushing: if you put these 9 profiles into a data dashboard, how many still work?
Imagine the Playful profile — large border radii, high-saturation gradients, springy animations — on a real-time monitoring dashboard with dozens of live metrics.
It feels immediately wrong.
Not because Playful tokens are ugly. But because they're in friction with this IA's functional requirements: the large radii physically eat space that data should occupy; the animations interfere with the fast scanning users need to do.
Now imagine AI Gradient — purple gradient background, glowing cards, pulsing step indicators — on a corporate payment approval flow. The user is authorizing a $50k purchase order.
The visual language says "we're a cutting-edge future product." But the user needs to feel: this process is serious, reliable, and auditable if something goes wrong. The signal and the context are pointing in opposite directions.
These two conflicts share a structure: it's not that the token is ugly — it's that this token set produces friction with this IA's functional requirements.
Four types of conflict
This pattern has recognizable forms:
Density conflict: Generous spacing and large radii in a high-density IA directly compress information capacity. Looks polished; functionally broken for the task.
Trust conflict: Light, playful tokens in a high-stakes decision IA. Users subconsciously sense the mismatch. A $50k approval flow with gamified visuals isn't an aesthetic problem — it's a register mismatch.
Rhythm conflict: Precision-optimized tokens in a reading-primary IA. Imagine an enterprise SaaS token set — high contrast, system fonts, tight line-height — applied wholesale to a documentation site. Readable sentence by sentence, but impossible to stay in for 10+ minutes. The visual rhythm says "complete tasks quickly," not "slow down and understand this."
Audience conflict: Tokens signaling to the wrong user type. A B2B tool for professional buyers styled with consumer-grade colorful UI makes experts feel: "this wasn't made for me."
The pattern: no individual token value is wrong in isolation. It's this combination of tokens in this specific IA that creates friction.
This isn't just a theoretical observation. When Salesforce rebuilt the Lightning Design System, they split the token architecture into two explicit layers: brand tokens for identity, experience tokens for IA-specific adaptation. IBM Carbon made a similar call. They hit the same problem: brand-layer tokens can't be directly applied across all IA contexts — they need a translation layer. That architectural split is an engineering acknowledgment that IA creates functional token constraints.
Three axes that need to align
Working through this, the shape of the problem became clear.
Evaluating whether a token choice is "right" requires three coordinates:
- Brand intent — what emotional register does this product project?
- IA structure — what cognitive work is the user doing? What does that task require from the tokens?
- Token choices — given both constraints, what values are actually valid?
These aren't three parallel checklist items. Brand intent and IA structure are two independent sources of constraint. Token choices have to satisfy the intersection of both.
Satisfy brand intent but ignore IA structure → Playful in a dashboard. Visually coherent, functionally friction-y.
Satisfy IA structure but ignore brand intent → accurate but characterless. Every product in the category looks the same.
This has tooling-level validation. Google Labs recently open-sourced DESIGN.md — a format that writes token values and design intent into the same file. Not just "what is this color" but "why is this color this value." That's an acknowledgment at the format level: token values alone aren't enough, intent needs to be recorded. And intent is always bound to IA context.
Landing pages are a boundary condition: IA constraint approaches zero, so brand intent and token choices can talk directly to each other. Most product pages aren't that.
Which means "does this token look good?" is never the first question.
The first question is: what does this IA ask users to do? Once you have that answer, the token boundary can be defined.
The switcher is still in the demo's bottom-right corner.
Go back and flip through a few profiles with a different question in mind: "what if this were a dashboard instead of a landing page?" Does Warm Organic still hold up? Neo-Brutalist?
I haven't validated this across enough real products to call it closed. Real-world IA is usually hybrid; these archetypes are simplifications.
But it's a question worth sitting with.
