---
version: "1.0"
name: "Aesop"
description: "Sistema visual de Aesop: canvas crema #FFFEF2 (nunca blanco), tinta carbón #333333 (nunca negro), y un único acento ámbar #945C26 tomado del frasco de vidrio. Tipografía SuisseIntl (grotesca suiza) con Zapf-Humanist serif puntual, cuerpo de 14px, radios de 2px y bandas oscuras #252525 para la fotografía matérica. Lujo discreto de apotecario: texto largo, culto, que se lee despacio."
colors:
primary: "#945C26"
secondary: "#333333"
accent: "#C08A4E"
accent-soft: "#EFE4D5"
neutral: "#666666"
background: "#FFFEF2"
surface: "#F6F5E8"
surface-elevated: "#FFFFFF"
surface-dark: "#252525"
surface-gray: "#F3F3F3"
text-primary: "#333333"
text-secondary: "#666666"
text-muted: "#999999"
text-deep: "#242424"
text-on-primary: "#FFFEF2"
text-on-dark: "#FFFEF2"
border: "#CED4DA"
border-subtle: "#E4E2D2"
success: "#4F6B4A"
warning: "#945C26"
error: "#8C3A2B"
info: "#333333"
typography:
display:
fontFamily: "Zapf-Humanist"
fontSize: "31px"
fontWeight: 300
lineHeight: "115%"
h1:
fontFamily: "SuisseIntl"
fontSize: "36px"
fontWeight: 400
lineHeight: "140%"
h2:
fontFamily: "SuisseIntl"
fontSize: "31px"
fontWeight: 400
lineHeight: "130%"
h3:
fontFamily: "Zapf-Humanist"
fontSize: "30px"
fontWeight: 400
lineHeight: "120%"
body-lg:
fontFamily: "SuisseIntl"
fontSize: "16px"
fontWeight: 400
lineHeight: "175%"
body-md:
fontFamily: "SuisseIntl"
fontSize: "14px"
fontWeight: 400
lineHeight: "180%"
body-sm:
fontFamily: "SuisseIntl"
fontSize: "12px"
fontWeight: 400
lineHeight: "160%"
label:
fontFamily: "SuisseIntl-Medium"
fontSize: "11px"
fontWeight: 500
lineHeight: "140%"
letterSpacing: "0.16em"
rounded:
none: "0"
hair: "1px"
base: "2px"
right: "0 4px 4px 0"
round: "50%"
spacing:
base: "4px"
sm: "12px"
md: "16px"
lg: "24px"
xl: "32px"
2xl: "48px"
3xl: "64px"
gap: "16px"
section-padding: "96px"
components:
button-primary:
backgroundColor: "{colors.text-primary}"
textColor: "{colors.text-on-primary}"
typography: "{typography.label}"
rounded: "{rounded.base}"
padding: "15px 28px"
button-secondary:
backgroundColor: "transparent"
textColor: "{colors.text-primary}"
borderColor: "{colors.border}"
rounded: "{rounded.base}"
padding: "15px 28px"
card:
backgroundColor: "{colors.background}"
borderColor: "{colors.border-subtle}"
rounded: "{rounded.base}"
padding: "24px"
---
# DESIGN.md - Aesop
> Sistema de diseño extraído de `https://www.aesop.com` (sitio de comercio, julio 2026) siguiendo el skill `url-inspiration-styleguide`.
> Valores medidos del CSS computado del sitio en vivo (fondo del body, fuentes, escala, radios, sombras, frecuencias de color). Los estados que el sitio no expone se marcan con `(derivado para completar el sistema)`.
---
## 1. Tema Visual y Atmósfera
Aesop se siente como el catálogo de un apotecario que también sabe de tipografía suiza. El fondo del `body` no es blanco: es `#FFFEF2`, un crema marfil con un punto de amarillo que basta para que la página deje de parecer una pantalla y empiece a parecer papel. Sobre ese crema cae una tinta que tampoco es negra: el carbón `#333333` (588 ocurrencias en el CSS), que baja el contraste de 21:1 a 12.5:1. Sigue siendo AAA, pero se lee sin fatiga en párrafos de trescientas palabras, que es exactamente lo que la marca escribe.
El único color del sistema es el ámbar `#945C26`, el tono del vidrio del frasco. Aparece dos veces en todo el CSS. Dos. Se reserva para el precio, un enlace, un filete. La marca no tiene paleta secundaria, no tiene colores de categoría, no tiene degradados: tiene un neutro tibio, una tinta y un acento.
La profundidad no viene de sombras sino de materia. Las bandas `#252525` (1671 ocurrencias, el color más frecuente del sitio) sostienen la fotografía: aceite espeso sobre piedra, una hoja contra la sombra, un frasco iluminado desde un solo lado. El pulso del sitio es esa alternancia entre crema y carbón, como pasar páginas de un catálogo impreso.
La tipografía es **SuisseIntl** (Swiss Typefaces, comercial, 683 ocurrencias) con **SuisseIntl-Medium** para etiquetas (90 ocurrencias) y **Zapf-Humanist** serif para uso puntual editorial (8 ocurrencias). El cuerpo es pequeño: 12px es el tamaño más frecuente de la página (441 ocurrencias) y 14px el segundo (209). En un sitio de comercio eso es una declaración: la marca asume que su lector se acerca.
**Palabras clave de personalidad**: apotecario, botánico, lujo-discreto, editorial, matérico, calmo, culto
**Densidad del layout**: espaciosa (96-128px por sección; el aire es el lujo)
**Modo preferido**: claro (crema `#FFFEF2` con bandas oscuras `#252525` como contrapunto)
**Nivel de ornamentación**: minimal-extremo (radio máximo 2px, sin sombras, sin degradados; el único adorno es la versalita con tracking abierto)
**Audiencia visual objetivo**: un lector adulto que compra cosmética como quien compra un libro; alguien que lee la lista de ingredientes y el ensayo sobre la hoja de geranio antes de mirar el precio
---
## 2. Paleta de Colores y Roles Semánticos
Tres decisiones sostienen toda la paleta: el crema en vez del blanco, el carbón en vez del negro, y un solo ámbar.
### Colores de marca
| Nombre | Variable CSS | Hex | Rol | Texto sobre él |
|--------|-------------|-----|-----|----------------|
| Ámbar del frasco | `--color-primary` | `#945C26` | Acento único: precio, enlaces, filetes, focus (2 ocurrencias reales) | `#FFFEF2` |
| Ámbar aclarado | `--color-primary-soft` | `#C08A4E` | El ámbar sobre superficies oscuras `(derivado para completar el sistema)` | `#252525` |
| Velo ámbar | `--color-primary-wash` | `#EFE4D5` | Fondo de badge / highlight sobre crema `(derivado para completar el sistema)` | `#333333` |
| Carbón (ink) | `--color-ink` | `#333333` | Texto principal, CTA, titulares (588 ocurrencias) | `#FFFEF2` |
| Ámbar hover | `--color-primary-hover` | `#7E4D1F` | Hover del ámbar `(derivado para completar el sistema)` | `#FFFEF2` |
### Colores de superficie
| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Crema (canvas) | `--color-canvas` | `#FFFEF2` | Fondo del `body` (922 ocurrencias). Es la marca. |
| Crema apagado | `--color-surface` | `#F6F5E8` | Secciones alternas, tiles, cards de sección (1209 ocurrencias) |
| Blanco puro | `--color-surface-elevated` | `#FFFFFF` | Fichas de producto y modales, solo ahí (43 ocurrencias) |
| Gris neutro | `--color-surface-gray` | `#F3F3F3` | Skeletons, disabled, superficies inertes (6 ocurrencias) |
| Carbón profundo | `--color-dark` | `#252525` | Bandas fotográficas, footer (1671 ocurrencias, el color más frecuente) |
| Carbón secundario | `--color-dark-2` | `#333333` | Superficie oscura secundaria, overlays (126 ocurrencias como fondo) |
| Borde | `--color-border` | `#CED4DA` | Campos, divisores, borde del botón secundario (43 ocurrencias) |
| Hairline cálido | `--color-hairline` | `#E4E2D2` | Filete casi invisible sobre crema `(derivado para completar el sistema)` |
### Colores de texto
| Nombre | Variable CSS | Hex | Uso |
|--------|-------------|-----|-----|
| Texto primary | `--color-text` | `#333333` | Cuerpo, titulares (588 ocurrencias) |
| Ink profundo | `--color-text-deep` | `#242424` | Titular editorial, el punto más oscuro del texto (1 ocurrencia) |
| Texto secondary | `--color-text-secondary` | `#666666` | Párrafos largos, notas de formulación (34 ocurrencias) |
| Texto muted | `--color-text-muted` | `#999999` | Placeholders, volumen, metadata (1 ocurrencia) |
| Texto on-primary | `--color-text-on-primary` | `#FFFEF2` | Crema sobre ámbar y sobre carbón. **Nunca blanco puro.** |
| Texto on-dark | `--color-text-on-dark` | `#FFFEF2` | Sobre bandas `#252525` (155 ocurrencias como color de texto) |
### Contrastes verificados
| Combinación | Ratio | Nivel |
|-------------|-------|-------|
| `#333333` sobre `#FFFEF2` | 12.5:1 | AAA |
| `#242424` sobre `#FFFEF2` | 15.4:1 | AAA |
| `#666666` sobre `#FFFEF2` | 5.7:1 | AA |
| `#945C26` sobre `#FFFEF2` | 5.5:1 | AA |
| `#FFFEF2` sobre `#945C26` | 5.5:1 | AA |
| `#FFFEF2` sobre `#252525` | 15.2:1 | AAA |
| `#C08A4E` sobre `#252525` | 5.1:1 | AA |
| `#999999` sobre `#FFFEF2` | 2.9:1 | AA large / solo metadata |
| `#945C26` sobre `#252525` | **2.8:1** | **Falla. No usar.** |
> El ámbar puro sobre carbón no se lee. Por eso el sistema deriva `#C08A4E` para las bandas oscuras: mismo gesto, 5.1:1.
### Colores de estado
> El sitio no expone un sistema de estado visible. Los siguientes están derivados dentro de la gama botánica de la marca, sin salirse de los tierra.
| Estado | Variable CSS | Hex | Texto |
|--------|-------------|-----|-------|
| Éxito | `--color-success` | `#4F6B4A` | `#FFFEF2` `(derivado)` |
| Advertencia | `--color-warning` | `#945C26` | `#FFFEF2` (el propio ámbar) |
| Error | `--color-error` | `#8C3A2B` | `#FFFEF2` `(derivado)` |
| Info | `--color-info` | `#333333` | `#FFFEF2` (el carbón; la marca no tiene azul) |
---
## 3. Reglas de Tipografía
```css
/* Voz principal: SuisseIntl (Swiss Typefaces, comercial, self-hosted,
683 ocurrencias) + SuisseIntl-Medium (90 ocurrencias) ->
sustituto Google: Urbanist */
--font-sans: 'Urbanist', 'SuisseIntl', Helvetica, sans-serif;
/* Voz editorial puntual: Zapf-Humanist (serif humanista, 8 ocurrencias) ->
sustituto Google: Cormorant Garamond */
--font-serif: 'Cormorant Garamond', 'Zapf-Humanist', Georgia, serif;
```
**Google Fonts (sustitutos):**
```html
```
**Nota sobre sustitución**: las dos familias de Aesop son propietarias y self-hosted.
- **SuisseIntl** (Swiss Typefaces, comercial, 683 ocurrencias) y su variante **SuisseIntl-Medium** (90 ocurrencias): la grotesca suiza que hace de voz principal. No está en Google Fonts. Sustituto: **Urbanist**, que conserva la neutralidad geométrica, el ojo bajo y las terminaciones rectas de la suiza sin caer en Helvetica ni en la lista AI-slop (Inter, Roboto, Lato, Open Sans, Montserrat).
- **Zapf-Humanist** (serif humanista, 8 ocurrencias, uso puntual editorial): el rastro de imprenta antigua del sistema. No está en Google Fonts. Sustituto: **Cormorant Garamond**, cuyo trazo fino, sus remates delgados y sus cursivas de imprenta dan el aire de apotecario que la marca busca en titulares editoriales y nombres de producto.
El mapeo `"suisse intl" → Urbanist` ya existe en `lib/fontSubstitutions.ts`, así que la sustitución es la canónica del proyecto.
> **Aesop no tiene voz monoespaciada.** El registro de "etiqueta técnica" que en otras marcas ocupa una mono, aquí lo cubre la propia sans en 11px, peso 500, `letter-spacing: 0.16em` y versalitas. Introducir una mono rompe el tono de imprenta.
### Escala tipográfica
> Tamaños reales medidos, ordenados por frecuencia: **12px** (441), **14px** (209), **16px** (83), **11px** (24), **31px** (12), **30px** (6), **18px** (3). Pesos reales: **400** (724 ocurrencias), **700** (56), **600** (1).
| Token | px | Line height | Weight | Familia | Uso |
|-------|-----|-------------|--------|---------|-----|
| `--f-display` | 31px | 115% | 300 | serif | Titular editorial (banda, hero) |
| `--f-h1` | 36px | 140% | 400 | sans | H1 real del sitio ("Plant-based and laboratory-made ingredients") |
| `--f-h2` | 31px | 130% | 400 | sans | Titular de sección |
| `--f-h3` | 30px | 120% | 400 | serif | Nombre de producto |
| `--f-body-lg` | 18px | 160% | 400 | sans | Entradilla |
| `--f-body-md` | 16px | 175% | 400 | sans | Cuerpo generoso |
| `--f-body` | 14px | 180% | 400 | sans | Cuerpo estándar |
| `--f-body-sm` | 12px | 160% | 400 | sans | Nav, notas, el tamaño más frecuente del sitio |
| `--f-label` | 11px | 140% | 500 | sans | Versalita: botón, etiqueta, categoría |
> No hay tamaños intermedios entre 18px y 30px. La jerarquía salta directo del cuerpo al titular: ese hueco es intencional y es lo que da el aire editorial.
### Pesos tipográficos
```css
--font-light: 300; /* solo en la serif, para titulares editoriales */
--font-regular: 400; /* 724 ocurrencias: el peso de la marca */
--font-medium: 500; /* SuisseIntl-Medium: versalitas y etiquetas */
--font-bold: 700; /* 56 ocurrencias: raro, para énfasis dentro de párrafo */
```
> El peso 400 cubre el 93% de las ocurrencias. **La marca casi no usa negrita.** Lo que separa un titular de un párrafo es el tamaño y el aire, no el grosor del trazo. Si estás usando `font-weight: 700` para dar jerarquía, estás resolviendo mal el problema.
### Letter spacing
```css
--tracking-normal: 0em; /* titulares y cuerpo: sin tracking */
--tracking-label: 0.16em; /* versalitas de 11-12px */
--tracking-button: 0.10em; /* versalitas de botón */
```
**Regla clave**: el tracking abierto solo existe en versalitas. Un titular de 31px con tracking positivo se ve como una marca de moda de los 2010, no como Aesop.
---
## 4. Estilos de Componentes
### Botones
**Primario (carbón, casi recto)**
```
Background: var(--color-ink) -> #333333
Color de texto: var(--color-text-on-primary) -> #FFFEF2
Padding: 15px 28px
Border-radius: 2px (radio real del sitio, el máximo del sistema)
Border: 1px solid #333333
Font-family: var(--font-sans) -> SuisseIntl
Font-weight: 500
Font-size: 12px
Letter-spacing: 0.10em
Text-transform: uppercase
Box-shadow: none (siempre)
Transición: background 350ms cubic-bezier(0.22, 1, 0.36, 1)
Hover:
Background: var(--color-primary) -> #945C26
Border-color: #945C26
Active:
Background: #7E4D1F
Disabled:
Background: #F3F3F3
Color: #999999
Cursor: not-allowed
Focus:
Outline: 1px solid var(--color-primary) -> #945C26
Outline-offset: 3px
```
> El CTA no tiene sombra, no tiene degradado, no se eleva. Es una caja de texto en versalitas con un borde de 1px y un radio de 2px. El hover carbón → ámbar es el único momento en que el color de la casa aparece en un botón.
**Secundario (outline)**
```
Background: transparent
Color: var(--color-ink) -> #333333
Border: 1px solid var(--color-border) -> #CED4DA
Border-radius: 2px
Padding: 15px 28px
Hover:
Border-color: #333333
Background: var(--color-surface) -> #F6F5E8
```
**Ámbar (raro, para una única acción por pantalla)**
```
Background: var(--color-primary) -> #945C26
Color: var(--color-text-on-primary) -> #FFFEF2
Border-radius: 2px
Hover:
Background: #7E4D1F
```
**Ghost / enlace subrayado**
```
Background: transparent
Color: var(--color-text-secondary) -> #666666
Border-bottom: 1px solid var(--color-border) -> #CED4DA
Border-radius: 0
Padding: 15px 4px
Hover:
Color: var(--color-primary) -> #945C26
Border-bottom-color: #945C26
```
### Campo de búsqueda
```
Background: var(--color-canvas) -> #FFFEF2
Border: 1px solid var(--color-border) -> #CED4DA
Border-radius: 2px
Padding: 14px
Gap con el icono: 12px
Font-family: var(--font-sans)
Font-size: 14px
Color: #333333
Placeholder: var(--color-text-muted) -> #999999
Icono: lupa de 15px, stroke 1px, #333333 al 50% de opacidad
Focus-within:
Border-color: var(--color-primary) -> #945C26
Box-shadow: 0 0 0 1px #945C26
Outline: none
```
> El campo se reduce a un filete. Nada de bordes gruesos, fondos grises ni radios de 8px: eso es lenguaje de e-commerce genérico y Aesop lo evita.
### Ficha de producto
```
Background: var(--color-canvas) -> #FFFEF2 (o #FFFFFF si va sobre crema)
Border: 1px solid var(--color-hairline) -> #E4E2D2
Border-radius: 2px
Padding del cuerpo: 22px 22px 24px
Box-shadow: none
Imagen:
Fondo #252525 con un halo ámbar bajo el objeto.
El producto se fotografía sobre carbón, iluminado desde un lado.
Categoría (p-k):
11px / 500 / 0.16em / uppercase / #945C26
Nombre (p-t):
Serif, 30px, peso 400, line-height 115%, #242424
Descripción (p-p):
Sans, 13-14px, line-height 1.7, #666666
Pie (p-foot):
border-top: 1px solid #E4E2D2
Precio: 14px / 500 / tabular-nums / #333333
Volumen: 11px / 0.10em / uppercase / #999999
Hover:
Border-color: #945C26 (no hay lift, no hay sombra)
```
### Banda oscura (componente signature)
```
Background: var(--color-dark) -> #252525
Color de texto: var(--color-text-on-dark) -> #FFFEF2
Color de acento: var(--color-primary-soft) -> #C08A4E (NO #945C26: falla a 2.8:1)
Border-radius: 2px (o 0 si es full-bleed)
Padding: 52px 44px
Grid: 2 columnas (titular + ensayo), 1 columna en mobile
Filete superior: 44x1px en #C08A4E
Titular: serif, 300, clamp(30px, 3.6vw, 44px), con una palabra en cursiva ámbar
Cuerpo: 14px / 1.85 / #C9C7BC
Botón: transparente, borde rgba(255,254,242,0.34), hover invierte a crema sólido
```
> Es el equivalente de Aesop al "hero" de otras marcas: la superficie donde vive la fotografía matérica y el texto ensayístico. La alternancia crema ↔ carbón a lo largo de la página es el pulso del sistema, no una decoración.
### Badges / Etiquetas
```
Padding: 8px 14px
Border-radius: 2px
Border: 1px solid var(--color-border)
Font-size: 11px
Font-weight: 500
Letter-spacing: 0.12em
Text-transform: uppercase
Default:
Background: transparent
Color: #666666
Ámbar:
Background: #945C26
Color: #FFFEF2
Carbón:
Background: #252525
Color: #FFFEF2
```
### Navegación / Header
```
Background: var(--color-canvas) -> #FFFEF2
Height: 64px aprox.
Border-bottom: 1px solid var(--color-hairline) -> #E4E2D2
Logo:
"Aesop" en sans, peso 400, 18px, #333333. Sin isotipo.
Links de nav:
Font-size: 12px (el tamaño más frecuente del sitio)
Font-weight: 400
Color: #333333
Hover: border-bottom 1px #945C26
Iconos (búsqueda, cesta):
Stroke de 1px, nunca fill. #333333.
```
---
## 5. Principios de Layout
### Escala de espaciado
```css
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
--space-24: 96px; /* sección */
--space-32: 128px; /* respiro de banda */
```
> Base de 4px, pero lo que define la marca es el extremo alto de la escala: 96-128px de aire vertical por sección.
### Contenedores
```css
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1120px;
--container-xl: 1280px;
--measure: 62-68ch; /* medida máxima del texto: la marca escribe largo */
```
### Grid
```
Sistema: 12 columnas
Gutter: 16px
Margen lateral: 32px en desktop, 24px en tablet, 20px en mobile
Patrones base: banda de imagen full-bleed sobre #252525, grid de 3-4
fichas de producto sobre crema, bloque editorial a 2 columnas
(titular serif + ensayo sans), y franjas alternas crema / carbón.
```
### Filosofía de espaciado
El espacio es el lujo. Una sección de Aesop respira 96-128px arriba y abajo, y el texto nunca pasa de 62-68ch de ancho aunque el contenedor mida 1120px. La densidad de un e-commerce convencional rompe la marca más rápido que cualquier error de color: si aprietas la grilla, ya da igual que el crema y el ámbar estén perfectos.
El ritmo horizontal también importa. La ficha de producto tiene 22-24px de padding interno, no 12px. El pie de la ficha se separa del cuerpo con 20px y un filete. Nada se toca.
---
## 6. Profundidad y Elevación
La marca es **plana, siempre**. La sensación de materia no viene del CSS sino de la fotografía: aceite espeso, piedra, vidrio ámbar contra una sombra. En el CSS solo hay dos sombras reales en todo el sitio, y ninguna se usa para elevar tarjetas.
### Sistema de sombras
```css
--shadow-none: none; /* el default */
--shadow-card: rgba(0, 0, 0, 0.06) 0 1px 2px 0; /* derivado, casi invisible */
--shadow-overlay: rgba(0, 0, 0, 0.2) 0 0 18px 0; /* real del sitio: overlay/drawer */
--shadow-on-dark: rgba(255, 254, 242, 0.2) 0 2px 4px 0; /* real del sitio: sobre carbón */
```
> La sombra `rgba(255, 254, 242, 0.2) 0 2px 4px 0` es interesante: es una sombra **crema**, usada sobre superficies oscuras. Aesop ni siquiera oscurece para dar profundidad; aclara.
### Niveles de elevación
| Nivel | Token | Uso |
|-------|-------|-----|
| 0 - Base | `--shadow-none` | Todo: secciones, fichas, botones, bandas |
| 1 - Ficha | `--shadow-card` | Ficha de producto en hover, si acaso |
| 2 - Overlay | `--shadow-overlay` | Drawer de la cesta, modal de talla |
| 3 - Sobre carbón | `--shadow-on-dark` | Elementos flotando sobre banda oscura |
### Radios de borde
```css
--radius-none: 0; /* imágenes, bandas full-bleed */
--radius-hair: 1px; /* filetes, campos (1 ocurrencia real) */
--radius-base: 2px; /* botón, ficha, tab (2 ocurrencias reales) */
--radius-right: 0 4px 4px 0; /* esquina derecha de un campo con botón adosado (2 ocurrencias) */
--radius-round: 50%; /* swatch de color, avatar (8 ocurrencias) */
```
> **El radio máximo del sistema es 2px.** No hay pills, no hay cards de 12px, no hay esquinas suaves. La única curva del sistema es el 50% del swatch y del avatar. Redondear un botón de Aesop es, literalmente, dejar de ser Aesop.
---
## 7. Lo que Sí y lo que No
### Sí hacer
1. **Lujo discreto: crema + carbón, el ámbar solo con motivo.** Empieza siempre por `#FFFEF2` y `#333333`. Ese par ya es la marca. El ámbar `#945C26` entra cuando hay una razón concreta: el precio, un enlace, un filete.
2. **Materia y sombra: la profundidad es fotográfica.** Alterna crema y bandas `#252525` como quien pasa páginas de un catálogo. La foto oscura hace el trabajo que en otras marcas hacen las sombras.
3. **Texto que se lee despacio.** Cuerpo de 14px, línea de 1.8, medida de 62-68ch, párrafos largos y registro ensayístico. La ficha cuenta el ingrediente antes de vender el beneficio.
4. **Casi recto.** 2px en botones y fichas, 1px en campos, 0 en imágenes. El círculo solo existe en el swatch.
5. **La versalita es el único adorno.** 11px, peso 500, tracking 0.16em, mayúsculas. Ese es el acabado de la casa.
### No hacer
1. **No uses blanco puro como fondo.** `#FFFFFF` está reservado a fichas y modales. Cambiar el crema por blanco vacía la página de calidez y la convierte en un e-commerce cualquiera.
2. **No uses negro puro ni negritas para dar jerarquía.** El ink es `#333333` y el peso dominante es 400 (93% de las ocurrencias). La jerarquía se hace con tamaño y aire.
3. **No conviertas el ámbar en superficie ni en botón por defecto.** Aparece dos veces en todo el CSS. Y sobre carbón cae a 2.8:1: usa `#C08A4E`.
4. **No redondees, no pongas sombras dramáticas, no uses glassmorphism ni degradados de color.** Un pill o una card de 12px rompen el sistema en un solo gesto.
5. **No comprimas el layout.** Grids densos, fichas apretadas y titulares de 60px son de otra marca. Aesop necesita 96-128px de aire por sección.
---
## 8. Comportamiento Responsive
### Breakpoints
```css
/* Mobile first */
/* sm: */ @media (min-width: 640px) { }
/* md: */ @media (min-width: 768px) { }
/* lg: */ @media (min-width: 1024px) { }
/* xl: */ @media (min-width: 1280px) { }
```
### Cambios por breakpoint
**Mobile (< 640px)**
- Navegación: logo centrado + menú y cesta como iconos de stroke 1px
- Grid: 1 columna; las fichas se apilan con 32px de separación
- Titular editorial: 30-31px (no se reduce mucho: ya era pequeño)
- Padding de contenedor: 20px
- Bandas oscuras: full-bleed, la imagen arriba y el texto debajo
- El cuerpo se mantiene en 14px. **No se reduce a 12px:** el 12px es para nav y metadata
**Tablet (640px - 1024px)**
- Navegación: logo + links + iconos
- Grid: 2 columnas de fichas
- Bloque editorial: sigue a 1 columna hasta 1024px
- Padding de contenedor: 24px
**Desktop (> 1024px)**
- Navegación completa con categorías
- Grid: 3-4 fichas por fila
- Bloque editorial a 2 columnas (titular serif + ensayo)
- Padding de sección: 96-128px vertical
### Touch targets (mobile)
- Botones: mínimo 44x44px (el CTA con `15px 28px` + 12px de fuente cumple)
- Links de navegación: altura mínima 44px
- Campo de búsqueda: altura mínima 44px
### Filosofía responsive
En móvil la marca no se recorta, se estrecha. El error típico es apretar el aire vertical para "ganar pantalla": eso destruye el sistema. Mantén los 64-96px entre secciones aunque el ancho se reduzca a 320px, y mantén el cuerpo en 14px con línea de 1.8. Una pantalla de Aesop en móvil debería seguir sintiéndose como una página impresa, no como un feed.
---
## 9. Guía de Prompts para Agentes
### Prompt de inicialización de sesión
```text
Estás trabajando con el sistema de diseño de Aesop.
PALETA: Canvas crema #FFFEF2 (NUNCA blanco puro). Tinta carbón #333333
(NUNCA negro puro). Texto secundario #666666, tenue #999999. Superficies
oscuras #252525 para fotografía. Un único acento: el ámbar del frasco
#945C26 (sobre carbón usa #C08A4E, el puro falla a 2.8:1). Borde #CED4DA.
TIPOGRAFÍA: Urbanist (sustituto de SuisseIntl) para todo, peso 400 dominante.
Cormorant Garamond (sustituto de Zapf-Humanist) para titulares editoriales y
nombres de producto. Cuerpo 14px, línea 1.8. Etiquetas 11px / 500 / 0.16em /
versalitas. NO hay fuente monoespaciada.
FORMA: radio máximo 2px. Sin sombras, sin degradados, sin pills.
ESPACIO: 96-128px por sección. Texto a 62-68ch.
TONO: lujo discreto, apotecario, botánico. El texto se lee despacio.
MODO: Claro (crema con bandas oscuras).
```
### Prompt: Crear nueva pantalla
```text
Crea una pantalla de [FUNCIONALIDAD] para Aesop.
Requisitos:
- Fondo crema #FFFEF2, texto carbón #333333. Nada de blanco ni negro puros.
- Titular editorial en Cormorant Garamond peso 300; el resto en Urbanist peso 400
- Cuerpo de 14px con line-height 1.8 y medida de 62-68ch
- Etiquetas en versalitas de 11px, peso 500, tracking 0.16em
- Radio de 2px en botones y fichas, 1px en campos, 0 en imágenes
- Sin sombras: la profundidad la da una banda #252525 con fotografía
- El ámbar #945C26 aparece como máximo dos veces en la pantalla
- 96px de aire vertical entre secciones
- Escribe el copy en registro ensayístico: cuenta el ingrediente, no vendas
```
### Prompt: Añadir componente al UI kit
```text
Añade un componente de [TIPO] al sistema de Aesop.
Debe:
- Usar solo tokens del DESIGN.md de Aesop
- Radio de 2px (o 1px en campos). Nunca más.
- Tener versión default, hover, active, focus y disabled
- Sentirse calmo y de apotecario, no comercial ni juguetón
- Sin sombras (box-shadow: none) salvo overlay real (rgba(0,0,0,0.2) 0 0 18px)
- Tipografía: Urbanist 400 para cuerpo, 500 en versalitas para etiquetas,
Cormorant Garamond 300-400 si hay un titular editorial
- El focus es un outline de 1px en #945C26 con offset de 3px
```
### Prompt: Revisión de consistencia
```text
Revisa esta interfaz y detecta qué no sigue el sistema de Aesop.
Verifica:
1. Si el fondo es crema #FFFEF2 y no blanco puro
2. Si el texto es carbón #333333 y no negro puro
3. Si el peso dominante es 400 y no hay negritas usadas como jerarquía
4. Si los radios son de 2px o menos (cualquier pill o card de 12px es un error)
5. Si hay sombras de elevación (no debería haberlas)
6. Si el ámbar #945C26 aparece más de dos veces, o si aparece sobre carbón
7. Si el cuerpo es de 14px con línea generosa, o si se ha comprimido
8. Si el aire entre secciones llega a 96px
```
### Prompt: Variante de campaña
```text
Genera una variante [colección / ingrediente / temporada] para Aesop
manteniendo el sistema base.
Conserva:
- Crema #FFFEF2 como canvas y carbón #333333 como tinta
- El ámbar #945C26 como único acento
- Urbanist 400 para cuerpo, Cormorant Garamond para titular editorial
- Radios de 2px y ausencia total de sombras
- El aire de 96-128px por sección
Puedes variar:
- La fotografía de la banda oscura (materia, textura, luz lateral)
- El balance entre franjas crema y franjas carbón
- La extensión del ensayo (Aesop escribe largo; puedes escribir más largo)
```
---
## 10. Movimiento (Motion)
Aesop se mueve como si el movimiento le costara algo. No hay rebotes, no hay `spring`, no hay elementos que entren desde fuera de pantalla con energía. Las transiciones son lentas (350-600ms) y de una sola propiedad.
**Nivel de motion**: mínimo-contemplativo
**Duraciones**: 350ms (hover de botón, borde, color), 600ms (transición de superficie, apertura de drawer), 1000ms (scroll reveal), 34s (ken-burns lentísimo sobre la fotografía del hero)
**Easings**: `cubic-bezier(0.22, 1, 0.36, 1)` (salida suave, sin overshoot), `ease` para cambios de color
**Propiedades animadas**: `opacity`, `color`, `background-color`, `border-color`, `transform: translateY` de 14-20px como máximo
**Patrones de motion**:
- Entrada escalonada del hero con `animation-delay` de 50-350ms
- Scroll reveal por sección (fade-up de 20px, 1000ms)
- Ken-burns muy lento sobre la fotografía (34s, `alternate`, scale 1 → 1.06)
- Hover de botón: cambio de fondo carbón → ámbar en 350ms. **Sin lift, sin sombra.**
- Hover de ficha: el borde pasa de `#E4E2D2` a `#945C26`. Nada más.
```css
--ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
--duration-fast: 350ms;
--duration-base: 600ms;
--duration-slow: 1000ms;
--duration-kenburns: 34s;
```
> **Accesibilidad**: respeta `@media (prefers-reduced-motion: reduce)`. Con la preferencia activa, el ken-burns y los reveals se desactivan y el contenido aparece estático; los hovers se reducen a cambios de color sin desplazamiento (que es casi todo lo que hay de todos modos).
---
## Anexo: Stack técnico detectado
- **Plataforma**: sitio de comercio propio de Aesop (`www.aesop.com`). El `body` se sirve con `background: rgb(255, 254, 242)` y `color: rgb(51, 51, 51)` directamente en el CSS computado.
- **Tipografía**: dos familias propietarias self-hosted:
- **SuisseIntl** (Swiss Typefaces, comercial, 683 ocurrencias) + **SuisseIntl-Medium** (90 ocurrencias). No está en Google Fonts. Sustituto: Urbanist.
- **Zapf-Humanist** (serif humanista, 8 ocurrencias, uso puntual). No está en Google Fonts. Sustituto: Cormorant Garamond.
- No hay familia monoespaciada.
- **Escala real medida** (por frecuencia): 12px (441), 14px (209), 16px (83), 11px (24), 31px (12), 30px (6), 18px (3), 13.008px (3).
- **Pesos reales**: 400 (724), 700 (56), 600 (1). El sistema es de peso único con excepciones.
- **Radios reales**: `50%` (8), `0px 4px 4px 0px` (2), `2px` (2), `1px` (1). No hay ningún radio mayor de 4px en todo el sitio.
- **Sombras reales**: `rgba(0, 0, 0, 0.2) 0px 0px 18px 0px` (overlay) y `rgba(255, 254, 242, 0.2) 0px 2px 4px 0px` (sobre superficie oscura). Solo dos en toda la página.
- **Variables CSS expuestas**: prácticamente ninguna (`--dvh: 1dvh` es la única). Los colores van hardcodeados; el sistema vive en la disciplina del equipo, no en tokens públicos.
- **3D / WebGL**: no detectado.
- **Comportamiento**: comercio editorial. Hero con ensayo sobre un ingrediente ("The perennial appeal of Geranium Leaf"), secciones de ingredientes ("Plant-based and laboratory-made ingredients"), fichas de producto ("Eleos Nourishing Body Cleanser"), sets curados ("Curated Sets", "Geranium Leaf Trio"), y bandas oscuras con fotografía matérica entre bloque y bloque.