Creating new color variables
In this lesson, you will learn to enhance your styling by adding custom variables.
Instructions
Our Figma kit supports custom variable creation, but before adding new variables, consider whether they're truly necessary. The existing shadcn/ui and Tailwind CSS systems cover most design needs, and introducing unnecessary variables may complicate your design system. The following guide demonstrates how to add new variables that remain consistent with Tailwind CSS classes and the shadcn/ui variable system.
- Add a color variable
- Add both variable-name-light and variable-name-dark to the colors group in the Theme collection
- Edit the scope to ensure proper application
- Add variable-name to the Mode collection
- Edit the scope to ensure proper application
- Use your new variable-name in components as needed
Up next
Example - Warning color variables
In this lesson, we'll define and apply warning color variables, showing you a real life example of how to add custom variables.