SEO

greenlens-promo/DESIGN.md

@@ -0,0 +1,53 @@
+# 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.