Design System
Analysis of Aesop

A quiet, apothecary-grade system painted on an oat-cream canvas with near-black charcoal ink, set entirely in a feather-light neo-grotesque — no rounded corners, almost no shadow, the brand voice living in negative space.

01 — Foundations

Colour Palette

02 — Foundations

Typography

Set in SuisseIntl — substituted here with Inter, the nearest free neo-grotesque. Hierarchy is built from size and whitespace, not weight: nearly everything sits at a light 400.

03 — Components

Button Variants

button-primary
Solid charcoal (#333) with ivory text, zero radius. The site's one filled action.
button-dark
Same charcoal band used for inverted CTAs on cream sections.
button-secondary
Outline button — 1px charcoal rule on the cream canvas, square corners.
button-pill
Rare rounded form, reserved for quiet category chips and filters.
link · inline
Our storyStockists
Underlined charcoal links; saturated colour only on editorial in-text links.
04 — Components

Cards & Surfaces

Product tiles are flat and borderless — image, bold product name, formulation descriptor, then price. Hover lends only a whisper of shadow.

05 — Components

Form Elements

text-input
textarea
06 — Foundations

Spacing Scale

A 4px base expressed through generous editorial increments; sections breathe in 32–64px steps.

07 — Foundations

Border Radius

A square system. The default is 0px — true rectangles everywhere. Curves are reserved for circular icon hit-areas and swatch dots.

08 — Foundations

Elevation & Depth

Level 0 — 1px hairline only. The system default; elements are separated by rules, not shadow.
Level 1 — a diffuse 0 0 4px charcoal glow, used sparingly on hovers and small overlays.
Level 2 — 0 0 18px black scrim depth behind the cart drawer and modals.
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxSingle-column tiles; nav collapses to a menu; type scale held nearly fixed.
Tablet768–1023pxFour-up product grids fold to two columns; generous margins preserved.
Laptop1024–1279pxFull multi-column grids return; thin cream nav bar spans the top.
Desktop≥ 1280pxWide editorial margins; content capped so cream framing keeps dominating.

Because the system depends on so few moving parts — paper, ink, one face, sharp edges — breakpoints mostly reflow columns rather than restyle components.

Gift Sets & Pricing

Aesop has no subscription tiers; this demonstrates the price-card pattern using curated gift sets — flat charcoal-on-cream panels, light 400 numerals.

The Essentials
$95/ set
A considered introduction to daily ritual.
  • Resurrection Aromatique Hand Wash
  • Resurrection Aromatique Hand Balm
  • Reverence Aromatique Hand Wash
The Cleanser Trio● Most gifted
$140/ set
A curated repertoire for face, hair and body.
  • Gentle Facial Cleansing Paste
  • Geranium Leaf Body Cleanser
  • Classic Shampoo
The Reverence
$210/ set
The complete hand and body wardrobe.
  • Reverence Aromatique Hand Wash
  • Reverence Aromatique Hand Balm
  • Geranium Leaf Body Balm

Order History

A data-table pattern rendered in the same restrained vocabulary: uppercase eyebrow headers, hairline row rules, status set in quiet pill chips.

OrderProductBoutiqueStatusWhen
#AE-4821Gentle Facial Cleansing PasteOnlineShipped2 days ago
#AE-4790Parsley Seed Anti-Oxidant SerumSoHo, NYCollected1 week ago
#AE-4755Resurrection Aromatique Hand WashOnlineProcessing1 week ago
#AE-4718Geranium Leaf Body CleanserOnlineDelivered3 weeks ago
#AE-4702Classic Shampoo & ConditionerMarais, ParisCollected1 month ago
1–5 of 412
‹123›

Account

Auth forms keep the system's hush: ivory cards, square fields on cream, the single charcoal CTA, and an outline SSO option.

Sign in

Welcome back

OR
Create account

Join Aesop

OR