Base Design System

With the base design system, you can use system and reference tokens to ensure color, typography, spacing, and shape values are consistent across your site.

What are design tokens?

Design tokens are design decisions that ensure a unified and cohesive product experience. The tokens represent a consistent use of design data that provides specific values for spacing, color, typography, and shapes—without hard-coding those values.

Our Base design tokens are directly integrated into our shared components. They cover the various options for platforms, component states, and more.

Extending the baseline design tokens

Base includes a set of baseline design tokens and default values for you to customize, collaborate on, and use in your own designs and product implementation.

It’s important to keep in mind that not every component is going to be captured in the foundational and baseline design tokens. If they’re limited for what you’re trying to design or build, just add in the tokens you may need within each category.

How to use design tokens

To apply design tokens on your project, make use of the UIProvider, which grants components access to the design tokens as CSS variables. Simply specify the desired design token using the var() CSS function to apply its corresponding value.

.myComponent {
  background-color: var(--color-brand-500);
}