Nature
Mission
Bring the outdoors in — evoke growth, sustainability, and organic warmth through earth tones, botanical textures, and irregular natural forms.
Brand
🎨 Colors
#2D6A4F— Primary (forest green)#8B6914— Secondary (earth brown)#D4A373— Accent (warm sand)#F0EFE9— Background (cream/eggshell)#1B4332— Text (deep pine)#6B705C— Muted text (sage gray)
🔤 Typography
- Heading: Lora (Google Fonts) — organic, readable serif with calligraphic roots
- Body: Karla (Google Fonts) — warm grotesk sans-serif
- Scale: xs 0.75rem | sm 0.875rem | base 1rem | lg 1.125rem | xl 1.25rem | 2xl 1.75rem | 3xl 2.5rem
📐 Spacing
- Grid: organic — no rigid columns; content flows in natural widths, max-width 960px
- Section padding: 5rem vertical, 2.5rem horizontal
- Card gaps: 2rem, staggered vertical alignment per row
🧩 Components
- Buttons: filled forest green, 12px radius (rounded, organic), subtle 2px darker border, leaf-icon optional prefix
- Cards: cream background, 16px radius, subtle 1px sage border, optional top-border accent strip in green
- Nav: transparent on hero, solid cream on scroll, logo left, minimal text links right, no hamburger — all visible
- Hero: full-bleed nature photograph with dark overlay, headline in white Lora, subhead in warm sand
- Footer: 3-column with botanical divider (leaf pattern or wavy SVG line), earth-tone background
♿ Accessibility
- Contrast minimum 4.5:1 for body text
- Focus states: 2px solid forest green ring, 2px offset, rounded to match component radius
- Respect
prefers-reduced-motion— disable leaf/wave animations, parallax - Minimum body font size 16px (1rem)
✍️ Writing Tone
- Warm, grounding, hopeful. Speak like a trusted naturalist — knowledgeable but never preachy.
- Labels in sentence case. Use botanical metaphors sparingly. Avoid corporate jargon.
Do / Don't
✅ Do
- Use organic shapes — wavy section dividers, irregular blobs, leaf-inspired motifs
- Layer earth tones — greens, browns, warm creams — never pure black or stark white
- Apply generous border-radius (12-24px) for soft, natural feel
- Include botanical photography or illustrated plant elements as hero/background imagery
- Use textured backgrounds — subtle paper grain, linen, or organic noise
❌ Don't
- Use neon, electric, or synthetic colors — stay in the earth spectrum
- Apply sharp corners (0px radius) anywhere
- Use geometric patterns — favor organic, flowing, irregular forms
- Overuse white — cream and eggshell are your lightest tones
- Add tech-forward elements (terminal fonts, code blocks, glossy surfaces)
Quality Gates
- Every element has border-radius ≥ 8px — no sharp corners
- Color palette limited to green, brown, cream, and sage families
- At least 1 organic decorative element per page (wave, leaf, botanical illustration)
- Background is cream/eggshell — never pure #FFFFFF
- Photographic or illustrated nature imagery appears in hero section
- All text passes WCAG AA contrast (4.5:1)