Mise en Mode, Scoped Expressions & Semantic Tokens
Creator & Speaker · 2023 · 3 min read
A design systems technique that curbs token bloat: instead of minting a new token for every expressive change, it rewires existing semantic tokens within a scope, re-pointing a style value at a generic UI concept inside a boxed part of the experience.
Overview
Mise en Mode (Fr. 'placement in mode') is a technique for creating expressive, scoped exceptions inside an otherwise consistent design system, first presented at Clarity 2023.
Problem
As design systems grow, teams tend to mint a new token for every kind of change, a highlight color here, a promotional treatment there, until the token set bloats with one-off values. Each new token is also slow and expensive to add: the workflow is full of friction, usually routing through design and engineering sign-off before a single value ships. The expressive moments driving this, like highlighting a premium product on an otherwise uniform pricing page, feel unsystematic, and answering each with its own token quickly becomes unsustainable.
Constraints
- Must preserve overall system consistency while allowing local deviation
- Should reuse the existing semantic token layer, not introduce a parallel one
- Needs to be understandable to both designers and engineers
Approach
Parts of an experience are visually 'boxed,' creating a new scope expected to receive a new expression. Within that scope we supply new values to existing semantic tokens, a mini-theme that only affects components inside the box, while everything outside keeps the common values. This shifts semantic responsibility from tokens to nested modes.
Key Decisions
Scope expression with nested modes instead of new tokens Reasoning Alternatives Reusing existing semantic tokens under a scoped mode keeps the system coherent while still allowing local expression, avoiding token sprawl.
- Create dedicated tokens for every expressive moment
- One-off component variants
Present the technique openly as a conference talk and site Reasoning Alternatives The idea matures faster as shared community vocabulary than as internal-only practice.
- Keep it as an internal pattern
Tech Stack
- Design Tokens
- Semantic tokens
- CSS Custom Properties
- Theming / Modes
Result & Impact
Mise en Mode gave the community a concrete model for reconciling expression with consistency: scoping a theme to part of an experience instead of expanding the token vocabulary to cover every exception. Because it reuses existing tokens, the person who wants a new expression can apply it themselves, without routing a new token through other teams.
Learnings
- Moving semantic responsibility from tokens to scopes keeps the token set small instead of growing one per exception
- Letting contributors rewire tokens in their own scope removes the cross-team friction of introducing a brand-new token
- The number of expressions a person might want can explode, and multi-dimensional modes (one mode spanning qualities like dark, Chinese, promotional, and Visa at once) get hard to curate by hand; this is where AI can help pick values close enough to capture each dimension
- Framing matters: a memorable name carries a technique further
Mise en mode is a way of framing an interface, quite literally. Read it as a book at mode.place.