Structuring your webstudio project

most of client-first methodology is basically a workaround for css classes and in particular how webflow uses them, so most of it won't be needed

Custom class - a one-off for a specific element, not needed, as you can style everything directly on Local style without naming anything at all.

Combo - not needed, as it solves the problem with webflow combo classes, tokens are simply composable, you can use multiple of them on one element

Utility - yes, you can create utility tokens, that's what we do most of the time.

Global - tokens are always global, available on every page, so the semantics of "Global" category here is kinda pointless.

There are effectively 2 kinds of tokens: semantic and utility

semantic would be when you want to name something based on how its used in a specific context, utility - a more reusable functional naming, can be reused everywhere

its a much simpler system overall

The more granular utilities you make, the more composable they get.
E.g. you could use tailwind-style atomic utilities, which define one property at a time

In that case its literally the same as using tailwind

We built webstudio.is using tailwind-style atomic tokens

cc @Alex we need to add a page to the docs that specifically compares a few popular naming methodologies and explains tokens from that lens.

This question is going to come up all the time and we really need a good write up to link to 🙏

we only have a general description of design tokens https://docs.webstudio.is/university/foundations/design-tokens

what we need is a "Token Naming Methodologies"

yes that would be great!