Color

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

Additionally, the design system utilizes windy-radix-palette, a Tailwind CSS plugin that adds Radix UI colors as Tailwind classes, to integrate with Tailwind CSS easily.

Scales

The following are the 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 or compose a custom palette.

Gray

The default color scale, labeled none.

Blue

The primary color scale, labeled info.

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.