# Aesop — Marketing Site Design Spec

> 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Text
| 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 |

### Surfaces
| 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 |

### Accent (rare)
| 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.

## 3. Typography Rules

- `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).

## 4. Component Stylings

### Buttons — sharp, minimal
- **Solid**: bg charcoal `#333333`, text cream/white, radius `0px`, `SuisseIntl-Medium` 14px, sharp corners.
- **Outline**: transparent, `1px solid` border whose colour adapts to context (cream `#fffef2` on dark photography, charcoal on light), radius `0px`, padding `13px 24px 12px`, height `48px`.

### Inputs / select
- 1px hairline border, radius `0px`, cream/white fill, small Suisse label; a bordered rectangular select with a chevron.

### Nav
- Utility bar (charcoal, centered shipping line) over a transparent header: serif "Aēsop" wordmark centered, small 12px Suisse nav links (Skin Care, Hand & Body, Fragrance, Home, Hair, Gifts, Library…), Stores/Account/Cart, and a bordered Search field.

### Cards / product tiles
- Flat image tiles on cream, minimal captions in small Suisse; no drop shadow.

## 5. Layout Principles

- Full-bleed muted photographic heroes with a centered serif wordmark, a Suisse headline and an outline CTA.
- Generous whitespace; content set in a calm, symmetric rhythm.
- Sections alternate cream `#fffef2`, pale cream `#f6f5e8`, warm greige `#e5dfdc` and inverted charcoal `#333333`.
- Rectilinear grids of product/lifestyle imagery; captions small and quiet.

## 6. Depth & Elevation

- Radii: `0px` on buttons and inputs (rectilinear); tiny `2–3px` on minor elements; `50%` only on small icon circles.
- Elevation: essentially flat. Shadows are whisper-soft when present — e.g. `rgba(0,0,0,.02) 0 0 6px`, `rgba(51,51,51,.2) 0 0 4px`.
- Structure comes from hairline 1px borders and colour washes, not elevation.

## 7. Motion

- Restrained and slow; refined fades/crossfades on hero imagery. Exact durations/easings not captured. Nothing bouncy or attention-seeking.

## 8. Backgrounds, Effects & WebGL

- Full-bleed muted, desaturated product/lifestyle **photography** as heroes.
- Warm neutral section washes (cream, pale cream, greige, charcoal) for colour blocking.
- No CSS gradients (beyond photo overlays), canvas or WebGL. Flat, image-led surfaces; no grain/noise.

## 9. Do's and Don'ts

### Do
- Set the canvas in warm cream `#fffef2` with charcoal `#333333` text; invert to charcoal sections for contrast.
- Use Suisse Intl at weight 400 as the primary voice; keep body small (12px) and headlines large but light (30–36/400).
- Reserve the humanist serif (Zapf-Humanist) for the wordmark and the occasional section title only.
- Make buttons rectilinear: sharp 0px corners, either charcoal solid or a 1px outline that adapts colour to its background.
- Use hairline 1px borders and warm neutral washes for structure — keep elevation flat.
- Set eyebrows in 15–16px UPPERCASE 700 with +1px tracking.
- Let full-bleed muted photography carry the mood; keep captions small and quiet.

### Don't
- Don't round the corners — controls are sharp 0px.
- Don't rely on the serif everywhere; the workhorse is the sans.
- Don't add bold weights beyond the uppercase eyebrow, or bright saturated accents.
- Don't add drop shadows for depth — the surface is flat.
- Don't crowd the layout; whitespace and restraint are the brand.

## 10. Responsive Behavior

- Not captured (desktop 1512px only). A region/country modal and cookie banner are present.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#fffef2` · Text `#333333` · Muted `#666666` · Dark section `#333333` · Border 1px hairline · Link `#3860be`
- Fonts: `SuisseIntl` (sans, 400 primary) / `Zapf-Humanist` (serif, wordmark + titles) · Body 12px · Headlines 30–36/400 · Radius 0px · Button height 48px
- Buttons: charcoal `#333` solid OR 1px outline (colour adapts to context), sharp 0px, `SuisseIntl-Medium` 14px · Flat, whisper-soft shadows only

<aesop_design_language>
Use the Aesop design language: a warm cream `#fffef2` canvas with charcoal `#333333` text, small refined type and full-bleed muted product photography, inverting to charcoal sections for contrast. The primary voice 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&emacr;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, 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; accents (tan `#945c26`, link blue `#3860be`) are rare and muted. Feels: refined, warm, restrained, editorial. Avoid: rounded corners, using the serif as the workhorse, bold weights or bright accents, drop shadows, and crowded layouts.
</aesop_design_language>