Color

The design system uses Radix UI colors to ensure accessibility and easily maintain consistent code/design.

Additionally, to make both the integration with Tailwind CSS and the implementation of light/dark mode switching easy, the design system utilizes windy-radix-palette, a Tailwind CSS plugin that adds Radix UI colors as Tailwind classes with dark mode support.

Scales

The following are a subset of the scales by Radix UI used throughout the design system. You can find the complete list of scales on Radix UI's website.

Gray

The default color scale, labeled none.

Blue

The primary color scale, labeled primary.

Red

The color scale for fail states, labeled fail.

Green

The color scale for success states, labeled success.

Yellow

The color scale for warning states, labeled warning.

Orange

Just an orange color scale, labeled orange.