Creating new color 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.

1. Add a color variable
2. Add both ⁠variable-name-light and ⁠variable-name-dark to the colors group in the Theme collection
3. Edit the scope to ensure proper application
4. Add ⁠variable-name to the Mode collection
5. Edit the scope to ensure proper application
6. Use your new ⁠variable-name in components as needed