Comment by 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.