# Aesop Apothecary

## Overview
Quiet luxury, extracted live from aesop.com. Warm cream instead of white, soft charcoal instead of black, one restrained neo-grotesque sans, and generous whitespace. Decoration is absent; the mood comes from an extreme contrast between tiny body text and a large light-weight headline, plus deep botanical photography carrying the only saturated color. Where Editorial Swiss is stark monochrome, this style trades on warmth and understatement — apothecary refinement, not print severity.

## Colors & Roles
Foundation is a warm cream `background` (#FFFEF2, oklch ~0.99/0.014/103) with a soft charcoal `foreground` (#333, near-neutral). A slightly deeper cream (#F6F5E8) serves `secondary`/`muted` surfaces; `muted-foreground` is a mid gray (#666). Dark surfaces — footer, primary buttons, panels — use a near-black warm charcoal (#252525) as `primary`. The only chromatic `accent` is a low-frequency amber/brown (#945C26, oklch ~0.53/0.10/61) — it appeared just twice on the homepage, which is the point: it is punctuation, never a fill. An occasional botanical green (#32AE88) lives in `chart-2` and, in practice, mostly arrives as photography rather than a UI token. Borders are a very low-contrast charcoal-at-20% hairline (~#D6D5CC over cream).

## Typography Rules
One neo-grotesque sans, Suisse Int'l (Google-Fonts fallback: Inter), weights 400/500 with 700 reserved for small emphasis. An optional humanist serif (Zapf Humanist / Optima; fallback Cormorant Garamond) can carry editorial pull quotes. The signature move is size contrast: body and navigation run tiny (12–15px) against a light-weight 36px+ headline (measured h1 = 36px / weight 400 / line-height 1.4). Labels and nav are mixed-case, not uppercase — restraint over convention. Modular ratio ≈ 1.33.

## Layout Principles
Wide, whitespace-heavy asymmetric editorial grid up to ~1440px. Full-bleed botanical image sections alternate with cream text sections; vertical rhythm is large (`clamp(4rem, 9vw, 8rem)`). The cream field itself reads as whitespace — aim for 40%+ open space.

## Depth & Elevation
Effectively flat. No gradients, glass, or grain. Shadows are near-absent (a 5%-opacity hairline shadow only on modals/dropdowns). Depth is expressed by the cream tonal step (`background` ↔ `secondary`) and hairline rules.

## Shapes
Zero border-radius everywhere — buttons, cards, inputs, images, search fields. Corners are sharp by rule (measured 0px throughout).

## Component Stylings
- **Button**: primary = charcoal `#252525` fill, cream text, radius 0, padding ~14px 28px, weight 400–500, mixed-case. Outline variant = transparent + 1px border (foreground on cream, cream over imagery). Hover is a subtle brightness/opacity shift (200ms). Focus = 2px offset outline (`ring` = amber).
- **Card**: no shadow; separated by a `secondary` cream step or hairline only. Radius 0, roomy padding (24–40px).
- **Input**: 1px hairline or underline, radius 0; focus border goes to `foreground`. Labels are lowercase captions.
- **Nav**: cream top bar, centered wordmark, small (12px) mixed-case links left/right, hairline bottom rule. Prefer exposed links over a hamburger.
- **Search**: over imagery, a ghost input with a 1px cream border and cream text.

## Motion
Slow and calm. Opacity fades with short `translateY(6–8px)`, 200–400ms; image carousels cross-fade. No bounce, spring, or parallax.

## Do's and Don'ts
**Do:** use warm cream over pure white; build hierarchy from type-size contrast and space; keep the amber accent to 1–2 quiet uses; introduce deep green as photography, not fills; divide with low-contrast hairlines.
**Don't:** use border-radius > 0; use gradients, glass, or drop shadows; set body text in pure black; fill large areas or buttons with the accent color; shout with heavy weights or all-caps.

## Responsive Behavior
The asymmetric grid collapses to a single column on mobile; full-bleed images stack with cream text blocks. Display type scales via `clamp()`. Nav links wrap or collapse into a minimal menu while preserving the centered wordmark.

## Agent Prompt Guide
> Build this in the 'Aesop Apothecary' style: warm cream (#FFFEF2) background with soft charcoal (#333) text, one neo-grotesque sans (Suisse Int'l → Inter), zero border-radius, hairline rgba(51,51,51,0.2) rules instead of shadows, extreme type contrast (tiny 12–15px body against a light-weight 36px+ headline), generous whitespace, dark #252525 zero-radius buttons, and a single low-frequency amber/brown (#945C26) accent used as quiet punctuation — never as a fill.

## Known Gaps / Confidence
Colors, typography, and radius are **measured live** (`computed-css`): the Stage-1 Playwright extractor was blocked by Cloudflare's challenge (its `extraction.json`/screenshots are the interstitial, not Aesop), so this entry was re-extracted through a real Chrome session that passed the passive challenge, reading `getComputedStyle` directly from the live DOM. **Color-role assignment, taxonomy, motion, and layout are `vision-inferred`** from the rendered page. Aesop has **no full native dark theme**; the dark set is `vision-inferred`, synthesized from the site's own dark sections (#252525 panels + cream text). The bundled `screenshots/*.png` paths are the original (blocked) interstitial captures and are retained only as provenance of the extraction path — the design judgments here are grounded in the live-DOM values and the live rendered page, not those images. Suisse Int'l and Zapf Humanist are commercial fonts; the Google-Fonts fallbacks (Inter, Cormorant Garamond) are the practical reproduction defaults.