Anthropic.

:root {
  /* Color - crema calido + tinta calida + acento arcilla */
  --color-canvas: #FAF9F5;         /* bone, el body real */
  --color-surface: #F0EEE6;        /* ivory medium */
  --color-surface-warm: #E3DACC;   /* oat */
  --color-ink: #141413;            /* slate dark, no #000 */
  --color-ink-soft: #5E5D59;       /* slate light */
  --color-muted: #B0AEA5;          /* cloud medium */
  --color-ink-hover: #3D3D3A;      /* hover del CTA primario */
  --color-primary: #CC785C;        /* clay, el naranja de marca */
  --color-primary-live: #D97757;   /* --swatch--clay real del CSS */
  --color-secondary: #141413;      /* la tinta tambien es CTA */
  --color-fig: #C46686;            /* acento secundario */
  --color-border: rgba(20,20,19,0.10);        /* #1414131a */
  --color-border-strong: rgba(20,20,19,0.20); /* #14141333 */
  --color-on-primary: #141413;     /* sobre arcilla: TINTA, no crema */
  --color-on-ink: #FAF9F5;         /* sobre tinta: crema, no blanco */

  /* Typography - sustituto Google primero, original como fallback */
  --font-sans: 'Space Grotesk', 'Anthropic Sans', Arial, sans-serif;
  --font-serif: 'Source Serif 4', 'Anthropic Serif', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'Anthropic Mono', ui-monospace, monospace;

  /* Escala - el body es SERIF */
  --f-display: 700 60.87px/1.1 var(--font-sans);
  --f-h2: 600 40px/1.1 var(--font-sans);
  --f-h3: 400 24px/1.25 var(--font-serif);
  --f-lead: 400 20px/1.5 var(--font-serif);
  --f-body: 400 18px/1.6 var(--font-serif);
  --f-ui: 500 15px/1.4 var(--font-sans);
  --f-label: 500 14px/1.4 var(--font-sans);
  --f-mono: 400 12px/1.5 var(--font-mono);

  /* Radius + shadow */
  --radius-control: 8px;
  --radius-card: 16px;
  --radius-block: 24px;
  --shadow-card: 0 2px 2px rgba(0,0,0,0.01), 0 4px 8px rgba(0,0,0,0.02);

  /* Spacing */
  --space-1: 4px;  --space-2: 8px;  --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --space-section: clamp(3.5rem, 2.73rem + 3.8vw, 5.5rem);
  --site-max-width: min(89.5rem, 100vw);

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms; --duration-base: 400ms;
}

@theme {
  --color-canvas: #FAF9F5;
  --color-surface: #F0EEE6;
  --color-surface-warm: #E3DACC;
  --color-ink: #141413;
  --color-ink-soft: #5E5D59;
  --color-muted: #B0AEA5;
  --color-primary: #CC785C;
  --color-primary-live: #D97757;
  --color-fig: #C46686;
  --color-border: rgba(20,20,19,0.10);

  --font-sans: 'Space Grotesk', 'Anthropic Sans', Arial, sans-serif;
  --font-serif: 'Source Serif 4', 'Anthropic Serif', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'Anthropic Mono', ui-monospace, monospace;

  --text-display: 60.87px;
  --text-h2: 40px;
  --text-h3: 24px;
  --text-lead: 20px;
  --text-body: 18px;
  --text-ui: 15px;
  --text-mono: 12px;

  --font-weight-regular: 400;   /* dominante */
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;      /* solo el h1 */

  --radius-control: 8px;
  --radius-card: 16px;
  --radius-block: 24px;

  --shadow-card: 0 2px 2px rgba(0,0,0,0.01), 0 4px 8px rgba(0,0,0,0.02);
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
}

/* El body va en serif: esta linea es el sistema entero. */
body { font-family: var(--font-serif); font-size: var(--text-body); }

{
  "color": {
    "canvas": "#FAF9F5",
    "surface": "#F0EEE6",
    "surfaceWarm": "#E3DACC",
    "ink": "#141413",
    "inkSoft": "#5E5D59",
    "inkHover": "#3D3D3A",
    "muted": "#B0AEA5",
    "primary": "#CC785C",
    "primaryLive": "#D97757",
    "secondary": "#141413",
    "fig": "#C46686",
    "border": "rgba(20,20,19,0.10)",
    "onPrimary": "#141413",
    "onInk": "#FAF9F5"
  },
  "font": {
    "sans": { "family": "Space Grotesk", "substituteOf": "Anthropic Sans" },
    "serif": { "family": "Source Serif 4", "substituteOf": "Anthropic Serif", "role": "body" },
    "mono": { "family": "JetBrains Mono", "substituteOf": "Anthropic Mono" }
  },
  "fontSize": {
    "display": { "px": 60.87, "weight": 700, "lineHeight": 1.10, "family": "sans" },
    "h2": { "px": 40, "weight": 600, "lineHeight": 1.10, "family": "sans" },
    "h3": { "px": 24, "weight": 400, "lineHeight": 1.25, "family": "serif" },
    "lead": { "px": 20, "weight": 400, "lineHeight": 1.50, "family": "serif" },
    "body": { "px": 18, "weight": 400, "lineHeight": 1.60, "family": "serif" },
    "ui": { "px": 15, "weight": 500, "lineHeight": 1.40, "family": "sans" },
    "mono": { "px": 12, "weight": 400, "lineHeight": 1.50, "family": "mono" }
  },
  "radius": { "control": "8px", "card": "16px", "block": "24px" },
  "spacing": { "base": "4px", "sm": "8px", "md": "16px", "lg": "24px", "section": "56-88px" },
  "shadow": { "card": "0 2px 2px rgba(0,0,0,0.01), 0 4px 8px rgba(0,0,0,0.02)" },
  "motion": { "ease": "cubic-bezier(0.16, 1, 0.3, 1)", "durationFast": "200ms" }
}

---
version: "1.0"
name: "Anthropic"
description: "Sistema visual de Anthropic: canvas crema #FAF9F5, tinta calida #141413, superficies #F0EEE6 y #E3DACC, y acento arcilla #CC785C. El cuerpo del texto va en serif (Anthropic Serif); la grotesca (Anthropic Sans) queda para el h1 en 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"
  text-primary: "#141413"
  text-secondary: "#5E5D59"
  text-muted: "#B0AEA5"
  text-on-primary: "#141413"
  text-on-ink: "#FAF9F5"
  border: "#1414131a"
  border-strong: "#14141333"
  fig: "#C46686"
typography:
  display:
    fontFamily: "Anthropic Sans"
    fontSize: "60.87px"
    fontWeight: 700
    lineHeight: "1.10"
  body:
    fontFamily: "Anthropic Serif"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: "1.60"
  mono:
    fontFamily: "Anthropic Mono"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "1.50"
rounded:
  control: "8px"
  card: "16px"
  block: "24px"
---

# DESIGN.md - Anthropic

> Sistema de diseno extraido de `https://www.anthropic.com` (julio 2026).
> Colores, fuentes, tamanos y radios medidos del CSS en vivo (Webflow, variables `--swatch--*`).
> Descarga el archivo completo con el boton "Download DESIGN.md".