Transcript

00:49Hey, good to see you.

00:50Thanks for coming.

00:51This is another episode of wireframe.

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

00:56Yep.

00:57Long time coming.

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

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

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

01:05I ended up doing it twice.

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

01:10entire episode with my mute on.

01:13My devices.

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

01:18So I know that I.

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

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

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

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

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

01:40a little bit of confusion in there.

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

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

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

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

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

02:00it was late Wednesday night.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

03:15And here’s the general gist.

03:17Okay.

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

03:22primitive tier of design tokens exists.

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

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

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

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

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

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

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

04:03necessarily human describable, right?

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

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

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

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

04:24other teals might exist, right?

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

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

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

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

04:42then you want to organize them.

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

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

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

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

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

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

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

05:13this thread after I posted that.

05:16response.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

06:44Okay.

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

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

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

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

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

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

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

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

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

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

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

07:26It has a very specific purpose.

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

07:32Okay, that’s it.

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

07:41Okay.

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

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

07:51values as we, we call them.

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

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

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

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

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

08:08Okay.

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

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

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

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

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

08:34This is what a semantic token is.

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

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

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

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

08:51or it could be a primitive token.

08:55Okay.

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

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

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

09:10Of course there is.

09:11Right.

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

09:15of mentioned it earlier, right?

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

09:21hex for that particular teal, right?

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

09:27typically not a team effort.

09:30Right?

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

09:35assigning it to that semantic token.

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

09:45primitive values just normally, right?

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

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

09:52sharing it in that particular sense.

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

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

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

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

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

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

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

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

10:31And Okay.

10:32Yes.

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

10:37Certainly.

10:38Right.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

11:31hexes over and over and over again.

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

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

11:39over and over and over again.

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

11:44when you do that exercise.

11:46Okay.

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

11:50a primitive token overall.

11:53So in my mind, if.

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

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

12:05to have to communicate these tokens.

12:07Okay.

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

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

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

12:20Regarding this tweet.

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

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

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

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

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

12:39Well, not this tier.

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

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

12:50aren’t supposed to change either.

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

12:57rest of the organization to say.

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

13:03be this particular teal, right?

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

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

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

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

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

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

13:35And that’s fairly semantic.

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

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

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

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

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

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

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

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

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

14:13throughout the entire organization.

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

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

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

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

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

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

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

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

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

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

15:03changing all those places to color black.

15:06Right?

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

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

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

15:22semantic token set kind of exists.

15:25Okay?

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

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

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

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

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

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

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

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

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

16:11about these particular tiers.

16:13Okay?

16:14There are three tiers.

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

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

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

16:25semantic tier that becomes more specific.

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

16:31Okay?

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

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

16:42Color teal 500 is not semantic.

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

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

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

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

17:00A troll, right?

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

17:04argument or whatever they want to do.

17:06But.

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

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

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

17:25Right?

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

17:33opposed to just linguistics in general.

17:36Right?

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

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

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

17:52post called tokens as Intents is.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

19:06to eventually exist in a spot.

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

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

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

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

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

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

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

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

19:44use to describe that semantic layer.

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

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

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

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

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

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

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

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

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

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

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

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

20:46for a color to eventually exist.

20:48Okay.

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

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

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

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

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

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

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

21:26single like context, right?

21:29So that could mean light mode.

21:30That could mean dark mode.

21:31That could be the Halloween theme.

21:33That could be the Home Depot brand.

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

21:38And.

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

21:44thinking of that single context.

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

21:51this would be in dark mode.

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

21:57in this curation mode, okay?

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

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

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

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

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

22:21you stay right there in dark mode.

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

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

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

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

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

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

22:51in previous episodes and elsewhere.

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

22:58expression, you want that button.

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

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

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

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

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

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

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

23:39and objects and things like that.

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

23:44in that file.

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

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

23:52understand what’s going on here.

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

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

24:03And that’s basically it.

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

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

24:14need something like that as much as.

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

24:23Right.

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

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

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

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

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

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

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

24:53consider if you need that primitive set.

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

25:01more tokens that you need to manage.

25:04Right.

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

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

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

25:13be, or some color representation.

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

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

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

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

25:35and Just stick with the semantic set.

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

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

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

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

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

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

26:08represent them as some sort of token.

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

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

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

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

26:22you know, they already do exist.

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

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

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

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

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

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

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

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

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

26:54it could be helpful in that way.

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

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

27:02Do we not need it?

27:03Any other.

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

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

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

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

27:21i’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/ ↩