Assembly Coffee London

:root {
  /* Colors */
  --color-obsidian: #0E1311;
  --color-pure-black: #000000;
  --color-ash-charcoal: #1A1A1A;
  --color-graphite: #333333;
  --color-stone-gray: #808080;
  --color-silver: #B3B3B3;
  --color-bone: #FFFFFF;
  --color-linen: #F6F7F2;
  --color-sand-khaki: #DFDBCA;
  --color-lichen-green: #CADCAC;
  --color-citron: #FAF080;
  --color-antique-gold: #CFA53B;
  --color-olive-bark: #4D4A31;

  /* Roles */
  --color-background: #0E1311;
  --color-surface: #1A1A1A;
  --color-surface-elevated: #F6F7F2;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #B3B3B3;
  --color-text-muted: #808080;
  --color-text-on-invert: #0E1311;
  --color-border: #DFDBCA;
  --color-border-hair: rgba(223, 219, 202, .22);
  --color-success: #CADCAC;
  --color-success-bg: #2A3324;
  --color-warning: #FAF080;
  --color-warning-bg: #3A3720;
  --color-error: #7A1212;
  --color-error-bg: #2A1414;

  /* Typography */
  --font-display: 'Newsreader', ui-serif, Georgia, serif;
  --font-body: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Scale */
  --text-display: 42px;
  --leading-display: 1.2;
  --text-heading-lg: 36px;
  --leading-heading-lg: 1.2;
  --text-heading: 30px;
  --leading-heading: 1.25;
  --text-heading-sm: 21px;
  --leading-heading-sm: 1.25;
  --text-subheading: 18px;
  --leading-subheading: 1.4;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --text-label: 13px;
  --leading-label: 1.4;
  --text-caption: 11px;
  --leading-caption: 1.5;
  --tracking-caption: 0.08em;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-160: 160px;

  /* Layout */
  --page-max-width: 1400px;
  --section-gap: 80px;
  --card-padding: 20px;
  --element-gap: 16px;

  /* Radius */
  --radius-md: 4px;
  --radius-price: 60px;

  /* Elevation: el techo del sistema */
  --shadow-md: rgba(0, 0, 0, 0.05) 0px 2.5px 10px -4px;
  --shadow-subtle: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
}

@theme {
  /* Colors */
  --color-obsidian: #0E1311;
  --color-ash-charcoal: #1A1A1A;
  --color-graphite: #333333;
  --color-stone-gray: #808080;
  --color-silver: #B3B3B3;
  --color-bone: #FFFFFF;
  --color-linen: #F6F7F2;
  --color-sand-khaki: #DFDBCA;
  --color-lichen-green: #CADCAC;
  --color-citron: #FAF080;
  --color-antique-gold: #CFA53B;
  --color-olive-bark: #4D4A31;

  /* Typography */
  --font-display: 'Newsreader', ui-serif, Georgia, serif;
  --font-body: 'Archivo', ui-sans-serif, system-ui, sans-serif;

  /* Scale */
  --text-display: 42px;
  --text-display--line-height: 1.2;
  --text-heading-lg: 36px;
  --text-heading-lg--line-height: 1.2;
  --text-heading: 30px;
  --text-heading--line-height: 1.25;
  --text-heading-sm: 21px;
  --text-heading-sm--line-height: 1.25;
  --text-subheading: 18px;
  --text-subheading--line-height: 1.4;
  --text-body: 16px;
  --text-body--line-height: 1.5;
  --text-body-sm: 14px;
  --text-body-sm--line-height: 1.5;
  --text-label: 13px;
  --text-label--line-height: 1.4;
  --text-caption: 11px;
  --text-caption--line-height: 1.5;
  --text-caption--letter-spacing: 0.08em;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-160: 160px;

  /* Radius */
  --radius-md: 4px;
  --radius-price: 60px;

  /* Shadows */
  --shadow-md: rgba(0, 0, 0, 0.05) 0px 2.5px 10px -4px;
}

{
  "color": {
    "brand": {
      "obsidian": "#0E1311",
      "bone": "#FFFFFF"
    },
    "surface": {
      "obsidian": "#0E1311",
      "ashCharcoal": "#1A1A1A",
      "sandKhaki": "#DFDBCA",
      "linen": "#F6F7F2",
      "oliveBark": "#4D4A31"
    },
    "accent": {
      "citron": "#FAF080",
      "lichenGreen": "#CADCAC",
      "antiqueGold": "#CFA53B"
    },
    "text": {
      "primary": "#FFFFFF",
      "secondary": "#B3B3B3",
      "muted": "#808080",
      "onInvert": "#0E1311"
    },
    "border": {
      "hair": "rgba(223, 219, 202, .22)",
      "strong": "#DFDBCA",
      "avoid": "#1A1A1A"
    },
    "state": {
      "success": "#CADCAC",
      "successBg": "#2A3324",
      "warning": "#FAF080",
      "warningBg": "#3A3720",
      "error": "#7A1212",
      "errorBg": "#2A1414"
    }
  },
  "font": {
    "display": "Newsreader",
    "body": "Archivo",
    "original": {
      "display": "ID00 Serif",
      "body": "GT America Standard"
    },
    "displayStyle": "italic",
    "weights": {
      "display": [300, 400],
      "body": [300, 400, 500, 600]
    },
    "scale": {
      "display": { "size": "42px", "lineHeight": 1.2, "style": "italic" },
      "headingLg": { "size": "36px", "lineHeight": 1.2, "style": "italic" },
      "heading": { "size": "30px", "lineHeight": 1.25, "style": "italic" },
      "headingSm": { "size": "21px", "lineHeight": 1.25, "style": "italic" },
      "subheading": { "size": "18px", "lineHeight": 1.4, "style": "roman" },
      "body": { "size": "16px", "lineHeight": 1.5, "style": "roman" },
      "bodySm": { "size": "14px", "lineHeight": 1.5, "style": "roman" },
      "label": { "size": "13px", "lineHeight": 1.4, "style": "roman" },
      "caption": { "size": "11px", "lineHeight": 1.5, "tracking": "0.08em" }
    }
  },
  "spacing": {
    "base": "4px",
    "scale": ["4px", "8px", "12px", "16px", "20px", "24px", "32px", "40px", "48px", "80px", "96px", "160px"],
    "density": "comfortable",
    "sectionGap": "80px",
    "cardPadding": "20px",
    "elementGap": "16px",
    "maxWidth": "1400px"
  },
  "radius": {
    "all": "4px",
    "pricePill": "60px"
  },
  "shadow": {
    "md": "rgba(0, 0, 0, 0.05) 0px 2.5px 10px -4px",
    "subtle": "rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px"
  },
  "contrast": {
    "boneOnObsidian": "18.75:1",
    "khakiOnObsidian": "13.50:1",
    "silverOnObsidian": "8.94:1",
    "stoneOnObsidian": "4.75:1",
    "obsidianOnLinen": "17.42:1",
    "obsidianOnCitron": "15.93:1",
    "obsidianOnGold": "8.12:1",
    "boneOnOlive": "8.98:1",
    "ashOnObsidian": "1.08:1",
    "blackOnObsidian": "1.12:1"
  }
}

---
version: "1.0"
name: "Assembly Coffee London"
description: "Sistema visual de revista impresa en papel negro: lienzo casi negro con fondo verde (#0E1311), nombres de producto en serif cursiva que convierten una lista de navegacion en un indice curado, bodegon de estudio en luz baja y calida, y un unico radio de 4px con una excepcion de 60px reservada a la pildora de precio. Sin un solo boton relleno de accion primaria."
colors:
  primary: "#FFFFFF"
  primary-hover: "#F6F7F2"
  primary-active: "#DFDBCA"
  secondary: "#4D4A31"
  accent: "#CFA53B"
  accent-soft: "#FAF080"
  neutral: "#B3B3B3"
  background: "#0E1311"
  surface: "#1A1A1A"
  surface-elevated: "#F6F7F2"
  text-primary: "#FFFFFF"
  text-secondary: "#B3B3B3"
  text-muted: "#808080"
  text-on-primary: "#0E1311"
  text-accent: "#CFA53B"
  border: "#DFDBCA"
  border-subtle: "#1A1A1A"
  success: "#CADCAC"
  success-bg: "#2A3324"
  warning: "#FAF080"
  warning-bg: "#3A3720"
  error: "#7A1212"
  error-bg: "#2A1414"
  info: "#DFDBCA"
  info-bg: "#1A1A1A"
typography:
  display:
    fontFamily: "Newsreader"
    fontSize: "42px"
    fontWeight: 300
    lineHeight: "1.2"
    letterSpacing: "0"
  heading-lg:
    fontFamily: "Newsreader"
    fontSize: "36px"
    fontWeight: 300
    lineHeight: "1.2"
    letterSpacing: "0"
  heading:
    fontFamily: "Newsreader"
    fontSize: "30px"
    fontWeight: 400
    lineHeight: "1.25"
    letterSpacing: "0"
  heading-sm:
    fontFamily: "Newsreader"
    fontSize: "21px"
    fontWeight: 400
    lineHeight: "1.25"
    letterSpacing: "0"
  subheading:
    fontFamily: "Archivo"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: "1.4"
    letterSpacing: "0"
  body:
    fontFamily: "Archivo"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: "0"
  body-sm:
    fontFamily: "Archivo"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: "0"
  label:
    fontFamily: "Archivo"
    fontSize: "13px"
    fontWeight: 500
    lineHeight: "1.4"
    letterSpacing: "0"
  caption:
    fontFamily: "Archivo"
    fontSize: "11px"
    fontWeight: 600
    lineHeight: "1.5"
    letterSpacing: "0.08em"
rounded:
  sm: "4px"
  md: "4px"
  lg: "4px"
  xl: "4px"
  pill: "60px"
  full: "9999px"
spacing:
  base: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "40px"
  2xl: "80px"
  3xl: "160px"
  gap: "16px"
  section-padding: "80px"
components:
  button-primary:
    backgroundColor: "transparent"
    textColor: "{colors.text-primary}"
    fontSize: "18px"
    fontWeight: 400
    letterSpacing: "0"
    padding: "0"
    borderRadius: "0"
    border: "none"
    boxShadow: "none"
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.text-primary}"
    fontSize: "13px"
    fontWeight: 500
    letterSpacing: "0"
    padding: "8px 16px"
    borderRadius: "{rounded.md}"
    border: "1px solid {colors.border}"
    boxShadow: "none"
  input:
    backgroundColor: "transparent"
    textColor: "{colors.text-primary}"
    fontSize: "14px"
    padding: "10px 16px"
    borderRadius: "{rounded.md}"
    border: "1px solid {colors.border}"
    boxShadow: "none"
  card:
    backgroundColor: "{colors.background}"
    padding: "20px"
    borderRadius: "{rounded.md}"
    border: "1px solid {colors.border}"
    boxShadow: "rgba(0, 0, 0, 0.05) 0px 2.5px 10px -4px"
  badge:
    backgroundColor: "{colors.accent-soft}"
    textColor: "{colors.text-on-primary}"
    fontSize: "11px"
    fontWeight: 500
    letterSpacing: "0.08em"
    padding: "4px 8px"
    borderRadius: "{rounded.md}"
    border: "none"
    boxShadow: "none"
---

# DESIGN.md - Assembly Coffee London

Sistema visual extraido de https://assemblycoffee.co.uk.
Fuente de los valores: la ficha publica de refero.design para el dominio, contrastada con
la captura real de portada. Los contrastes WCAG estan medidos aqui, no copiados, y dos de
ellos contradicen lo que la propia fuente recomienda. Los valores marcados
`(derivado para completar el sistema)` no aparecen en el sitio y se han construido desde la
familia real para que el sistema sea usable de punta a punta.

## 1. Tema Visual y Atmosfera

Assembly Coffee es una revista impresa en papel negro. El lienzo es un casi negro con
fondo verde, `#0E1311`, y sobre el se apoyan dos cosas: bodegones de estudio en luz baja y
tipografia fina en hueso. No hay nada mas. No hay banners, no hay ilustracion, no hay
gradientes de interfaz.

La decision que define el sistema es la cursiva. Los nombres de producto y los titulos de
seccion van en serif cursiva, y eso convierte una lista de navegacion funcional en un
indice curado. La misma pantalla, con esos nombres en redonda o en la sans, se lee como una
tienda cualquiera. En cursiva se lee como una carta.

La segunda decision es que no hay boton de accion primaria. Comprar es un enlace de texto
en cursiva. La pildora de precio, que es lo unico con relleno claro, no es un boton: es una
etiqueta. Un sistema de comercio electronico sin CTA relleno es una rareza, y aqui es
coherente con todo lo demas.

Palabras clave: tostadero nocturno, cursiva editorial, bodegon calido, filete fino, hueso.

## 2. Paleta de Colores y Roles Semanticos

Trece colores, y once de ellos son neutros o casi. El vocabulario cromatico esta racionado
a rellenos de etiqueta y a la barra de anuncio.

### Colores de marca

| Nombre | Hex | Rol |
|---|---|---|
| Obsidian | `#0E1311` | Lienzo primario. El casi negro con fondo verde hace que el hueso brille sin resultar clinico |
| Bone | `#FFFFFF` | Texto sobre oscuro, relleno de pildora de precio, superficie invertida. Es el acento mas brillante de una paleta que no levanta la voz |

El fondo verde de `#0E1311` no es un capricho: un negro puro deja el blanco frio y la foto
de producto se despega. Con ese apunte de verde, la foto calida y el lienzo pertenecen al
mismo sitio.

### Colores de superficie

| Nombre | Hex | Rol |
|---|---|---|
| Ash Charcoal | `#1A1A1A` | Superficie secundaria y borde de la navegacion, ligeramente levantada del negro |
| Linen | `#F6F7F2` | Blanco roto calido: superficie invertida, relleno de pildora de precio, boton suave |
| Sand Khaki | `#DFDBCA` | Filetes, divisores, contorno de input y borde de card |
| Olive Bark | `#4D4A31` | Fondo de la barra de anuncio superior. El verde pardo que ancla la pagina |

### Colores de acento

| Nombre | Hex | Rol |
|---|---|---|
| Citron | `#FAF080` | Relleno de etiqueta amarilla: nueva referencia |
| Lichen Green | `#CADCAC` | Relleno de etiqueta verde: categorias editoriales |
| Antique Gold | `#CFA53B` | Trazo y borde de etiqueta de edicion limitada. Laton envejecido, nunca neon |

Los tres solo existen como relleno de etiqueta pequena o como filete. En cuanto uno de
ellos pinta un fondo de seccion, el sistema deja de ser Assembly.

### Colores de texto

Contrastes medidos con la formula de WCAG, no estimados.

| Nombre | Hex | Rol | Contraste |
|---|---|---|---|
| Bone | `#FFFFFF` | Texto primario sobre lienzo | 18.75:1 sobre `#0E1311`, AAA |
| Sand Khaki | `#DFDBCA` | Filetes y texto calido sobre lienzo | 13.50:1 sobre `#0E1311`, AAA |
| Silver | `#B3B3B3` | Notas de cata, texto secundario | 8.94:1 sobre `#0E1311`, AAA |
| Stone Gray | `#808080` | Texto de ayuda, marcador de posicion | 4.75:1 sobre `#0E1311`, AA |
| Obsidian sobre Linen | `#0E1311` | Texto de la pildora de precio | 17.42:1 sobre `#F6F7F2`, AAA |
| Obsidian sobre Citron | `#0E1311` | Texto de etiqueta amarilla | 15.93:1 sobre `#FAF080`, AAA |
| Obsidian sobre Gold | `#0E1311` | Texto de etiqueta de edicion limitada | 8.12:1 sobre `#CFA53B`, AAA |
| Bone sobre Olive | `#FFFFFF` | Texto de la barra de anuncio | 8.98:1 sobre `#4D4A31`, AAA |

La escala de texto de este sistema es comodisima: todo lo que es texto pasa AAA salvo el
gris de ayuda, que pasa AA. Los problemas estan en otro sitio.

Dos cosas que salen de medir y no de mirar:

- **El filete por defecto del sistema es practicamente invisible.** La fuente dice que las
  capas se separan con filetes de 1px en `#1A1A1A` o en `#DFDBCA`, y da los dos como
  equivalentes. No lo son: `#1A1A1A` sobre `#0E1311` da 1.08:1, es decir, un borde que no
  se ve. `#DFDBCA` sobre el mismo fondo da 13.50:1. Sobre oscuro, el filete util es el
  caqui; `#1A1A1A` sirve como relleno de superficie, no como borde visible. Y si se quiere
  un filete discreto de verdad, `#333333` (1.48:1) sigue siendo demasiado poco: hay que
  bajar la opacidad del caqui, no subir el gris.
- **La guia para agentes de la propia fuente se contradice.** Sus reglas dicen que no debe
  existir un boton relleno de accion primaria y que las acciones son enlaces en cursiva.
  Su seccion de prompts, tres parrafos mas abajo, prescribe un boton primario de fondo
  `#000000` con texto blanco y radio 9999px. Ademas de romper la regla, ese boton seria
  invisible: negro puro sobre el lienzo da 1.12:1. Aqui se sigue la regla, no el prompt.

### Colores de estado

El sitio expone dos rellenos de etiqueta que se pueden leer como estado. El resto se deriva.

| Estado | Color | Fondo | Origen |
|---|---|---|---|
| Success | `#CADCAC` | `#2A3324` | Real como relleno de etiqueta, el fondo oscuro es *(derivado)* |
| Warning | `#FAF080` | `#3A3720` | Real como relleno de etiqueta, el fondo oscuro es *(derivado)* |
| Error | `#7A1212` | `#2A1414` | *(derivado)*: se toma el rojo profundo del bloque de maridaje, que es el unico rojo del sistema |
| Info | `#DFDBCA` | `#1A1A1A` | *(derivado)*: lo informativo se resuelve en caqui, no en azul |

Regla dura: la etiqueta de color es editorial, no funcional. Si un estado necesita gritar,
el sistema prefiere que no grite.

## 3. Reglas de Tipografia

Dos familias con papeles que no se cruzan nunca. Ninguna de las dos esta en Google Fonts,
asi que esta ficha las sustituye.

### Sustitucion

**Original: GT America Standard -> HTML: Archivo (Google substitute).**

GT America es una mezcla deliberada de la gotica americana del XIX y la neo-grotesca suiza.
La ficha de origen propone Inter, Sohne o Neue Haas Grotesk: la primera esta descartada por
politica del repo y las otras dos no estan en Google. Se compararon tres candidatas:

- **Public Sans** es neutral pero no tiene la anchura ni la solidez de la gotica americana.
- **Instrument Sans** es mas estrecha y mas europea: buena neo-grotesca, poca America.
- **Archivo** viene precisamente de las grotescas americanas del XIX, tiene el rango de
  pesos de 300 a 600 que pide el sistema y aguanta perfectamente a 11px.

Se elige Archivo, pesos 300, 400, 500 y 600.

**Original: ID00 Serif -> HTML: Newsreader (Google substitute).**

La ficha de origen propone GT Sectra, Cormorant Garamond Italic o Playfair Display Italic.
Playfair esta en la lista negra del repo y Cormorant, al ser tan fina, se rompe sobre negro
justo a los tamanos pequenos que el sistema usa mas (16px y 18px). **Newsreader** resuelve
las dos cosas: esta pensada para leerse en pantalla a tamano de texto, tiene una cursiva
verdadera y no interpolada, y su rango de 200 a 800 cubre los pesos 300 y 400 que pide el
original. Frente a Instrument Serif, que solo trae un corte de display, Newsreader funciona
igual a 16px que a 42px, que es exactamente lo que hace ID00 Serif en el sitio.

### Reparto

- **Archivo**, pesos 300 a 600. Navegacion, cuerpo, texto de boton, metadatos, pie,
  contador de carrito, campos de formulario. Entre 11px y 14px sostiene toda la estructura.
- **Newsreader**, pesos 300 y 400, **casi siempre en cursiva**. Nombres de producto, titulos
  de seccion, las etiquetas de accion del hero, el manifiesto de marca.

La cursiva es la firma. Poner esos mismos textos en redonda no rompe el sistema de forma
evidente, pero le quita justo lo que lo hace reconocible.

### Escala tipografica

| Rol | Fuente | Tamano | Peso | Interlineado | Estilo |
|---|---|---|---|---|---|
| display | Newsreader | 42px | 300 | 1.2 | cursiva |
| heading-lg | Newsreader | 36px | 300 | 1.2 | cursiva |
| heading | Newsreader | 30px | 400 | 1.25 | cursiva |
| heading-sm | Newsreader | 21px | 400 | 1.25 | cursiva |
| subheading | Archivo | 18px | 400 | 1.4 | redonda |
| body | Archivo | 16px | 400 | 1.5 | redonda |
| body-sm | Archivo | 14px | 400 | 1.5 | redonda |
| label | Archivo | 13px | 500 | 1.4 | redonda |
| caption | Archivo | 11px | 600 | 1.5 | redonda, mayusculas |

El display se queda en 42px. Es un sistema que nunca grita: el elemento grande de la pagina
es la fotografia, no el titular.

### Pesos tipograficos

| Peso | Valor | Uso |
|---|---|---|
| Light | 300 | Manifiesto y display en serif |
| Regular | 400 | Cuerpo en sans, nombres de producto en serif |
| Medium | 500 | Enlaces de navegacion, texto de pildora, etiquetas |
| Semibold | 600 | Solo mayusculas diminutas tipo FEATURED |

No hay 700 en ningun sitio. La fuente lo dice y la captura lo confirma: por encima de 600
se rompe el tono susurrado.

### Letter spacing

Neutro en casi todo. Solo las mayusculas de 11px se abren, en torno a 0.08em, para que
FEATURED no se lea como una palabra apretada. El serif nunca lleva tracking.

## 4. Estilos de Componentes

Un unico radio, 4px, con una excepcion. Los filetes hacen el trabajo que en otros sistemas
hacen las sombras.

### Acciones

**Enlace en cursiva (la accion primaria del sistema)**

```css
background: transparent;
color: #FFFFFF;
font: 400 18px/1.4 "Newsreader";
font-style: italic;
padding: 0;
border: none;
text-decoration: none;
```

Al pasar el raton aparece el subrayado. No hay relleno, no hay borde y no hay radio, porque
no es un boton. Shop Now, Limited Time Offer y Start Earning son todos esto.

**Boton fantasma (solo utilidades)**

```css
background: transparent;
color: #FFFFFF;
font: 500 13px/1.4 "Archivo";
padding: 8px 16px;
border-radius: 4px;
border: 1px solid #DFDBCA;
```

Aceptable para selector de divisa, filtros y poco mas. Nunca para comprar.

Estados *(derivados para completar el sistema)*:

| Estado | Cambio |
|---|---|
| hover | `background: rgba(223, 219, 202, .08)` |
| active | `background: rgba(223, 219, 202, .14)` |
| focus-visible | `outline: 2px solid #DFDBCA; outline-offset: 2px` |
| disabled | `color: #808080; border-color: #333333` |

### Pildora de precio

```css
background: #F6F7F2;
color: #0E1311;
font: 500 13px/1.4 "Archivo";
padding: 7px 16px;
border-radius: 60px;
border: none;
box-shadow: none;
```

Es el unico elemento del sistema con radio 60px y el unico con relleno claro. No es un
boton: es una etiqueta de precio, y confundir las dos cosas es el error mas facil al
reproducir esta interfaz.

### Etiqueta editorial

```css
background: #FAF080;   /* o #CADCAC */
color: #0E1311;
font: 500 11px/1.5 "Archivo";
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 4px;
border: none;
```

La variante de edicion limitada cambia el relleno por un borde de 1px en `#CFA53B` sobre
fondo transparente. Nunca texto cromatico sobre fondo cromatico: el texto es hueso o es
obsidiana.

### Card de producto

```css
background: #0E1311;
padding: 20px;
border-radius: 4px;
border: 1px solid #DFDBCA;   /* con opacidad si se quiere mas discreto */
box-shadow: rgba(0, 0, 0, 0.05) 0px 2.5px 10px -4px;
```

La foto ocupa entre el 60 y el 70 por ciento superior, sobre fondo de estudio calido. Debajo
el nombre en Newsreader cursiva a 21px o 24px en hueso, las notas de cata en Archivo 13px o
14px en `#B3B3B3`, y la pildora de precio anclada abajo a la izquierda.

La fuente indica un borde de `#1A1A1A`. Medido da 1.08:1, es decir, ninguno. Si el borde
tiene que verse, va en caqui.

### Barra de anuncio

Franja a sangre en `#4D4A31` con texto crema centrado, Archivo de 11px a 13px, una sola
linea. Umbrales de envio y mensajes con caducidad. 8.98:1, comodo.

### Cabecera

Pegajosa, sobre `#0E1311`. Monograma y la cifra 10 del aniversario a la izquierda en serif
hueso; en el centro los enlaces en Archivo 14px peso 500 con indicador de desplegable; a la
derecha lupa, Log in, el contador de carrito entre parentesis y el selector de divisa. Borde
inferior de 1px.

Debajo de la barra oliva, la portada real anade una segunda franja clara en linen con texto
oscuro y un contador de referencias tostadas. La ficha de origen no la menciona y conviene
saber que existe: es la unica banda clara de toda la pagina.

### Indice editorial del hero

No es un componente con caja. Es una pila vertical de entradas: nombre en Newsreader
cursiva de 18px a 21px en hueso, subtexto de accion en Archivo de 13px a 14px algo
apagado, y de 40px a 56px de separacion entre entradas. Ese aire es lo que convierte una
lista de enlaces en un sumario.

### Bloque de manifiesto

Seccion a todo el ancho en `#0E1311`, 80px de aire arriba y abajo, texto en Newsreader
cursiva de 30px a 36px, peso 300, interlineado 1.2. Sin botones y sin enlaces: la prosa es
la seccion.

### Input

```css
background: transparent;
color: #FFFFFF;
font: 400 14px/1.5 "Archivo";
padding: 10px 16px;
border-radius: 4px;
border: 1px solid #DFDBCA;
```

Marcador de posicion en `#808080`, que sobre el lienzo da 4.75:1 y cumple AA.

## 5. Principios de Layout

### Escala de espaciado

Base de 4px, densidad comoda, con un salto muy grande al final: de 96px a 160px.

| Token | Valor | Uso |
|---|---|---|
| `--spacing-4` | 4px | Padding vertical de etiqueta |
| `--spacing-8` | 8px | Padding horizontal de etiqueta, area de icono |
| `--spacing-16` | 16px | Gap entre elementos, padding de control |
| `--spacing-20` | 20px | Padding de card |
| `--spacing-24` | 24px | Separacion dentro de bloque |
| `--spacing-40` | 40px | Separacion entre entradas del indice |
| `--spacing-48` | 48px | Separacion entre entradas, variante ancha |
| `--spacing-80` | 80px | Gap entre secciones |
| `--spacing-160` | 160px | Respiro de galeria |

Los intermedios reales son 12, 32 y 96px.

### Contenedores

Ancho maximo de 1400px, aunque las secciones oscuras se extienden a sangre y lo que se
limita es el contenido, no el fondo. Los margenes laterales son generosos.

### Grid

El hero es una division en dos: una columna de indice a la izquierda, de un 30 por ciento
de ancho, y una fotografia a la derecha que ocupa un 55 por ciento, dejando negro vacio al
extremo derecho como respiracion. Debajo, la rejilla de producto es de tres columnas en
escritorio y dos en tableta, con cards casi cuadradas y muy juntas.

### Filosofia de espaciado

El ritmo es de galeria, no de producto SaaS: negro tranquilo, fotografia fuerte, negro
tranquilo, prosa tranquila, fotografia fuerte. El aire entre secciones es de 80px o mas
porque cada fotografia necesita silencio a los lados.

## 6. Profundidad y Elevacion

Hay sombra, pero es tan sutil que casi es una declaracion de que no la hay.

| Nombre | Valor |
|---|---|
| Card de producto | `rgba(0, 0, 0, 0.05) 0px 2.5px 10px -4px` |
| Card levantada | `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px` |

Diez pixeles de desenfoque al 5 por ciento es el techo. Cualquier cosa mas pesada se lee
como Material o como iOS, no como galeria.

| Nivel | Nombre | Hex | Uso |
|---|---|---|---|
| 0 | Obsidian Canvas | `#0E1311` | Fondo de pagina y de seccion |
| 1 | Lifted Black | `#1A1A1A` | Navegacion, controles con contorno, relleno de card |
| 2 | Warm Card | `#DFDBCA` | Filetes y divisores, el caqui que templa la interfaz oscura |
| 3 | Linen Invert | `#F6F7F2` | Superficie invertida: pildora de precio, boton suave |
| 4 | Bone Overlay | `#FFFFFF` | La superficie mas alta: modales y rellenos de etiqueta |

### Radios de borde

| Token | Valor | Uso |
|---|---|---|
| `--radius-md` | 4px | Navegacion, cards, etiquetas, inputs, botones. Todo |
| `--radius-price` | 60px | Solo la pildora de precio |

Los 60px estan reservados a una unica pieza. Extenderlos a los botones convierte una
interfaz editorial en una interfaz de aplicacion en dos minutos.

## 7. Lo que Si y lo que No

### Si hacer

- Poner los titulares y los nombres de producto en serif cursiva. Es la voz de la marca, y
  en redonda o en la sans desaparece.
- Mantener el lienzo en `#0E1311` y dejar que el hueso lleve la jerarquia.
- Usar 4px de radio en cards, botones, inputs y etiquetas, y reservar los 60px para la
  pildora de precio.
- Fotografiar el producto sobre fondos de estudio calidos y en luz baja: rojo brasa, ambar
  oscuro, carbon.
- Usar los acentos (citron, liquen, oro viejo) solo como relleno de etiqueta editorial,
  nunca como accion ni como alerta.
- Resolver las llamadas a la accion como enlaces en cursiva. El boton fantasma de 4px solo
  para utilidades secundarias.
- Separar capas con filetes de 1px en caqui, no con sombras.
- Mantener el peso maximo en 500 para la sans y en 400 para el serif.

### No hacer

- No meter un boton relleno de accion primaria. El sistema no tiene CTA a proposito, y el
  boton negro que sugiere la propia fuente ademas no se veria.
- No poner el cuerpo ni la navegacion en el serif, ni los nombres de producto en la sans.
- No usar blanco puro como fondo de pagina. El sistema es oscuro primero.
- No pintar fondos, cards ni texto con los colores saturados. Existen como relleno de
  etiqueta y como filete.
- No usar sombras grandes. El techo es 10px de desenfoque al 5 por ciento.
- No usar pesos de 600 o 700 en titulares.
- No fotografiar producto sobre blanco ni sobre gris claro.
- No usar `#1A1A1A` como borde sobre el lienzo: da 1.08:1 y no se ve.

## 8. Comportamiento Responsive

### Breakpoints *(derivados para completar el sistema)*

| Nombre | Ancho |
|---|---|
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1400px, ancho maximo del contenedor |

### Cambios por breakpoint

- **Hero:** la division indice mas fotografia se apila. La fotografia va primero, porque el
  objeto es el heroe.
- **Rejilla de producto:** de tres columnas a dos en tableta y a una en movil.
- **Display:** de 42px baja a 30px, manteniendo la cursiva y el interlineado 1.2.
- **Indice editorial:** la separacion entre entradas baja de 48px a 32px, pero no a menos:
  ese aire es lo que hace que se lea como sumario.
- **Gap de seccion:** de 80px a 48px.
- **Cabecera:** los enlaces del centro colapsan en un menu; la lupa, el carrito y la divisa
  se quedan visibles.
- **Barra de anuncio:** se mantiene, y el texto puede pasar a dos lineas.

### Touch targets

El enlace en cursiva de 18px es el problema clasico de este sistema: es el elemento mas
importante y no tiene caja. En movil necesita 12px de padding vertical invisible para
llegar a los 44px, sin cambiar su aspecto. *(derivado para completar el sistema)*

### Filosofia responsive

Lo primero que se protege es la fotografia, que es el contenido. Lo segundo, el aire entre
entradas del indice. Lo ultimo, la escala del titular, que puede bajar sin que nadie lo
note porque en este sistema el titular nunca fue lo grande.

## 9. Guia de Prompts para Agentes

### Referencia rapida de color

- texto sobre oscuro: `#FFFFFF`
- texto secundario: `#B3B3B3`
- fondo: `#0E1311`
- superficie levantada: `#1A1A1A`
- filete: `#DFDBCA`
- superficie invertida: `#F6F7F2`
- acento de etiqueta: `#FAF080`, `#CADCAC`, `#CFA53B`
- accion primaria: no hay color, es un enlace en cursiva

### Prompt de inicializacion de sesion

```
Trabaja con el sistema Assembly Coffee. Lienzo #0E1311, texto #FFFFFF, secundario
#B3B3B3, ayuda #808080, filetes #DFDBCA, superficie levantada #1A1A1A, invertida
#F6F7F2. Acentos solo como relleno de etiqueta: #FAF080, #CADCAC, borde #CFA53B.
Tipografia: Newsreader en CURSIVA, pesos 300 y 400, para nombres de producto, titulos y
manifiesto; Archivo 300 a 600 para toda la interfaz. Espaciado base 4px, 80px entre
secciones. Radio 4px en todo, y 60px solo en la pildora de precio. Prohibido el boton
relleno de accion primaria: las acciones son enlaces en cursiva. Sombra maxima:
10px de desenfoque al 5 por ciento.
```

### Prompt: crear pantalla nueva

```
Monta la pantalla sobre #0E1311 con contenedor de 1400px y 80px entre secciones. Hero
en dos columnas: a la izquierda un indice de entradas con el nombre en Newsreader
cursiva 21px #FFFFFF y el subtexto en Archivo 14px #B3B3B3, separadas 48px; a la
derecha una fotografia de producto sobre fondo de estudio calido en luz baja. Sin
botones. Las acciones son enlaces en Newsreader cursiva 18px que se subrayan al pasar
el raton. Etiquetas de 11px en mayusculas con 0.08em sobre relleno #FAF080 o #CADCAC.
```

### Prompt: anadir componente al kit

```
Anade el componente con radio 4px, filete de 1px en #DFDBCA y sin sombra mas alla de
10px de desenfoque al 5 por ciento. Si es un nombre de producto o un titulo, va en
Newsreader cursiva; si es interfaz, va en Archivo redonda. Si necesita una accion,
resuelvela como enlace en cursiva, no como boton relleno. El unico radio de 60px del
sistema pertenece a la pildora de precio y no se comparte.
```

### Prompt: revision de consistencia

```
Revisa la pantalla contra el sistema Assembly Coffee y senala: 1) cualquier boton
relleno de accion primaria, 2) cualquier nombre de producto o titulo en redonda o en la
sans, 3) cualquier cuerpo o navegacion en serif, 4) cualquier radio distinto de 4px que
no sea la pildora de precio, 5) cualquier sombra por encima de 10px de desenfoque al
5 por ciento, 6) cualquier peso de 600 o 700 en titulares, 7) cualquier color de acento
usado como fondo de seccion o como texto, 8) cualquier borde de 1px en #1A1A1A sobre el
lienzo, que no se ve.
```

### Prompt: variante de campana

```
Para una campana puedes usar el bloque de maridaje: un marco grande en rojo profundo
con filete de 4px y radio 4px, logotipos de socio arriba, titulo del evento en Archivo
mayusculas, nombre del producto en Newsreader cursiva a 30px y la fecha abajo. Lo que
no puedes cambiar: el lienzo oscuro, la cursiva de los nombres, la ausencia de CTA
relleno y el techo de sombra.
```

## 10. Movimiento (Motion)

El sitio se mueve muy poco, y eso encaja con el tono. La tabla es
*(derivada para completar el sistema)* a partir del comportamiento observado.

| Elemento | Propiedad | Duracion | Curva |
|---|---|---|---|
| Enlace en cursiva, hover | text-decoration-color | 150ms | ease-out |
| Enlace de navegacion, hover | opacity | 120ms | ease-out |
| Desplegable de navegacion | opacity, transform | 200ms | ease-out |
| Card de producto, hover | border-color | 180ms | ease-out |
| Fotografia, hover | transform scale(1.02) | 500ms | ease-out |

Principios: nada rebota y nada cambia de color de golpe. El movimiento acompana a la luz
baja de las fotografias, asi que va lento y corto de recorrido. Respetar siempre
`prefers-reduced-motion`.

## Anexo: Stack tecnico detectado

| Aspecto | Valor |
|---|---|
| URL de origen | https://assemblycoffee.co.uk |
| Tema | dark |
| Familia de color | neutral |
| Color dominante declarado | `#0E1311` |
| Tipografias reales | GT America Standard, ID00 Serif |
| Disponibles en Google Fonts | Ninguna de las dos. Sustituidas por Archivo y Newsreader |
| Unidad base de espaciado | 4px |
| Densidad | comoda |
| Ancho maximo | 1400px |
| Radios | 4px, y 60px solo en la pildora de precio |
| Sombras | dos, las dos por debajo de 10px de desenfoque |
| Gradientes | uno, el lavado calido del fondo del hero. Ninguno en interfaz |
| Imagenes | bodegon de estudio, luz baja y calida, una sola sombra de suelo. Sin personas, sin manos, sin interiores de cafeteria. Iconos de linea finos |

Nota de fidelidad: la identidad central (paleta, escala, uso de la cursiva, familia de
radios, techo de sombra) sale del sitio real y de su ficha publica. La sustitucion
tipografica esta declarada arriba. Los estados de interaccion, los colores semanticos de
error e info, los breakpoints y la tabla de motion estan marcados como derivados alli donde
aparecen. Los contrastes se han calculado para esta ficha, y dos de ellos contradicen
recomendaciones de la fuente original.