Design System
Comprehensive documentation of design tokens, components, and patterns used throughout the application.
🎨 Color Palette
The color system consists of light and dark themes with consistent naming and usage patterns.
Primary Background
#FFFFFF
Main page background
Secondary Background
#F8FAFC
Section backgrounds (Slate 50)
Tertiary Background
#F1F5F9
Borders and accents (Slate 100)
Primary Text
#0F172A
Main headings and text (Slate 900)
Secondary Text
#475569
Body text and descriptions (Slate 600)
Muted Text
#94A3B8
Subtle text and metadata (Slate 400)
Inverse Text
#FFFFFF
Text on dark backgrounds
Primary Button
#6366F1
Main action buttons (Indigo)
Primary Button Hover
#4F46E5
Button hover state (Indigo 600)
Secondary Button
#EC4899
Secondary actions (Pink)
Secondary Button Hover
#DB2777
Secondary button hover (Pink 600)
Disabled Button
#CBD5E1
Disabled button state (Slate 300)
Border Color
#E2E8F0
Borders and dividers (Slate 200)
Divider Color
#CBD5E1
Section dividers (Slate 300)
Success Alert
#10B981
Success messages (Emerald)
Warning Alert
#F59E0B
Warning messages (Amber)
Error Alert
#EF4444
Error messages (Red)
Info Alert
#06B6D4
Information messages (Cyan)
Accent Color
#8B5CF6
Links and highlights (Purple)
Card Background
#FFFFFF
Card components
Primary Background
#0F172A
Main page background (Slate 900)
Secondary Background
#1E293B
Section backgrounds (Slate 800)
Tertiary Background
#334155
Borders and accents (Slate 700)
Primary Text
#F1F5F9
Main headings and text (Slate 100)
Secondary Text
#CBD5E1
Body text and descriptions (Slate 300)
Muted Text
#64748B
Subtle text and metadata (Slate 500)
Inverse Text
#0F172A
Text on light backgrounds (Slate 900)
Primary Button
#818CF8
Main action buttons (Lighter Indigo)
Primary Button Hover
#A5B4FC
Button hover state (Indigo 300)
Secondary Button
#F472B6
Secondary actions (Lighter Pink)
Secondary Button Hover
#F9A8D4
Secondary button hover (Pink 300)
Disabled Button
#475569
Disabled button state (Slate 600)
Border Color
#334155
Borders and dividers (Slate 700)
Divider Color
#475569
Section dividers (Slate 600)
Success Alert
#34D399
Success messages (Lighter Emerald)
Warning Alert
#FCD34D
Warning messages (Lighter Amber)
Error Alert
#F87171
Error messages (Lighter Red)
Info Alert
#22D3EE
Information messages (Lighter Cyan)
Accent Color
#A78BFA
Links and highlights (Lighter Purple)
Card Background
#1E293B
Card components (Slate 800)
🧩 Typography System
Typography hierarchy and font specifications for consistent text styling.
Inter
The quick brown fox jumps over the lazy dog
All headings (H1-H6)
DM Sans
The quick brown fox jumps over the lazy dog
Body text and buttons
System Fonts
The quick brown fox jumps over the lazy dog
Fallback font stack
H1 - Page Title
Size: 2.5rem
Line Height: 1.2
Usage: Page titles
H2 - Section Heading
Size: 2rem
Line Height: 1.3
Usage: Section headings
H3 - Subsection
Size: 1.75rem
Line Height: 1.3
Usage: Subsection headings
H4 - Card Title
Size: 1.5rem
Line Height: 1.4
Usage: Card titles
H5 - Minor Heading
Size: 1.25rem
Line Height: 1.4
Usage: Minor headings
H6 - Small Heading
Size: 1rem
Line Height: 1.5
Usage: Small headings
Body Text
Size: 1rem
Line Height: 1.6
Usage: Body text
Small Text
Size: 0.875rem
Line Height: 1.5
Usage: Captions and metadata
Regular Weight
Weight: 400
Usage: Regular body text
Medium Weight
Weight: 500
Usage: Emphasized text
Bold Weight
Weight: 700
Usage: Headings and important text
📦 Layout & Spacing
Spacing system, border radius, shadows, and responsive breakpoints.
XS
0.25rem
Tight spacing, small gaps
SM
0.5rem
Small components, icon spacing
MD
1rem
Standard spacing, component padding
LG
1.5rem
Section spacing, large components
XL
2rem
Major sections, large layouts
2XL
3rem
Page sections, major spacing
SM
0.25rem
Small elements, buttons
MD
0.5rem
Standard components, inputs
LG
0.75rem
Cards, large components
XL
1rem
Panels, major elements
FULL
9999px
Circles, fully rounded elements
SM
0 1px 2px rgba(0, 0, 0, 0.05)
Subtle depth, small cards
MD
0 4px 6px rgba(0, 0, 0, 0.1)
Standard depth, cards
LG
0 10px 15px rgba(0, 0, 0, 0.1)
Elevated elements, modals
XL
0 20px 25px rgba(0, 0, 0, 0.15)
High elevation, important elements
Mobile
576px
Mobile devices
Tablet
768px
Tablets
Desktop
992px
Small desktops
Large
1200px
Large desktops
🔘 UI Components
Interactive components and their various states and variants.
Success! This is a success message.
Warning! This is a warning message.
Error! This is an error message.
Info! This is an informational message.
This is the card content. It contains the main information or description.
Elevated Card
This card has additional elevation for emphasis.
📋 Design Guidelines
Best practices and guidelines for using the design system effectively.
- Use primary colors for main backgrounds and surfaces
- Reserve accent colors for links, highlights, and call-to-actions
- Ensure sufficient contrast ratios for accessibility (WCAG AA)
- Test colors in both light and dark themes
- Consider color blindness when choosing color combinations
- Maintain consistent font hierarchy across all pages
- Use Inter for headings and DM Sans for body text
- Ensure minimum 16px font size for body text on mobile
- Keep line length between 50-75 characters for readability
- Use proper line heights (1.4-1.6) for body text
- Use the 8px grid system for consistent spacing
- Maintain consistent spacing between related elements
- Use larger spacing for section breaks
- Ensure adequate touch targets (44px minimum) for mobile
- Consider content hierarchy when applying spacing
- Follow established button patterns and states
- Use cards consistently for content grouping
- Implement proper focus indicators for accessibility
- Include appropriate ARIA labels and roles
- Test components across different screen sizes