Foundations

Color

Communicate hierarchy, state and brand.

Color variables are simple.

Figma inspection panel showing the color variable applied to an element

In design, you should see which color variable an individual element uses and use the corresponding variable in your implementation.

color: $blue-600;

All colors in the design should come from the predefined variables, so there should be no need to define new colors.

Dr. Max Design System • © 2026