# Aesop · Design system migration spec

> Source: https://www.aesop.com  ·  Curated by OpenDesign  ·  en

> A masterclass in restrained, premium e-commerce design that prioritizes product and typography over visual noise.

## 1. Identity DNA

This system is conceived as a digital gallery for botanical apothecary products. The design's restraint is its primary luxury, creating a curated space where product and typography are the focal points.

**One-liner:** A restrained, premium e-commerce experience for curated skincare and fragrance products.
**Keywords:** apothecary · minimalism · botanical · premium skincare · curation
**Analogy:** A digital gallery for botanical apothecary products

## 2. Color

The palette is one of high-contrast and deliberate omission. A warm off-white background provides the canvas for dark gray ink and muted accents.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFEF2` | main background |
| `--ink` | `#333333` | body text |
| `--ink-soft` | `#666666` | secondary text |
| `--muted` | `#93938D` | placeholder |
| `--line` | `rgba(51, 51, 51, 0.2)` | divider |

**Color principle:** High-contrast, restrained palette prioritizing typography and product imagery.

The principle is subtraction: every color must justify its presence against the dominant neutral field.

## 3. Typography

Typography is handled exclusively with humanist-sans faces, set in light to regular weights to maintain an airy, refined feel. This creates a consistent, sophisticated voice across headlines and body copy.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 31px | 1.0 | 400 | -0.5px | Main product titles |
| h1 | 31px | 1.0 | 400 | -0.5px | Section headings |
| body | 14px | 1.2 | 400 | 0px | Primary body text |
| caption | 11px | 1.2 | 400 | 0px | Labels and fine print |
| label | 12px | 1.3 | 400 | 0px | Navigation and links |

**Type rules:**
- Use humanist-sans for all primary text elements.
- Maintain light to regular font weights (400) for a refined feel.
- Ensure generous line-height (1.2-1.3) for readability.

## 4. Spacing

Spatial rhythm is governed by a consistent 4px grid, ensuring harmonious proportional relationships across the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px grid with moderate scale steps.

## 5. Surfaces

Depth is suggested with extreme subtlety, through barely-there shadows and thin, precise borders. Surfaces remain flat and sharp, rejecting softness in favor of a clean, apothecary-like precision.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - rgba(255, 254, 242, 0.2) 0px 2px 4px 0px
- **Borders:** 1px solid rgba(51, 51, 51, 0.2)

## 6. Layout

The layout employs an asymmetric grid, giving prominence to large product photography. Text blocks are centered within this structure, creating a gallery-like presentation for each item.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Asymmetric grid with large product photography and centered text blocks.

## 7. Motion & Interaction

Motion is functional and non-distracting, providing immediate feedback through short, ease-out transitions. Every animation serves a utilitarian purpose, reinforcing the interface's quiet efficiency.

- **Durations:** micro 200ms · small 250ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth background-color transitions on hover.
  - Subtle transform effects on interactive elements.

- **Hover:** Subtle background-color change and cursor update.
- **Click:** Immediate visual feedback via transition.
- **Transition:** Short duration (0.2s-0.5s) ease-out transitions for all properties.
- **Keyboard:** Standard focus states with visible outlines.

## 8. Voice & Don'ts

The editorial voice is sophisticated and poetic, favoring brief, evocative titles over explanatory text. Calls to action are understated, using arrows or simple imperatives like 'Discover'.

- **Tone:** Sophisticated, poetic, and informative.
- **Headline style:** Brief, evocative titles.
- **CTA style:** Understated, using arrows or simple text like 'Discover'.
- **Avoid:** Salesy language / Loud promotional banners / Cluttered interfaces

### Don'ts
- ❌ Don't use bright, saturated accent colors — the palette is muted and neutral.
- ❌ Don't use heavy, bold font weights — the design relies on light and regular weights.
- ❌ Don't use rounded corners or soft shadows — the aesthetic is sharp and precise.
- ❌ Don't use complex, multi-colored gradients — the background is a flat, warm off-white.
- ❌ Don't use cluttered layouts — prioritize generous whitespace and large imagery.
- ❌ Don't use loud, urgent call-to-action text — keep it understated and elegant.

The system deliberately avoids visual noise, loud promotions, and any element that distracts from the calm, curated presentation of the products.

## System Prompt (paste into AI tool)

```
Design a restrained, premium e-commerce experience for a curated skincare and fragrance brand. The palette uses a warm off-white (#FFFEF2) background with dark gray (#333333) ink and muted (#93938D) accents. Typography is exclusively humanist-sans with light to regular weights (400) for a refined, airy feel. Critical donts: never use bright accent colors; avoid heavy font weights; and maintain generous whitespace. The layout should feel like a digital gallery, with large product photography and centered text blocks.
```