Greenlens/greenlens-promo/DESIGN.md

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.