Transcript

00:49 Hey, good to see you.

00:50 Thanks for coming.

00:51 This is another episode of wireframe.

00:52 And today we’re gonna be talking about design tokens.

00:56 Yep.

00:57 Long time coming.

00:57 I know you could imagine that I should of been talking about this earlier

01:01 because I talk about design tokens a lot.

01:03 In fact, this is an episode so nice.

01:05 I ended up doing it twice.

01:06 This is now the second time because I was very silly and recorded the

01:10 entire episode with my mute on.

01:13 My devices.

01:14 So but now I can see the levels of green very clearly in my monitor.

01:18 So I know that I.

01:20 I’m producing sound on this track.

01:22 So hopefully everything turns out okay this time around.

01:26 So the reason that I’m talking about design tokens at this moment is because

01:31 just this last week there was a tweet ¹ that got a lot of attention and I kind of want

01:35 to go over what that tweet was all about, because I think there was definitely

01:40 a little bit of confusion in there.

01:42 And this is also something I don’t talk too much about.

01:44 I, I did mention it at the state of design tokens panel when we were talking

01:49 about primitive tokens, but let me just discuss what the tweet was that I

01:54 retweeted with a little bit of a quote.

01:56 So there was a tweet that came out on Thursday morning, or maybe

02:00 it was late Wednesday night.

02:02 And this person was kind of describing a question or maybe even a frustration

02:08 that was out there that was describing why we have primitive tokens.

02:13 And in particular, he has a picture of a whole bunch of scales, you can

02:17 imagine them from material like the color scales for things like color

02:21 teal 500 and so on and so forth.

02:23 So the image of that and he was basically kind of outwardly asking why

02:28 do we still use these scales if if we have other tokens that are meant to

02:33 describe where A color’s supposed to go, not what a particular color is.

02:39 And what he’s describing is semantic tokens, right?

02:41 So a semantic token being like a button primary background color.

02:44 So he believes from what I can understand in his tweet, that we should

02:49 be using those tokens and not the primitive ones, the color teal 500.

02:55 So, I quote tweeted that with a response, and that response was, again,

02:59 very similar to what I mentioned in the State of the Design Tokens panel.

03:03 In fact the report actually links out to the article that I mentioned the

03:11 reason why primitive tokens exists in, in my mind and what I could tell.

03:15 And here’s the general gist.

03:17 Okay.

03:18 The quote tweet basically says that there’s only one reason why the

03:22 primitive tier of design tokens exists.

03:25 And that has to do with team communication because color teal 500 is a lot easier to

03:33 understand and comprehend when I speak it or otherwise write it than it is for me to

03:38 say something like #00ffcc or whatever the teal is that you’re playing with, right?

03:44 So for most people again, you know, they’re not reading a hex values,

03:50 although it’s not too hard to do if you understand what, how a hex is

03:54 composed, but you can imagine any other kind of color composition or really

03:58 any other value that you would need to potentially be computed or isn’t

04:03 necessarily human describable, right?

04:05 And that’s a lot of the reason why the color scale or this primitive token

04:10 exists is because we have this idea of color teal 500 and I’m able to convey

04:15 that to my team very easily to describe that there is a teal that exists.

04:20 And then the 500 kind of suggests that there’s a scale in which

04:24 other teals might exist, right?

04:26 There might be a 400 or a 600 and even farther from that.

04:30 And that’s the reason why the primitive scale exists.

04:33 So from there, we’re talking also a little bit about organization, right?

04:37 Because at that point, once you have these scales that you want to create,

04:42 then you want to organize them.

04:43 And that’s why we start having, you know, the, the set of teals, and then

04:47 the grouping of, of 100, 200, 300, and so on in these areas so that you’re

04:52 able to group them properly and then mix and match and, and what have you.

04:56 And all of that is fine from an organizational standpoint.

05:00 If you want to organize this particular tier so it was really

05:04 interesting in the quote tweet all the responses that I was getting.

05:08 In fact, I heard that a couple of organizations were actually discussing

05:13 this thread after I posted that.

05:16 response.

05:17 And I don’t know exactly what those discussions were, but I imagine that

05:22 because the take about it being a single reason why they exist probably

05:28 is a little hot for folks, right?

05:29 Because you would imagine that there must be More to it, right?

05:35 I mean, it would seem like clearly, yes, it makes sense from an organizational

05:41 standpoint to have color teal 500 as part of your token set, right?

05:45 Like, how else am I supposed to manage that color?

05:49 In order to kind of break this down a little bit, I’d like you to kind

05:54 of remove all the noise that you hear about design tokens as a whole, okay?

06:00 And what I mean by that is forget about the naming, forget about the tiers,

06:04 forget about all of that stuff, okay?

06:07 And just kind of be zen for a moment.

06:13 And I know it’s a little hard to do because of course, design tokens

06:16 typically has a lot of information bombarding as lots of articles about

06:20 design tokens and naming conventions, et cetera, et cetera, but just remove it

06:24 all out of your mind just for a moment.

06:26 And I want you to just focus on the act of curating a semantic token with its value.

06:35 So just to kind of recap about semantic tokens, semantic tokens are basically

06:40 meant to describe where something is going to be used in an interface.

06:44 Okay.

06:44 So button primary background color could be under the semantic token nomenclature.

06:49 You could also consider as a component token.

06:52 They are basically the same thing as my you know, aside hot take, but.

06:57 A button primary background color certainly is not a primitive token in

07:01 terms of the parlance that we talk about.

07:03 So button primary background color describes that this particular token

07:08 is meant to be applied on all primary buttons across your interface.

07:13 And it’s specifically meant to describe its background color.

07:19 It’s not meant to be the border of an input.

07:22 It’s not meant to be the text color of a modal, right?

07:25 It’s not meant to do any of that stuff.

07:26 It has a very specific purpose.

07:28 And that’s supposed to be the background color of a primary button.

07:32 Okay, that’s it.

07:33 Now, When you assign a value to that token, right, I call that curation.

07:41 Okay.

07:42 So you’re curating the values that are going to be assigned to these

07:44 semantic tokens and those values will eventually be these primitive

07:51 values as we, we call them.

07:52 And that’s why the primitive token nomenclature ends up being in there.

07:56 But let’s assume that there’s no tokens in there.

07:59 It’s actually just hard coded values, right?

08:00 So there’s a hex directly assigned to this semantic token.

08:04 Maybe there’s an LCH assigned to it or whatever you’d like.

08:08 Okay.

08:09 Now in that curation process, again, forgetting about naming conventions or any

08:14 of the kind of opinions you might have.

08:16 In that curation process, think about what, what’s happening.

08:22 What’s happening in that curation process is you are trying to select

08:28 the correct color that is meant to represent all of these ideas, right?

08:34 This is what a semantic token is.

08:36 It’s an idea, a concept that will exist in your interface.

08:39 So, It could be a hex and, and, you know, any other kind of composed version of a

08:46 color, maybe even a gradient that’s fine.

08:48 In some cases, so all of that stuff is, is that, that value in there,

08:51 or it could be a primitive token.

08:55 Okay.

08:56 Now what’s the benefit over using a hex color from the primitive token?

09:05 The answer is there isn’t much.

09:07 And you could probably argue with me and say, well, hold on a second.

09:10 Of course there is.

09:11 Right.

09:12 And when you argue that, you would say, well, you just kind

09:15 of mentioned it earlier, right?

09:16 I could describe color teal 500 very quickly rather than describing the

09:21 hex for that particular teal, right?

09:24 Well, the situation is, is that in that curation step, that’s

09:27 typically not a team effort.

09:30 Right?

09:30 A person, a single person, individual is selecting the color and then

09:35 assigning it to that semantic token.

09:39 And it’s fairly well established that the larger organization shouldn’t be accessing

09:45 primitive values just normally, right?

09:47 They’re supposed to be using semantic or even component tokens, right?

09:50 So they’re not accessing the primitive token, so you’re really not

09:52 sharing it in that particular sense.

09:55 So that means that the curation step, when you, you as an individual are

09:59 selecting which color needs to be assigned to that semantic token, it’s just you.

10:05 In a room, on a computer, or however you’re doing this exercise, right?

10:12 It’s not common for it to be a group thing , right?

10:17 It’s usually a task that’s in a ticket maybe somewhere in some

10:20 project management system that says, Hey, we need this new theme or this

10:24 new mode, please curate it with the new values for these tokens, right?

10:30 It’s usually one person doing it.

10:31 And Okay.

10:32 Yes.

10:33 Could there be a a review process in which other people will look at these values?

10:37 Certainly.

10:38 Right.

10:38 And again, that goes all the way back to that team communication part, right?

10:44 Because if it’s just you, Well, you’re picking the hex.

10:49 You know what color the hex is because you’ve chosen it.

10:53 So then, you applying it should just be very simple in terms

10:56 of, okay, here it goes, right?

10:58 This is the assignment I’m doing.

10:59 Only until you have more cooks in the kitchen do you now need to Make it

11:05 easier to convey what your intention is in the spot right here, right?

11:10 So it makes it much easier from a review standpoint.

11:12 If you don’t have a visual tool to help you do this curation step it’s a lot

11:17 easier to read the color teal 500 in that spot than it is to provide a hex.

11:22 But again, if this is you as an individual curating this

11:25 thing, You don’t need the hex.

11:27 Now, on another topic, you’ll say, well, I don’t want to be copying and pasting

11:31 hexes over and over and over again.

11:33 Well, it’s the same situation.

11:36 You’re still going to be copying and pasting that token

11:39 over and over and over again.

11:40 It’s the exact same behavior that you’re going to be doing

11:44 when you do that exercise.

11:46 Okay.

11:46 So that’s a moot point as well, in terms of why you might need

11:50 a primitive token overall.

11:53 So in my mind, if.

11:56 You are a sole person that is curating these themes.

12:00 You, I think again, don’t need primitive tokens if it’s doesn’t make sense

12:05 to have to communicate these tokens.

12:07 Okay.

12:09 Now there’s one more point that I wanted to make in terms of the primitive

12:11 tokens and I make it all the way back in an older blog post, which I’ll

12:15 mention which one that is in a moment because it goes about another point.

12:20 Regarding this tweet.

12:21 It has to do with the word semantic.

12:22 But basically, people also like the idea of a primitive token because

12:28 then it potentially gives them the ability to change the value, right?

12:31 I mean, that’s the whole idea about design tokens as a whole, is that

12:35 they are a design decision and that design decision can be changed.

12:39 Well, not this tier.

12:43 This tier in particular really is a static tier.

12:47 That’s why they’re named primitives because primitives

12:50 aren’t supposed to change either.

12:51 So when you have color teal 500 that’s meant kind of as a contract to the

12:57 rest of the organization to say.

12:59 We have a particular teal that is at this 500 state and it should always

13:03 be this particular teal, right?

13:05 You can imagine that if we were going to Update the brand colors.

13:10 Okay, and it was teal before but now is orange It wouldn’t make sense for color

13:17 teal 500 to now be an orange Right.

13:21 That completely subverts our expectations about what that value is meant to be.

13:27 Now, meanwhile, if we’re talking about a semantic part of the

13:31 ecosystem, right, we’re talking about logo brand color, right?

13:35 And that’s fairly semantic.

13:38 Because it doesn’t suggest what the value of that color is just as logo brand color.

13:44 That means that I can assign a teal or an orange or whatever I want to

13:49 it when it’s appropriate, right?

13:51 And that thing can change and be slotted out through a theming system

13:55 through modes, et cetera, et cetera.

13:57 So that’s another important point in the primitive set because those things

14:01 aren’t supposed to change those things.

14:04 As kind of defined as a primitive, they are meant to kind of be

14:08 set, as understood, as, as organized, or as, as agreed upon

14:13 throughout the entire organization.

14:15 So it’s another reason why you may consider not using them, because once

14:20 you create that token, it’s very, very hard to unlearn a new value for it.

14:25 Especially if, you know, you’re directly relating it to something

14:28 that’s in the UI, in which case you want to make a change over time.

14:32 It kind of is really hard to do because it’s a direct relation, right?

14:36 Again, that’s the reason why we, we try to keep The primitive set private from the

14:43 rest of the organization, because if we were to have direct access to those things

14:47 and then we want to change just maybe even for dark mode, you can imagine for the

14:53 folks that are familiar with the exercise creating dark mode, that that would be a

14:57 lot of extra work to find all the places that are using color white and then

15:03 changing all those places to color black.

15:06 Right?

15:06 That’s why we have that proxy in the middle, that semantic set that

15:10 describes where something is going to be colored, not what color the thing is.

15:17 Now, I mentioned the blog post that talks about that reason why the

15:22 semantic token set kind of exists.

15:25 Okay?

15:26 And that blog post is called Tokens as Intents. ²

15:29 It’s one of my earlier ones off of the blog.

15:31 And the reason I’m bringing it up is because Is because one of the responses

15:35 in that tweet was a person who I have no idea who they were Just I guess found

15:41 it off of it being kind of Spicy for the day and came in there to tell me that

15:47 color teal 500 was semantic, and I had to do a double take because I’m just

15:56 like, how could you possibly believe that knowing everything that we know right now?

16:01 I mean, if you look at the token naming conventions or any of the

16:07 other token articles that are out there we have agreed as a community

16:11 about these particular tiers.

16:13 Okay?

16:14 There are three tiers.

16:15 It is the primitive tier, which I’ve been talking about mostly.

16:18 The semantic tier, which is that middle tier that I leaned very heavily into.

16:21 And then there’s the component tier, which again, I believe is mostly just a

16:25 semantic tier that becomes more specific.

16:29 Those are the three tiers that we have.

16:31 Okay?

16:31 And we’ve agreed on the naming convention for these tiers.

16:36 So, When I told this person that it’s not semantic, right?

16:42 Color teal 500 is not semantic.

16:44 And in fact, I believe I even linked to the blog post called truly semantic ³

16:49 that describes what is semantic and what isn’t and why he went on

16:53 to say that everything’s semantic because linguistics and that’s when

16:58 I was like, ah, here, fantastic.

17:00 A troll, right?

17:01 Or maybe this person’s isn’t a troll and they just want to go ahead and have an

17:04 argument or whatever they want to do.

17:06 But.

17:07 It’s wild to me that, you know, a person who brings up linguistics

17:14 into a conversation doesn’t take a step back and realize, hold on a

17:19 second, there’s other fields out there that words mean different things.

17:25 Right?

17:25 And when we say semantic, that’s meant to describe a particular tier of tokens, as

17:33 opposed to just linguistics in general.

17:36 Right?

17:37 So, yeah, very strange, odd, to have that discourse in there.

17:43 Again that semantic tier, I think, is a in my opinion, a poor naming choice.

17:49 And I say that, and this is talking about that earlier blog

17:52 post called tokens as Intents is.

17:55 Describing the term that I knew semantic tokens to be before I knew

18:00 of them as semantic tokens At compass, which is the real estate company.

18:04 I used to work at as their first ux engineer there was a Set of

18:11 i’ll just call them variables that were used to describe style.

18:15 It’s as we know them as design tokens today But we called them Intents And this

18:21 was from Joe Schmitt who was the front end architect over there You for a long time.

18:25 He’s been there for almost 10 years at this point now.

18:28 And he was the one who kind of created the idea of Intents mostly from

18:33 this concept because the brand kept changing, you know, design would want

18:38 to experiment on a new button color, or they want to experiment on into

18:41 some kind of new style for the card.

18:44 And it got to be a lot of overhead to, you know, change in all these places.

18:49 So it made a lot more sense to him.

18:51 To describe where the thing was going to be changed as opposed to, you

18:56 know, the, just assigning the color there, you know, in in this way.

19:00 So Intents comes from the idea of providing intention for a color

19:06 to eventually exist in a spot.

19:09 Okay, so I intend to provide the background color for this primary button.

19:13 I intend to provide the corner radius of this card, right?

19:17 So it doesn’t, again, describe anything to do with the value of that

19:22 color or the, or the radius, right?

19:25 It’s talking about where this Is in our interface as a whole.

19:28 And it very directly aligns to what we believe as semantic tokens today.

19:33 So the concept, or I should really say the vocabulary of Intents, I adopted

19:38 and moved over to GoDaddy, where Intents is basically the term that they now

19:44 use to describe that semantic layer.

19:46 So I believe that the word intense does a much better job of really

19:51 Kind of separating the type of token that sits in there personally.

19:55 And I know that there’s other folks that are out there that have also adopted

19:59 that terminology, but at large, we do talk about this as the semantic.

20:04 So I continue to discuss it at large as the semantics tier, but

20:09 I always like to introduce that Intents idea because I think it does

20:14 a lot better job of describing what that tier is meant to do, right?

20:20 Semantic, as this person’s kind of pointing out, Is a little bit of a

20:25 ambiguous term because yeah, even in HTML, there’s things that are semantic that

20:30 mean something, but it’s very difficult to connect it to that style piece, right?

20:35 Like, okay, well semantic, but with style, how does that work?

20:39 But I think the intention part really leans into a designer providing intent

20:46 for a color to eventually exist.

20:48 Okay.

20:50 So, now, I want to dovetail this a little bit into the token specification because

20:57 the token specification as it stands today there’s a lot of complexity in it.

21:02 And more complexity is, is being suggested every day and it actually

21:07 drives me nuts because I think it really needs to be a lot simpler.

21:12 And I say that because if you go back all the way to what I was

21:16 talking about being very zen and into that curation step, right?

21:21 That curation step, Is, is in my mind meant to describe a

21:26 single like context, right?

21:29 So that could mean light mode.

21:30 That could mean dark mode.

21:31 That could be the Halloween theme.

21:33 That could be the Home Depot brand.

21:35 All of that stuff could be a single context.

21:38 And.

21:40 In that context, in that zen like state of curation, I’m only

21:44 thinking of that single context.

21:46 I’m not thinking while I’m curating light mode about what

21:51 this would be in dark mode.

21:53 There’s no reason to be context switching like that when you’re

21:57 in this curation mode, okay?

21:59 In this curation mode, you’re, I believe, Most effective in terms of

22:05 trying to create the values or set the values for every single semantic token

22:10 that you have with whatever value is meant to be and As one continuous set

22:15 for light mode, as an example, right?

22:17 Once you’re completed with that, then you go into dark mode and

22:21 you stay right there in dark mode.

22:22 There’s, again, I don’t see a reason why you would go back and forth because

22:26 the value that you would set for the button primary background color in

22:32 light mode has nothing to do with the value that you would set in dark mode.

22:37 Because they shouldn’t appear In the same context ever, right?

22:43 And I say ever a little bit in quotation marks because certainly

22:47 there’s different ways of scoping the mode as I’ve of course talked about

22:51 in previous episodes and elsewhere.

22:53 But when we’re talking about a holistic kind of conveying of an

22:58 expression, you want that button.

23:01 Primary background color to align with the rest of the colors and

23:05 other values that you’ve set in that one curation in that one scope.

23:10 And I bring this back to the token specification because in issue number

23:14 210, which is talking about modes and themes, there’s a lot of tree

23:19 like complexity in there that I think is going to make it very difficult.

23:26 For folks to manage tokens just easily I mean, just look at any

23:33 particular JSON file that, you know, has several levels, nesting of arrays

23:39 and objects and things like that.

23:40 And it makes it very hard to know what’s happening.

23:44 in that file.

23:46 And yes, there are visualizers out there, but every time I look at one

23:49 of those visualizers, I think I need a degree in, like, graph theory to

23:52 understand what’s going on here.

23:53 Again, imagine a very flat file that, with barely any nesting, that basically

23:59 just has token name and its value, maybe the type, if that’s helpful.

24:03 And that’s basically it.

24:06 And yes, this is coming from the person who created token operations.

24:09 And as complex as that is, I still am not entirely confident that we

24:14 need something like that as much as.

24:16 We need a simpler way of porting tokens between systems.

24:23 Right.

24:24 But yeah, like I said, I think the spec is turning a little bit into a monster

24:28 personally especially after some of the stuff that I saw with color recently,

24:33 that’s starting to bring in some of the new color spaces and I’m, I’m

24:37 just getting very confused personally as someone who’s color deficient.

24:41 But you know, I have my own.

24:43 Reasons to not enjoy color, but yeah, so the primitive set going all the way

24:48 back to that again as the kind of the the topic of today’s episode really

24:53 consider if you need that primitive set.

24:57 It’s entirely possible that you might not, and it just ends up being

25:01 more tokens that you need to manage.

25:04 Right.

25:04 And as a design system maintainer, I always recommend not introducing

25:09 tokens if you don’t need to.

25:11 And if you can keep everything as a hex color I think that would

25:13 be, or some color representation.

25:17 I say hex because I’m used to saying hex for the past 30 years, but.

25:21 Some color representation and that goes for any other set of tokens typography

25:25 space and etc, etc So I always recommend to reduce all those tokens because

25:30 the less tokens you manage the less managing that you need to do overall

25:35 and Just stick with the semantic set.

25:38 There was plenty of people in that thread.

25:39 I believe the original poster included that You know, and I guess that was his

25:46 real stance was that semantic is what we should really be focusing our energy

25:52 on, as opposed to any other tier of these tokens and really aligning with

25:58 what semantic is meant to provide would be a lot better use of the time than us

26:04 again, trying to, you know, create these color scales or typography scales and

26:08 represent them as some sort of token.

26:11 But anyway, let me know what you think on this.

26:13 I can imagine that’s going to be a little bit of a debate on here,

26:15 especially if you are already managing primitive tokens today, right?

26:19 I’m not saying for you to remove them from existence because,

26:22 you know, they already do exist.

26:24 And if you’re already managing them, that’s totally cool.

26:27 Certainly if you have a tool that’s helping you manage

26:29 these tokens, that’s great too.

26:31 But if you’re a person that’s starting out on there, again, I highly recommend

26:35 that you reconsider introducing new tokens into your ecosystems,

26:39 especially since you’re not expected to distribute these to your platform.

26:44 You know, keeping those decisions tight knit because you could always

26:47 add them as well if you believe that they would be helpful down the road,

26:51 especially if your team gets bigger and you need to communicate things

26:54 it could be helpful in that way.

26:56 But again, let me know what you think on that.

26:58 And if you have any opinions on the primitive set as a whole, do you need it?

27:02 Do we not need it?

27:03 Any other.

27:04 Considerations about why the primitive set might exist that I may have missed.

27:09 I admittedly again I don’t think I’ve missed anything in terms of The one

27:13 reason which is that team organizational piece that that comprehension piece

27:17 but i’m interested to know what you think on that and Other than that,

27:21 i’ll see you in the next one later

Shownotes

1. https://x.com/donniedamato/status/1791115334600007681 ↩

2. https://blog.damato.design/posts/tokens-as-intents/ ↩

3. https://blog.damato.design/posts/truly-semantic/ ↩