Colors

Learn how we create and manage variables that improve consistency, maintainability and flexibility.

Overview

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

Colors are separated into two categories: Primitive Color Variables and Semantic Color Variables.

Primitive Colors

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

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

Structure variables define spacing, radius, and layout values

Typography

Typography variables define font family and heading styles