LawnGuru Design System

A comprehensive design system for building consistent, accessible, and beautiful lawn care experiences.

Last Updated: 2025-10-22 Version: 1.0.0 Status: 🟢 Active Development

📚 Table of Contents

Getting Started

• Introduction
• Getting Started Guide
• Design Principles
• Contributing

🎨 Foundations

Design tokens and core styles that form the foundation of the system.

• Color Palette - Brand colors, semantic colors, and usage guidelines ✅ Updated from Figma
• Typography - Font families, scales, and text styles ✅ Updated from Figma
• Spacing - Spacing scale and layout principles ✅ Updated from Figma
• Effects & Borders - Shadows, blur, radius, and borders ✅ NEW - From Figma
• Tokens - Design tokens reference
• Icons - Icon library and usage

🧩 Components

Reusable UI components with specs and code examples.

• Buttons - CTA and link button variants
• Forms - Input fields, selects, and form controls
• Cards - Content containers and layouts
• Navigation - Headers, menus, and navigation patterns
• Feedback - Alerts, toasts, and notifications
• Data Display - Tables, lists, and data visualization
• Modals - Dialogs and overlays

📐 Patterns

Common UI patterns and page layouts.

• Page Layouts - Standard page templates
• Responsive Patterns - Mobile-first responsive guidelines
• Forms Patterns - Complete form examples
• Navigation Patterns - App navigation structures

📖 Guidelines

Best practices and usage guidelines.

• Accessibility - WCAG compliance and a11y standards
• Writing Style - Voice, tone, and content guidelines
• Motion - Animation and transition principles

🚀 Introduction

The LawnGuru Design System is a collection of reusable components, patterns, and guidelines that help teams build consistent user experiences across all LawnGuru products and platforms.

Goals

• Consistency: Ensure a unified experience across all touchpoints
• Efficiency: Speed up design and development with reusable components
• Accessibility: Build inclusive products that work for everyone
• Quality: Maintain high standards for design and code

Who is this for?

• Designers: Use Figma components and design guidelines
• Developers: Implement with code examples and specs
• Product Managers: Understand patterns and best practices
• Content Writers: Follow voice and tone guidelines

🛠️ Tech Stack

This design system supports:

• Web: React, Next.js, Tailwind CSS
• Mobile: React Native
• Design: Figma

📦 Quick Links

• Figma Design Library
• Component Storybook (Coming Soon)
• NPM Package (Coming Soon)
• GitHub Repository

🤝 Contributing

We welcome contributions! Please read our Contributing Guide to learn how you can help improve the design system.

How to update documentation

1. Export updated screenshots from Figma
2. Run the documentation automation script
3. Review generated documentation
4. Submit for review

📞 Support

• Questions? Open a GitHub discussion
• Found a bug? File an issue
• Need help? Contact the design system team

📄 License

Proprietary - LawnGuru © 2025

Built with 🌱 by the LawnGuru team