Mise en Mode

A technique used to provide various expressions to user interface regions without explicitly updating individual components or introducing new tokens to convey the new presentation.

Example

Consider a light-colored page that includes a dark-colored footer. Traditionally, user interface element properties would receive values to support the concept of “light” for the page using one set of tokens. While the footer, having a completely different presentation on the same page, would expect to have a different set of tokens to express a contrast as “dark”.

As more user interface concepts are included within the footer, more tokens are introduced to support those concepts. Over time, each token that would appear in the light part of the page would also have a corresponding token to express a similar concept in the dark part. The result is token bloat, making it difficult to maintain over time. This will occur for any area that expects a new visual presentation for existing components.

Mise en Mode suggests that to achieve the same effect, only the values of the existing tokens need to be updated. To do this, we can supply a different theme scoped within a specific region of the experience. To fully realize this, each region is described as a mode. Then we apply the “dark theme” to the region expecting to express a “dark mode”. Assuming that all of the tokens within the interface are semantic and have appropriate values assigned within the theme, the page and all of the components within would express “light mode” and the footer and all of its components within would express “dark mode”.