Color system

The color system is arguably the most important part of Design Tokens. If you’re unsure about how to organize and name color variables, shadcn/ui’s naming convention  is a great starting point:

Generally, background is used for background colors, foreground is used for text colors. When background is used for a component’s background color, such as colors/card/DEFAULT¹, the background suffix is omitted. From this foundation, you can gradually expand to more variables:

Top-level directory

Please use colors or color as the top-level directory for all color-related variables. This not only makes your variable structure clearer but also ensures perfect compatibility with Tailwind CSS.

Create color palettes

In a Design System, we often use a series of color palettes as atomic variables, such as colors/blue/400, colors/red/300, etc. To create such palettes and use them in the development environment, you need to follow the rules of the top-level directory, placing them under the colors or color directory in Figma Variables. For example:

Blue palette

• colors/blue/50
• colors/blue/100
• colors/blue/200
• colors/blue/300
• colors/blue/400
• colors/blue/500
• colors/blue/600
• colors/blue/700
• colors/blue/800
• colors/blue/900
• colors/blue/950

Red palette

• colors/red/50
• colors/red/100
• colors/red/200
• colors/red/300
• colors/red/400
• colors/red/500
• colors/red/600
• colors/red/700
• colors/red/800
• colors/red/900
• colors/red/950

Or from a simple starting point:

Blue palette

• colors/blue

Red palette

• colors/red

Use color palettes

In Figma, reference higher-level color palettes, such as:

• colors/primary references colors/blue/500
• colors/secondary references colors/red/500

Opacity modifiers

Variables Xporter provides powerful color processing capabilities, automatically generating color variables that comply with Tailwind CSS rules. During development, you can easily use opacity modifiers to flexibly adjust the transparency of colors  without the need for additional variable definitions.

<!-- Text opacity adjustment -->
<div class="text-primary/80">Text opacity adjustment</div>
<div class="text-secondary/60">Text opacity adjustment</div>
 
<!-- Background opacity adjustment -->
<div class="bg-primary/10">Background opacity adjustment</div>
<div class="bg-accent/90">Background opacity adjustment</div>
 
<!-- Border opacity adjustment -->
<div class="border-2 border-primary/30">Border opacity adjustment</div>