5

I’ve just started creating my color token library, and I’ve read and watched many tutorials on how to do it. Practically, all of them mention these three steps:

enter image description here

I have my primitive tokens (example: #C5CEDE -> gray500)

My issue is setting the alias tokens because for me, my "brand-primary" color can be used in texts, icons, buttons, etc. So I don't think that this step applies to my library.

Can I go from primitives straight to component-specific tokens?

1 Answer 1

0

No. There are different ways to build them. For instance, take the Material Design guidelines—you'll notice they're completely different from your example, and even distinct from other design systems like Atlassian's. (on a side note, I prefer Attlassian's, I think it's way simpler and direct than Material's)

So, as you can see, there isn't a "one size fits all" approach. Addressing your specific question, the answer divides into at least two parts:

Can I go from primitives straight to component-specific tokens?

Yes, you can. However, this might become a bit confusing in large design systems. Alternatively, you could name the value "brand-primary" and then reference the component. This is not a good practice, but if you're only going for simplification it could work. Then again, I don't recommend it.

Is it mandatory to have semantic names for tokens?

No, it's not mandatory. But, once again, not using semantic names can lead to confusion. The entire concept of tokens is to be as self-explanatory as possible because you'll need to match pairs of definition and value across different development stages. If a developer takes your token and has to deduce what you meant by the name or where the component should be used, then the whole purpose of design tokens is undermined.

To provide an example, let’s consider your case. How would you clearly convey the state of the CTA (on hover, active, clicked) without introducing a semantic token? I believe it’s much more straightforward to do it the intended way; look at the example below:

enter image description here

If any changes are needed, I can simply update the raw value, and that’s it! It will propagate across all instances with a single push to GIT.

However, what if I only need to modify a few tokens?

For instance, in your scenario, if we decide not to use brand-color-primary for the CTA because we want the CTA buttons to be distinct and carry entirely different colors, then I can’t just adjust the raw value—it would affect everything. Therefore, we'd have to specifically target the elements, which is exactly why semantic tokens are necessary.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.