🎨 Color Palette
Primary Orange
#FF753A
CTAs, highlights
Blue
#0164DD
Links, info
Teal
#01C0B6
Success, calm
Yellow
#FF9D03
Warnings, energy
Navy
#192E44
Headers, dark text
Red
#950101
Crisis, urgent
Snuggli Design System
Core design tokens and component guidelines
📏 Spacing Scale
XS4px• Tight spacing
SM8px• Component gaps
MD16px• Standard spacing
LG24px• Section spacing
XL32px• Large sections
✍️ Typography
Heading 1
text-3xl font-boldHeading 2
text-2xl font-semiboldHeading 3
text-xl font-semiboldBody text
text-baseSmall text
text-sm🔘 Buttons
🏷️ Badges
Primary
Info
Success
Warning
Error
Outline
📝 Form Elements
📦 Cards
Use DashboardCard for all content containers
Basic Card
Standard content card with border
Elevated Card
Card with shadow for emphasis
♿ Accessibility
✓
44px minimum touch targets
All interactive elements meet mobile standards
✓
WCAG AA contrast ratios
Text maintains 4.5:1 contrast minimum
✓
Focus states
Visible keyboard navigation indicators
✓
Screen reader support
ARIA labels and semantic HTML