One of the concepts that has been challenging in design systems is allowing for expressive fragments of a larger experience. For example, highlighting a premium product in an otherwise consistently styled pricing page experience. These moments are seemingly unsystematic and deviate based on marketing trends and needs.

How might we allow to create freedoms of expression while aligning with system expectations?

Mise en mode (Fr. “placement in mode”) is a way of framing an interface; quite literally. Parts of an experience are visually boxed, creating a new scope that is expected to receive a new expression. To receive a new expression, we provide new values to existing semantic tokens. In the case of a new highlighting color, we provide that new color as a separate mini-theme which will only affect the components within a smaller scope of the page; the place for this new expression. The experience outside the scope can receive the more common values for these same tokens.

The technique was first published during Clarity 2023, the original Design Systems conference. When the site is launched as full-screen, it becomes a slideshow presentation.