005

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

Transcript

00:49 Hey, good to see you.

00:50 Thanks for coming.

00:50 This is another episode of wireframe.

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

00:56 All right.

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

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

01:06 2023, which was late last year.

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

01:12 And.

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

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

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

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

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

01:34 place on the internet. 1

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

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

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

01:48 All right?

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

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

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

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

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

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

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

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

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

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

02:14 But moving right along.

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

02:20 systems are for people, right?

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

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

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

02:34 get that adoption and that buy in.

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

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

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

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

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

02:54 of places around the world.

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

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

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

03:08 And really great talk.

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

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

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

03:18 just rectangles on the internet.

03:20 Right?

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

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

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

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

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

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

03:46 Innovation, right?

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

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

03:54 In terms of system design, right?

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

03:57 These rectangles could mean something.

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

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

04:08 of Considering our interfaces.

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

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

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

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

04:32 with equally governable sub themes.4

04:35 Okay.

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

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

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

04:43 But I really do think that.

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

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

04:52 to go on this magic school bus.

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

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

05:07 All right.

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

05:14 Okay.

05:15 So what do I mean by that?

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

05:22 different tiers for your products, right?

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

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

05:31 tier, something of that nature.

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

05:36 begins to introduce more.

05:39 Attractiveness in each one, right?

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

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

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

05:51 Right?

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

05:57 one of those columns in some way.

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

06:01 or other stylistic choices.

06:03 Okay.

06:04 Now.

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

06:07 little bit of an example of that.

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

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

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

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

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

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

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

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

06:38 Right?

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

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

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

06:53 So if you do that.

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

07:00 part of the larger experience, right?

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

07:05 section of that pricing page.

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

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

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

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

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

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

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

07:34 the parts of the layout, right?

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

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

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

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

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

07:57 light mode will be a lighter color.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

09:27 things like light and dark mode.

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

09:33 modes like enterprise mode.

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

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

09:43 location, just with different values.

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

09:47 Okay, cool.

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

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

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

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

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

10:13 then assigning new values in that way.

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

10:19 be talking about is a lot more.

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

10:26 space semantic all right now?

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

10:34 things when it comes to semantic tokens.

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

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

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

10:53 anywhere in the interface.

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

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

10:59 Okay?

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

11:05 where that’s going to go.

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

11:09 out where space4 is meant to go.

11:12 Right?

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

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

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

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

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

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

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

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

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

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

11:55 It took about six months to get.

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

12:03 existing concepts when it comes to space.

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

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

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

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

12:26 Which it is not.

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

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

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

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

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

12:44 recommends as a spacing system.

12:46 So you’ll have something like.

12:48 Space stack small or space inset medium.

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

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

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

13:05 marked just with a token called space.

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

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

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

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

13:20 answer is absolutely not, no.

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

13:26 instead using these boundaries.

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

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

13:37 these tokens might be in this location.

13:40 Okay.

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

13:45 that you look at complimentary.

13:47 space on the internet.

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

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

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

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

14:05 space is essentially the same thing.

14:07 Right?

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

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

14:18 of the page or the experience.

14:21 Okay?

14:22 So that was very enlightening to me.

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

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

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

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

14:38 There must be some relation.

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

14:47 There it is.

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

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

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

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

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

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

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

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

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

15:29 And that makes sense, right?

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

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

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

15:40 or we like to think we do.

15:42 Right?

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

15:48 that I think of fundamentally.

15:50 Right?

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

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

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

16:01 Okay.

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

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

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

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

16:20 config 2023 in San Francisco.

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

16:28 Capabilities of Figma’s variables.

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

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

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

16:44 semantic tokens, into a new section.

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

16:52 On that copy.

16:54 So it becomes dark mode.

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

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

17:03 and it changes in a different way.

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

17:12 moving it visually in Figma was.

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

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

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

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

17:39 Right.

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

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

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

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

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

18:03 It means placement in mode.

18:05 Okay.

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

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

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

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

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

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

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

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

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

18:40 wireframe of the experience, okay?

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

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

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

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

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

19:04 expressively enhancing that experience.

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

19:10 job from a color standpoint.

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

19:15 course, like typography and space.

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

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

19:25 in the slices that are in there.

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

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

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

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

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

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

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

20:01 It’s too new, right?

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

20:06 that have never been , dark before.

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

20:13 Weird or completely inaccessible.

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

20:19 have across that entire system.

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

20:25 need new values and then components.

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

20:35 will also need new tokens.

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

20:41 tokens just for dark mode, right?

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

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

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

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

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

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

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

21:11 Some of these things.

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

21:16 more manageable using Mise en Mode.

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

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

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

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

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

21:40 values for the entire set.

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

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

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

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

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

21:58 have had if it was inverted.

22:00 Okay.

22:01 That’s all right.

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

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

22:07 Okay.

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

22:10 thing as a critical button.

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

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

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

22:21 That is the danger modal from Atlassian.

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

22:28 you’re about to delete something.

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

22:34 this kind of critical state.

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

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

22:40 presenting themselves as dangerous.

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

22:49 in a critical state or critical mode.

22:51 So you can imagine.

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

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

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

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

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

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

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

23:29 Convey new information.

23:31 The same thing actually happens at GitHub.

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

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

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

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

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

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

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

23:58 around this section is also red.

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

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

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

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

24:12 We can convey something being dangerous.

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

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

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

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

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

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

24:36 You can go ahead and purple gradients.

24:38 You can make a text flourishes.

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

24:43 Totally something you can do.

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

24:49 And I understand that, right?

24:50 Designers want to express a lot sometimes.

24:53 Especially in marketing pages, right?

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

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

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

25:05 We can make our marketing pages systematic.

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

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

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

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

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

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

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

25:47 light background with dark text on it.

25:49 And then.

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

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

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

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

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

26:16 people raise their hands to that too.

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

26:21 And that’s okay.

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

26:28 the purpose of this treatment, right?

26:31 Someone has decided.

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

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

26:40 That’s okay.

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

26:45 suggested it as jeopardy mode.

26:48 That’s totally cool.

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

26:54 be there in the first place.

26:56 Right.

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

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

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

27:11 Why are.

27:12 The button sizes, these sizes.

27:14 Why are the spacing this particular scale?

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

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

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

27:30 making these decisions, right?

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

27:35 appropriate in this particular case?

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

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

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

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

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

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

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

28:00 whatever you want within reason.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

29:12 And don’t get me wrong.

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

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

29:21 I want it to be purple.

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

29:28 Right?

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

29:35 To

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

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

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

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

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

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

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

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

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

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

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

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

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

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

30:54 Right?

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

31:00 This is actually supporting.

31:02 Design systems for marketing pages.

31:06 Okay.

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

31:10 I think, right.

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

31:16 the graphic designers figure it out.

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

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

31:26 I think that’s possible here.

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

31:33 just rectangles in the internet.

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

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

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

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

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

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

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

32:05 have different expressions, right?

32:07 If you were doing.

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

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

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

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

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

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

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

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

32:51 a particular location in the page.

32:53 Okay.

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

33:00 of how you might do this stuff.

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

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

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

33:18 be able to support this idea.

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

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

33:32 for them to Start implementing it.

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

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

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

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

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

33:52 Please send it to me.

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

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

33:59 space of design tokens really.

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

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

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

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

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

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

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

34:33 tweet wireframeFM on the internet.

34:36 But other than that thanks for listening.

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

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

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

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

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

34:53 Later.

Shownotes

  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/