Learn more about color gradients here: docs.tokens.studio/token-types/...



Check out Tokens Studio for Figma plugin: tokens.studio/plugin?utm_s...

I set up my color gradients in a separate token set, allowing me to export the color scale as Figma variables and the gradients as Figma styles linked to those variables.

In this example, I take the color scale I created and use those as reference to create gradients. 🌈

The format for defining these gradients is:
linear-gradient(45deg, color-1 0%, color-2 100%)

You can add as many color stops as you want to customize your gradients further

Explore Tokens Studio for Figma:
tokens.studio/plugin?utm_s...
Read more about color modifiers here:
docs.tokens.studio/token-types/...

Next, I define steps to lighten and darken the colors. Using these steps, I adjust the primary, secondary, and tertiary colors to create a complete color scale. 🌈 
I then export this scale as Figma variables, ready to use in any design! 🎨

I've organized the brand colors into a token set named 'brand'. 🌟
Then, I create a core/colors token set to define primary, secondary, and tertiary colors. This approach keeps our design tokens structured and adaptable for any project! 🎨