# Typography System

## Display Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Organic serif — warm, literary, botanical-illustration aesthetic |
| **Examples** | Recoleta, Cormorant Garamond, Playfair Display, GT Sectra, Lora |
| **Weight** | 400-600 (medium — not bold, the elegance is in the forms) |
| **Tracking** | -0.01em to 0.02em (standard, not wide) |
| **Size** | `clamp(2.5rem, 6vw, 5rem)` — large but not monumental |
| **Transform** | Sentence case, with italic for emphasis |
| **Special** | Italic variant for key words (e.g., "Rooted in *Nature*") |

**Why organic serif:** The serif forms echo the organic curves of botanical illustration. Recoleta and Cormorant have letterforms that feel hand-drawn — the terminals, the curves, the proportions. This matches the hand-drawn, warm aesthetic of the style.

---

## Italic Emphasis

```html
<h1>Rooted in <em>Nature</em></h1>
```

```css
h1 em {
  font-style: italic;
  font-weight: 400; /* Lighter than the roman — creates contrast */
  color: var(--gold); /* Gold for the italic word — ritual emphasis */
}
```

**Why italic:** The italic variant of an organic serif is distinctly different from the roman — it's more flowing, more calligraphic. Using italic for one key word creates emphasis through form change, not just weight or color. The gold color on the italic word is the ritual accent.

---

## Body Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Warm serif for emphasis, clean sans for body — or full serif body |
| **Examples** | Cormorant Garamond (full serif), Inter + Cormorant (mixed), Lora (full serif) |
| **Weight** | 400-500 |
| **Tracking** | 0.01em-0.02em (slightly open for readability) |
| **Size** | `clamp(0.875rem, 1vw, 1.125rem)` — 14-18px |
| **Line Height** | 1.6-1.7 (generous, slow reading) |

**Why mixed approach:** A warm serif body (Cormorant) feels like reading a botanical journal. A clean sans body (Inter) with serif emphasis feels like a modern wellness brand. Choose based on how "literary" vs "modern" the brand should feel.

---

## Micro / Label Type

| Property | Specification |
|----------|--------------|
| **Register** | Same family as body, lighter weight, wide tracking |
| **Examples** | Cormorant Light, Inter Light |
| **Weight** | 300-400 |
| **Tracking** | 0.15em-0.25em (very wide, like botanical specimen labels) |
| **Size** | 10-12px |
| **Transform** | UPPERCASE |

**Usage:** Section labels, ingredient names, botanical specimen tags. These tiny labels feel like the handwritten tags on herbarium specimens — "FOLIUM", "RADIX", "FLOS".

---

## Type Scale

```
Display:  clamp(2.5rem, 6vw, 5rem)    — large, organic serif
Body:     clamp(0.875rem, 1vw, 1.125rem) — 14-18px, warm
Micro:    10-12px                        — specimen labels
```

The scale is moderate — 10px to 80px. The contrast is between the organic display and the precise labels, not between extreme sizes.

---

## Font Pairing Logic

**Organic serif display + same serif body:** Cormorant Garamond throughout. The consistency feels like a botanical journal — one voice, one hand, one pen. Use weight and italic for hierarchy.

**Organic serif display + clean sans body:** Recoleta + Inter. The serif carries the brand voice (warm, literary); the sans carries the functional text (readable, modern). This is the wellness brand approach.

**Never:** Geometric sans (wrong register — too digital), monospace (too technical), or decorative scripts (too crafty, not botanical).

# Color Architecture

## Ground

```css
--color-ground: #0A1A0F;       /* Deep forest — the dark-room gallery */
--color-ground-alt: #0D1B2A;   /* Midnight green — slightly cooler */
--color-ground-warm: #1A1410;  /* Dark earth — warm dark background */
```

**Why deep forest:** Not neutral black (#000000) — that's too digital. Deep forest green (#0A1A0F) has a botanical warmth. It's the color of a darkroom, a forest at dusk, a museum display case. The botanical imagery glows against it like bioluminescent specimens.

---

## Earth Tone Palette

```css
--color-terracotta: #C17A54;   /* Warm clay — stems, bark, earth */
--color-sage: #8B9D83;         /* Muted sage — leaves, herbs */
--color-ochre: #C4A265;        /* Warm ochre — pollen, dried leaves */
--color-olive: #6B7A3F;        /* Deep olive — dark foliage */
--color-clay: #B5654A;         /* Clay — terracotta variant */
--color-cream: #F5F0E8;        /* Warm cream — paper, text on dark */
```

**These are the earth tones.** They come from minerals, plants, and soils — not from a digital color picker. Terracotta is fired clay. Sage is dried herbs. Ochre is mineral pigment. The palette is what a botanical illustrator would use.

---

## Gold / Copper Accents

```css
--color-gold: #C4A265;         /* Gold leaf — ritual accent */
--color-gold-bright: #D4AF37;  /* Brighter gold for foil effect */
--color-copper: #B87333;       /* Copper — warm metallic */
```

**Usage:** Gold appears on key text (italic emphasis), section dividers, and small accent elements. It should have a foil-like shimmer — use a subtle gradient or text-shadow to simulate the metallic quality. Copper is an alternative for warmer palettes.

---

## Text

```css
--color-text-on-dark: #F5F0E8;     /* Warm cream on dark backgrounds */
--color-text-on-light: #1A1410;   /* Dark earth on light backgrounds */
--color-text-muted: rgba(245, 240, 232, 0.6); /* Muted cream for secondary */
--color-text-gold: #C4A265;       /* Gold for emphasis words */
```

**On dark backgrounds:** Text is warm cream (#F5F0E8), not pure white. Pure white on deep forest green creates too much contrast and feels digital. Cream has a paper-like warmth.

---

## Botanical Color Treatment

Botanical photography should be processed to glow against the dark background:

| Treatment | Effect | Parameters |
|-----------|--------|------------|
| **Luminosity boost** | Make the subject glow | Brightness +15, contrast +10 |
| **Background darkening** | Darken the non-subject areas | Vignette, radial gradient |
| **Color enhancement** | Slightly saturate the earth tones | Saturation 110-120% |
| **Warm grade** | Shift overall tone warm | Shadow tint +5 warm |
| **Paper grain** | Add subtle texture | Overlay at 0.03 opacity |

**The goal:** Botanical subjects should look like they're glowing from within — bioluminescent specimens in a dark-room gallery. The background recedes; the subject luminates.

---

## Color Don'ts

| Don't | Do Instead |
|------|------------|
| Neutral black background (#000000) | Deep forest #0A1A0F or dark earth #1A1410 |
| Neon or saturated greens | Muted sage #8B9D83, deep olive #6B7A3F |
| Digital blue accents | Earth tones — terracotta, sage, ochre, gold |
| Pure white text on dark | Warm cream #F5F0E8 |
| Flat gold (#FFD700) | Gold leaf effect — #C4A265 with shimmer |
| Cool-toned palette | Warm earth tones throughout |
| High-contrast photography | Luminous, glowing, warm-graded botanical imagery |

# Motion Principles

## Philosophy

Motion in Organic Botanical Warmth is **gentle and natural**. Like leaves drifting in a breeze, watercolor slowly spreading, or a flower opening. Nothing snaps, nothing bounces, nothing moves mechanically. The motion should feel like watching nature — slow, organic, inevitable.

---

## Entrance Animations

| Element | Animation | Duration | Easing | Delay |
|---------|-----------|----------|--------|-------|
| Hero photography | Opacity 0→1 + subtle scale(1.03)→1 | 1800ms | `ease-out` | 0ms |
| Display headline | Opacity 0→1 + translateY(16px)→0 | 1200ms | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | 400ms |
| Italic emphasis word | Opacity 0→1 + gold shimmer | 1000ms | `ease-out` | 800ms |
| Body text | Opacity 0→1 | 1000ms | `ease-out` | 600ms |
| CTA | Opacity 0→1 + translateY(8px)→0 | 800ms | `ease-out` | 1000ms |
| Botanical illustrations | SVG draw-on (stroke-dasharray) | 2000ms | `ease-in-out` | on scroll |

**Key:** All durations are SLOW (800ms+). The motion should feel like watching a plant grow — gradual, inevitable, organic.

---

## SVG Draw-On Animations

```css
.botanical-illustration {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw-on 2000ms ease-in-out forwards;
}

@keyframes draw-on {
  to { stroke-dashoffset: 0; }
}
```

**Purpose:** Botanical illustrations should appear as if being drawn by hand — the stroke slowly traces the path, like watching an illustrator's pen move across paper. This is the signature motion of the style.

---

## Scroll Behavior

| Effect | Specification |
|--------|--------------|
| Parallax on botanical photography | Very subtle — 3-5% of scroll distance |
| Section transitions | Crossfade with 600ms overlap |
| Text reveals on scroll | Fade-in when entering viewport (IntersectionObserver) |
| Image scale on scroll | Subtle scale(1.0)→scale(1.04) over section height |
| Illustration draw-on | Triggered when illustration enters viewport |

**The parallax should be barely perceptible.** Like the slight movement of branches when you walk past a tree. If users notice the parallax, it's too much.

---

## Leaf Drift (Optional Ambient Motion)

```css
@keyframes leaf-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(4px, -6px) rotate(2deg); }
  50% { transform: translate(-2px, 4px) rotate(-1deg); }
  75% { transform: translate(6px, 2px) rotate(1deg); }
}

.leaf-element {
  animation: leaf-drift 8s ease-in-out infinite;
}
```

**Purpose:** Subtle, continuous drifting of decorative botanical elements — like leaves swaying in a gentle breeze. The movement should be barely perceptible, creating a sense that the page is alive.

---

## Interaction States

| Element | Hover State | Active State |
|---------|------------|-------------|
| Navigation links | Color shift to gold #C4A265 (400ms) | — |
| CTA | Background fill with earth tone (500ms) | — |
| Botanical illustrations | Subtle brightness 1.0 → 1.05 (600ms) | — |
| Product cards | Lift -4px + subtle shadow (500ms) | — |
| Gold text | Shimmer animation (gradient shift, 1s) | — |

**All hover transitions are slow (400ms+).** Quick hover states feel mechanical and break the natural atmosphere.

---

## Reduced Motion

When `prefers-reduced-motion: reduce`:
- All entrance animations: instant opacity
- SVG draw-on: instant (full stroke visible)
- Parallax: disabled
- Leaf drift: disabled (static)
- Image scale on scroll: disabled

```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
```

---

## What NOT to Animate

| Never | Why |
|-------|-----|
| Fast, snappy transitions | Breaks the natural, organic atmosphere |
| Bounce or spring physics | Too playful — this is contemplative, not energetic |
| Rotation or skew | Too dynamic for botanical subjects |
| Staggered card entrances | Motion should be sparse, not choreographed |
| Auto-scrolling carousels | The user controls the pace |
| Particle effects | Too digital — this style is natural and tactile |

# Layout Grammar

## Grid System

**No visible grid.** The layout is gallery-like and organic — content flows like a walk through a botanical garden. However, internally:

- Full-bleed sections: 100vw width, `min-h-[80vh]` to `100vh`
- Text containers: max-width 560px (moderate, like a journal page)
- Edge margin: `clamp(2rem, 5vw, 5rem)`
- Asymmetric placement with organic flow

---

## Hero Section

| Property | Specification |
|----------|--------------|
| Height | `min-h-[100dvh]` |
| Background | Full-bleed botanical photography (moss, ferns, leaves) |
| Layout | Asymmetric — text offset, photography dominant |
| Headline | Organic serif, italic emphasis on key word |
| CTA | Gold-bordered, earth-tone fill on hover |

```
┌─────────────────────────────────────────┐
│                                         │
│  [Full-bleed botanical photography]     │
│  [Moss, ferns, leaves — glowing]       │
│                                         │
│  Rooted in *Nature*                     │
│  Botanical haircare, grown not made     │
│  [DISCOVER] (gold border)               │
│                                         │
└─────────────────────────────────────────┘
```

**The hero is the botanical photograph.** Text overlays at the bottom-left, small relative to the image. The italic word ("Nature") is gold — the ritual accent.

---

## Section Spacing

```css
--section-padding-y: clamp(4rem, 10vh, 8rem);
--content-max-width: 560px;
--edge-margin: clamp(2rem, 5vw, 5rem);
```

**Spacing is generous but not monumental.** This style has warmth — it doesn't need the extreme whitespace of cinematic styles. The sections should feel like rooms in a botanical garden — each with its own content, connected by paths.

---

## Layout Patterns

### Pattern 1: Full-Bleed Botanical + Text Overlay
```
┌─────────────────────────────────────────┐
│  [Full-bleed botanical photography]     │
│                                         │
│  Section label                          │
│  HEADLINE with *italic* emphasis        │
│  Body text (2-3 sentences)             │
│  [CTA]                                  │
└─────────────────────────────────────────┘
```

### Pattern 2: Split — Botanical Illustration + Text
```
┌──────────────────┬──────────────────────┐
│                  │                      │
│  [Botanical      │  Section label       │
│   illustration   │  HEADLINE            │
│   with labels]   │  Body text...        │
│                  │  [CTA]               │
│                  │                      │
└──────────────────┴──────────────────────┘
```

### Pattern 3: Product Cards with Botanical Illustrations
```
┌──────────┐  ┌──────────┐  ┌──────────┐
│ Botanical│  │ Botanical│  │ Botanical│
│ illus.   │  │ illus.   │  │ illus.   │
│          │  │          │  │          │
│ Product  │  │ Product  │  │ Product  │
│ name     │  │ name     │  │ name     │
│ $price   │  │ $price   │  │ $price   │
└──────────┘  └──────────┘  └──────────┘
```

### Pattern 4: Ingredients Diagram
```
┌─────────────────────────────────────────┐
│  [Hand-drawn botanical diagram]         │
│  with labeled parts:                    │
│  → FOLIUM (leaf)                        │
│  → RADIX (root)                         │
│  → FLOS (flower)                        │
│  Description text alongside             │
└─────────────────────────────────────────┘
```

---

## Responsive Behavior

| Breakpoint | Layout Change |
|------------|--------------|
| **Desktop (1200px+)** | Full asymmetric layouts, split sections, botanical illustrations alongside text |
| **Tablet (768px)** | Split sections stack, illustrations above text, reduced spacing |
| **Mobile (375px)** | Full-bleed sections stack vertically, text full-width with edge margins, illustrations simplified |

**On mobile:** The botanical photography should still dominate. Don't shrink it to make room for text. Stack vertically — photo above, text below.

---

## Layout Don'ts

| Don't | Do Instead |
|------|------------|
| Geometric grid layouts | Organic, gallery-like flow |
| Dense content areas | Generous spacing with botanical imagery |
| Card grids without botanical elements | Cards with botanical illustrations, not just product photos |
| Centered, symmetrical layouts | Asymmetric with organic flow |
| Standard product grids | Products presented as botanical specimens |
| Busy navigation | 3-4 links max, warm serif or clean sans |
| Neutral black backgrounds | Deep forest #0A1A0F or dark earth #1A1410 |

# Texture & Surface

## Primary Texture: Botanical Photography

The texture IS the botanical subject — moss, ferns, leaves, bark, petals. Every image must be processed to feel like a specimen in a dark-room gallery:

| Processing | Effect | Parameters |
|-----------|--------|------------|
| **Luminosity boost** | Make the subject glow | Brightness +15, contrast +10 |
| **Background darkening** | Darken non-subject areas | Vignette, radial gradient |
| **Color enhancement** | Slightly saturate earth tones | Saturation 110-120% |
| **Warm grade** | Shift overall tone warm | Shadow tint +5 warm |
| **Paper grain** | Subtle analog texture | Overlay at 0.03 opacity |

**The goal:** Botanical subjects should look like they're glowing from within — bioluminescent specimens against a dark forest background.

---

## Paper Grain

```css
.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,..."); /* feTurbulence */
  mix-blend-mode: overlay;
}
```

**Parameters:**
- Opacity: 0.02-0.04 (barely visible — like paper texture)
- Position: fixed (covers viewport, doesn't scroll)
- Blend mode: overlay or soft-light

**Purpose:** Paper grain adds a tactile, handmade quality. It says "this was made on paper, not on a screen." The texture is subliminal — you feel it more than you see it.

---

## Watercolor Wash

```css
.watercolor-wash {
  background: radial-gradient(
    ellipse at 30% 40%,
    rgba(139, 157, 131, 0.15) 0%,
    transparent 60%
  );
  filter: blur(20px);
}
```

**Usage:** Watercolor wash backgrounds create soft, organic color fields behind text or illustrations. They should be very subtle (15% opacity) and heavily blurred — like watercolor paint bleeding into wet paper.

---

## Botanical Illustration Detail

Hand-drawn botanical illustrations should have:
- **Fine line work** — thin strokes (0.5-1px), detailed venation, texture lines
- **Watercolor fill** — subtle, translucent color within the line drawing
- **Labels** — handwritten-style text pointing to plant parts (FOLIUM, RADIX, FLOS)
- **Imperfection** — slightly uneven lines, not perfectly smooth vectors

**Implementation:** SVG illustrations with hand-drawn path data, or processed raster illustrations. The key is that they look hand-made, not computer-generated.

---

## Gold Foil Effect

```css
.gold-foil {
  background: linear-gradient(
    135deg,
    #C4A265 0%,
    #D4AF37 25%,
    #C4A265 50%,
    #B8932E 75%,
    #D4AF37 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 2px rgba(196, 162, 101, 0.3);
  background-size: 200% 200%;
  animation: gold-shimmer 4s ease-in-out infinite;
}

@keyframes gold-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
```

**Purpose:** Gold foil has a metallic shimmer that flat gold (#FFD700) doesn't capture. The gradient shift simulates light reflecting off actual gold leaf — a subtle, continuous shimmer.

---

## Surface Rules

| Surface | Treatment |
|---------|-----------|
| Background | Deep forest #0A1A0F or dark earth #1A1410 |
| Botanical photography | Luminosity-boosted, warm-graded, glowing |
| Text areas | Transparent over photography, or dark earth solid |
| Cards | Dark earth bg with botanical illustration, subtle shadow |
| CTA | Gold border (1px), transparent bg → earth tone fill on hover |
| Illustrations | Hand-drawn SVG with watercolor fill and labels |
| Gold accents | Gold foil gradient with shimmer animation |

---

## Texture Don'ts

| Don't | Do Instead |
|------|------------|
| Digital flat colors | Earth tones with paper grain, watercolor wash |
| Perfectly smooth vectors | Hand-drawn illustrations with slight imperfection |
| Neon or synthetic colors | Earth tones — terracotta, sage, ochre, gold |
| Geometric patterns | Botanical patterns — leaf venation, petal textures |
| Glassmorphism | Opaque surfaces with botanical texture |
| Drop shadows (digital) | Subtle, soft shadows (like paper on a table) |
| Flat gold (#FFD700) | Gold foil gradient with shimmer effect |

# Vocabulary Bank

## Primary Terms

| Term | Why It Matters |
|------|---------------|
| `botanical illustration` | Hand-drawn plant diagrams with labels — the style's visual system |
| `earth tone palette` | Terracotta, sage, ochre, olive, clay — from minerals and plants |
| `paper grain` | Subtle analog texture overlay — handmade, not digital |
| `watercolor wash` | Soft, blurred color fields — like paint bleeding into wet paper |
| `organic serif` | Warm, literary typeface with flowing forms — Recoleta, Cormorant |
| `gold foil` | Metallic shimmer accent on key text — ritual, not luxury |

---

## Secondary Terms

| Term | Effect |
|------|--------|
| `deep forest ground` | #0A1A0F — dark botanical background, not neutral black |
| `luminous specimen` | Botanical photography that glows against dark background |
| `bioluminescent` | Subjects that appear to light from within |
| `italic emphasis` | Key word in italic + gold — ritual accent |
| `SVG draw-on` | Illustrations that appear as if being drawn by hand |
| `leaf drift` | Subtle ambient motion — leaves swaying in a breeze |
| `herbarium label` | Tiny uppercase labels — FOLIUM, RADIX, FLOS |
| `warm cream text` | #F5F0E8 — paper-colored text on dark backgrounds |
| `copper accent` | #B87333 — warm metallic alternative to gold |
| `botanical diagram` | Cross-sections, root systems, leaf venation — educational illustrations |

---

## Context Terms

| Term | Mood |
|------|------|
| `botanical garden` | Curated, gallery-like, each specimen presented with care |
| `herbarium` | Dried specimens, labeled, cataloged, scientific |
| `illuminated manuscript` | Gold leaf on botanical illustration — centuries of tradition |
| `dark-room gallery` | Specimens glowing against dark walls |
| `watercolor journal` | Handmade, personal, tactile |
| `forest at dusk` | Deep green darkness, glowing specimens |
| `apothecary` | Earth-toned bottles, botanical remedies, old-world craft |

---

## Banned Terms

| Term | Why It Breaks the Style |
|------|------------------------|
| `neon colors` | Synthetic, digital — wrong register entirely |
| `geometric shapes` | This style is organic, not geometric |
| `tech aesthetics` | No digital precision — this is handmade and warm |
| `cold blue tones` | Earth tones only — no cool palette |
| `minimalist sans-serif` | Wrong type register — needs organic serif |
| `flat design` | This style is tactile, textured, dimensional |
| `pure black background` | Deep forest #0A1A0F, not #000000 |
| `pure white text` | Warm cream #F5F0E8, not #FFFFFF |
| `digital gradients` | Watercolor wash, not smooth digital gradients |
| `leaf icons` | Use real botanical photography and illustration, not icons |

---

## Prompt-Ready Phrases

```
"deep forest ground #0A1A0F with luminous botanical photography"
"earth tone palette — terracotta #C17A54, sage #8B9D83, ochre #C4A265"
"organic serif display (Cormorant Garamond) with italic emphasis in gold"
"hand-drawn botanical illustrations with SVG draw-on animation"
"paper grain overlay at 0.03 opacity"
"watercolor wash backgrounds (radial gradient, blurred)"
"gold foil effect with shimmer animation on key text"
"warm cream text #F5F0E8 on deep forest background"
"botanical specimen labels — FOLIUM, RADIX, FLOS (uppercase, wide tracking)"
"gentle motion — leaf drift, SVG draw-on, slow fades (800ms+)"
"no neon, no geometric, no digital precision — organic and warm"
```

# When to Use

## Perfect For

| Context | Why This Style Works |
|---------|---------------------|
| **Luxury skincare/wellness** | The botanical, earth-tone aesthetic signals natural ingredients and artisan craft |
| **Premium spirits/wine** | The dark, warm, illustrated aesthetic matches heritage spirit and wine brands |
| **Boutique hospitality** | The gallery-like, warm atmosphere feels like a boutique hotel or spa |
| **High-end cannabis** | The botanical illustration system maps perfectly to cannabis terpene and strain education |
| **Botanical gardens** | Literally the subject matter — botanical illustration as visual system |
| **Fine dining** | The warm, illustrated, earth-tone aesthetic matches farm-to-table and artisanal dining |
| **Perfume brands** | Botanical ingredients, illustrated diagrams, gold foil — the visual language of perfumery |

## Brand Personality Match

This style reinforces brands that are:
- **Natural** — rooted in botanical ingredients and earth materials
- **Artisan** — handmade, crafted, not mass-produced
- **Warm** — inviting, tactile, human
- **Educational** — the botanical illustration system teaches about ingredients
- **Heritage** — drawing on centuries of botanical illustration tradition

## Avoid When

| Context | Why It Fails |
|---------|-------------|
| **Tech/SaaS** | The organic, handmade aesthetic is the opposite of digital precision |
| **Gaming** | Too calm, too natural — wrong energy entirely |
| **Finance/crypto** | The botanical warmth doesn't signal reliability or future-tech |
| **Youth/streetwear** | Too literary, too heritage — wrong demographic |
| **Sports/fitness** | The contemplative, slow atmosphere doesn't match athletic energy |
| **News/media** | The illustration system and slow pacing can't support rapid content |
| **B2B/corporate** | Too artisan, too warm — wrong register for professional services |

## How to Decide

Ask: **"Does my brand want to feel like a botanical journal — warm, illustrated, earth-toned, and crafted by hand?"**

If yes → Organic Botanical Warmth.
If no → Consider Quiet Editorial (if you want literary without botanical), Luxury Refined Restraint (if you want premium without illustration), or Ethereal Dreamscape (if you want dreamy without earth tones).

# Reference Gallery

## Live Sites

### MOSS (reference implementation)
- **What works:** Deep forest background, luminous botanical photography, organic serif with italic gold emphasis, hand-drawn illustrations, gold foil accents, paper grain texture
- **URL:** Reference implementation — the canonical example of this style

### Aesop (aesop.com)
- **What works:** Earth-tone palette, botanical ingredient focus, warm serif typography, gallery-like layout, understated luxury
- **URL:** aesop.com

### Le Labo (lelabo.com)
- **What works:** Botanical ingredient lists, warm apothecary aesthetic, hand-drawn labels, earth-tone palette
- **URL:** lelabo.com (fragrance pages)

### Fenty Skin (fentyskin.com)
- **What works:** Botanical ingredient highlights, warm photography, ingredient education with illustrations
- **URL:** fentyskin.com

## Key Visual References

### Botanical Photography
- **Moss, ferns, leaves** — full-bleed, luminosity-boosted, glowing against dark
- **Color treatment** — warm-graded, saturation 110-120%, vignette
- **Background** — deep forest #0A1A0F, not neutral black

### Botanical Illustration
- **Hand-drawn line work** — thin strokes (0.5-1px), detailed venation
- **Watercolor fill** — translucent, bleeding, organic
- **Labels** — FOLIUM, RADIX, FLOS (uppercase, wide tracking, handwritten style)
- **SVG draw-on** — stroke-dasharray animation, 2000ms

### Typography References
- **Cormorant Garamond** — organic serif, literary, botanical journal aesthetic
- **Recoleta** — warm, slightly quirky, hand-drawn feel
- **Italic emphasis** — key word in italic + gold, ritual accent
- **Labels** — 10-12px, tracking 0.15-0.25em, uppercase

### Color References
- **Deep forest #0A1A0F** — the dark-room gallery background
- **Earth tones** — terracotta #C17A54, sage #8B9D83, ochre #C4A265
- **Gold foil** — #C4A265 with gradient shimmer, not flat #FFD700
- **Warm cream** — #F5F0E8 text on dark, not pure white

## Screenshot Notes

> When capturing references for this style, look for:
> - The background color (must be deep forest, not pure black)
> - The text color (must be warm cream, not pure white)
> - The gold treatment (must be foil with shimmer, not flat)
> - The illustration style (must be hand-drawn with labels, not vector icons)
> - The photography treatment (must be luminous and warm-graded)
> - The motion (must be slow and organic, not snappy)
> - The overall temperature (must be warm, not cool)