Use Nested Modes Instead of New Tokens for Expressive Moments

Context

Design systems struggle with expressive fragments, like highlighting a premium product on an otherwise uniform page. The instinct is to mint new tokens for each moment, but that bloats the token set and erodes consistency. Figma's 2023 introduction of Variables with Modes sharpened the question, and it's the idea I went on to promote as Mise en Mode at mode.place.

Decision

Scope expression with nested modes (Mise en Mode): visually box a region, then supply new values to existing semantic tokens only within that scope, rather than creating dedicated tokens per expressive moment.

Alternatives Considered

• Create dedicated tokens for each expressive moment
  👍 Pros	👎 Cons
  Explicit and easy to manage	Token bloat Erodes the meaning and usage Every new idea is a few new tokens to maintain

• One-off component variants
  👍 Pros	👎 Cons
  Localized to the component	The expression is locked inside one component, so it can't be reused Doesn't compose across a region of mixed elements

Reasoning

Moving semantic responsibility from tokens to scopes resolves the tension between expression and consistency. A boxed region becomes a place for a new expression by receiving new values for the same semantic tokens, no new tokens required, so the system stays bounded and coherent.

Why it mattered

Mise en Mode reframed the question from “what token do I add?” to “what scope receives a new expression?” That shift is what lets a system stay consistent and still feel expressive where it counts.