# Nature

> Organic greens, earth browns, botanical motifs, and sustainable warmth rooted in the natural world.

- Skill: `jdsadminllc/nature` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add jdsadminllc/nature`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jdsadminllc/nature/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: jdsadminllc (https://skillmd.com/u/jdsadminllc)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/jdsadminllc/nature

---

# 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)
