Colors
A comprehensive color system using CSS custom properties for consistent theming.
Primary
Secondary
Success
Destructive
Code
Usage
// Background colors
<div className="bg-primary">Primary background</div>
<div className="bg-secondary">Secondary background</div>
<div className="bg-success">Success background</div>
// Text colors
<p className="text-primary">Primary text</p>
<p className="text-muted-foreground">Muted text</p>
// Border colors
<div className="border border-border">Border</div>CSS Variables
:root {
--primary: 0 0% 7%;
--primary-foreground: 0 0% 100%;
--secondary: 0 0% 100%;
--destructive: 352 100% 54%;
--success: 166 92% 33%;
--muted: 0 0% 96.1%;
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
}Reference
Color Palette
Primary
Main brand color for primary actions
CSS Variable:
--primaryLight Default:
hsl(0 0% 7%)Dark Default:
hsl(0 0% 98%)Class:
bg-primarySecondary
Secondary actions and backgrounds
CSS Variable:
--secondaryLight Default:
hsl(0 0% 100%)Dark Default:
hsl(0 0% 100%)Class:
bg-secondaryDestructive
Error states and destructive actions
CSS Variable:
--destructiveLight Default:
hsl(352 100% 54%)Dark Default:
hsl(0 62.8% 30.6%)Class:
bg-destructiveSuccess
Success states and positive feedback
CSS Variable:
--successLight Default:
hsl(166 92% 33%)Dark Default:
hsl(142 76% 36%)Class:
bg-successMuted
Subtle backgrounds and content
CSS Variable:
--mutedLight Default:
hsl(0 0% 96.1%)Dark Default:
hsl(0 0% 14.9%)Class:
bg-mutedAccent
Highlighted elements and hover states
CSS Variable:
--accentLight Default:
hsl(0 0% 96.1%)Dark Default:
hsl(0 0% 95%)Class:
bg-accentBackground
Main page background
CSS Variable:
--backgroundLight Default:
hsl(0 0% 100%)Dark Default:
hsl(0 0% 3.9%)Class:
bg-backgroundCard
Card and container backgrounds
CSS Variable:
--cardLight Default:
hsl(0 0% 100%)Dark Default:
hsl(0 0% 3.9%)Class:
bg-cardUtility Colors
Border
Input
Ring
Popover
Usage Guidelines
When to Use
Use primary colors for main actions, buttons, and important UI elements. Use secondary for less prominent actions. Use destructive for errors and dangerous actions, success for positive feedback.
Muted colors work well for subtle backgrounds and secondary content. Accent colors highlight interactive elements and hover states. Background and card colors provide structure and hierarchy.
Best Practices
- Always pair background colors with their corresponding foreground colors
- Use semantic colors (success, destructive) to convey meaning
- Maintain sufficient contrast for accessibility
- Use CSS variables for theme support
- Respect dark mode color values