Color Palette
The complete collection of color tokens available in the design system. Use the Theme Settings page to change the active brand color.
To change the brand color theme, go to Theme Settings.
Full Color Palette
The complete collection of colors available in your theme.
Brand
Neutral
Red
Orange
Yellow
Green
Blue
Cyan
Violet
Purple
Pink
Best Practices
Guidelines for implementing themes effectively in your application.
Accessibility
Our themes are designed to pass WCAG 2.1 AA contrast ratios for common elements like buttons and text.
Consistency
Use semantic tokens (e.g. --primary) instead of hex values to ensure your app automatically updates.
Dark Mode
The .dark class
switches the variable mapping. All OKLCH values are optimized for low-light.