🌱 Design System 2025

LocallyGrown Design Showcase

A comprehensive gallery of components, patterns, and design decisions that power the LocallyGrown.net experience

46+ Components
Mobile First Design
WCAG Accessible
60fps Animations

Design Principles

🌱

Organic & Warm

Natural colors and rounded corners create a friendly, approachable feel that reflects our local market values.

📱

Mobile First

Every component is designed for touch interaction first, then enhanced for larger screens.

Accessible

WCAG AAA compliant with proper ARIA labels, keyboard navigation, and screen reader support.

Performant

GPU-accelerated animations, lazy loading, and optimized re-renders for smooth 60fps interactions.

Explore the Showcase

Built With

SvelteKit 2.0

Modern framework with Svelte 5 runes

TypeScript

Type-safe development

CSS Custom Properties

Dynamic theming system

Lucide Icons

Consistent iconography