Because I’ve found the CTI (Category/Type/Item) Structure very rigid and sometimes you find yourself trying to squeeze things inside this strict organisation, while having a more loose organisation would allow you to have a more semantic and meaningful 1) naming and 2) structure for your tokens.

Especially when you work with a lot of components, it’s easier to reason and work in this way:

- button-padding-size: ...
- button-font-size: ...
- button-font-color-primary: ...
- button-font-color-secondary: ...
- button-background-primary: ...
- button-background-secondary: ...

than in this way (CTI):

- size-padding-button: ...
- size-font-button: ...
- color-font-button-primary: ...
- color-font-button-secondary: ...
- color-background-button-primary: ...
- color-background-button-secondary: ...

You can see an example here: https://github.com/amzn/style-dictionary/blob/3d0d1c0356d42fc83f905a7e7e4b1c662c77de0b/examples/advanced/component-cti/README.md (this Readme has been written by Danny Banks, the creator of Style Dictionary — and the CTI structure — itself :)

Written by

Passionate web designer & developer. In love with Atomic Design, Design Systems & CSS architecture. Attendee/speaker/organiser of tech conferences and meetups.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store