4 ms·

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 d

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 2y ago
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 2y ago
  Agree, you tap into the rigidness of a semantic color and type hierarchy, while allowing utility classes for specifics of a platform/environment.
ActionHank 2y ago
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 2y ago
  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 2y ago
    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 2y ago
      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.

strogonoff 2y ago

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 2y ago
Agree, you tap into the rigidness of a semantic color and type hierarchy, while allowing utility classes for specifics of a platform/environment.

ActionHank 2y ago

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 2y ago
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 2y ago
  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 2y ago
    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.