Almost Useless Tokens

We discuss the benefits and considerations of using design tokens, focusing on the distinction between primitive and semantic tokens and the importance of team communication in token management.
  • design tokens
  • maintenance
  • complexity


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: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 1 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: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: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: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: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: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: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: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: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:33Could there be a a review process in which other people will look at these values?



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: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: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: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:26And that blog post is called Tokens as Intents. 2

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: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: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 3

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: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:25And when we say semantic, that’s meant to describe a particular tier of tokens, as

17:33opposed to just linguistics in general.


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: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: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: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: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


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

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

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