Over two days, the Clarity 2023 design systems conference brought together presentations on a variety of topics, including why we should leverage browser standards (1, 2) and invest in accessibility (1, 2, 3), understanding that perfection is not the goal of a design system (1), how we can leverage a diverse variety of voices for better UX (1), and proposing new ways of categorizing design tokens (1). It also included how to understand the business-end stakeholders (1) and plan roadmaps together (1).
This was my impression of Donnie D’Amato’s “Mise en mode” presentation.
Donnie walked through his discovery process of “Mise en mode”:
- Use the same token names but apply theming. Therefore, you do not have to create new tokens to get a different UI style.
- Use the same space token name but change its value depending on its placement.
But one of the main things that triggered Donnie’s thinking was Figma’s 2023 Config conference, which showed off brand new Variables with Modes. How might we create modes within a page that can affect token values?
Donnie then talked about the advantages of progressive enhancement. Since the page has a primary mode, then that serves as page defaults. And for child containers that may not have a mode set, the tokens should “fall back” gracefully to the page mode defaults.
My commentary: Now, in 2023, design tokens are so prolific. The modern challenge isn’t getting people to adopt design tokens; it’s how to manage too many design tokens! Donnie attempts to simplify the problem by having a few tokens within a container be semantic and styled with a “mode.” I think it’s a valiant attempt to advocate for reuse.
Where “mise en mode” differs from theming is that theming is often page-level and contains all theme overrides for all tokens. Where “mise en mode” differs from BEM is that the Block level is often a component, and that affects all components; there isn’t a good way to describe Block-within-Block.
Sketch notes by Raquel
Follow Raquel: https://medium.com/@raquel
Thanks to Donnie D’Amato for the use of his slide materials (available at https://mode.place/) and his review. You can find out more about him on his website.
