Hey Candace! Thanks for your comment. I'm not sure I understand all of your question, but one part of it I do, and you're right: it is heavy work up front! Still, the benefits are tremendous, and whenever it makes sense (this will make another article), I recommend using Design Tokens. Now, if I understand the other half of your question correctly, it seems you suggest that a shared library and Design Tokens are similar when they are actually complementary.

I plan to write more about Design Tokens, in more depth and then I believe more clarification will arise.

Still, so as not to leave you without an answer, here goes: The component library will offer just that - components. The problem is that not everything in a product layout is a component.

Every component has properties. Many of these properties, such as the border-radius of a button, are shared with other components (maybe a text-field also has 4px of border-radius).

Design Tokens are nothing more than "controlled and up-front commitments" these properties, with a nickname each, reused consistently by ALL parts of the design, components, backgrounds, text, etc.

But there is much more to it.. E.g, creating a dark theme requires us to just duplicate our tokens file, change some values (E.g. colors) and boom!

Sorry if the explanation made you more confused, but I strongly suggest you to not give up on Design Tokens yet and investigate a bit further.

Take a look at my second article on the subject:

https://valentinoafb.medium.com/design-tokens-for-dummies-72313806f82b