Naming & structure

You called it brandColor. Then brandColor2. Then newBrandColor. The third engineer has no idea which one to use.

A name has to encode the tier. color.primitive.blue.600 is a fact. color.semantic.primary is a decision. component.button.bg is a place. If you have to explain the name, rename it.

Flip the scheme. Same tokens, same button. Only the names change.

brandColor2primary fill

btnBgbutton background

theRoundnesscorner radius

Same button. You have to ask someone what each name means.

btnBg tells you nothing about the tier. component.button.bg does. The next engineer can find it without asking you.