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 - none

The default color scale, labeled none.

Blue - primary

The primary color scale, labeled primary.

Red - fail

The color scale for fail states, labeled fail.

Green - success

The color scale for success states, labeled success.

Yellow - warning

The color scale for warning states, labeled warning.

Orange - orange

Just an orange color scale, labeled orange.