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.
