Colors
Color palette and design tokens for the design system.
BaseTailwind CSS
Overview
Our color system includes neutral grays and semantic accent colors. All colors are designed to work in both light and dark modes with sufficient contrast ratios.
When to use
- Gray scale for text hierarchy and UI surfaces
- Accent colors for semantic states and branding
- Maintain WCAG AA contrast standards
- Consider dark mode when choosing combinations
Preview
Usage
html
// Use Tailwind color classes: bg-gray-900, text-info-emphasis, etc.Class Variations
No class variations documented for this pattern.
Guidelines
No specific guidelines documented for this component yet.
Examples
Color Tokens
Interactive color swatches with click-to-copy functionality