Colors
A comprehensive guide to using colors effectively in your UI. Good color usage improves usability, establishes hierarchy, and creates visual harmony.
Brand Colors
Our primary brand palette uses purple and indigo tones.
Purple (Brand)
Indigo (Accent)
Neutral Colors
Slate grays for text, backgrounds, and borders.
Slate
Semantic Colors
Colors for success, warning, and error states.
Success (Emerald)
Warning (Amber)
Error (Rose)
Accent Colors
Cyan for highlights and accents.
Cyan
Usage Guidelines
Primary Actions
Use purple-500/600 for main CTAs and interactive elements.
Text Colors
Use slate-900 for headings, slate-600 for body, slate-400 for muted.
Backgrounds
Use slate-50/100 for subtle backgrounds, white for cards.
Semantic Colors
Use success, warning, error for status and feedback.
Contrast & Accessibility
Always ensure sufficient color contrast for accessibility (WCAG 2.1):
- 4.5:1 - Minimum for normal text (AA)
- 3:1 - Minimum for large text (18px+) and UI elements
- 7:1 - Enhanced contrast (AAA)
Quick Reference
Using Colors in Code
// Using Tailwind classes
<button className="bg-purple-600 hover:bg-purple-700 text-white">
Primary button
</button>
<p className="text-slate-600 dark:text-slate-400">
Body text with dark mode support
</p>
<div className="border-slate-200 dark:border-slate-800">
Card border
</div>
// Gradient backgrounds
<div className="bg-gradient-to-r from-purple-600 to-indigo-600">
Gradient background
</div>Best Practices
Limit your palette
Stick to 2-3 colors plus neutrals. Too many colors create visual noise.
Use color consistently
Purple for actions, rose for errors, etc. Consistent usage builds user intuition.
Don't rely on color alone
Always pair color with icons, text, or patterns for accessibility.
Avoid pure black
Use slate-900 instead of #000000 for softer, more readable text.