Variables
Learn how we create and manage variables that improve consistency, maintainability and flexibility.
Last updated
Learn how we create and manage variables that improve consistency, maintainability and flexibility.
Last updated
Variables are used to maintain consistency across components, make design intent clear and enable easy style changes.
The Base System provides a strong foundation of variables for your project. Variables are grouped into four different collections; Colors, Typography, Structure, Elements
There’s no one-size-fits-all approach to variables—you’re encouraged to add, remove, or customize them to match your specific needs.
Colors are separated into two categories: Primitive Color Variables and Semantic Color Variables.
Primitive colors serve as the foundational colors of your design system. They define essential color tokens such as brand, neutral and system colors.
You can name your primitive colors however makes sense for your project.
Semantic colors map primitive values to meaningful use cases, making them easier to apply consistently across your project. For example, Primary, Secondary, and Tertiary would cover the first three most common background colors.
Structure variables define spacing, radius, and layout values
Typography variables define font family and heading styles
