Skip to main content
Question

Design tokens correct naming


Helium1

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?

0 replies

Be the first to reply!

Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings