54 lines
2.9 KiB
Markdown
54 lines
2.9 KiB
Markdown
# 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.
|