What is Aesop's primary brand color?

Aesop does not run a single saturated brand voltage. The dominant token is warm graphite #333333 with 2101 occurrences across text and 1px hairlines — never the pure black that would feel pharmaceutical. The cream canvas #fffef2 (280 occurrences) sits underneath as the warm-paper floor. The closest thing to an accent is the terracotta-leather #945c26 used in 10 border instances around gift-set tiles, and warm taupe #f7ecdd used as a backdrop in 3 product hero photos. The brand resists pigment as a positioning move — photography carries the warmth instead.

What typography does Aesop use, and what should I use if SuisseIntl is unavailable?

Aesop runs SuisseIntl (and SuisseIntl-Medium) as the grotesque sans for 90% of the page — body text, navigation, buttons, and inputs all sit at 14px with 21px line-height. The single humanist break is Zapf-Humanist serif at 31px / 41.23px for the homepage 'New and notable' headline. 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 open-source approximations; never substitute a slab-serif or transitional like Garamond, which would shift the brand from apothecary to publication.

Why does Aesop use 0px corners everywhere?

Every button, input, product tile, category card, and modal panel renders at 0px border-radius. Only avatar dots and a few decorative motion-player elements use 50%. The right-angle geometry inherits from print apothecary labels and museum-display typography — the corners refuse to soften, refuse to look 'web-friendly', refuse to look like every other e-commerce template. The design move forces the rest of the system (hairlines, photography, type) to do the warmth work that rounded corners would otherwise handle in a softer skincare brand.

Can I use this DESIGN.md to build my own React app?

Yes — the file is structured to feed into Claude, Cursor, or any AI tool that reads design tokens. The agent reproduces Aesop's apothecary discipline (cream canvas, graphite ink, 0px corners, SuisseIntl grotesque, hairline borders) rather than a generic shadcn theme. Every color, type style, radius, and spacing value is a quoted token you can paste into Tailwind config, CSS variables, or your own component library. The button padding of 13px 24px 12px is preserved as a literal string — the small top-bottom asymmetry is intentional and inherited from print label baselines.

What spacing rhythm does Aesop use?

The base unit is 4px, but the page leans on 12px (70 occurrences) and 8px (44 occurrences) as the dominant rhythm. Tile internal padding sits at 0px 15px and 12px 0px 0px — narrow horizontal breathing room with deliberate vertical separation between image and label. The primary button uses 13px 24px 12px — taller cap-side than baseline by 1px, a typographic correction that compensates for SuisseIntl's optical descender. Section gaps run 40px 0px 30px between category rails and 17px 0px between newsletter form rows.

What's missing from this DESIGN.md spec?

A handful of items documented in the Known Gaps section. SuisseIntl and Zapf-Humanist are licensed typefaces and not available as public web fonts — substitutes are listed but not exact. Aesop's product photography (warm-lit amber bottles, ceramic dishes, white cloth backdrops) is the brand's load-bearing visual asset, and photography direction is out of scope for a token document. Cart flyout, checkout, 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 extraction. Motion (hover-fade product tiles, drawer-slide cart) is undocumented.

Aesop Design System

Aesop's apothecary e-commerce design system as a DESIGN.md file.

About Aesop DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source aesop.com

E-commerce & Retail

Aesop's storefront is built around one observation: a global skincare brand can sell at luxury price points without using a single drop shadow, gradient, or rounded corner. The canvas is a warm cream (#fffef2) tinted just enough to read as paper, not screen. Ink is a warm graphite (#333333) used 2101 times across text and 1px hairlines — never the pure black that would feel pharmaceutical. Photography handles every moment of brand warmth: amber bottle glass, warm taupe (#f7ecdd) studio walls, terracotta-leather (#945c26) accents in the gift-set tiles. The chrome stays out of the way.

This page packages the storefront into a DESIGN.md file. Inside: 18 color tokens grouped into ink, surface, hairline, and accent layers; 12 type styles built on SuisseIntl grotesque with one Zapf-Humanist serif moment for the "New and notable" headline; a 2-step corner radius (0px almost everywhere, 50% only on avatar dots); a 4px-based spacing scale that pivots at 13px 24px 12px for the signature button, and 18 components covering the top-nav, hero band, product tile, category grid, newsletter input, and footer.

Feed the file to Claude, Cursor, or GitHub Copilot. The agent reproduces Aesop's apothecary discipline — right-angle buttons, hairline borders, cream canvas, SuisseIntl labels — instead of a generic SaaS theme. Reference tokens directly in Tailwind config or CSS variables, audit an existing storefront against this baseline, or use the file as a teaching artifact for what restraint actually looks like when every component is asked to recede.

What makes it distinct

Zero-radius geometryevery button, input, product tile, and category card sits at 0px corners; only avatar dots use 50%
Two-typeface systemSuisseIntl grotesque at 14px / 16px for 90% of the page, Zapf-Humanist serif reserved for the single 'New and notable' headline at 31px
Graphite ink (#333333) over off-cream canvas (#fffef2)2101 ink occurrences against 280 cream, the dominant warm-monochrome contrast
Terracotta-leather accent (#945c26) appears in just 10 bordersa scarcity move that lets photography carry the brand warmth instead of pigment
13px 24px 12px asymmetric button paddingtaller cap-side than baseline, a small typographic correction inherited from print apothecary labels

Live at aesop.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

aesop.com

Explore Aesop

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Aesop design system FAQ

Common questions about Aesop's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Aesop — official site

The Australian skin, hair, and body care brand's own storefront — the source for this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files.

Use Aesop in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→