[jjcm]

With regards to color on the web, semantic tokens refer to css variables that are named in a way that describes their use, ie:

* bg-brand (this would be used whenever you need your brand color as a background)

* text-danger (likely a red text color)

* icon-warning-hover (likely a dark yellow-orange that's slightly different from icon-warning)

Generally speaking, there are three "levels" of tokens: primitive, semantic, and component. Primitive tokens describe the value. In the case of color, this might be a color ramp. IE red/100, red/200, red/300. Semantic tokens reference primitive tokens. IE bg-brand might have its value set to blue/300. This layer is sometimes called a "reference" layer because of this, but I'm not a fan of that nomenclature since the component layer also references the semantic layer. The component layer is one that describes where in a component the token should be used, ie button-bg or button-text. I highly, HIGHLY recommend against using a component layer though in all but the most extreme multi-brand situation. If you aren't unilever, you should never use component tokens.

[ZYbCRq22HbJ2y7]

Aren't there many, many schemes for naming tokens in design systems? Aren't you being a bit forward in presenting this as a general practice?

https://medium.com/eightshapes-llc/naming-tokens-in-design-s...

[jjcm]

Nathan is talking about naming schemes within each tier I mentioned, not different tiers. That blog is detailing naming schemes for the semantic and component layer.

The primitive/semantic/component set of tiers are a general practice. Naming within them heavily differs (and should!). The names you use for the individual tokens depend on goals and intent - ie Google’s material’s semantic layer uses a naming schema that’s designed for colorful variety of themes (albeit at the expense of clarity of how they should be used), whereas Apple uses a far more simplified naming schema since the design of their apps has far fewer design differences.

[ryanwhitney]

Not parent, but the generalization is true. There’s usually a base layer (red/300, etc) and a more semantic layer (.text-danger).

As your link covers, there’s then a million different ways to implement/extend that based on whatever theming and systems you’re implementing on top.

[recroad]

This only works if you don’t let users theme your site. If you do, then OPs approach works better.