Files
teamai-test/.teamai/skills/common/web-design-engineer/references/style-recipes/aesop.md
T

53 lines
2.7 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# aesop — Aesop Skincare
- **School**: Editorial / Minimalist
- **Vibe**: Apothecary refinement, sage and ink, serif copy as conversation
- **Best for**: Premium consumer goods (skincare, candles, eyewear), restaurants with literary aspirations, hospitality
- **Touchstone**: aesop.com, Aesop store windows, the brown amber bottle
**Palette**
- Ground: `#E8E4D9` (warm chamois) — sometimes `#F2EFE5`
- Ink: `#1B1B1B` (true near-black for copy)
- Sage muted: `#7A8470`
- Amber bottle accent: `#7A4623` (used very sparingly, e.g., a single rule or seal mark)
- Cream surface: `#F0EDE4`
**Typography**
- Display & body: a single transitional serif at every size — Suisse Works, Lyon Text, or GT Sectra (weight 400, italic available). Aesop pairs serif for body copy with a single sans for UI labels (Söhne or Helvetica Now).
- Body size: 16–18px; line-height ~1.65
- Labels in small caps (10–11px, letter-spaced 0.12em)
**Spacing**: 8 / 16 / 24 / 40 / 72 / 120
**Radius**: 0 throughout, including form fields. Aesop is square-edged.
**Shadow**: none.
**Motion**: subtle fades, slow drawer slide-ins (~450ms ease-out). Never spring-bounce.
**Signature moves**
- Body copy reads like product writing in a literary magazine — long, well-cadenced sentences, justified text, no marketing punchiness
- Product is photographed on a warm chamois surface with a single sage prop (leaf, marble dish, linen) and a long shadow
- Small-caps section labels (`INGREDIENTS` / `RITUAL`) above each block
- All-text navigation in the masthead, letter-spaced
- Asymmetric layouts: image left, generous right-margin block of copy; never centered-everything
**Avoid**
- Bold weights anywhere — Aesop is all regular and italic
- Color other than sage / amber / ink — no blues, no purples, no UI-blue accents
- Pop-up modals (Aesop's UI politely waits)
- Lifestyle stock photography of smiling models — props and product only
**AI prompt seed**
> Amber-glass apothecary bottle on warm chamois #E8E4D9 textured paper, single linen napkin and dried sage sprig, raking afternoon window light, deep soft shadow at lower right, 4:5, editorial product photography, color grading warm with slight green cast.
**Don't use when**
- The product is software or digital-first — Aesop's tactile object photography defines half the recipe; you can't fake it with CSS
- The audience expects price-comparison utility — Aesop never shows pricing prominently
- The voice needs to be funny or casual — Aesop is sincere and slow
---
> **Same school — Editorial / Minimalist**: [`apple-hig`](./apple-hig.md) · [`muji-kenya-hara`](./muji-kenya-hara.md) · [`dieter-rams-braun`](./dieter-rams-braun.md) · [`monocle-magazine`](./monocle-magazine.md)
> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)