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 tset
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.