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
The Base System provides a strong foundation of variables for your project. Variables are grouped into four different collections; Colors, Typography, Structure, Elements
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. We tend to use a numeric scale 50-950 but you can also use a semantic scale such as Lightest to Darkest.
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
