Aesop.

:root {
  /* Color - crema + carbon + un solo ambar */
  --color-canvas: #FFFEF2;         /* crema, fondo real del body */
  --color-surface: #F6F5E8;        /* crema apagado, secciones alternas */
  --color-surface-gray: #F3F3F3;   /* gris inerte */
  --color-surface-elevated: #FFFFFF; /* fichas y modales, solo ahi */
  --color-dark: #252525;           /* bandas fotograficas */
  --color-dark-2: #333333;         /* superficie oscura secundaria */

  --color-ink: #333333;            /* carbon, NO negro puro */
  --color-ink-deep: #242424;
  --color-ink-soft: #666666;
  --color-ink-light: #999999;

  --color-primary: #945C26;        /* ambar del frasco: acento unico */
  --color-primary-soft: #C08A4E;   /* ambar sobre carbon (derivado, AA 5.1:1) */
  --color-primary-wash: #EFE4D5;   /* velo ambar sobre crema (derivado) */
  --color-border: #CED4DA;
  --color-hairline: #E4E2D2;       /* hairline calido (derivado) */
  --color-on-primary: #FFFEF2;     /* crema sobre ambar, nunca blanco */
  --color-on-dark: #FFFEF2;

  /* Typography - sans para todo, serif puntual y editorial */
  --font-sans: 'Urbanist', 'SuisseIntl', Helvetica, sans-serif;
  --font-serif: 'Cormorant Garamond', 'Zapf-Humanist', Georgia, serif;

  /* Scale - cuerpo pequeno, salto directo al titular */
  --f-display: 300 31px/115% var(--font-serif);
  --f-h1: 400 36px/140% var(--font-sans);
  --f-h2: 400 31px/130% var(--font-sans);
  --f-h3: 400 30px/120% var(--font-serif);
  --f-body-lg: 400 16px/175% var(--font-sans);
  --f-body-md: 400 14px/180% var(--font-sans);
  --f-body-sm: 400 12px/160% var(--font-sans);
  --f-label: 500 11px/140% var(--font-sans);  /* + letter-spacing: 0.16em, uppercase */

  /* Radius - casi recto, siempre */
  --radius-hair: 1px;
  --radius-base: 2px;   /* boton, ficha, tab: el maximo del sistema */
  --radius-right: 0 4px 4px 0;
  --radius-round: 50%;  /* swatch, avatar */

  /* Shadow - flat first; la profundidad la da la fotografia */
  --shadow-card: rgba(0, 0, 0, 0.06) 0 1px 2px 0;
  --shadow-overlay: rgba(0, 0, 0, 0.2) 0 0 18px 0;
  --shadow-on-dark: rgba(255, 254, 242, 0.2) 0 2px 4px 0;

  /* Spacing - el aire es el lujo */
  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px;
  --space-24: 24px; --space-32: 32px; --space-64: 64px;
  --space-section: 96px; --space-band: 128px;

  /* Motion - lento, sin rebote */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 350ms; --duration-base: 600ms; --duration-slow: 1000ms;
}

@theme {
  --color-canvas: #FFFEF2;
  --color-surface: #F6F5E8;
  --color-surface-elevated: #FFFFFF;
  --color-dark: #252525;
  --color-dark-2: #333333;
  --color-ink: #333333;
  --color-ink-deep: #242424;
  --color-ink-soft: #666666;
  --color-ink-light: #999999;
  --color-primary: #945C26;
  --color-primary-soft: #C08A4E;
  --color-border: #CED4DA;
  --color-hairline: #E4E2D2;

  --font-sans: 'Urbanist', 'SuisseIntl', Helvetica, sans-serif;
  --font-serif: 'Cormorant Garamond', 'Zapf-Humanist', Georgia, serif;

  --text-display: 31px;
  --text-h1: 36px;
  --text-h3: 30px;
  --text-body-lg: 16px;
  --text-body: 14px;
  --text-body-sm: 12px;
  --text-label: 11px;

  --font-weight-light: 300;
  --font-weight-regular: 400;   /* dominante: 724 de 781 ocurrencias */
  --font-weight-medium: 500;
  --font-weight-bold: 700;      /* raro: 56 ocurrencias */

  --tracking-label: 0.16em;

  --radius-hair: 1px;
  --radius-base: 2px;
  --radius-round: 50%;

  --shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.06);
  --shadow-overlay: 0 0 18px 0 rgb(0 0 0 / 0.2);
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
}

{
  "color": {
    "canvas": "#FFFEF2",
    "surface": "#F6F5E8",
    "surfaceGray": "#F3F3F3",
    "surfaceElevated": "#FFFFFF",
    "dark": "#252525",
    "dark2": "#333333",
    "ink": "#333333",
    "inkDeep": "#242424",
    "inkSoft": "#666666",
    "inkLight": "#999999",
    "primary": "#945C26",
    "primarySoft": "#C08A4E",
    "primaryWash": "#EFE4D5",
    "border": "#CED4DA",
    "hairline": "#E4E2D2",
    "onPrimary": "#FFFEF2",
    "onDark": "#FFFEF2"
  },
  "font": {
    "sans": { "family": "Urbanist", "substituteOf": "SuisseIntl (Swiss Typefaces)" },
    "serif": { "family": "Cormorant Garamond", "substituteOf": "Zapf-Humanist" }
  },
  "fontSize": {
    "display": { "px": 31, "weight": 300, "lineHeight": "115%", "family": "serif" },
    "h1": { "px": 36, "weight": 400, "lineHeight": "140%", "family": "sans" },
    "h2": { "px": 31, "weight": 400, "lineHeight": "130%", "family": "sans" },
    "h3": { "px": 30, "weight": 400, "lineHeight": "120%", "family": "serif" },
    "bodyLg": { "px": 16, "weight": 400, "lineHeight": "175%" },
    "bodyMd": { "px": 14, "weight": 400, "lineHeight": "180%" },
    "bodySm": { "px": 12, "weight": 400, "lineHeight": "160%" },
    "label": { "px": 11, "weight": 500, "lineHeight": "140%", "tracking": "0.16em", "case": "uppercase" }
  },
  "radius": { "hair": "1px", "base": "2px", "right": "0 4px 4px 0", "round": "50%" },
  "spacing": { "base": "4px", "sm": "12px", "md": "16px", "lg": "24px", "xl": "32px", "section": "96px", "band": "128px" },
  "shadow": {
    "card": "rgba(0,0,0,0.06) 0 1px 2px 0",
    "overlay": "rgba(0,0,0,0.2) 0 0 18px 0",
    "onDark": "rgba(255,254,242,0.2) 0 2px 4px 0"
  },
  "motion": { "ease": "cubic-bezier(0.22, 1, 0.36, 1)", "durationFast": "350ms", "durationBase": "600ms" }
}

---
version: "1.0"
name: "Aesop"
description: "Sistema visual de Aesop: canvas crema #FFFEF2 (nunca blanco), tinta carbon #333333 (nunca negro), y un unico acento ambar #945C26 tomado del frasco de vidrio. Tipografia SuisseIntl (grotesca suiza) con Zapf-Humanist serif puntual, cuerpo de 14px, radios de 2px y bandas oscuras #252525 para la fotografia 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"
  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).
> Valores medidos del CSS en vivo. Estados derivados marcados con `(derivado para completar el sistema)`.