---
version: "1.0"
name: "Anthropic"
description: "Sistema visual de Anthropic: canvas crema #FAF9F5, tinta cálida #141413 (no negro puro), superficies #F0EEE6 y #E3DACC, y acento arcilla #CC785C. La decisión que define el sistema es la inversión tipográfica: el cuerpo del texto va en serif (Anthropic Serif) y la grotesca (Anthropic Sans) queda para el h1 en peso 700, los botones y los labels. Editorial, humanista, light mode, radios 8/16/24 y sombras casi invisibles."
colors:
  primary: "#CC785C"
  secondary: "#141413"
  accent: "#D97757"
  accent-soft: "#E3DACC"
  neutral: "#B0AEA5"
  background: "#FAF9F5"
  surface: "#F0EEE6"
  surface-elevated: "#FAF9F5"
  surface-warm: "#E3DACC"
  surface-inverse: "#141413"
  text-primary: "#141413"
  text-secondary: "#5E5D59"
  text-muted: "#B0AEA5"
  text-on-primary: "#141413"
  text-on-ink: "#FAF9F5"
  border: "#1414131a"
  border-strong: "#14141333"
  fig: "#C46686"
  success: "#4A7C59"
  warning: "#CC785C"
  error: "#B4432E"
  info: "#5E5D59"
typography:
  display:
    fontFamily: "Anthropic Sans"
    fontSize: "60.87px"
    fontWeight: 700
    lineHeight: "1.10"
    letterSpacing: "normal"
  h2:
    fontFamily: "Anthropic Sans"
    fontSize: "40px"
    fontWeight: 600
    lineHeight: "1.10"
  h3:
    fontFamily: "Anthropic Serif"
    fontSize: "24px"
    fontWeight: 400
    lineHeight: "1.25"
  lead:
    fontFamily: "Anthropic Serif"
    fontSize: "20px"
    fontWeight: 400
    lineHeight: "1.50"
  body:
    fontFamily: "Anthropic Serif"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: "1.60"
  body-sm:
    fontFamily: "Anthropic Serif"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "1.55"
  ui:
    fontFamily: "Anthropic Sans"
    fontSize: "15px"
    fontWeight: 500
    lineHeight: "1.40"
  label:
    fontFamily: "Anthropic Sans"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: "1.40"
  mono:
    fontFamily: "Anthropic Mono"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "1.50"
rounded:
  control: "8px"
  card: "16px"
  block: "24px"
  none: "0"
spacing:
  base: "4px"
  sm: "8px"
  md: "16px"
  step: "20px"
  lg: "24px"
  xl: "32px"
  section-min: "56px"
  section-max: "88px"
  gap: "16px"
components:
  button-primary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.text-on-ink}"
    typography: "{typography.ui}"
    rounded: "{rounded.control}"
    padding: "12px 22px"
  button-clay:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.text-on-primary}"
    typography: "{typography.ui}"
    rounded: "{rounded.control}"
    padding: "12px 22px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.text-primary}"
    borderColor: "{colors.border}"
    rounded: "{rounded.control}"
    padding: "12px 22px"
  card:
    backgroundColor: "{colors.surface-elevated}"
    borderColor: "{colors.border}"
    rounded: "{rounded.card}"
    padding: "24px"
---

# DESIGN.md - Anthropic

> Sistema de diseño extraído de `https://www.anthropic.com` (home, julio 2026) siguiendo el skill `url-inspiration-styleguide`.
> Colores, fuentes, tamaños y radios medidos del CSS del sitio en vivo (Webflow, variables `--swatch--*` y `--_color-theme---*`). Estados derivados marcados con `(derivado para completar el sistema)`.

---

## 1. Tema Visual y Atmósfera

Anthropic no se ve como un laboratorio de IA. Se ve como una revista de ensayo que resulta que publica modelos. El canvas no es blanco: es `#FAF9F5`, un crema con temperatura, medido como `rgb(250, 249, 245)` en el `body`. La tinta no es negro: es `#141413`, un negro cálido con un punto de verde. Y las superficies no suben de brillo, suben de temperatura: `#F0EEE6` (ivory, la superficie más repetida del sitio con 4681 nodos) y `#E3DACC` (oat, para bloques destacados).

La decisión que define el sistema es tipográfica. **Anthropic Serif es la fuente del body**: el `font-family` computado del `body` es `"Anthropic Serif", Georgia, sans-serif`. Donde el resto del sector pone una grotesca de 16px, aquí hay una serif de 18-20px con line-height de 1.6. La grotesca (**Anthropic Sans**, 383 ocurrencias) sobrevive en el h1 (60.87px, peso 700), los botones, la navegación y los labels. **Anthropic Mono** (6 ocurrencias) aparece solo en etiquetas técnicas. Tres voces, tres territorios, sin solaparse.

El color de marca es la arcilla `#CC785C`, con la variante viva `#D97757` declarada en el CSS como `--swatch--clay`. Se usa en dosis pequeñas: un CTA, un kicker, un subrayado. La paleta no tiene un solo gris frío. Incluso el `--swatch--cloud-medium: #B0AEA5` y el `--swatch--slate-light: #5E5D59` están desplazados hacia el amarillo.

La traducción digital debe conservar esa mezcla de ensayo impreso y producto de IA: crema, serif de lectura, negro cálido, radios cortos (8/16/24), sombras casi invisibles, y arcilla en cuentagotas.

**Palabras clave de personalidad**: editorial, humanista, cálido, serif, pausado, crema, arcilla, seguridad-primero

**Densidad del layout**: cómoda (aire de página impresa, medida de lectura de 60-70ch)

**Modo preferido**: claro (crema cálido; el modo oscuro se reduce a bloques puntuales de tinta)

**Nivel de ornamentación**: minimal-editorial (la tipografía serif es la única decoración; sin degradados, sin glass, sin sombras dramáticas)

**Audiencia visual objetivo**: investigadores, desarrolladores y empresas que evalúan un proveedor de IA por su criterio y su transparencia, no por su velocidad

---

## 2. Paleta de Colores y Roles Semánticos

Paleta cálida sin un solo gris neutro. Un único color saturado (arcilla) más un acento secundario (fig) que casi nunca se usa. El resto es una rampa de crema a tinta.

### Colores de marca

| Nombre | Variable CSS | Hex | Rol | Texto sobre él |
|--------|-------------|-----|-----|----------------|
| Clay (arcilla) | `--color-primary` | `#CC785C` | Acento de marca, CTA cálido, kickers, subrayados | `#141413` |
| Clay vivo | `--swatch--clay` | `#D97757` | Variante real del CSS en vivo; hover del acento | `#141413` |
| Slate dark (tinta) | `--color-ink` | `#141413` | Texto, CTA primario, superficie inversa (`rgb(20,20,19)` real del `body`) | `#FAF9F5` |
| Slate hover | `--_color-theme---button-primary--border-hover` | `#3D3D3A` | Hover y borde del botón primario (real del CSS) | `#FAF9F5` |
| Fig (higo) | `--swatch--fig` | `#C46686` | Acento secundario, categorías, gráficos | `#141413` |

> **Regla de contraste del acento**: sobre arcilla `#CC785C` el texto va en tinta `#141413` (5.8:1, AA). El crema sobre arcilla se queda en 3.1:1 y no pasa AA para texto normal. El sitio usa crema sobre tinta (`--_color-theme---button-primary--text: #faf9f5`), no crema sobre arcilla.

### Colores de superficie

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Bone (canvas) | `--color-canvas` | `#FAF9F5` | Fondo del `body` (`rgb(250,249,245)` computado) |
| Ivory medium | `--color-surface` | `#F0EEE6` | Superficie más usada del sitio (4681 nodos) |
| Oat | `--color-surface-warm` | `#E3DACC` | Bloques editoriales, destacados, citas (567 nodos) |
| Tinta (inversa) | `--color-surface-inverse` | `#141413` | Bloques oscuros puntuales (3156 nodos: footer y secciones ancla) |
| Borde | `--_color-theme---border` | `#1414131a` | Bordes y divisores: la tinta al 10%, no un gris |
| Borde reforzado | `--swatch--slate-faded-20` | `#14141333` | Hairline al 20% para estados hover |

### Colores de texto

| Nombre | Variable CSS | Hex | Uso |
|--------|-------------|-----|-----|
| Texto primario | `--color-text` | `#141413` | Titulares y body (260 nodos) |
| Texto secundario | `--swatch--slate-light` | `#5E5D59` | Bajadas, descripciones |
| Texto muted | `--swatch--cloud-medium` | `#B0AEA5` | Metadata, fechas, placeholders (164 nodos) |
| Texto sobre tinta | `--_color-theme---button-primary--text` | `#FAF9F5` | Crema sobre bloques oscuros (162 nodos) |
| Texto sobre arcilla | `--color-on-primary` | `#141413` | Tinta sobre el acento |

### Contraste verificado

| Combinación | Ratio | Nivel |
|-------------|-------|-------|
| `#141413` sobre `#FAF9F5` | 16.4:1 | AAA |
| `#141413` sobre `#F0EEE6` | 16.3:1 | AAA |
| `#141413` sobre `#E3DACC` | 13.7:1 | AAA |
| `#FAF9F5` sobre `#141413` | 16.4:1 | AAA |
| `#141413` sobre `#CC785C` | 5.8:1 | AA |
| `#FAF9F5` sobre `#CC785C` | 3.1:1 | Solo texto grande (evitar) |
| `#5E5D59` sobre `#FAF9F5` | 6.2:1 | AA |
| `#B0AEA5` sobre `#FAF9F5` | 2.2:1 | Decorativo, nunca texto pequeño |

### Colores de estado

| Estado | Variable CSS | Hex | Texto |
|--------|-------------|-----|-------|
| Éxito | `--color-success` | `#4A7C59` | `#FAF9F5` *(derivado para completar el sistema)* |
| Advertencia | `--color-warning` | `#CC785C` | `#141413` |
| Error | `--color-error` | `#B4432E` | `#FAF9F5` *(derivado para completar el sistema)* |
| Info | `--color-info` | `#5E5D59` | `#FAF9F5` |

---

## 3. Reglas de Tipografía

```css
/* Sans / UI / h1: Anthropic Sans (propietaria, self-hosted, 383 ocurrencias;
   declarada en el CSS como --_typography---font--display-sans)
   -> sustituto Google: Space Grotesk */
--font-sans: 'Space Grotesk', 'Anthropic Sans', Arial, sans-serif;

/* Body + titulares editoriales: Anthropic Serif (propietaria, self-hosted,
   209 ocurrencias; es el font-family computado del <body>)
   -> sustituto Google: Source Serif 4 */
--font-serif: 'Source Serif 4', 'Anthropic Serif', Georgia, serif;

/* Mono: Anthropic Mono (propietaria, 6 ocurrencias)
   -> sustituto Google: JetBrains Mono */
--font-mono: 'JetBrains Mono', 'Anthropic Mono', ui-monospace, monospace;
```

**Google Fonts (sustitutos):**
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,400&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">
```

### Nota sobre sustitución tipográfica

Las tres familias de Anthropic son propietarias y self-hosted. No están en Google Fonts ni se pueden licenciar desde el styleguide, así que el HTML las sustituye y las conserva como fallback documentado (la sustituta primero, la original después).

| Original (propietaria) | Sustituta (Google Fonts) | Por qué |
|---|---|---|
| **Anthropic Sans** (383 ocurrencias) | **Space Grotesk** | Grotesca de terminaciones rectas, caja alta ancha y ojo grande; mantiene la masa del h1 en peso 700 sin el tracking negativo que otras grotescas imponen. Es la sustituta que el proyecto ya asigna a la familia "styrene" en `lib/fontSubstitutions.ts`, el linaje más cercano a Anthropic Sans. |
| **Anthropic Serif** (209 ocurrencias, fuente del `body`) | **Source Serif 4** | Serif de texto con eje óptico `8..60`, pensada para lectura larga en pantalla. Sostiene los 18-20px de body con line-height 1.6 sin cansar, y tiene itálicas reales. Es la sustituta que el proyecto asigna a "tiempos". |
| **Anthropic Mono** (6 ocurrencias) | **JetBrains Mono** | Mono neutra, altura-x alta, sin personalidad de terminal; no compite con la serif en los labels técnicos. |

> El fallback declarado (`'Source Serif 4', 'Anthropic Serif', Georgia, serif`) documenta el original sin romper el render: si algún día la fuente propietaria está disponible, basta reordenar.

### Escala tipográfica

> Tamaños reales medidos: 12px (282 nodos), 16px (162), 20px (104), 60.87px (16), 15px (11), 24px (9), 18px (7), 14px (7).

| Token | Familia | px | Line height | Weight | Uso |
|-------|---------|----|-------------|--------|-----|
| `--f-display` | sans | 60.87px | 1.10 (66.95px) | 700 | h1 del hero (valor exacto medido) |
| `--f-h2` | sans | 40px | 1.10 | 600 | Titular de sección *(derivado)* |
| `--f-h3` | serif | 24px | 1.25 | 400 | Titular de card, subsección |
| `--f-lead` | serif | 20px | 1.50 | 400 | Bajadas, párrafo destacado |
| `--f-body` | serif | 18px | 1.60 | 400 | Body general |
| `--f-body-sm` | serif | 16px | 1.55 | 400 | Body secundario |
| `--f-ui` | sans | 15px | 1.40 | 500 | Botones, navegación |
| `--f-label` | sans | 14px | 1.40 | 500 | Labels, chips |
| `--f-mono` | mono | 12px | 1.50 | 400 | Metadata, código, kickers |

### Pesos tipográficos

```css
--font-regular: 400;   /* 525 ocurrencias: el peso dominante, casi todo el sitio */
--font-medium: 500;    /* 41 ocurrencias: labels, nav, botones */
--font-semibold: 600;  /* 17 ocurrencias: h2 y énfasis */
--font-bold: 700;      /* 15 ocurrencias: el h1 y su eco */
```

> No hay 800 ni 900 en el sitio. El sistema nunca grita: la jerarquía se construye por tamaño y por cambio de familia (serif ↔ sans), no por peso.

### Letter spacing

```css
--tracking-normal: 0em;    /* el h1 real va con letter-spacing: normal */
--tracking-label: 0.14em;  /* solo en labels en mayúsculas y kickers mono */
```

**Regla clave**: el body va en serif. Cambiar el body a sans destruye la identidad de la marca más rápido que cualquier cambio de color. El h1 va en la grotesca a 60.87px / 700 / line-height 1.10, sin tracking negativo. La mezcla serif (contenido) + sans (interfaz) + mono (metadata) es el lenguaje del sistema.

---

## 4. Estilos de Componentes

### Botones

**Primario (tinta)**
```
Background: var(--color-ink) -> #141413
Color de texto: #FAF9F5 (--_color-theme---button-primary--text real)
Border: 1px solid #141413
Padding: 12px 22px
Border-radius: 8px (radio de control, 14 ocurrencias)
Font-family: var(--font-sans) -> Anthropic Sans
Font-weight: 500
Font-size: 15px
Transición: background 200ms ease, border-color 200ms ease

Hover:
  Background: #3D3D3A (--_color-theme---button-primary--border-hover real)
  Color: #FAF9F5 (--_color-theme---button-primary--text-hover real: no cambia)

Disabled:
  Opacity: 0.4
  Cursor: not-allowed

Focus:
  Outline: 2px solid #CC785C
  Outline-offset: 3px
```

**Clay (acento cálido)**
```
Background: var(--color-primary) -> #CC785C
Color de texto: #141413   <-- TINTA, no crema (crema da 3.1:1)
Border: 1px solid #CC785C
Border-radius: 8px
Padding: 12px 22px

Hover:
  Background: #D97757 (--swatch--clay real)
```

**Secundario (outline)**
```
Background: transparent
Color de texto: #141413
Border: 1px solid #1414131a (--_color-theme---button-tertiary--border real)
Border-radius: 8px
Padding: 12px 22px

Hover:
  Background: #E3DACC
  Border-color: #14141333
```

**Ghost / Texto**
```
Background: transparent
Color: #5E5D59
Border: none
Padding: 12px 8px

Hover:
  Color: #141413
```

> No hay pills `9999px` en el sistema. El radio de control es `8px` y es un rasgo de carácter: el sistema redondea lo justo para no ser duro, y no más.

### Inputs de texto

```
Background: #FAF9F5
Border: 1px solid #1414131a
Border-radius: 8px
Padding: 12px 16px
Font-family: var(--font-sans) -> Anthropic Sans
Font-size: 16px
Font-weight: 400
Color: #141413
Placeholder: #B0AEA5 (--swatch--cloud-medium)

Focus:
  Border-color: #CC785C
  Box-shadow: 0 0 0 3px rgba(204, 120, 92, 0.20)
  Outline: none
```

### Cards

```
Background: #FAF9F5 (o #F0EEE6 sobre canvas crema)
Border: 1px solid #1414131a
Border-radius: 16px (6 ocurrencias)
Padding: 24px
Box-shadow: 0 2px 2px rgba(0,0,0,0.01), 0 4px 8px rgba(0,0,0,0.02)  (real del sitio)

Titular: SERIF 24px / 400 / line-height 1.25
Kicker: mono 10.5px, uppercase, tracking 0.14em, color #CC785C
Body: serif 16px / 400, color #5E5D59
Meta: mono 10.5px, color #B0AEA5

Hover (si es clickeable):
  Transform: translateY(-3px)
  Box-shadow: 0 8px 18px -10px rgba(20,20,19,0.14)   (derivado)

Variante oat:
  Background: #E3DACC, sin borde (la superficie ya separa)

Variante inversa:
  Background: #141413, texto #FAF9F5, kicker #CC785C, meta #B0AEA5
```

> La sombra real del sitio es prácticamente invisible (alpha 0.01 y 0.02). La card se separa del fondo por **temperatura**, no por elevación: crema → ivory → oat → tinta.

### Bloque editorial (componente firma)

```
Background: #E3DACC (oat)
Border-radius: 24px (radio de bloque)
Padding: 44px 46px
Titular: SERIF 24-38px / 400 / line-height 1.25, max-width 22ch
Énfasis: itálica serif en color #CC785C
Firma: mono 11px, uppercase, tracking 0.14em, color #5E5D59
Sin borde, sin sombra
```

> Es el componente más distintivo del sistema: un párrafo grande en serif sobre una superficie cálida. Sustituye a lo que en otros sistemas sería un hero con imagen o un code block.

### Chips / Badges

```
Padding: 6px 12px
Border-radius: 8px  (no pill)
Font-family: var(--font-mono) -> Anthropic Mono
Font-size: 11.5px

Default:
  Background: #FAF9F5
  Border: 1px solid #1414131a
  Color: #5E5D59

Activo:
  Background: #141413
  Color: #FAF9F5

Clay:
  Background: rgba(204, 120, 92, 0.16)
  Color: #8A4A32 (arcilla oscurecido para pasar AA sobre el tinte)
  Border: transparent
```

### Navegación / Header

```
Background: #FAF9F5 (o rgba(250,249,245,0.85) con backdrop-filter al hacer scroll)
Altura: 64-72px
Border-bottom: 1px solid #1414131a

Logo:
  Wordmark en tinta #141413

Links de nav:
  Font-family: Anthropic Sans
  Font-size: 15px
  Font-weight: 500
  Color: #141413
  Hover: color #5E5D59

CTA del nav:
  Botón tinta #141413, texto #FAF9F5, radio 8px, padding 10px 18px
```

---

## 5. Principios de Layout

### Escala de espaciado

```css
--space-1: 4px;     /* --size--0-25rem real */
--space-2: 8px;
--space-4: 16px;
--space-5: 20px;    /* --_text-style---font-size: 1.25rem; el paso del body */
--space-6: 24px;
--space-8: 32px;
--space-section: clamp(3.5rem, 2.73rem + 3.8vw, 5.5rem);  /* 56px -> 88px, real */
```

> Base de 4px. El espacio de sección es un `clamp` real del CSS (`--_spacing---section-space--medium`), no un valor fijo: la página respira más en desktop.

### Contenedores

```css
--site-max-width: min(89.5rem, 100vw);  /* 1432px, real */
--container-full: calc(100% - 4rem);    /* real */
--container-text: 65ch;                 /* medida de lectura para el body serif */
```

### Grid

```
Sistema: 12 columnas con márgenes calculados (--column-margin--9 a --column-margin--12)
Gutter: 16px
Margen lateral: 32px en desktop, 24px en tablet, 20px en mobile
Patrones base: hero a una columna con h1 de 60.87px, grid de 3 cards para
"Latest releases", bloques editoriales full-bleed sobre oat, y secciones
alternas crema / ivory.
```

### Filosofía de espaciado

El layout está construido para leer, no para escanear. La medida del párrafo se mantiene entre 60 y 70 caracteres porque una serif de 18-20px pierde legibilidad si la línea se estira. El ritmo vertical es de página impresa: 56-88px entre secciones, 24px entre bloques, 20px entre párrafos. Las secciones alternan por temperatura de fondo (crema → ivory → oat → tinta), y ese cambio de color hace el trabajo que en otros sistemas hacen las líneas divisorias.

---

## 6. Profundidad y Elevación

La marca es **plana por temperatura**. La profundidad no viene de sombras sino del calor del fondo: cada capa que sube es un crema más tostado.

### Sistema de sombras

```css
--shadow-none: none;
--shadow-card: 0 2px 2px rgba(0,0,0,0.01), 0 4px 8px rgba(0,0,0,0.02);  /* real del sitio */
--shadow-hover: 0 8px 18px -10px rgba(20,20,19,0.14);   /* derivado */
--shadow-hero: 0 40px 80px -46px rgba(20,20,19,0.20);   /* derivado para el frame del hero */
```

> La única sombra real detectada en el sitio es `rgba(0,0,0,0.01) 0px 2px 2px 0px, rgba(0,0,0,0.02) 0px …`: alpha de 1% y 2%. Es una sombra que existe para que el borde no quede flotando, no para elevar.

### Niveles de elevación

| Nivel | Superficie | Uso |
|-------|-----------|-----|
| 0 - Canvas | `#FAF9F5` | Fondo del body |
| 1 - Superficie | `#F0EEE6` | Cards, secciones, inputs sobre canvas |
| 2 - Cálida | `#E3DACC` | Bloques editoriales, citas, destacados |
| 3 - Inversa | `#141413` | Footer y una sección ancla; nunca más de una por vista |

### Radios de borde

```css
--radius-none: 0;      /* tablas, franjas full-bleed */
--radius-control: 8px; /* 14 ocurrencias: botones, inputs, chips */
--radius-card: 16px;   /* 6 ocurrencias: cards, media */
--radius-block: 24px;  /* 4 ocurrencias: bloques grandes, frames */
```

> Variantes asimétricas reales en el CSS: `8px 0 0 8px`, `0 0 8px 8px`, `0 8px 8px 0` (grupos de botones y acordeones). No hay `9999px` en ningún control.

---

## 7. Lo que Sí y lo que No

### Sí hacer

1. **Escribe el cuerpo en serif** a 18-20px con line-height 1.6. La lectura pausada es el producto; el `body` real del sitio es `"Anthropic Serif"`.
2. **Usa el crema `#FAF9F5` como canvas y sube por temperatura** (`#F0EEE6` → `#E3DACC` → `#141413`), no por brillo ni por sombra.
3. **Reserva la grotesca para el h1 (700), botones, nav y labels**. Ahí es donde el sistema necesita voz de interfaz.
4. **Dosifica el arcilla `#CC785C`**: un CTA, un kicker, un subrayado. Su valor está en la escasez.
5. **Sobre arcilla escribe con tinta `#141413`** (5.8:1); el crema sobre arcilla se queda en 3.1:1.
6. **Mantén los radios en 8/16/24 y las sombras al 1-2% de alpha**; la jerarquía se construye con el fondo.

### No hacer

1. **No pongas el body en sans**. Es el error que convierte a Anthropic en cualquier SaaS: la serif es la marca.
2. **No uses blanco `#FFFFFF` ni negro `#000000`**. Todo el sistema está desplazado a cálido y el gris neutro lo ensucia.
3. **No conviertas el arcilla en fondo de secciones enteras ni en degradado**; es acento, no atmósfera.
4. **No añadas pesos 800/900 ni tracking negativo agresivo en el h1**; el titular real va en 700 con `letter-spacing: normal`.
5. **No uses pills `9999px` ni sombras de elevación tipo Material**; el sistema es plano, de radios cortos y bordes de tinta al 10%.
6. **No mezcles el fig `#C46686` con el arcilla en el mismo bloque**; son dos acentos que compiten y ninguno gana.

---

## 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: wordmark + menú
- Grid: 1 columna
- h1: ~36-40px (el `clamp` baja desde 60.87px)
- Body serif: 17-18px, nunca menos (la serif pierde legibilidad por debajo)
- Padding de contenedor: 20px
- Cards: apiladas, radio 16px

**Tablet (640px - 1024px)**
- Navegación: wordmark + links + CTA
- Grid: 2 columnas para "Latest releases"
- h1: ~48px
- Padding de contenedor: 24px

**Desktop (> 1024px)**
- Navegación completa visible
- Grid: 3 columnas de cards; hero a una columna
- h1: 60.87px (valor real)
- Body serif: 20px, medida de 60-70ch
- Padding de sección: 88px vertical

### Touch targets (mobile)

- Botones: mínimo 44x44px (el control de 12px 22px + 15px de fuente cumple)
- Links de navegación: altura mínima 44px
- Inputs: altura mínima 44px

### Filosofía responsive

En pantalla pequeña la marca sigue siendo una revista, no un sitio recortado. Antes de reducir el tamaño del body serif, reduce el h1: la legibilidad del párrafo es lo último que se sacrifica.

---

## 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 Anthropic.

PALETA: Canvas crema #FAF9F5 (nunca blanco). Tinta cálida #141413 (nunca #000).
Superficies #F0EEE6 (ivory) y #E3DACC (oat). Texto secundario #5E5D59, muted
#B0AEA5. Acento arcilla #CC785C (variante viva #D97757), en dosis pequeñas.
Bordes = tinta al 10% (#1414131a), no grises.
TIPOGRAFÍA: el BODY va en SERIF (Source Serif 4, sustituta de Anthropic Serif),
18-20px, line-height 1.6. La grotesca (Space Grotesk, sustituta de Anthropic
Sans) es solo para el h1 en 700, botones, nav y labels. Mono: JetBrains Mono.
ESTILO: editorial, cálido, humanista. Radios 8/16/24, sin pills. Sombras al
1-2% de alpha. La profundidad viene del calor del fondo, no de la elevación.
TOKENS: usa siempre variables CSS; no hardcodees colores fuera del sistema.
MODO: claro.
```

### Prompt: Crear nueva pantalla

```text
Crea una pantalla de [FUNCIONALIDAD] para Anthropic.

Requisitos:
- Debe sentirse como una revista de ensayo, no como un SaaS
- Fondo crema #FAF9F5, texto #141413
- El cuerpo del texto en serif (Source Serif 4) a 18-20px, line-height 1.6
- Titular en Space Grotesk peso 700, sin tracking negativo
- Un solo acento arcilla #CC785C por vista (CTA o kicker)
- Cards con radio 16px, borde #1414131a y sombra casi invisible
- Alterna secciones por temperatura de fondo: crema -> ivory -> oat
- Responsive; el body serif nunca baja de 17px
```

### Prompt: Añadir componente al UI kit

```text
Añade un componente de [TIPO] al sistema de Anthropic.

Debe:
- Usar solo tokens del DESIGN.md de Anthropic
- Radios: 8px controles, 16px cards, 24px bloques (nunca 9999px)
- Titulares de card en serif 400, labels y botones en sans 500
- Tener versión default, hover, active, focus y disabled
- Sobre arcilla, el texto va en tinta #141413 (no crema)
- Sombra máxima: 0 2px 2px rgba(0,0,0,0.01), 0 4px 8px rgba(0,0,0,0.02)
```

### Prompt: Revisión de consistencia

```text
Revisa esta interfaz y detecta qué no sigue el sistema de Anthropic.

Verifica:
1. Si el body está en serif (no en sans) a 18-20px
2. Si el fondo es crema #FAF9F5 (no blanco #FFFFFF)
3. Si el texto es #141413 (no negro puro #000000)
4. Si el arcilla #CC785C se usa como acento puntual (no como fondo de sección)
5. Si el texto sobre arcilla es tinta #141413 (no crema, que da 3.1:1)
6. Si los radios son 8/16/24 (no pills 9999px)
7. Si hay grises fríos o sombras de elevación (no deben estar)
```

### Prompt: Variante de campaña

```text
Genera una variante [research / producto / anuncio] para Anthropic
manteniendo el sistema base.

Conserva:
- Canvas crema #FAF9F5 y tinta #141413
- Body en serif, titular en sans 700
- Arcilla #CC785C como único color saturado
- Radios 8/16/24

Puedes variar:
- La superficie dominante de la sección (ivory, oat o tinta)
- El bloque editorial firma (cita, dato, pregunta abierta)
- La proporción de bloques inversos (máximo uno por vista)
```

---

## 10. Movimiento (Motion)

El motion es contenido y lento, coherente con el tono editorial. Nada rebota, nada aparece de golpe. Las transiciones de estado son de 200ms; las entradas de contenido, de 800-900ms con easing suave.

**Nivel de motion**: sutil-editorial

**Duraciones**: 200ms (hover, cambios de color), 400ms (transiciones medias), 800ms (scroll reveal), 900ms (entrada escalonada del hero), 26s (ken-burns del hero)

**Easings**: `cubic-bezier(0.16, 1, 0.3, 1)` para entradas y reveals; `ease` para hover

**Propiedades animadas**: opacity, transform (translateY, scale), background-color, color, border-color

**Patrones de motion**:
- Entrada escalonada del hero con `animation-delay` (0.05s → 0.35s)
- Scroll reveal por sección (fade-up de 26px, 800ms)
- Ken-burns lento en la captura del hero (26s, alternate, scale 1 → 1.06)
- Micro-lift de 1px en hover de botones, 3px en hover de cards
- Cambio de color directo en chips y links de nav

```css
--ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
--duration-fast: 200ms;
--duration-base: 400ms;
--duration-slow: 800ms;
--duration-kenburns: 26s;
```

> **Accesibilidad**: respeta `@media (prefers-reduced-motion: reduce)`. El ken-burns, los reveals y los micro-lift se desactivan; el contenido aparece estático y solo quedan los cambios de color.

---

## Anexo: Stack técnico detectado

- **Plataforma / builder**: Webflow (variables `--_color-theme---*`, `--_typography---*`, `--_spacing---*`, `--swatch--*`, y utilidades de grid `--column-margin--N`)
- **Sistema de tokens**: variables CSS con nomenclatura de temas (`--_color-theme---button-primary--text`, `--_button-style---text-hover`), tamaños con `clamp()` fluido (`--size--2rem`, `--_spacing---section-space--medium`)
- **Tipografía**: tres familias propietarias self-hosted:
  - **Anthropic Sans** (383 ocurrencias, `--_typography---font--display-sans: "Anthropic Sans", Arial, sans-serif`): h1, UI, labels. No está en Google Fonts.
  - **Anthropic Serif** (209 ocurrencias, `font-family` computado del `body`): el cuerpo del texto. No está en Google Fonts.
  - **Anthropic Mono** (6 ocurrencias): metadata y código. No está en Google Fonts.
- **Rejilla**: 12 columnas con `--site--max-width: min(89.5rem, 100vw)` (1432px) y contenedores calculados
- **Animación**: CSS-first con transiciones cortas. No se detectaron librerías de motion pesadas.
- **3D / WebGL**: no detectado.
- **Comportamiento**: sitio de marketing de un laboratorio de IA con estructura editorial: hero con h1 de 60.87px ("AI research and products that put safety at the frontier"), sección de manifiesto ("Anthropic is built on hard questions."), grid de "Latest releases" con cards de anuncios, y bloques inversos en tinta para el cierre.