Mise en Mode

We discuss the concept of 'Mise en mode' and how it can be applied to design systems to enhance user experiences through the use of semantic tokens. It emphasizes the importance of maintaining a consistent token naming scheme to support expressive enhancements in interfaces and marketing pages.
  • design
  • mode
  • semantic


00:49Hey, good to see you.

00:50Thanks for coming.

00:50This is another episode of wireframe.

00:52And today I’m going to be talking about modes.

00:56All right.

00:56So actually what I’ll be talking about today is basically my talk from clarity.

01:02So if, if you didn’t know already, I did a talk of clarity back in

01:062023, which was late last year.

01:08And the title of the talk was mise en mode.


01:13The whole talk was basically about modes and how we might use them

01:16for our purposes in branding and expressions and things of that nature.

01:22So what I’m going to do in the episode today is I’m basically going to be doing

01:25that talk and if you want to follow along with the slides that I did present

01:30back at Clarity, you can go to mode.

01:34place on the internet. 1

01:35That website is basically the synopsis of that talk, and it describes what I’m

01:40trying to convey when we’re using these ideas , and if you full screen that

01:44site, it is the slides from that talk.

01:48All right?

01:48So like I said, if you want to follow along, go to the site.

01:51But if not, you could just to kind of listen to it.

01:53Also haven’t done this talk since then.

01:55That was the last time I did the talk.

01:57So it might be a little bit rusty.

01:58We’re gonna do the best we can.

02:00Alright, so I do have a small introduction, of course, about myself

02:04that I’m going to skip over because I’m going to hope that you know who I am.

02:07If you don’t, you can go to donnie.damato.Design 2 on the internet

02:12and you can read all about all my stuff.

02:14But moving right along.

02:16Basically, the first thing that I’m thinking about is that design

02:20systems are for people, right?

02:21And that’s something that Jina Anne has said many years ago and something

02:24that I also very truly believe in because no matter all the things that

02:28we attempt to do in systems work, it doesn’t really mean much unless we

02:34get that adoption and that buy in.

02:35So it’s important that what we do is going to actually help our peers.

02:40And then eventually, you know, the users that we’re going to be working

02:43with So I’m reminded years ago that I went to schema with my wife and schema

02:49is Figma’s design system conference that they had a few years ago.

02:52They had it in New York and they actually had it a couple

02:54of places around the world.

02:55And one of the talks there was by Lauren LoPrete.

02:58And in this talk, she’s talking about trying to gain influence

03:03among her teams and her peers and all that stuff around systems work.

03:08And really great talk.

03:10I highly recommend that you take a look at it.

03:12In fact, I’ll make sure to put it in the show notes 3.

03:14But the final slide of her talk basically just said, they’re

03:18just rectangles on the internet.


03:21And the whole room gets a collective chuckle, myself included, right?

03:24It’s common for us to, like, joke about what we do.

03:27In fact, there’s lots of examples of this on the internet.

03:31Folks that are saying we can do, all of these inverse kinematics on, soft bodies,

03:37and here we are trying to argue if the rectangle should be gray or dark gray.

03:42It kind of feels like we’re not contributing to, a greater.

03:46Innovation, right?

03:48Taking a step back, I think about, you know, these rectangles, right?

03:52It’s, you know, part of my job, right?

03:54In terms of system design, right?

03:55Or just design thinking in general, right?

03:57These rectangles could mean something.

04:00And I wanted to explore a little bit about that.

04:02So in order to do so I’m kind of thinking about a new way.

04:08of Considering our interfaces.

04:11And in fact, a few days before this talk, Nate Baldwin formerly of Adobe,

04:16currently at Intuit describing about tokens that, that he would like, and I

04:20quote to see if we can create a flexible multi brand theming framework that can

04:25simultaneously support product expression and evolutionary brand constraints along

04:32with equally governable sub themes.4


04:35So he’s asking for a lot.

04:37You feel like he should be like asking for a pony for Christmas

04:40because you’d probably get that as opposed to getting all that stuff.

04:43But I really do think that.

04:45What Mise en mode actually provides is exactly what he’s asking for.

04:49So in order for us to go ahead and go on this journey, you’re going

04:52to go on this magic school bus.

04:54We’re going to go deep dive into my brain where it is a wild circus of activity.

05:00And we’re going to figure out how I came to this idea, this Mise en mode concept.

05:07All right.

05:07So the first thing that we ask ourself is, Is do new expressions need new tokens?


05:15So what do I mean by that?

05:17Well, imagine that you have a pricing page and on that pricing page, you have these

05:22different tiers for your products, right?

05:25So you have maybe the free tier, right?

05:27And then you have your standard tier and then maybe a pro tier enterprise

05:31tier, something of that nature.

05:32And each one of those maybe cards or columns on that page

05:36begins to introduce more.

05:39Attractiveness in each one, right?

05:41Because we want to attract folks to purchase this product or purchase

05:45this feature, and we want them to pay as much money as possible

05:49to, of course, fund our business.


05:52So in order to do that, we increase the amount of interest for each

05:57one of those columns in some way.

05:58And typically we do that through either color, typography,

06:01or other stylistic choices.



06:05Obviously, if you’re looking at the slides right now, you’ll see a

06:07little bit of an example of that.

06:08But you can imagine that if we look at the standard card or the free

06:14card, that version, you can imagine it being very plain or very similar

06:18to the rest of the page, right?

06:19We’re talking maybe white background and then black text, maybe a you know,

06:24a blue button that’s very standard and flat for the first column.

06:29But maybe the second one has a lighter blue for the button, and then

06:32maybe that third column has a blue background and then a white text on it.

06:36Maybe there’s even a gradient on it.


06:38So lots of variations between these columns here.

06:41And when people first look at this stuff in the design tokens ecosystem

06:48people will think that each one of those columns may require new tokens.

06:53So if you do that.

06:55You might have a significant amount of tokens to describe just this small

07:00part of the larger experience, right?

07:02It’s just the pricing page, and in fact, it’s only a small

07:05section of that pricing page.

07:07And all of a sudden, we’ll end up with, you know, twelve other

07:10tokens just to describe those small parts of that page, right?

07:15And I don’t know about you folks, but I’m trying to reduce the amount of tokens

07:19that I’m managing, not increase it, right?

07:21So, instead of thinking in about that way, what I’d like you to

07:26consider is instead of you know, making new tokens for this stuff.

07:30Think about using the existing tokens that you have to describe

07:34the parts of the layout, right?

07:35So think back a little bit to, like, Dark Mode, right?

07:38And we’ve kind of figured out what Dark Mode is all about now in the year 2024.

07:43Basically, when we have Dark Mode, we’re basically saying that the page

07:47is body background, as an example, and that Color that’s assigned to body

07:52background will now be some darker color for dark mode as opposed to in

07:57light mode will be a lighter color.

07:59So instead of again doing it for the entire page level, imagine

08:03it to be done by sections, right?

08:06So imagine that the top half of your page is like a light mode.

08:11And then the bottom half of the page is like a dark mode, right?

08:15Again, all the same tokens between those two.

08:19And what that unlocks for you, of course, again, is if it’s the same token where you

08:23have text color on top, which is black, and then text color on the bottom, which

08:26is white, That means that these design tokens that match these same names are

08:35easily maintained because they’re just representing parts of the interface.

08:39They’re not trying to describe expressions of the interface.

08:43And that’s really what’s key here, right?

08:45So I speak about this at a blog post called ondark virus. 5

08:49I’ll link to that in the show notes, but.

08:51Essentially, that’s what I’m suggesting when we look at this pricing page.

08:56So we look back at the pricing page, we’ll see that there’s three columns

09:01again, but each one of those columns will have the exact same tokens between them.

09:07So what that means is that your text color for the first two might

09:11be black, but then that third one, text color actually means white.

09:16And it only means that in the scope of that column.

09:19Okay, so that’s the kind of thing that I want you to think about first

09:22is that, you know, we have already set up a semantic system to support

09:27things like light and dark mode.

09:29We can now scope the idea of light and dark mode and other

09:33modes like enterprise mode.

09:36For example, if you have like the enterprise product we could scope that

09:39to a smaller section of the page and have the, again, the exact same tokens in that

09:43location, just with different values.

09:46That’s what’s key with this first part.

09:47Okay, cool.

09:50All right, so that’s the first kind of part that I was thinking about in all

09:55of this and that should be a fairly easy thing to understand if you are familiar

10:02with the way that we handle semantic tokens and the way that we Allow for

10:06dark mode in our interfaces today, right?

10:09Again, we’re just scoping that down to a smaller part of the of the experience and

10:13then assigning new values in that way.

10:15Okay, but I’ll say that the next part of what we’re gonna

10:19be talking about is a lot more.

10:21Difficult to grasp okay, and this question was how might we make

10:26space semantic all right now?

10:30We already have this like solved color and typography and a couple of other

10:34things when it comes to semantic tokens.

10:37We might not know Why something is semantic versus something else not

10:42being semantic so if you take the Semantic token, button background color.

10:48That’s semantic because I know where that token will be applied

10:53anywhere in the interface.

10:54Meaning that it’ll always be applied to button background color.

10:57That’s where it’s going to be put.


11:00But if I had a token called space4, I can’t know exactly

11:05where that’s going to go.

11:06I need more context, more information, in order to figure

11:09out where space4 is meant to go.


11:13So that’s really where the separation is, is where we know that button

11:16background color and where that’s meant to go, where space 4, we have no clue

11:21where that’s meant to go, unless again we look at a particular interface to

11:26figure out maybe where space 4 might go.

11:29Okay, and it’s very subjective, right?

11:31I have no idea if, you know, space 4 is, you know, 16 pixels or 64 pixels, right?

11:37It’s very hard for me to gauge where it’s meant to go in the experience, okay?

11:43So, I’ve done a lot of thinking about space semantically.

11:47So much so that I wrote a fairly decent article called Complementary

11:52Space 6 that dives into the thinking that I went through.

11:55It took about six months to get.

11:57And in that thinking, I was very much interested in trying to align to

12:03existing concepts when it comes to space.

12:05Specifically, I was very interested in the work that Nathan Curtis did about space.

12:11And he has a very excellent Medium article describing how he thinks about space. 7

12:16So it was important to me to align to what the results were that he was going

12:21for in his work, but not necessarily if it was done in the exact same way.

12:26Which it is not.

12:27So in, again, in the slides, you’ll have a spot where there’s three cards

12:31that are basically right out of Nathan Curtis’s article space and design systems.

12:35The first card is basically without any markup on it.

12:38So you could see exactly what it’s meant to look like.

12:41The middle card will be using something that Nathan

12:44recommends as a spacing system.

12:46So you’ll have something like.

12:48Space stack small or space inset medium.

12:51So all of that stuff will be in that, that middle card.

12:55But then that final card is using the results of complimentary space.

12:59And in that card, what’s occurring is that every part of the card is basically

13:05marked just with a token called space.

13:08There’s no scale on the tokens themselves.

13:11They just basically say space in all those locations.

13:14And you might be asking yourself, well, it’s not meant to be.

13:17The same amount of space in all those locations and the

13:20answer is absolutely not, no.

13:23The way that we apply the space to those locations is

13:26instead using these boundaries.

13:28Very similar to the idea that we got from that first question.

13:32Which was trying to again create a scope that influences what the values for

13:37these tokens might be in this location.


13:40Now again, in order to really understand that concept, I highly recommend

13:45that you look at complimentary.

13:47space on the internet.

13:47There’s a lot more detail about my thinking behind space.

13:52But ultimately, where I landed with complimentary.

13:56space, finally, is that I realized that the idea between OnDarkVirus,

14:02which was that first question, and what I was doing with complimentary.

14:05space is essentially the same thing.


14:08We are using semantic tokens and putting them in our interfaces and

14:13then assigning them new values based on context, based on a subsection

14:18of the page or the experience.


14:22So that was very enlightening to me.

14:24So I kind of wanted to know one more thing.

14:28As a like a bonus question here, because I wanted to know what

14:32are the shared principles in both of these approaches, right?

14:35How did we get here if both these things are the same?

14:38There must be some relation.

14:41So, thinking about it, I actually went all the way back to wireframes.

14:47There it is.

14:48But wireframes were really the key for me in here.

14:50Because if you imagine, you know, JIRA as a wireframe, right?

14:57You might know Jira, of course, as a project management tool, but if you

15:03show it to anybody else that’s in our industry, They will just identify it

15:07as a project management tool just again as the wireframe of this thing, right?

15:11And the reason that people know that is because they’ve seen something like

15:15it before right our prior experience is Influencing this new experience

15:21that we’re seeing here in front of us.

15:23Okay, so because of that Users actually prefer experiences that seem familiar.

15:29And that makes sense, right?

15:31Because if there’s something out there that we haven’t seen, it’s

15:34much harder for us to understand potentially how to use it.

15:38So if we’ve seen it before, we know exactly what to do,

15:40or we like to think we do.


15:43And that’s really like the key behind all of the token naming strategy

15:48that I think of fundamentally.


15:50Because what we’re really doing when we’re trying to identify token

15:54naming conventions is we’re actually trying to describe wireframes.

15:58That’s really the key behind the whole thing.


16:02And it doesn’t matter if the layout shifts due to right to left languages

16:06or mobile, all that stuff is still going to be maintained through

16:10these, these blueprints, these, these layout structures, these wireframes.

16:16So all that being said fast forward a little bit to

16:20config 2023 in San Francisco.

16:23I was there in the audience where Dylan was presenting the new,

16:28Capabilities of Figma’s variables.

16:31And in his demo 8, there was a.

16:35Example where he takes what is essentially what I would call a wireframe or a

16:39blueprint or whatever you’d like to call it and he moves that structure, all those

16:44semantic tokens, into a new section.

16:48And when he moves into the new section, everything changes.

16:52On that copy.

16:54So it becomes dark mode.

16:56It becomes you know, I think it was like German, I believe, or maybe a

17:00Japanese but then he makes another copy and moves into another one and it moves

17:03and it changes in a different way.

17:05And just those abilities of being able to change that experience from

17:12moving it visually in Figma was.

17:16Very exciting to me because this was visualizing what I’ve been kind of

17:23dancing around earlier in the year, right?

17:26The ability to again, mark these parts of the interface with tokens and then

17:34just supply new values to those based on some context, some information.


17:40That influences the values that are going against these semantic tokens.

17:44So again, like I said, very exciting.

17:47And I’m really thinking, if we were to be able to take a scope inside of another,

17:53you know, part of the page and just again, flip those values back and forth.

17:57And the term I coined for this was Mise en mode and Mise en mode.

18:03It means placement in mode.


18:05Comes from the French term, Miss Annabelle, which is the idea of.

18:10Putting a smaller piece of art in a larger composition.

18:13So an example that I have in the slides is a coat of arms from the

18:16United Kingdom back in 1816, and there’s basically these nested coats

18:21of arms that are inside of this image.

18:23And that’s basically the same kind of effect that I’m trying to describe here.

18:27We have these nested modes that are inside of the larger scope of the

18:30page that will change the values to the existing tokens as you go deeper.

18:36So The way that I like you to think about it is you look again at your

18:40wireframe of the experience, okay?

18:42And what you want to do is when you’re looking at that, you want to

18:46slice up that wireframe in such a way that describes different expressions

18:52that you might want to portray to your user at any point in time.

18:56So when you slice that stuff up and then you give it new, new

19:00values to the existing tokens in those slices, you are what I call

19:04expressively enhancing that experience.

19:08Now expressively enhanced is basically giving it a new paint

19:10job from a color standpoint.

19:12But you could do many more different things beyond color, of

19:15course, like typography and space.

19:18So you would slice up any particular wireframe, and then in that

19:22slicing, you can then provide new values to the existing tokens

19:25in the slices that are in there.

19:27So As an example from there, we will go all the way back to the first question.

19:32And if you had something like text color on top in the light area and then you

19:37had text on dark for the footer area that would be on like a dark background.

19:42If, for whatever reason all the token values don’t come in because

19:48OnDark is like a new token and we weren’t ready for it or whatever.

19:51It’s entirely possible that the area where OnDark is being put Might break because

19:58the area isn’t expecting an on dark token.

20:01It’s too new, right?

20:02Or in certain scenarios where you are introducing new components

20:06that have never been , dark before.

20:08Then they might not have tokens at all and therefore also might look

20:13Weird or completely inaccessible.

20:15So it’s super critical to really maintain the token names that you’ll

20:19have across that entire system.

20:21Because again, if you start introducing new tokens, those new tokens then

20:25need new values and then components.

20:29That you might not have initially considered to be on these surfaces

20:35will also need new tokens.

20:37And then soon, sooner rather than later, you are creating entirely new

20:41tokens just for dark mode, right?

20:44And that’s something that you’re trying, again, to avoid.

20:46Essentially You don’t want to have a token explosion.

20:50I’ve seen this many people have crazy amounts of tokens in their systems that

20:55are just very, very difficult to maintain so much so that I feel like, you know, in

21:00certain visualizers that are out there, you kind of need a degree in graph theory

21:04to understand all the connections that are happening across this ecosystem, right?

21:08It’s just very, very overwhelming.

21:11Some of these things.

21:12And I really think that it’s possible to pare this down to something a lot

21:16more manageable using Mise en Mode.

21:19Now, like I said, if we are using the same tokens on the top and the bottom,

21:24meaning that light part of the dark part of the page, again, it’s the same

21:27token, so in the event that the dark mode doesn’t go through to be placed

21:32in that dark area of the page, that’s actually okay, because all it’s going

21:37to do is fall back to the page level.

21:40values for the entire set.

21:42So now everything’s going to kind of look the same, which is okay.

21:46Because again, it’s losing that expressive enhancement, right?

21:50It’s still a cohesive experience because we’re still using the same

21:53text color from the top and the bottom.

21:55It’s just not giving that expression that the footer would

21:58have had if it was inverted.


22:01That’s all right.

22:02So if you could accept all that, that’s great.

22:05I’m going to take it one step further.


22:07And I’m going to suggest that there’s actually no such

22:10thing as a critical button.

22:12There’s only a button that exists in a critical mode.

22:16Now, what do I mean by that?

22:17Well, I have an example that’s in the slides.

22:21That is the danger modal from Atlassian.

22:24And in that modal you could see that there’s some messaging on there that

22:28you’re about to delete something.

22:29But in that messaging, in that modal, there is an icon that’s presenting

22:34this kind of critical state.

22:35The messaging of course is presenting some critical state.

22:38And of course these buttons, you know, cancel and delete are

22:40presenting themselves as dangerous.

22:43So this entire modal is actually trying to convey the concept of being

22:49in a critical state or critical mode.

22:51So you can imagine.

22:53That instead of, you know, putting a specific danger button inside of a normal

22:58modal, what we might do instead is put a primary button in that modal, and then

23:05say that the entire modal Is in a critical state now, whether or not you think that

23:10the delete button should be the primary action or the cancel button should be is

23:13irrelevant to what I’m trying to describe here, but generally speaking again, if

23:17we’re trying to convey something as being dangerous, we are trying to provide more

23:22expression to this particular part of our experience to convey a new feeling, right?

23:29Convey new information.

23:31The same thing actually happens at GitHub.

23:33You can see it, your edit profile page all the way at the bottom,

23:36there’s kind of like this danger zone.

23:38And if you compare the styles in the danger zone against the stuff that’s above

23:43that you’ll see that it’s basically the same components above on the top and the

23:47bottom, but it’s just changed slightly to convey this idea of being dangerous.

23:52Okay, so the headline is now red.

23:55The buttons are a little bit tinted red and then the border

23:58around this section is also red.

23:59So again, we’re conveying this whole area.

24:02as being dangerous But it’s the same kinds of components from the top and the

24:06bottom when you look at that, that image.

24:09So we can convey lots of different things, of course.

24:12We can convey something being dangerous.

24:14We could also convey branding as an example.

24:17So you could imagine, you know, maybe there’s A partnership with McDonald’s.

24:21And this part of the page is all red and yellow, like the brand’s colors, right?

24:26So just that subsection of the page has that branding experience

24:30while the rest of the experience might be another brand entirely.

24:34But you could go absolutely wild with this, right?

24:36You can go ahead and purple gradients.

24:38You can make a text flourishes.

24:40You can round the corners, go absolutely mad with power.

24:43Totally something you can do.

24:45Because you want to express all these different things.

24:49And I understand that, right?

24:50Designers want to express a lot sometimes.

24:53Especially in marketing pages, right?

24:55That’s a, a huge thorn in the side of design systems.

24:58We usually look at a marketing page and go, Oh, well that’s not systematic.

25:02Well, actually it can be, right?

25:05We can make our marketing pages systematic.

25:08If we allow this freedom of expression through modes and through these semantic

25:13tokens to provide new treatments to these, marketing pages, right now something

25:21that came up in some of the research that I was doing that I thought was a

25:25really interesting question that comes from Mike Mai, and he asks a question 9

25:30that is on And it’s an image and the image is a blue background with white

25:37text and on that white text it reads is this light mode or dark mode, right?

25:43So traditionally we think, you know, light mode is a white background or very

25:47light background with dark text on it.

25:49And then.

25:51In dark mode, you think it’s a very dark background with white text on it.

25:55And what he’s describing here is with this blue, right, the blue, it’s

26:00hard to say if this blue background is a light or a dark, right?

26:07So during the conference, I asked the audience if it was light or dark.

26:11And in fact, I actually asked if there’s people out there that don’t know, and

26:16people raise their hands to that too.

26:18Myself included, I actually don’t know.

26:21And that’s okay.

26:22Because I have a much more important question to ask, which is what is

26:28the purpose of this treatment, right?

26:31Someone has decided.

26:33To have this blue background with the white text, right?

26:38That’s what they wanted to curate.

26:40That’s okay.

26:41You could totally have what people have, have could potentially

26:45suggested it as jeopardy mode.

26:48That’s totally cool.

26:50But what’s more important of course, is why it needs to

26:54be there in the first place.


26:58And that’s the hardest part in systems, I think, because what we’re trying to

27:03do in systems is we’re trying to create guidelines and to try to describe

27:08why we are doing these things, right?

27:11Why are.

27:12The button sizes, these sizes.

27:14Why are the spacing this particular scale?

27:18Why did we decide all of these things?

27:21And this is really hard for designers because I think it’s really hard just

27:24for as a human to introspectively look and understand why you’re

27:30making these decisions, right?

27:31Why did you decide that blue and white as a combination is

27:35appropriate in this particular case?

27:39Especially as a system maintainer, we actually don’t really care.

27:41You could ask pretty much any design system practitioner out there.

27:45We don’t care what the colors are most of the time, right?

27:47As long as they’re accessible, you know, we’re just going to be like,

27:50okay, they’re accessible, great.

27:52Kind of do whatever you want more or less, right?

27:55But it’s important for us to be able to support the do

28:00whatever you want within reason.

28:01Right, and I think that’s what Mise en Mode, sorry, French folks, I

28:06apologize, Mise en Mode, will do being able to provide those new values

28:12to existing tokens to create any expression that you want is a very

28:16powerful thing to be able to do, right?

28:19Because imagine, like, when you introduce a new token, right?

28:24You need to do all these different steps, right?

28:27Right, you have to go into your Figma file and define the token, you have to

28:31find the value for that token in that particular place, you need to publish

28:35a library, you need to let your devs know, there’s so many things that you

28:39need to do in order to get a token to exist in the ecosystem, right?

28:44And the more expressions that need to be done with these additional tokens,

28:51It’s just very, very hard to maintain.

28:54Again, imagine if you just had the standard set of semantic

28:58tokens that don’t change, right?

28:59As long as you’ve got that set down, then you’re not really needing to

29:03introduce any new tokens because all you’re doing is changing values

29:06and changing the value is a lot less expensive than introducing a new token.

29:12And don’t get me wrong.

29:14. Designers aren’t typically thinking about it in this way, right?

29:18Designers are just looking at the background and going,

29:21I want it to be purple.

29:23And it’s up to us system folks to support those possibilities.


29:30So like I said, Mise en mode is basically unlocking the ability.


29:36be creative in these experiences while maintaining our Expected systems so

29:43you can imagine this is super powerful by the way at this point in time I

29:46don’t remember the rest of the slides.

29:47I’m going through them right now And I know that I had some big oration at the

29:52end of this but the general gist here is that the semantic layer of Of token naming

30:00is paramount and admittedly in Mise en mode and this presentation I don’t really

30:06describe what the token naming should be I have a couple of articles that dance

30:11around it and i’ve had people reach out to me About what I believe is the right

30:17token naming Scheme at this point in time, which has fluctuated over time.

30:22Absolutely my blog post tokens as intents Is a little outdated in comparison

30:28to what I think now Not by much, but there’s definitely some more places for

30:32improvement there, but leaning into the semantic part of the token set and really

30:38not worrying so much about any other tier is going to be the thing that helps you

30:46support the ability for these expressive enhancements inside of these experiences.


30:55Again, this goes beyond just our application designs, right?

31:00This is actually supporting.

31:02Design systems for marketing pages.


31:07It’s like something that we’ve always been trying to figure out.

31:10I think, right.

31:13Oftentimes we look at the marketing page and go, okay, well, let, let

31:16the graphic designers figure it out.

31:18And you know, here are the colors, but you know, you do it on your own.

31:21Maybe they don’t, maybe they are supported by the system too.

31:26I think that’s possible here.

31:27So anyway, wrapping all this up, my last slide, maybe they’re

31:33just rectangles in the internet.

31:34But maybe they’re rectangles burdened with glorious purpose.

31:40So that was basically the end of the talk.

31:42Again, I’ve jumped around a little bit in there.

31:44I forgot what my big stupid speech was at the end, of course, but I can’t

31:49stress enough how important it is to consider this approach in your ecosystem.

31:57When you, especially if you are doing multi brand or if you have marketing

32:02pages that have lots of different backgrounds for different cards that

32:05have different expressions, right?

32:07If you were doing.

32:08All of that kind of stuff can be Things supported by Mise en mode.

32:15So like I said, I invite you to go to mode dot place on the internet article

32:22that basically goes down what I just described here will be there for you

32:26to read and Consider something else that’s important about this is that I

32:31don’t actually describe how to present this in any particular tool Okay.

32:38Obviously Figma can support the idea of modes in it.

32:41Something that was supported when they launched variables at config

32:45in 2023 and then certainly in code, we are able to scope variables to

32:51a particular location in the page.


32:54But again, I don’t have anything in the document that describes the execution

33:00of how you might do this stuff.

33:01And the reason for that is because I.

33:05really want folks to figure it out in their own ecosystem, right?

33:11It could be totally different for what you want to do to

33:18be able to support this idea.

33:20The idea here is more important than the execution and landing on this

33:27as a light bulb moment for anyone will then get the gears turning

33:32for them to Start implementing it.

33:36In fact, after I did this talk at clarity Danny Banks, who was the person behind

33:40style dictionary turned to me at the end of clarity and said, Hey, I did it.

33:45And I said, what do you mean you did it?

33:46He says, I did exactly what you were describing.

33:49And he turns his laptop to me and I said, that’s amazing.

33:52Please send it to me.

33:52He hasn’t sent it to me and I’m sure he’s busy and totally warranted.

33:56But it was very exciting that someone who’s very deep in the

33:59space of design tokens really.

34:03Latched onto the concept and decided to try to run with it immediately.

34:07And for him to be able to kind of whip it around in, you know, only a few

34:12hours, that’s pretty exciting too.

34:16So I invite you to give it a shot and see if this is something that you think might

34:21be helpful in your design systems and your partnerships in your organization.

34:26And if you have any questions, reach out to me on Twitter.

34:29You can grab at me directly, Donnie D’amato, or you can go ahead and

34:33tweet wireframeFM on the internet.

34:36But other than that thanks for listening.

34:38And the talk is available on the internet as well.

34:42Along with all the other talks from clarity, I will link to where

34:45that is in the show notes here 10.

34:48But hope you enjoy, hope it solves some problems out there,

34:51and I’ll see you in the next one.



  1. https://mode.place

  2. https://donnie.damato.design

  3. https://www.youtube.com/watch?v=On3w6zPQPHU

  4. https://twitter.com/NateBaldwinArt/status/1716993590814277752

  5. https://blog.damato.design/posts/ondark-virus

  6. https://complementary.space

  7. https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62

  8. https://youtu.be/yI9QVwkk2Go?si=DyVY1GYs9k2Y40Oa&t=922

  9. https://twitter.com/mikemai2awesome/status/1701691579931435091

  10. https://conffab.com/presentation/mise-en-mode/