Skip to main content

Hello, we are looking to set up a new Design System in my company and can’t decide on the 2 or 3 tier system for tokens. Due to very limited resources, we are leaning towards 2 tiers, but I really like the idea of Component-specific tokens (3rd tier).


I have found a tutorial demonstrating the setup of Semantic tokens, but they were actually categorised and named as Component-specific (video link: https://www.youtube.com/watch?v=1O2sROtE3uI)

 

Is this a usual practice? Could we define some Component specific tokens on the second level alongside Semantic tokens? 
 

Any advice is very welcome. Thank you.

 

 

Hi ​@IvanaCat 

 

I’ve been working with design systems for a while and currently curate one for a large organisation.

 

I highly recommend contextually naming your tokens and applying them on the component level. We divide ours by usage, but include some component specific references i.e. - button/primary--hover, -button/primary-label--hover, and so on. Other categories include borders ( - border/default, -border/active, - border/error, -border/warning etc.), surfaces, icons, etc and all are linked to brand palettes (referred to as primitives in the video) with some tints included for better translation of a traditional print based brand guidelines into a digital application.

This approach works well when considering adding themes to your designs.

 Hope that helps.

 

Reply


Terms & ConditionsCookie settings