# Design System

## Overview

GreenLens uses a premium botanical landing-page identity: dark forest surfaces, cream typography, warm coral CTAs, and layered plant imagery. The design combines editorial serif headlines with practical app UI cards, bento-style feature blocks, and cinematic plant photography. It should feel calm, intelligent, and tactile rather than loud or generic.

## Colors

- **Forest Surface**: `#131f16` - primary dark background.
- **Forest Alt**: `#1c2e21` - secondary panels and depth layers.
- **Leaf Green**: `#2a5c3f` - core brand green.
- **Leaf Mid**: `#3d7a56` - supporting accents and UI strokes.
- **Leaf Light**: `#56a074` - highlights, scan lines, and positive states.
- **Coral CTA**: `#e07a50` - primary action color.
- **Coral Hover**: `#c96840` - darker warm accent.
- **Cream**: `#f4f1e8` - main text on dark backgrounds.
- **Cream Alt**: `#eae6d8` - quiet surfaces and secondary text.
- **Muted Sage**: `#7a8c7d` - secondary labels.

## Typography

- **Display**: Playfair Display, Georgia, serif. Used for large brand headlines and emotional words. Weight 900 for confident title moments, italic for botanical emphasis.
- **Body/UI**: Inter, system sans-serif. Used for labels, feature chips, captions, and app-style interface cards. Weights 500-800 for product promo readability.
- **Hierarchy**: Promo hero text can sit between 86-132px. Scene headings should stay above 64px. Captions and UI labels should stay above 22px for encoded video clarity.

## Elevation

Depth comes from layered photos, soft radial glows, thin cream/green translucent borders, and rounded UI panels. Avoid generic hard drop shadows; use warm bloom, inset highlights, glassy overlays, and perspective tilt on app frames.

## Components

- **Cinematic Hero Split**: Editorial text on one side with a framed app/demo visual on the other.
- **Scan Badge**: Small rounded status label with a pulsing green dot.
- **Bento Feature Cards**: Rounded image cards with dark overlays, feature chips, and short action headlines.
- **Botanical Intelligence Panel**: AI analysis visual paired with compact capability rows.
- **Step Timeline**: Four numbered actions: photograph, identify, care plan, growth tracking.
- **Store CTA Row**: Two compact dark buttons with platform labels.

## Do's and Don'ts

### Do's

- Use `#131f16`, `#f4f1e8`, `#56a074`, and `#e07a50` as the recognizable brand anchors.
- Keep plant imagery visible and moving with slow zooms, pans, and layered parallax.
- Use Playfair Display for the largest words and Inter for product facts.
- Treat UI as crafted panels with borders, glows, and botanical scan details.

### Don'ts

- Do not switch into neon tech blues or generic SaaS purple.
- Do not make the promo text-only; the website depends on plant and app visuals.
- Do not use flat, static screenshots without motion treatment.
- Do not use hard black-white contrast when cream and forest tones are available.