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:12And.
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: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:20Right?
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:35Okay.
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:14Okay.
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:51Right?
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:03Okay.
06:04Now.
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:38Right?
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.
10:59Okay?
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:12Right?
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:40Okay.
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:07Right?
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:21Okay?
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:42Right?
15:43And that’s really like the key behind all of the token naming strategy
15:48that I think of fundamentally.
15:50Right?
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:01Okay.
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:39Right.
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:05Okay.
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:00Okay.
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:07Okay.
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:56Right.
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:28Right?
29:30So like I said, Mise en mode is basically unlocking the ability.
29:35To
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:54Right?
30:55Again, this goes beyond just our application designs, right?
31:00This is actually supporting.
31:02Design systems for marketing pages.
31:06Okay.
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:53Okay.
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.
34:53Later.
