A Modern Token System · Microsoft
There's a System Under the System (I Built It)
The modernized foundation of an AI-forward system
Every downstream artifact (component spec, theme file, AI-generated UI) is an output of the same token architecture. Design intent lives in the token name, so the system scales to new platforms, new brands, and new AI consumers without touching component logic.
A composable system is defined by how little must change to support what comes next.
The glow-up
What is Fluent Flex
Fluent Flex is the token system for modernized experiences across Microsoft. It's the structural layer between raw design values and everything that consumes them: components, themes, and AI systems. It isn't a component library and it isn't styling. It's the foundation that owns the rules, so the design language can own the expression. That separation is what keeps every downstream artifact maintainable, themeable, and extendable without rewriting what came before.
The central move is deliberate: the system is not uniformly semantic and not
uniformly algorithmic. Each token family is named in the style that matches how
that kind of value is actually reasoned about. A scalar on a scale carries its math
(-base-N). A color or type role carries its intent rather than its hex. A
perceptual continuum like elevation carries an ordinal word (lowest to
highest). A typographic category carries the term typographers already use.
Every convention answers the same question: what does a reader, designer or AI agent, need
to infer the right value without a lookup table? The architecture below, and each chapter,
shows what that looks like in practice. That legibility is why the system holds under
pressure.
Themes swap at runtime without touching components because our layered approach has design language defined as a layer on top of foundations. A Microsoft AI team adopted Flex over Tailwind because a model can reason over an intent-named token where a raw value tells it nothing. The foundation isn't just a design tool. It's what the AI-generated UI is built on.
Token architecture
Three tiers. One direction of flow.
The foundation runs on predictable rules, not one-off choices. Across every category, we moved from picking values to defining the relationships between them, so designers and AI outputs stay consistent and brand-aligned.
Components reference generics. Primitives stay constant. So one theme switch updates the entire UI, with no component-level changes. That is the property a 2026 System Shaper Award nomination at Microsoft pointed to when they called the work “foundational for all of our AI efforts moving forward.”
Primitives
prmt-* Raw values. What something is, not how it's used: color stops, spacing steps, font sizes. Stable across themes (e.g. prmt-color-fog-26).
Generics
--gnrc-* Semantic intent. What a value does in the experience. Swaps per theme while components stay unchanged (e.g. --gnrc-color-foreground-neutral-primary).
Group
--grp-* Product override layer. Teams deviate for specific component groups without breaking theme interoperability (e.g. --grp-button-color-background-brand-soft-hover).
How we got here
We built for exactly where others broke.
Others tried
Semantic tokens had been attempted before, at Microsoft and across the industry. Teams built naming conventions, established tiers, wrote documentation. Some of it worked. None of it held at scale. Themes broke, naming grew opaque, maintenance compounded.
Rather than start from scratch, we studied what came before: what worked, what didn't, and where it broke under pressure. The failure modes weren't random, they were architectural. Every prior attempt hit the same wall once real teams with real diverging needs arrived: the structure couldn't flex to accommodate them.
We watched. We learned.
Simpler. More meaningful.
Fewer tokens, not because the system does less, but because they're smarter and named better. The naming is extensible by design: teams add values as they scale without breaking the architecture or splintering into their own dialect. The result reads more intuitively, adopts faster, and is legible enough for AI to reason over.
Mini-case
Don't Tell Anybody, These Are Evals
We built the token system. Then we stress-tested whether a model could reason over it. Three design languages, five evaluation phases, three GenUI failure modes mapped.
Explore the system
Each family solves a different problem.
The decisions inside each one are where it gets interesting.
Why it matters now
The system is legible to models, not just designers.
Microsoft's consumer AI org was all-in on Tailwind, convinced it was the better foundation. We handed them the entire Flex system to drop into their own repo and let the results settle it: in context, a model reasoned over our intent-named tokens far more accurately than raw utilities. They switched.
Tokens have made the work of outputting with AI much more accurate.
When a token name carries its intent, a model reasons about the right usage without a lookup table. That legibility was the argument. It won.
The work in the world
From the CDO
Jon Friedman, Microsoft's Chief Design Officer, wrote up the Copilot redesign that Fluent Flex directly powered, unifying the experience across every Microsoft 365 app.