Design System
The foundation of LocallyGrown's visual language
Color Palette
Our warm, earthy palette reflects LocallyGrown's connection to nature and community. All colors meet WCAG AA accessibility standards.
Primary Colors
Dark Primary #2d452f
Primary #466d4d
Secondary #6d8d57
Accent #a4a948
Background Colors
Background #ffffff
Surface Secondary #f9fafb
Surface Muted #f3f4f6
Dark Mode Background Colors
Dark Background #1a1a1a
Dark Secondary #242424
Dark Tertiary #2a2a2a
Text Colors
Text Primary #111827
Text Secondary #374151
Text Muted #6b7280
Semantic Colors
Success #10b981
Warning #f59e0b
Error #ef4444
Info #3b82f6
Typography
Clean, readable typography that works across all devices and screen sizes.
Heading 1
font-size: 2.5rem; font-weight: 700;Heading 2
font-size: 2rem; font-weight: 600;Heading 3
font-size: 1.5rem; font-weight: 600;Body text lorem ipsum dolor sit amet, consectetur adipiscing elit.
font-size: 1rem; line-height: 1.7;Small text for captions and metadata
font-size: 0.875rem; color: var(--lg-text-muted);Spacing System
Consistent spacing creates rhythm and hierarchy throughout the interface.
Space 2 8px
Space 3 12px
Space 4 16px
Space 5 20px
Space 6 24px
Space 8 32px
Space 10 40px
Space 12 48px
Interactive States
Consistent feedback for all interactive elements.
Design Principles
🌱 Natural
Organic shapes and earthy colors that reflect our farm-to-table roots
♿ Accessible
WCAG AAA compliant with focus on inclusive design for all users
📱 Mobile-First
Optimized for touch with minimum 48px tap targets
âš¡ Performance
60fps animations and optimized for slow connections