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 create 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 and freedom
- 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 |
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
The story behind it
Mise en mode is a way of framing an interface, quite literally. Read it as a book at mode.place.
All projects