# AvoidMosquitos.com — Design Ideas

## Three Stylistic Approaches

### Approach A — "Trail Ranger"
Rugged, utilitarian outdoors aesthetic inspired by national park signage and REI-style gear catalogs. Earthy browns, olive greens, and worn canvas textures. Feels like a trusted field guide.
**Probability:** 0.07

### Approach B — "Deep Canopy" ✅ CHOSEN
Lush, immersive nature aesthetic drawing from tropical jungle photography and conservation science branding. Deep forest greens, warm amber accents, and rich dark backgrounds with organic shapes. Feels authoritative, adventurous, and trustworthy — like a seasoned travel naturalist's journal.
**Probability:** 0.04

### Approach C — "Clean Expedition"
Crisp, modern outdoor-gear brand aesthetic with white space, bold typography, and accent pops of safety orange. Minimal and conversion-focused like an outdoor e-commerce brand.
**Probability:** 0.02

---

## Chosen Approach: "Deep Canopy"

### Design Movement
Tropical Naturalism meets Editorial Science — inspired by National Geographic field guides, Patagonia conservation campaigns, and premium outdoor travel brands.

### Core Principles
1. **Depth over flatness** — layered backgrounds, subtle textures, and shadow depth create an immersive environment
2. **Authority through restraint** — generous whitespace and structured typography signal expertise, not clutter
3. **Nature as texture** — organic shapes, leaf motifs, and earthy gradients replace geometric patterns
4. **Warmth within darkness** — dark forest backgrounds with warm amber/gold accents create a campfire-at-dusk feeling

### Color Philosophy
- **Background:** Deep forest green `oklch(0.18 0.06 155)` — like the forest floor at dusk
- **Surface/Card:** Slightly lighter `oklch(0.22 0.05 155)` — mossy stone
- **Primary Accent:** Warm amber `oklch(0.72 0.18 70)` — like lantern light or firefly glow
- **Secondary Accent:** Sage green `oklch(0.55 0.12 145)` — fresh leaf
- **Text:** Warm cream `oklch(0.93 0.03 80)` — aged parchment
- **Muted Text:** `oklch(0.65 0.04 140)` — lichen grey-green

### Layout Paradigm
Asymmetric editorial layout — hero sections use full-bleed imagery with diagonal text overlays. Content sections alternate between left-heavy and right-heavy layouts. Product cards use a masonry-inspired staggered grid. Avoid centered-everything layouts.

### Signature Elements
1. **Organic dividers** — SVG leaf/wave shapes between sections instead of straight lines
2. **Amber glow CTAs** — all primary buttons use warm amber with a subtle glow effect
3. **Field-note typography** — section labels use small-caps tracking to evoke scientific field notes

### Interaction Philosophy
Interactions feel like exploring nature — hover states reveal information gradually (like turning over a leaf), scroll animations bring content in from the sides like emerging from forest cover.

### Animation
- Entrance: elements fade in with slight upward drift (translateY 20px → 0, opacity 0 → 1, 400ms ease-out)
- Hover on cards: subtle lift with shadow deepening (translateY -4px, shadow expansion, 200ms)
- CTA buttons: amber glow pulse on hover, scale(0.97) on active
- Navigation: smooth slide-down on scroll with backdrop blur transition
- Stagger grouped items by 60ms

### Typography System
- **Display/Headlines:** `Playfair Display` — serif with editorial authority, used for H1/H2
- **Body/UI:** `Source Sans 3` — clean, readable, slightly condensed for content density
- **Labels/Tags:** Small-caps tracking with `Source Sans 3` weight 600
- Hierarchy: 4xl/bold for heroes, 2xl/semibold for section heads, base/regular for body

### Brand Essence
The definitive outdoor guide for mosquito-free adventures — for travelers and nature lovers who refuse to let bugs ruin the experience. **Authoritative. Adventurous. Practical.**

### Brand Voice
Headlines are direct and empowering: "Take Back Your Backyard." "Bite-Free, Every Time."
CTAs are action-oriented: "Find Your Solution" / "Get the Free Guide"
No filler phrases like "Welcome to our website."

### Wordmark & Logo
A stylized mosquito silhouette inside a crossed-out shield/circle, rendered in amber on forest green. Bold, iconic, immediately communicates the brand purpose.

### Signature Brand Color
**Amber Gold** `oklch(0.72 0.18 70)` — warm, distinctive, evokes lantern light and outdoor adventure.