Aesop Design System

Overview

Aesop's storefront is the most restrained interface in luxury skincare — a cream-paper canvas ({colors.canvas} — #fffef2) carrying warm-graphite ink ({colors.ink} — #333333), with every interactive surface rendered at a 0px corner. Where most beauty brands sell with pillowed cards, photographic gradients, and bold rose-gold accents, Aesop holds the chrome at right angles and lets the product photography carry the entire emotional load.

The type system is bi-modal. SuisseIntl grotesque at 14px / 21px line-height handles 90% of the page — body text, navigation, button labels, input fields, footer columns. The single humanist break is Zapf-Humanist serif at 31px / 41.23px, reserved for the "New and notable" homepage headline. No other section gets the serif. This is the system's strongest editorial decision: one typeface holds the page; one serif holds a single moment.

Apothecary discipline: Aesop's interface inherits from print apothecary labels — right-angle frames, hairline borders, narrow vertical type rhythm, no decorative depth. Where most e-commerce systems use rounded corners as a warmth signal, Aesop strips the corners entirely and asks photography to do that work. Where most luxury beauty brands amplify with rose-gold, mauve, or champagne accents, Aesop allows just one terracotta-leather ({colors.accent-terracotta} — #945c26) tint, scoped to 10 hairline borders around gift-set tiles.

Key Characteristics:

• Warm graphite ink ({colors.ink} — #333333) used 2101 times across text and hairlines — never pure black, which would feel pharmaceutical.
• Cream-paper canvas ({colors.canvas} — #fffef2) — slightly warm, deliberately not pure white. 280 surface occurrences.
• 0px corners on every button, input, tile, and card. {rounded.full} (50%) reserved for tiny avatar dots; {rounded.pebble} (20px) appears only on motion-player chrome.
• SuisseIntl grotesque dominates; Zapf-Humanist serif appears exactly once, on the "New and notable" headline.
• Asymmetric button padding 13px 24px 12px — 1px taller cap-side than baseline, an optical correction inherited from label typography.
• Photography carries warmth: amber bottle glass, warm taupe ({colors.surface-warm-taupe} — #f7ecdd) studio walls, ceramic dishes, hand-skin tones.
• 1px hairline borders in {colors.hairline} replace shadows everywhere — there is no box-shadow in the system.
• Section rhythm 40px 0px 30px — narrower than the 96px SaaS-marketing standard, denser than a magazine, calibrated for browsing 6+ products per scroll.

Colors

Ink

• Graphite ({colors.ink} — #333333): frequency 2101. Used as text (1035), border (1034), background (28), shadow (4). The dominant token — every body paragraph, hairline, primary-button fill, and product label sits on this exact warm gray. Not pure black, not slate — a warm graphite that reads as ink-on-paper.
• Soft Graphite ({colors.ink-soft} — #666666): frequency 68. Used as text (34) and border (34) — for secondary labels, sub-nav items, and meta information beside product titles.
• Deep Graphite ({colors.ink-deep} — #242424): frequency 4. Used as background (2), text (1), border (1). Reserved for the hover state of {component.button-primary} and the rare emphasised text block.
• Mid Graphite ({colors.ink-mid} — #505050): the --darkgray-light-20 variable — a one-step lift used in form field hint text.
• Quiet ({colors.ink-quiet} — #999999): a near-mid gray used in disabled states and form placeholder text.
• Pure Black ({colors.ink-pure} — #000000): frequency 98. Used as text (46), border (46), background (2). Reserved for SVG icon strokes and a small handful of overlay frames — Aesop avoids it for body text because it reads colder than graphite.

Surface

• Canvas ({colors.canvas} — #fffef2): frequency 280. Used as text (138 — on dark surfaces), border (125), background (16). The default page floor. Tinted just enough to read as paper rather than screen.
• Warm Taupe ({colors.surface-warm-taupe} — #f7ecdd): frequency 3, all as background. The hero-band backdrop and feature-card-split fill — the photograph-friendly warm wall behind product hero shots.
• Cool Gray ({colors.surface-cool-gray} — #e4e9ea): a faint cool-gray reserved for the motion-player chrome and very-quiet section dividers.

Hairline

• Hairline ({colors.hairline} — #333333): the 1px border tone on every product tile, text input, and footer column rule. Same hex as {colors.ink} — borders feel like ink lines rather than separate elevation steps. This single design move (ink = border) is why Aesop's pages read as one continuous sheet of paper rather than stacked cards.
• Hairline Soft ({colors.hairline-soft} — #666666): the secondary divider tone used inside dropdown menus and sub-nav rows.

Accent

• Terracotta Leather ({colors.accent-terracotta} — #945c26): frequency 20. Used as text (10) and border (10). The closest thing to a brand accent — appears in gift-set tile borders, deluxe-product labels, and a handful of season-collection markers. Scoped narrowly. Never as a button fill.
• Deep Teal ({colors.accent-deep-teal} — #193d46): a near-charcoal teal reserved for the on-page motion player chrome — outside the brand-tone palette.
• Slate ({colors.accent-slate} — #435d63): paired with deep teal in player UI.
• Stone ({colors.accent-stone} — #a7b4b8): a cool stone for icon-only badges in the motion player.
• Mist ({colors.accent-mist} — #a6a6a6): the disabled-text variant — appears on greyed-out form labels.
• Amber ({colors.accent-amber} — #e9962d): a warm amber used as a single highlight in product-rating indicators — not a brand voltage, deployed once or twice per page.

Typography

Font Family

The system runs SuisseIntl and SuisseIntl-Medium as the grotesque sans for body, navigation, buttons, inputs, footer columns — every label that isn't the homepage hero headline. Zapf-Humanist serif at 31px appears exactly once, on the "New and notable" headline. The fallback stacks walk Söhne, Inter, sans-serif for the grotesque and Optima, sans-serif for the humanist serif.

The split is editorial:

• SuisseIntl grotesque (weight 400) → body, captions, footer
• SuisseIntl-Medium (weight 400, slightly heavier glyph) → buttons, nav, h2 sub-heads, emphasized labels
• Zapf-Humanist serif (weight 400) → exactly one h2 ("New and notable")

Hierarchy

Principles

Aesop's type system stays at weight 400 across every display tier — there is no 600 or 800. The SuisseIntl-Medium variant carries the "heavier" labels without ever entering a true bold weight. Letter-spacing stays at zero everywhere. Line-heights run loose at 1.5–1.7 for body and tight at 1.2 for tiny captions — the rhythm reads as a printed catalogue, not a SaaS dashboard.

If SuisseIntl is unavailable, Söhne or Inter at weight 400/500 are the closest substitutes — both keep the humanist proportions Aesop needs. For Zapf-Humanist, Optima or Albertus are acceptable approximations; never substitute a slab-serif or transitional like Garamond, which would shift the brand from apothecary to publication.

Layout

Spacing System

• Base unit: 4px.
• Tokens: {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 10px · {spacing.md} 12px · {spacing.base} 15px · {spacing.lg} 16px · {spacing.xl} 17px · {spacing.xxl} 20px · {spacing.section} 24px · {spacing.band} 40px.
• Dominant rhythm: 12px (70 occurrences) and 8px (44) — the body breathing units.
• Section padding: 40px 0px 30px between major rails — denser than the 96px SaaS-marketing standard, calibrated for browsing 6+ products per scroll.
• Product-tile padding: 12px 0px 0px between image and label, then 0px 15px for horizontal label gutters.
• Button padding: 13px 24px 12px — the asymmetric label-typographic correction.

Grid & Container

• Max content width: ~1170px centered (heroHeading width measures 1170px in the extraction).
• Product rail: 3-up at desktop, 2-up at tablet, 1-up at mobile.
• Hero band: 50/50 split between full-bleed image and overlay copy card.
• Footer: 4-column link list at desktop, single column at mobile.

Whitespace Philosophy

The cream canvas + zero-radius geometry + dense product rails create a catalogue pacing — Aesop reads as a printed apothecary index rather than a marketing storefront. Section gaps stay narrow (40px) so the eye can scan four product rails without leaving the fold; internal tile padding stays generous so the photography breathes.

Elevation & Depth

The elevation philosophy is hairline as border: the same warm graphite serves as both ink and 1px rule, so a bordered tile reads as inked-on-paper rather than a stacked card. No drop shadows on product chrome. No gradients. The depth comes from photography composition (foreground bottle on warm taupe wall) and from the inverse panel — dark {colors.ink} blocks on cream — rather than from shadows or elevation steps.

Shapes

Border Radius Scale

Photography

Aesop's photography is the brand's load-bearing visual asset:

• Warm-lit amber bottle glass against warm taupe ({colors.surface-warm-taupe} — #f7ecdd) studio walls
• Ceramic dishes, brass droppers, raw stone surfaces in product hero shots
• Hand-skin tones in the "appreciate gesture" feature card — never face crops, often partial gesture
• Gift-set arrangements with terracotta-leather ({colors.accent-terracotta} — #945c26) accents

When photography is absent, the system falls back to inverse panels (dark {colors.ink} block) or warm taupe surfaces. Photography is never decorative — every shot carries a product.

Components

Top Navigation

top-nav — Cream nav bar pinned to the top of every page. 51px tall, {colors.canvas} background, no border. Carries the Aesop wordmark at left, primary horizontal menu (Skin, Hair, Body, Home, Read) and a search / cart / sign-in cluster at right. Menu items in {typography.nav-link} (SuisseIntl-Medium 14px / 1.2) with 17px padding.

nav-link — Individual top-nav item. Transparent background, {colors.ink} text, 17px padding all sides, {rounded.none} corners. No underline at rest; hover state is undocumented.

Buttons

button-primary — The signature graphite CTA. Background {colors.ink} (#333333), text {colors.on-ink} (#fffef2), type {typography.button} (SuisseIntl-Medium 14px / 1.5), padding 13px 24px 12px, height 48px, {rounded.none}. Used for "Add to cart", "Add all to cart", "Discover".

button-primary-hover — Hover state darkens to {colors.ink-deep} (#242424). The only state change documented in the system — Aesop intentionally avoids press-state animation.

button-secondary — Cream button with hairline outline. Background {colors.canvas}, text {colors.ink}, 1px {colors.ink} border, same padding and height as primary. Used for "Browse all" and "Read more" CTAs.

button-text-link — Inline text button, no background. Used for "Find out more" beneath feature cards. Type {typography.link-emphasis} (SuisseIntl 14px / 700).

Cards & Containers

hero-band — Warm taupe-tinted hero with a 50/50 split: a full-bleed product photograph on one side, an inverse-panel overlay card on the other. Background {colors.surface-warm-taupe}, padding 40px 0px 30px.

hero-overlay-card — The inverse-panel sitting inside the hero band. Background {colors.ink}, text {colors.on-ink}, type {typography.heading-md} (SuisseIntl 30px), 20px padding, {rounded.none}. Carries the product name, a 2-line description, and a {component.button-primary}.

category-rail — The "New and notable" section. Cream background, Zapf-Humanist serif headline in {typography.display-serif} (31px), followed by a 3-up product-tile grid. Padding 40px 0px 30px. This is the only place the serif appears.

product-tile — The atomic catalogue unit. Background {colors.canvas}, 1px {colors.hairline} border, {rounded.none}. Internal padding 12px 0px 0px from image to label, then 0px 15px horizontal gutter on {component.product-tile-label} and {component.product-tile-price}. Carries a product photograph, a 16px SuisseIntl-Medium title, a 12px caption price, and a {component.button-primary} at the bottom.

product-tile-label — The title row inside a product tile. Type {typography.body-md} (SuisseIntl 14px / 1.5), {colors.ink} text, padding 0px 15px.

product-tile-price — The price line. Type {typography.caption} (SuisseIntl 11px), {colors.ink} text, padding 0px 15px.

feature-card-split — A two-column feature card. One side carries warm taupe surface ({colors.surface-warm-taupe}) with a product photograph; the other carries the headline and body copy. {rounded.none} corners, 20px internal padding.

feature-card-dark — The inverse variant. Background {colors.ink}, text {colors.on-ink}, used for season-collection callouts and limited-edition announcements. Same padding and geometry as the warm taupe version.

Inputs & Forms

text-input — Standard form field. Background {colors.canvas}, text {colors.ink}, 1px {colors.ink} border, type {typography.body-md} (SuisseIntl 14px), {rounded.none} corners, padding 0px 16px, height 40px. Used for the email field in the newsletter form.

newsletter-form — Pre-footer email-capture row. Single {component.text-input} field on the left, {component.button-primary} ("Subscribe") on the right, both at 40px height. Internal padding 0px 23px.

Decoration

avatar-dot — One of only two {rounded.full} elements in the system. 8px diameter, {colors.ink} fill. Used as section-progress indicators and decorative pips next to ingredient lists.

hairline-rule — 1px horizontal rule in {colors.hairline}. Replaces every place a drop-shadow would normally separate sections in other systems.

Footer

footer — Cream-canvas footer with 4-column link list. Background {colors.canvas}, text {colors.ink}, 1px top border, padding 40px 0px 30px. Column heads in {typography.heading-sm} (SuisseIntl 18px / 700), link rows in {typography.link-label} (SuisseIntl-Medium 16px / 1.5). The footer never inverts — Aesop refuses the dark-footer convention that most e-commerce brands use.

Do's and Don'ts

Do

• Anchor every page on the cream canvas {colors.canvas} (#fffef2). Pure white reads as pharmacy; the warm tint is the brand differentiator.
• Use {colors.ink} (#333333) for both text and hairline borders. The shared hex is what makes pages read as one continuous sheet rather than stacked cards.
• Render every interactive surface at {rounded.none} (0px). The right-angle geometry is the system's strongest editorial decision.
• Reserve the Zapf-Humanist serif for exactly one moment per page. The "New and notable" h2 is the canonical use — never apply it to product titles or button labels.
• Preserve the asymmetric 13px 24px 12px button padding verbatim. The 1px top-bottom asymmetry is an optical correction inherited from print labels.
• Use photography to carry brand warmth. The chrome stays neutral; the bottle glass, warm taupe wall, and hand-gesture shots do the emotional work.
• Apply hairline borders (1px solid {colors.hairline}) instead of drop shadows for every elevation moment.

Don't

• Don't use pure black (#000000) for body text — it reads as pharmaceutical against cream and breaks the warm-graphite continuity. Reserve #000000 for SVG icon strokes only.
• Don't round any corner beyond {rounded.full} (50%) on avatar dots. A 4px or 8px radius on a product tile or button immediately reads as a different brand.
• Don't use Zapf-Humanist for more than one headline per page. Aesop's serif scarcity is the design — running it on h3 or button labels destroys the singular editorial moment.
• Don't paint a saturated accent across the storefront. The terracotta {colors.accent-terracotta} (#945c26) appears in just 10 hairline borders — never as a button fill or text color.
• Don't add box-shadow to product tiles, cards, or modals. The system uses hairline borders for separation; shadows immediately read as Material-Design.
• Don't invert the footer to dark. Aesop's footer is cream-on-cream because the brand refuses the e-commerce convention of dark-footer chrome.
• Don't substitute Garamond or another transitional serif for Zapf-Humanist. The humanist proportions are essential — a transitional would shift the page from apothecary to publication.

Responsive Behavior

Breakpoints

Touch Targets

• {component.button-primary} at 48px height — comfortably above WCAG 44px.
• {component.text-input} at 40px height — slightly below 44px but visually centered with the adjacent submit button.
• {component.nav-link} at 51px effective tap area with 17px padding.
• {component.product-tile} entire card is tappable; effective tap area >> 44px.

Collapsing Strategy

• Top nav collapses to hamburger at < 768px; menu opens as a full-screen cream sheet.
• Hero band's 50/50 split collapses to single-column on mobile — image first, overlay card below.
• Product rails reduce columns rather than scaling tiles down. A 3-up desktop rail becomes 2-up tablet, 1-up mobile.
• Footer columns collapse 4 → 1 on mobile with rule dividers between groups.

Known Gaps

• SuisseIntl and Zapf-Humanist are licensed typefaces not available as public web fonts. Substitutes (Söhne / Inter for SuisseIntl; Optima / Albertus for Zapf-Humanist) are documented in the typography section.
• Aesop's product photography is the brand's load-bearing visual asset — photography direction, lighting setup, and prop styling are out of scope for a token document.
• Cart flyout, checkout flow, and account-area chrome are not extracted from the homepage capture.
• The store-locator map, ingredient-modal overlay, and gift-personalisation flow each carry component variants not present in the homepage.
• Motion behavior (hover-fade product tiles, drawer-slide cart, image-carousel pagination) is undocumented.
• The motion-player chrome that appears in some campaign pages ({colors.accent-deep-teal}, {colors.accent-slate}, 20px corners) is a third-party Flowplayer component outside the Aesop brand system — those tokens are extracted but should not be treated as canonical Aesop chrome.