# Aesop Apothecary 따뜻한 크림 배경 위에 차분한 차콜 텍스트, 절제된 스위스 산세리프와 낮은 채도의 앰버 액센트로 완성한 아포테카리 럭셔리 에디토리얼 스타일. - taxonomy: luxury-editorial · luxury, apothecary, warm-neutral, quiet-luxury, editorial, typographic, whitespace-driven · complexity=medium - page types: ecommerce, landing, editorial, marketing - best for: 프리미엄 뷰티·향수·웰니스 커머스, 브랜드 스토리텔링·매니페스토 페이지, 절제된 럭셔리 랜딩 - avoid for: 데이터 밀도 높은 대시보드, 장난스러운 소비자 앱, 화려한 프로모션·세일 중심 UI - provenance: website (Aesop — Formulations for Skin, Hair & Body Care) — confidence: colors_measured=computed-css, color_roles=vision-inferred, typography=computed-css, radius=computed-css, dark_set=vision-inferred, taxonomy=vision-inferred, motion=vision-inferred, layout=vision-inferred ## Design rules # 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. ## Tokens (theme.css — use these values verbatim, do not re-derive) ```css /* Aesop Apothecary — theme.css (generated, do not edit) */ :root { --radius: 0px; --radius-selector: 0px; --radius-field: 0px; --font-sans: 'SuisseIntl', 'Inter', 'Helvetica Neue', Arial, sans-serif; --font-serif: 'Zapf Humanist', 'Optima', 'Cormorant Garamond', Georgia, serif; --font-mono: 'IBM Plex Mono', monospace; --spacing: 8px; --shadow: 0px 2px 6px 0px color-mix(in oklab, oklch(0.264 0.004 90) 5%, transparent); --ks-display-weight: 400; --ks-display-tracking: -0.01em; --background: oklch(0.990 0.014 103); --foreground: oklch(0.322 0.004 90); --card: oklch(0.990 0.014 103); --card-foreground: oklch(0.322 0.004 90); --popover: oklch(0.990 0.014 103); --popover-foreground: oklch(0.322 0.004 90); --primary: oklch(0.264 0.004 90); --primary-foreground: oklch(0.990 0.014 103); --secondary: oklch(0.967 0.017 103); --secondary-foreground: oklch(0.322 0.004 90); --muted: oklch(0.967 0.017 103); --muted-foreground: oklch(0.510 0.004 90); --accent: oklch(0.527 0.100 61); --accent-foreground: oklch(0.990 0.014 103); --destructive: oklch(0.550 0.200 27); --destructive-foreground: oklch(0.990 0.014 103); --border: oklch(0.871 0.012 101); --input: oklch(0.871 0.012 101); --ring: oklch(0.527 0.100 61); --chart-1: oklch(0.527 0.100 61); --chart-2: oklch(0.674 0.122 168); --chart-3: oklch(0.264 0.004 90); --chart-4: oklch(0.510 0.004 90); --chart-5: oklch(0.871 0.012 101); } .dark { --background: oklch(0.240 0.005 90); --foreground: oklch(0.970 0.013 103); --card: oklch(0.280 0.005 90); --card-foreground: oklch(0.970 0.013 103); --popover: oklch(0.280 0.005 90); --popover-foreground: oklch(0.970 0.013 103); --primary: oklch(0.970 0.013 103); --primary-foreground: oklch(0.264 0.004 90); --secondary: oklch(0.310 0.005 90); --secondary-foreground: oklch(0.900 0.010 100); --muted: oklch(0.310 0.005 90); --muted-foreground: oklch(0.720 0.008 95); --accent: oklch(0.600 0.095 63); --accent-foreground: oklch(0.200 0.004 90); --destructive: oklch(0.620 0.190 27); --destructive-foreground: oklch(0.200 0.004 90); --border: oklch(0.360 0.006 90); --input: oklch(0.360 0.006 90); --ring: oklch(0.600 0.095 63); --chart-1: oklch(0.600 0.095 63); --chart-2: oklch(0.674 0.122 168); --chart-3: oklch(0.970 0.013 103); --chart-4: oklch(0.720 0.008 95); --chart-5: oklch(0.360 0.006 90); } ``` ## Golden example (exemplar.html — match this structure and token usage) ```html

Skin Care — Facial

A considered
approach to
daily ritual.

Formulations of the finest quality, presented with restraint. Warmth over white, space over decoration.

Shop skin care Read the story

New

Parsley Seed Serum

The amber note is used once — a quiet mark, never a fill.

Ritual

Cleanse & hydrate

Hierarchy comes from tiny body text against a large, light headline.

Note

Hairlines, not shadows

Every division is a low-contrast 1px rule on warm cream.

``` ## Apply - shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/aesop.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only. - other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references. - single HTML/artifact: embed the theme.css block in a `