## Overview
A high-end botanical research laboratory in browser form. Warm parchment canvas grounded by near-black text and a single burnt terracotta accent. Scientific yet earthy, clinical yet comforting — like stumbling onto a field journal kept by someone who believes nature deserves proper documentation. Depth comes from blend modes, opacity, and a navigation bar that inverts itself against whatever surface it passes over.
## Colors
- **Warm parchment** (`#F2F0E9`): Page canvas. Text color on dark surfaces. The non-negotiable warm baseline.
- **Charcoal ink** (`#1A1A1A`): Primary text. Footer surface. Not pure black — retains a trace of warmth.
- **Terracotta ember** (`#CC5833`): The single accent. CTAs, link hovers, section markers, status, text selection, the footer heartbeat.
- **Forest moss** (`#2E4036`): Hero and products section. The botanical green that replaces black/navy. Reduced-opacity variants act as secondary text on light surfaces and dividers.
Text selection inverts the system: terracotta highlight with parchment text — every dragged phrase looks circled in a field notebook.
## Typography
- **Headline Font**: Cormorant Garamond (always italic, display sizes only — single moments of organic beauty per section)
- **Body Font**: Plus Jakarta Sans (functional workhorse — light is the default, medium is the heaviest weight)
- **Label Font**: IBM Plex Mono (small, uppercase, wide tracking — narrates section codes, SKUs, footer metadata)
- **Brand mark**: Outfit (single cameo as the hero brand wordmark in uppercase with wide tracking)
Strict roles: serif for drama and only at display sizes, sans for structure and never in uppercase, monospace for data and never large. Italic only on the serif. Light weight as the default everywhere.
## Elevation
No shadows. Depth comes entirely from blend modes and opacity: navigation blends and inverts against whatever sits beneath it, hero photography is tinted through a multiplied moss overlay, product photography is held in a luminosity blend that drains color until the visitor interacts.
## Components
- **Buttons**: All pill-shaped with fully rounded ends — no rectangular or lightly-rounded buttons exist. Primary CTA is solid terracotta with parchment text. Secondary is transparent with a hairline parchment border in the monospace voice. The 48px circular product card affordance fills with terracotta on hover.
- **Cards**: Quiet and architectural. Formula cards on light surface have nothing but a hairline top border in faint moss — no fills, no rounded corners, no shadows. Product cards on dark moss live inside large rounded image wells with whisper-thin parchment borders, photographs in a luminosity blend that snaps into color on hover.
- **Inputs**: Pill-shaped with hairline borders and transparent or warm-parchment fills. Labels in monospace, small, uppercase, wide tracking — sitting above each field like specimen tags. Focus brightens border to terracotta — no glows, no shadows.
## Do's and Don'ts
- Do reserve terracotta for interaction and signal — it's the single accent in the system.
- Do let blend modes and opacity carry depth.
- Do put labels in monospace uppercase — they sell the laboratory voice.
- Do use the editorial italic serif for one moment per section, never more.
- Don't introduce a second accent color.
- Don't use bold weights in Plus Jakarta Sans — medium is the ceiling.
- Don't use uppercase on the body sans.
- Don't use drop shadows for hierarchy.
- Don't use pure white — parchment is the warm baseline.