GardenPal Design System Demo

Comprehensive component library with garden-optimized accessibility

Buttons

Cards

Garden Planner

Plan your perfect garden layout

Use our interactive tools to design and visualize your garden space.

Plant Care

Track watering and maintenance

75% complete this week

Weather Alerts

Stay informed about conditions

Frost Warning

Good Growing Day

Form Components

Plant Registration Form

Add a new plant to your garden

Plant Name

Enter the common or scientific name

Plant Type

Care Requirements

Requires full sun

Needs regular watering

Cold hardy

Companion planting friendly

Data Display

Garden Team

Your gardening community

John Doe

Master Gardener

Sarah Miller

Plant Specialist

Mike Johnson

Garden Designer

Plant Status

Current status of your garden plants

Plant Name	Type	Status	Last Watered	Health
Cherry Tomatoes	Vegetable	Growing	2 days ago	90%
Roses	Flower	Needs Attention	5 days ago	65%
Basil	Herb	Thriving	1 day ago	95%

Alerts & Notifications

Garden Tip

Morning is the best time to water your plants for optimal absorption.

Weather Alert

Frost expected tonight. Consider covering sensitive plants.

Plant Health Warning

Your roses show signs of aphid infestation. Immediate action recommended.

Harvest Ready

Your tomatoes are ready for harvesting! Pick them while they're perfectly ripe.

Accessibility Testing

Keyboard Test: Button Navigation

Expected keys: Tab → Enter → Space

Status: Ready to test

Color Contrast Test - Text on Background

Contrast Ratio:17.85:1

WCAG AA (normal text):Pass ✓

Required Ratio:4.5:1

Sample text to demonstrate contrast ratio

Focus Test: Form Focus Order

Actual order: None recorded

First Field

Second Field

Screen Reader Test: Garden Announcement

Announcements made:

High Contrast Mode

Garden Visibility Optimization

Components automatically adapt for high contrast visibility needs

Accessibility Note

These components automatically enhance contrast when users enable high contrast mode in their system preferences, ensuring optimal visibility in all conditions.

Standard Mode

Plant Name

High Contrast Preview

Plant Name