Skip to main content

I’m brushing up on my design token learning and applying it to my design system. Is someone able to correct me on this if I'm wrong?

So I’m redoing my design system variables because I realized I did something wrong. What is the correct naming convention? Let’s go by ‘text’

Text color tokens are what I am redoing.

 

Heading (Disregard this, just a placeholder)

Text/Heading/Primary

Text/Heading/Secondary

 

Body (“”)

Text/Default/Primary

Text/Default/Secondary

 

Label [Button]

Text/Label [Button]/Primary/Default-Hover-Focused

Text/Label [Button]/Primary/Disabled

 

Text/Label [Button]/Secondary [Outlined]/Default

Text/Label [Button]/Secondary [Outlined]/Hover

Text/Label [Button]/Secondary [Outlined]/Clicked

Text/Label [Button]/Secondary [Outlined]/Disabled

 

Text/Label [Button]/Link/Default

Text/Label [Button]/Link/Hover

Text/Label [Button]/Link/Clicked

Text/Label [Button]/Link/Disabled

 

FYI: I have displayed 2 modes, ‘light’ and 'dark', instead of making an ‘…/…/inverted’ token since it would be redundant.

 

Are these correct, or am I doing them wrong?

Be the first to reply!