[whoisstan]

This makes sense to me, but it seems to contrary to the current utility-based css wave. For example 'text-red-100' for error message text wouldn't be in style dictionary like that, it would be 'text-color-error' since using 'text-red-100' would always be red 100 and not able to change the text-yellow-500.

Point being isn't that a route back to semantic styling? I much prefer the maintainability cycles of semantic styling over the onslaught of classes in i.e. tailwind.

[strogonoff]

Part of the reason I like design tokens is that they are a middle ground between the chaos of utility classes[0] and impracticality of pure semantics, while being in a way better defined than either of them.

Want a token for a colour with negative semantics? Sure! A token for chartreuse-200? Be my guest! At least, chartreuse-200 on your page will be the same as chartreuse-200 on my page, so that the look is consistent and without distracting incidental variation in hue.

[0] When it comes to CSS—of course, design tokens reside on another layer of abstraction, not tied to any particular implementation.

[whoisstan]

Agree, you tap into the rigidness of a semantic color and type hierarchy, while allowing utility classes for specifics of a platform/environment.

[ActionHank]

It makes sense, but I struggle to see the value outside of whitelabel products that you may look to rebrand, but with the same UI.

Generally UI is built around a singular look and feel at a given point in time. Trends change, people change, ideas and features change.

You eventually end up with a rebranding and along with that some sort of UI refactoring.

This approach is incredibly valuable when building something that won't change drastically when you are changing those tokens.

[whoisstan]

It has to be useful for large organizations like for example IBM who need to maintain consistency on various domains, displays and media types. But I suspect it also can stiffle innovation.

[kaelig]

It also helps small teams build faster. A shared language around color, spacing, typography makes design/engineering collaboration way smoother, and reduces rework.

A good first step is to have your color palette in your design tool of choice consistent with the variable names used in CSS.

> But I suspect it also can stiffle innovation.

Like any system: it can both be empowering or the opposite.

It's a tough balancing act. Let's say you're Adobe, and you want Photoshop/Illustrator/InDesign to feel like a single family of products across web/iOS/iPadOS/Windows: where do you want to let feature teams innovate, and where must they adhere to the system so users can navigate seamlessly across these products and platforms?

[whoisstan]

Its like parenting, be loose and strict in the same way. You have to find a good balance given the team composition and corporate restrictions.