Color
Our color system is built on top of Radix Colors, providing a robust and accessible color palette that works seamlessly across light and dark themes.
Usage Patterns
There are two ways to use colors in our system. The recommended approach is to use automatic theme switching, but theme-specific colors are available when needed.
Automatic Theme Switching (Recommended)
Use the base color classes without theme suffixes. These will automatically switch between light and dark modes:
text-gray-12
bg-blue-9 Theme-Specific Colors
Use the theme-specific suffixes when you need explicit control over light and dark modes:
text-gray-12-light
text-gray-12-dark Available Colors
Our color system includes several categories of colors, each serving specific purposes in the interface.
Core Colors
- background
- Base background colors for light/dark modes
- foreground
- Base text colors for light/dark modes
Scale Colors
Each color comes in 12 steps (1-12) with semantic meaning:
- gray
- Primary color used for text, backgrounds, and borders
- grayA
- Primary color with transparency, used for backgrounds and borders
- blue
- Used for notifications
- grass
- Success and positive states
- orange
- Warning states
- tomato
- Error and destructive states
Special Colors
- white
- Pure white (hsl(0 0% 100%))
- black
- Pure black (hsl(0 0% 6.67%))
- transparent
- Transparent color
- current
- CurrentColor value
Best Practices
Follow these guidelines to ensure consistent and accessible use of colors throughout your application.
- • Use the automatic theme switching pattern when possible for consistent dark mode support
- • Refer to Figma for the most up-to-date color usage guidelines
- • Consult with the Design Team for any color-related questions or uncertainties
- • Use semantic colors appropriately (e.g. grass for success, tomato for errors)
- • Ensure sufficient contrast ratios for accessibility
- • Do not use grayA colors for text
Resources
Learn more about our color system and Radix Colors implementation through these resources.