Colors & Typography
Comprehensive design system with usage guidelines and accessibility considerations
Primary (Blue)
Main brand colors for primary actions, links, and key UI elements
Secondary (Indigo)
Supporting colors for secondary actions and complementary UI elements
Neutral (Gray)
Neutral colors for text, backgrounds, and subtle UI elements
Semantic
Colors for status indicators, alerts, and feedback
Gradients
Primary Gradient
from-blue-600 to-indigo-600Subtle Background
from-blue-50 to-indigo-100Neutral Gradient
from-gray-50 to-gray-100Typography Scale
Display Text
text-6xl font-boldFor hero sections and major headings
Heading 2
text-4xl font-boldHeading 3
text-2xl font-boldHeading 4
text-xl font-boldHeading 5
text-lg font-semiboldLarge body text provides better readability for important content and improves accessibility. This size is ideal for introductory paragraphs and highlighted information.
text-lg leading-relaxedBase body text is the standard size for most content. It offers excellent readability while maintaining good information density. Use this for articles, descriptions, and general content.
text-base leading-relaxedSmall text works well for captions, metadata, and secondary information that doesn't need emphasis.
text-smFont Weights
Bold (700)
font-boldFor headings and strong emphasis
Semibold (600)
font-semiboldFor subheadings and important text
Medium (500)
font-mediumFor labels and UI elements
Regular (400)
font-normalFor body text and general content
Usage Guidelines
✅ Do's
- Use blue-600 for primary actions and CTAs
- Maintain 4.5:1 contrast ratio for accessibility
- Use consistent color for similar UI elements
- Consider color blindness when choosing combinations
❌ Don'ts
- Don't use color alone to convey meaning
- Avoid pure black (#000000) on white backgrounds
- Don't use too many colors in one interface
- Avoid low contrast combinations