Quiet apothecary editorial on a warm cream #fffef2 canvas with charcoal #333 text, small refined type and full-bleed muted product photography, inverting to charcoal sections for contrast. Despite the "editorial serif" reputation the workhorse is the Swiss neo-grotesque Suisse Intl at a calm weight 400 — headlines are large but LIGHT (30–36px, ~1.35 line-height), body is unusually small (12px), and eyebrows are 15–16px UPPERCASE 700 at +1px tracking; the humanist serif Zapf-Humanist (Optima-like) is reserved only for the "Aēsop" wordmark and the occasional section title. Everything is rectilinear: buttons and inputs have sharp 0px corners and hairline 1px borders — a charcoal #333 solid or a 1px outline whose colour adapts to its background (cream on dark photography, charcoal on light), SuisseIntl-Medium 14px, 48px tall. Elevation is essentially flat (only whisper-soft rgba(0,0,0,.02) shadows), and structure comes from hairline borders and warm neutral washes (pale cream #f6f5e8, greige #e5dfdc) rather than depth; colour is warm-neutral, with accents (tan #945c26, link blue #3860be) rare and muted.
Browse Aesop in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: aesop.com/us (live DOM, computed styles), 2026-07-25 (desktop 1512px). Coverage: home. Account: needs-dashboard. Responsive: breakpoints not captured. Motion: restrained; not captured in detail.
Aesop's site is quiet apothecary editorial: a warm off-white cream canvas, small refined type, and full-bleed muted product photography with almost no chrome. Despite the "editorial serif" reputation, the workhorse is the Swiss neo-grotesque Suisse Intl set at a calm regular weight — the humanist serif (Zapf-Humanist, Optima-like) is reserved for the "Aēsop" wordmark and the occasional section title. Everything is rectilinear: buttons and inputs have sharp 0px corners and hairline 1px borders, elevation is essentially flat (only whisper-soft shadows appear), and warm neutral section washes (greige, pale cream, charcoal) provide the only "colour". The result reads considered, understated and expensive — nothing shouts. Feels: refined, warm, restrained, editorial.
| Token | Hex | Role / usage |
|---|---|---|
| charcoal | #333333 | Primary text, inverted section fills |
| near-black | #252525 | Strong text / dark panels |
| gray | #666666 | Secondary text |
| gray-2 | #555555 | Tertiary text |
| muted | #999999 | Faint / disabled |
| cream | #fffef2 | Text on dark, on photography |
| Token | Hex | Role / usage |
|---|---|---|
| cream (canvas) | #fffef2 | Page background — the signature Aesop cream |
| pale cream | #f6f5e8 | Section wash |
| greige | #e5dfdc | Warm neutral section wash |
| gray-50 | #f3f3f3 | Light section |
| white | #ffffff | Occasional panels |
| charcoal | #333333 | Inverted / dark sections |
| Token | Hex | Role / usage |
|---|---|---|
| tan | #945c26 | Rare warm brown accent |
| link blue | #3860be | Text links |
| rust | #ca432f | Rare sale/alert accent |
Rule: colour is warm-neutral washes; accents are rare and muted. Rule: cream and charcoal invert across sections; buttons adapt their colour to context.
SuisseIntl / SuisseIntl-Medium — neo-grotesque sans; the primary voice: headlines, body, nav, buttons.Zapf-Humanist — humanist serif (Optima-like); reserved for the "Aēsop" wordmark and select section titles (e.g. "Curated Sets").| Role | Family | Size/Line | Weight | Tracking | Case |
|---|---|---|---|---|---|
| Wordmark / serif title | Zapf-Humanist | 31 / 41 | 400 | normal | Title |
| Headline (h1/h2) | SuisseIntl | 30–36 / 40–50 | 400 | normal | sentence |
| Eyebrow / subtitle | SuisseIntl | 15.84 / 22 | 700 | +1px | UPPERCASE |
| Body | SuisseIntl | 12 / 18 | 400 | normal | sentence |
| Nav / UI | SuisseIntl | 12 / 18 | 400 | normal | sentence |
| Button | SuisseIntl-Medium | 14 | 400 | normal | sentence |
Patterns: headlines are LARGE but LIGHT (weight 400) with generous ~1.33–1.4 line-height; body and nav are unusually small (12px). Weight almost never exceeds 400 except the uppercase eyebrow (700).
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.