:root {
  /* Colors */
  --color-cobalt-wall: #447CF0;     /* el lienzo real */
  --color-evergreen: #1C3C27;       /* borde y texto sobre claro, NO fondo */
  --color-frost-white: #FFFFFD;
  --color-bone: #FFFCDA;
  --color-pewter-mist: #DFE2E5;
  --color-onyx: #000000;
  --color-ink-shadow: #0E1E14;
  --color-ember-lacquer: #C72A00;

  /* Roles */
  --color-background: #447CF0;
  --color-surface: #FFFFFD;
  --color-surface-alt: #FFFCDA;
  --color-text-on-canvas: #000000;  /* 5.39:1; el gris perla se queda en 3.00:1 */
  --color-text-on-surface: #000000;
  --color-border: #DFE2E5;
  --color-action-border: #1C3C27;

  /* Typography */
  --font-display: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Familjen Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --tracking-display: -0.02em;

  /* Scale */
  --text-display: 80px;
  --leading-display: 1;
  --text-heading: 52px;
  --leading-heading: 1.13;
  --text-heading-sm: 34px;
  --leading-heading-sm: 1.25;
  --text-subheading: 20px;
  --leading-subheading: 1.33;
  --text-body: 15px;
  --leading-body: 1.5;
  --text-body-sm: 13px;
  --leading-body-sm: 1.33;
  --text-caption: 11px;
  --leading-caption: 1.33;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-40: 40px;
  --spacing-100: 100px;
  --spacing-200: 200px;

  /* Layout */
  --page-max-width: 1280px;
  --section-gap: 40px;
  --card-padding: 20px;
  --element-gap: 20px;

  /* Radius: dos valores y ningun intermedio */
  --radius-container: 0;
  --radius-control: 9999px;

  /* Elevation: ninguna */
  --shadow-none: none;
}

@theme {
  /* Colors */
  --color-cobalt-wall: #447CF0;
  --color-evergreen: #1C3C27;
  --color-frost-white: #FFFFFD;
  --color-bone: #FFFCDA;
  --color-pewter-mist: #DFE2E5;
  --color-onyx: #000000;
  --color-ink-shadow: #0E1E14;
  --color-ember-lacquer: #C72A00;

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

  /* Scale */
  --text-display: 80px;
  --text-display--line-height: 1;
  --text-display--letter-spacing: -0.02em;
  --text-heading: 52px;
  --text-heading--line-height: 1.13;
  --text-heading--letter-spacing: -0.02em;
  --text-heading-sm: 34px;
  --text-heading-sm--line-height: 1.25;
  --text-heading-sm--letter-spacing: -0.02em;
  --text-subheading: 20px;
  --text-subheading--line-height: 1.33;
  --text-body: 15px;
  --text-body--line-height: 1.5;
  --text-body-sm: 13px;
  --text-body-sm--line-height: 1.33;
  --text-caption: 11px;
  --text-caption--line-height: 1.33;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-40: 40px;
  --spacing-100: 100px;
  --spacing-200: 200px;

  /* Radius */
  --radius-container: 0;
  --radius-control: 9999px;
}

{
  "color": {
    "canvas": { "hex": "#447CF0", "nombre": "Cobalt Wall", "nota": "la ficha de refero lo lista como acento de contorno; es el lienzo" },
    "evergreen": { "hex": "#1C3C27", "rol": "borde de accion y texto sobre superficies claras, no fondo" },
    "surface": {
      "frostWhite": "#FFFFFD",
      "bone": "#FFFCDA"
    },
    "border": "#DFE2E5",
    "text": {
      "onCanvas": "#000000",
      "onSurface": "#000000",
      "inkShadow": "#0E1E14"
    },
    "decorativo": { "emberLacquer": "#C72A00", "nota": "solo dentro de las fotografias" }
  },
  "contrastesSobreElCobalto": {
    "black": "5.39:1",
    "inkShadow": "4.44:1",
    "frostWhite": "3.89:1",
    "bone": "3.75:1",
    "evergreen": "3.12:1",
    "pewterMist": "3.00:1",
    "regla": "solo el negro pasa AA; el gris perla vale para el logotipo de 80px y no para texto de 15px"
  },
  "font": {
    "display": "Archivo",
    "body": "Familjen Grotesk",
    "original": {
      "display": "SupremeLL-Bold",
      "body": "Chalet-LondonSixty y Chalet-NewYorkSixty",
      "correccion": "Chalet es una grotesca, no una serif redondeada como dice la ficha"
    },
    "weights": { "display": [700], "body": [400] },
    "trackingDisplay": "-0.02em",
    "puntuacion": "los titulos de seccion terminan en puntos suspensivos",
    "scale": {
      "display": { "size": "80px", "weight": 700, "lineHeight": 1, "tracking": "-0.02em" },
      "heading": { "size": "52px", "weight": 700, "lineHeight": 1.13, "tracking": "-0.02em" },
      "headingSm": { "size": "34px", "weight": 700, "lineHeight": 1.25, "tracking": "-0.02em" },
      "subheading": { "size": "20px", "weight": 400, "lineHeight": 1.33 },
      "body": { "size": "15px", "weight": 400, "lineHeight": 1.5 },
      "bodySm": { "size": "13px", "weight": 400, "lineHeight": 1.33 },
      "caption": { "size": "11px", "weight": 400, "lineHeight": 1.33 }
    }
  },
  "spacing": {
    "base": "4px",
    "scale": ["4px", "8px", "16px", "20px", "40px", "100px", "200px"],
    "sectionGap": "40px",
    "cardPadding": "20px",
    "elementGap": "20px",
    "maxWidth": "1280px",
    "nota": "el gap de seccion es corto porque todas las bandas comparten fondo y las transiciones son invisibles"
  },
  "radius": {
    "container": "0",
    "control": "9999px"
  },
  "shadow": {
    "all": "none"
  }
}

---
version: "1.0"
name: "Symbol Audio"
description: "Sistema visual de sala de escucha de medio siglo: un lienzo de cobalto saturado, un logotipo de 80px que se sale por los dos bordes del viewport, cards de hueso con esquina viva clavadas como cartelas de exposicion y una marquesina fija al pie. Verde bosque como color de borde, no de fondo."
colors:
  primary: "#1C3C27"
  primary-hover: "#173220"
  primary-active: "#0E1E14"
  secondary: "#FFFFFD"
  accent: "#447CF0"
  accent-soft: "#FFFCDA"
  neutral: "#DFE2E5"
  background: "#447CF0"
  surface: "#FFFFFD"
  surface-elevated: "#FFFCDA"
  text-primary: "#000000"
  text-secondary: "#1C3C27"
  text-muted: "#0E1E14"
  text-on-primary: "#FFFFFD"
  text-accent: "#1C3C27"
  border: "#DFE2E5"
  border-subtle: "#DFE2E5"
  success: "#1C3C27"
  success-bg: "#FFFCDA"
  warning: "#C72A00"
  warning-bg: "#FFFCDA"
  error: "#C72A00"
  error-bg: "#FFFFFD"
  info: "#1C3C27"
  info-bg: "#FFFFFD"
typography:
  display:
    fontFamily: "Archivo"
    fontSize: "80px"
    fontWeight: 700
    lineHeight: "1"
    letterSpacing: "-0.02em"
  heading:
    fontFamily: "Archivo"
    fontSize: "52px"
    fontWeight: 700
    lineHeight: "1.13"
    letterSpacing: "-0.02em"
  heading-sm:
    fontFamily: "Archivo"
    fontSize: "34px"
    fontWeight: 700
    lineHeight: "1.25"
    letterSpacing: "-0.02em"
  subheading:
    fontFamily: "Familjen Grotesk"
    fontSize: "20px"
    fontWeight: 400
    lineHeight: "1.33"
    letterSpacing: "0"
  body:
    fontFamily: "Familjen Grotesk"
    fontSize: "15px"
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: "0"
  body-sm:
    fontFamily: "Familjen Grotesk"
    fontSize: "13px"
    fontWeight: 400
    lineHeight: "1.33"
    letterSpacing: "0"
  caption:
    fontFamily: "Familjen Grotesk"
    fontSize: "11px"
    fontWeight: 400
    lineHeight: "1.33"
    letterSpacing: "0"
rounded:
  sm: "0"
  md: "0"
  lg: "0"
  xl: "0"
  pill: "9999px"
  full: "9999px"
spacing:
  base: "4px"
  sm: "8px"
  md: "16px"
  lg: "20px"
  xl: "40px"
  2xl: "100px"
  3xl: "200px"
  gap: "20px"
  section-padding: "40px"
components:
  button-primary:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    fontSize: "15px"
    fontWeight: 400
    letterSpacing: "0"
    padding: "12px 20px"
    borderRadius: "{rounded.pill}"
    border: "1px solid {colors.primary}"
    boxShadow: "none"
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.text-primary}"
    fontSize: "15px"
    fontWeight: 400
    letterSpacing: "0"
    padding: "0"
    borderRadius: "0"
    border: "none"
    boxShadow: "none"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text-primary}"
    fontSize: "15px"
    padding: "12px 20px"
    borderRadius: "0"
    border: "1px solid {colors.border}"
    boxShadow: "none"
  card:
    backgroundColor: "{colors.surface}"
    padding: "20px"
    borderRadius: "0"
    border: "1px solid {colors.border}"
    boxShadow: "none"
  badge:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    fontSize: "11px"
    fontWeight: 400
    letterSpacing: "0"
    padding: "8px 16px"
    borderRadius: "{rounded.pill}"
    border: "1px solid {colors.primary}"
    boxShadow: "none"
---

# DESIGN.md - Symbol Audio

Sistema visual extraido de https://www.symbolaudio.com.
Fuente de los valores: la ficha publica de refero.design para el dominio, contrastada con la
captura real de portada. La ficha se equivoca en las dos cosas mas basicas del sistema, el
color del lienzo y la clasificacion de su tipografia principal, asi que aqui manda la
captura. Los contrastes WCAG estan medidos. Los valores marcados
`(derivado para completar el sistema)` no aparecen en el sitio.

## 1. Tema Visual y Atmosfera

Symbol Audio vende mueble de audio artesanal, y su portada se comporta como una galeria: una
pared de color saturado con la palabra Symbol escrita tan grande que se sale por los dos
bordes del viewport, una fotografia de producto centrada encima y una marquesina fija al pie
que no para de correr.

La decision que define el sistema es esa: **el logotipo no es un titular, es un elemento
grafico.** A 80px, recortado por la izquierda y por la derecha, deja de leerse como palabra
y se lee como pared pintada. La fotografia se apoya delante, sin marco y sin sombra, como un
objeto documentado en vez de una card de interfaz.

La segunda decision es que **nada tiene esquina redondeada salvo lo que se toca.** Cards y
fotografias van a 0px; badges y botones van a capsula. Dos formas, sin valores intermedios.

Palabras clave: pared de color, logotipo recortado, cartela de exposicion, esquina viva,
marquesina al pie.

## 2. Paleta de Colores y Roles Semanticos

### Las dos correcciones de partida

La ficha de refero abre diciendo que Symbol Audio es "una galeria verde bosque oscura" y que
"todo el sitio esta anclado en un unico verde profundo `#1C3C27` que funciona a la vez como
lienzo, como marca y como borde de accion". La portada real dice otra cosa: **el lienzo es un
cobalto saturado**, `#447CF0`, el mismo color que la propia ficha lista como "acento de
contorno para etiquetas" y del que advierte "no lo promociones a color de CTA".

El verde existe, pero su papel es el que la ficha le da en la tabla y no el que le da en el
resumen: es **color de borde y de texto sobre superficies claras**, no fondo de pagina.

Y de ahi sale la segunda: la ficha clasifica el tema como `dark`. Un cobalto de luminancia
media no es un tema oscuro, y se nota en cuanto se miden los contrastes, porque sobre el
cobalto el color que mejor funciona es el negro.

### Colores de marca

| Nombre | Hex | Rol |
|---|---|---|
| Cobalt Wall | `#447CF0` | **Lienzo de pagina.** El azul saturado sobre el que vive todo |
| Evergreen | `#1C3C27` | Borde de accion, texto de etiqueta y de enlace sobre superficies claras. No es el fondo |
| Frost White | `#FFFFFD` | Superficie de card de producto y texto sobre secciones oscuras. Un hueso ligeramente calido, nunca blanco puro |

### Colores de superficie

| Nombre | Hex | Rol |
|---|---|---|
| Frost White | `#FFFFFD` | Cartela de producto, la superficie clara por defecto |
| Bone | `#FFFCDA` | Crema calida alternativa, pareja de contraste para el texto oscuro |
| Pewter Mist | `#DFE2E5` | Filetes, contornos de card, divisores. Y el logotipo gigante |

### Colores decorativos

| Nombre | Hex | Rol |
|---|---|---|
| Ember Lacquer | `#C72A00` | El rojo anaranjado de las estanterias lacadas de las fotografias. Decorativo, no funcional |
| Ink Shadow | `#0E1E14` | Casi negro con fondo verde. Texto sobre superficies claras cuando el negro puro resulta duro |

### Colores de texto, medidos sobre el lienzo real

Y aqui esta el hallazgo. Sobre el cobalto:

| Color | Contraste | Veredicto |
|---|---|---|
| `#000000` | 5.39:1 | **AA**, el unico que pasa para texto normal |
| `#0E1E14` | 4.44:1 | solo texto grande |
| `#FFFFFD` | 3.89:1 | solo texto grande |
| `#FFFCDA` | 3.75:1 | solo texto grande |
| `#1C3C27` | 3.12:1 | solo texto grande |
| `#DFE2E5` | **3.00:1** | justo en el suelo, no vale para texto normal |

**El que peor sale es precisamente el que mas se usa.** La ficha describe los enlaces de
navegacion y el texto de la marquesina en `#DFE2E5` a 13px y 15px sobre el lienzo, y ahi ese
gris perla se queda en 3.00:1, exactamente el minimo de texto grande y por debajo de lo que
necesita a esos tamanos.

Donde si funciona `#DFE2E5` es en el logotipo, que va a 80px y por tanto entra en el umbral
de texto grande. Es decir: **el gris perla es un color de display, no de interfaz.**

La correccion que no se sale del sistema es usar negro para el texto pequeno sobre el
lienzo, que da 5.39:1 y ya es un color de la paleta.

### Sobre superficies claras el sistema es comodo

| Combinacion | Contraste |
|---|---|
| `#000000` sobre `#FFFFFD` | 20.97:1, AAA |
| `#000000` sobre `#FFFCDA` | 20.19:1, AAA |
| `#1C3C27` sobre `#FFFFFD` | 12.16:1, AAA |
| `#1C3C27` sobre `#FFFCDA` | 11.70:1, AAA |

Por eso la ficha acierta en una cosa importante: **el boton de contorno verde solo puede
vivir sobre hueso o sobre crema.** Sobre el cobalto se queda en 3.12:1 y practicamente
desaparece.

Y el filete: `#DFE2E5` sobre `#FFFFFD` da 1.30:1, que es exactamente lo que se quiere de un
hairline y lo que lo descarta como texto en una card.

### Colores de estado

El sitio no expone estados. Se derivan de la paleta existente.

| Estado | Color | Fondo | Origen |
|---|---|---|---|
| Success | `#1C3C27` | `#FFFCDA` | *(derivado)*: el verde sobre crema, 11.70:1 |
| Warning | `#C72A00` | `#FFFCDA` | *(derivado)*: el rojo lacado, que solo existe en las fotos |
| Error | `#C72A00` | `#FFFFFD` | *(derivado)* |
| Info | `#1C3C27` | `#FFFFFD` | *(derivado)* |

## 3. Reglas de Tipografia

### La tercera correccion

La ficha describe Chalet London Sixty como "una serif redondeada a medida con terminales en
gota" y propone sustituirla por Recoleta, Domaine Display o GT Sectra, que son tres serifs.
**Chalet no es una serif.** Es una familia de grotescas de House Industries, y la captura de
portada lo confirma sin ambiguedad: los enlaces de navegacion, el contador del carrito y el
texto de la marquesina estan compuestos en una sans limpia, sin un solo remate.

Eso cambia la sustitucion por completo, y cambia tambien la descripcion del sistema: la ficha
dice que el contraste entre "la calidez de la serif redondeada y la frialdad de la geometrica"
es la voz de la marca. No hay tal contraste. Lo que hay es **una grotesca de interfaz y una
grotesca pesada de display**, que es una tension distinta: no serif contra sans, sino ligera
contra pesada.

### Sustitucion

**Original: Chalet-LondonSixty y Chalet-NewYorkSixty -> HTML: Familjen Grotesk (Google substitute).**

Chalet es una grotesca de aire suizo de los sesenta, con un unico peso usado universalmente.
Se compararon tres candidatas:

- **Public Sans** tiene la neutralidad pero un esqueleto americano que no encaja con el aire
  europeo del original.
- **Instrument Sans** es mas estrecha y mas contemporanea; funciona, pero pierde el punto de
  epoca.
- **Familjen Grotesk** es una grotesca contemporanea con algunas rarezas heredadas de la
  tipografia sueca de mediados de siglo, que es exactamente el registro de Chalet.

Se elige Familjen Grotesk. La variante NewYorkSixty no se sustituye aparte: la propia ficha
admite que es visualmente identica a LondonSixty y solo cambia el contexto de uso.

**Original: SupremeLL-Bold -> HTML: Archivo (Google substitute).**

Supreme es una geometrica afilada, y el sistema la usa solo para display: el logotipo, los
titulos de seccion y algun momento grande de interfaz. La ficha propone Inter Tight, Sohne
Breit o Neue Haas: la primera esta descartada por politica del repo y las otras dos no estan
en Google. **Archivo** en peso 700 tiene la anchura y el filo que pide un logotipo de 80px, se
sirve variable y aguanta el tracking de -0.02em sin cerrarse.

### Reparto

- **Grotesca de display**, peso 700, a 14px, 20px, 34px, 52px y 80px, con tracking -0.02em.
  Solo logotipo, titulos de seccion y momentos grandes.
- **Grotesca de interfaz**, peso 400, a 11px, 13px, 15px y 16px. Todo lo demas: navegacion,
  nombres de producto, precios, texto de badge, pie y etiquetas de boton.

Un unico peso para toda la interfaz. La jerarquia se hace con tamano y con cambio de familia,
nunca con negrita dentro de la misma familia.

### Escala tipografica

| Rol | Fuente | Tamano | Peso | Interlineado | Tracking |
|---|---|---|---|---|---|
| display | display | 80px | 700 | 1 | -0.02em (-1.6px) |
| heading | display | 52px | 700 | 1.13 | -0.02em (-1.04px) |
| heading-sm | display | 34px | 700 | 1.25 | -0.02em (-0.68px) |
| subheading | interfaz | 20px | 400 | 1.33 | 0 |
| body | interfaz | 15px | 400 | 1.5 | 0 |
| body-sm | interfaz | 13px | 400 | 1.33 | 0 |
| caption | interfaz | 11px | 400 | 1.33 | 0 |

Entre los 20px de la interfaz y los 34px del display no hay nada, y ese hueco separa los dos
territorios sin necesidad de mas reglas.

### Un detalle de puntuacion

Los titulos de seccion terminan en puntos suspensivos: "Bestsellers…". No es un descuido de
recorte, es una eleccion, y aparece de forma consistente. Da al rotulo el aire de cartela de
museo continuada, como si la lista siguiera fuera de la pantalla.

## 4. Estilos de Componentes

Dos formas: esquina viva y capsula. Cero sombras.

### Boton de contorno

```css
background: transparent;
color: #1C3C27;
border: 1px solid #1C3C27;
border-radius: 9999px;
padding: 12px 20px;
font: 400 15px/1.5 "Familjen Grotesk";
```

**Nunca relleno.** Y con una condicion que la ficha explica bien: sobre el cobalto se queda en
3.12:1, asi que este boton vive siempre sobre hueso o sobre crema, donde da 12.16:1.

Estados *(derivados para completar el sistema)*:

| Estado | Cambio |
|---|---|
| hover | `background: #1C3C27; color: #FFFFFD` |
| active | `background: #0E1E14` |
| focus-visible | `outline: 2px solid #000000; outline-offset: 3px` |
| disabled | `color: #DFE2E5; border-color: #DFE2E5` |

### Etiqueta de producto

```css
background: transparent;
color: #1C3C27;
border: 1px solid #1C3C27;
border-radius: 9999px;
padding: 8px 16px;
font: 400 11px/1.33 "Familjen Grotesk";
```

Bestseller, New Arrival. Se coloca arriba a la izquierda de la fotografia, **sobre la
superficie hueso de la card**, para que el borde verde se vea. Sobre la foto directamente,
no.

### Cartela de producto

```css
background: #FFFFFD;
border: 1px solid #DFE2E5;
border-radius: 0;
padding: 20px;
box-shadow: none;
```

Rectangulo de esquina viva con filete perla. La fotografia llena la parte superior, y debajo
van el nombre a 15px en negro y el precio con el prefijo "from $". Sin elevacion: la card se
lee como una cartela plana clavada en la pared de color.

### Logotipo de portada

```css
font: 700 80px/1 "Archivo";
letter-spacing: -0.02em;
color: #DFE2E5;
```

Deliberadamente sobredimensionado para salirse por los dos bordes del viewport. Es un
elemento grafico, no un titular, y por eso puede ir en un gris que a tamano de interfaz no
seria legible.

### Marquesina

Franja fija al borde inferior del viewport, a todo el ancho, con el mensaje repitiendose. La
ficha la describe en `#DFE2E5` a 13px sobre el lienzo, que es la combinacion de 3.00:1
senalada arriba. En negro sobre el mismo fondo da 5.39:1 y el componente no cambia en nada
mas.

Dentro lleva un enlace subrayado. Sin padding vertical: se pega al borde.

### Navegacion

Transparente sobre el lienzo, sin fondo y sin borde. Logotipo a la izquierda en la display a
14px, enlaces al centro en la interfaz a 15px, y a la derecha buscador y carrito con el
contador entre parentesis. Mismo aviso de contraste que la marquesina.

### Enlace de texto

Sin subrayado por defecto; el subrayado aparece al pasar el raton. Sin fondo y sin borde. En
las superficies claras va en negro; sobre el lienzo, tambien.

### Fotografia de producto

Centrada sobre el lienzo, sin marco, sin radio y sin sombra. Producto real, documentado. Es
la unica pieza de la pagina que aporta el resto de la gama cromatica, incluida la laca roja.

## 5. Principios de Layout

### Escala de espaciado

Base de 4px y una escala cortisima con un salto enorme al final: de 40px a 100px y a 200px.

| Token | Valor | Uso |
|---|---|---|
| `--spacing-4` | 4px | Ajuste fino |
| `--spacing-8` | 8px | Padding vertical de etiqueta |
| `--spacing-16` | 16px | Padding horizontal de etiqueta |
| `--spacing-20` | 20px | Padding de card, gap entre elementos, padding de boton |
| `--spacing-40` | 40px | Gap entre secciones |
| `--spacing-100` | 100px | Aire de banda |
| `--spacing-200` | 200px | Respiro de galeria |

Que el gap entre secciones sea de solo 40px es llamativo, y tiene una explicacion: como todas
las bandas comparten el mismo color de fondo, **las transiciones de seccion son invisibles**
y no hace falta separarlas con aire. La pagina es una sola superficie continua.

### Contenedores

Ancho maximo de 1280px, y el logotipo de portada lo ignora a proposito para salirse del
viewport.

### Grid

Rejilla de cartelas de producto sobre el lienzo, con la fotografia de portada centrada
encima. Sin barra lateral y sin divisores entre bandas.

### Filosofia de espaciado

Apretada. 20px de padding de card y 20px de gap entre elementos: la densidad de un catalogo,
no de una landing. El aire lo pone el color del fondo, que no se interrumpe nunca.

## 6. Profundidad y Elevacion

Ninguna. Cero sombras, cero gradientes, cero desenfoques.

| Nivel | Nombre | Hex | Uso |
|---|---|---|---|
| 0 | Cobalt Wall | `#447CF0` | La pagina entera |
| 1 | Frost White | `#FFFFFD` | Cartelas de producto |
| 2 | Bone | `#FFFCDA` | Superficie crema alternativa |

Lo que separa una cartela de la pared es su filete perla y el salto de color, no una sombra.
Es coherente con la metafora: una cartela de exposicion esta clavada en la pared, no flotando
delante de ella.

### Radios de borde

| Token | Valor | Uso |
|---|---|---|
| `--radius-none` | 0 | Cards, fotografias, inputs. Todo lo que contiene |
| `--radius-pill` | 9999px | Badges y botones. Todo lo que se toca |

Dos valores y ningun intermedio. La regla es facil de recordar y facil de romper sin darse
cuenta, porque casi cualquier libreria mete un 8px por defecto.

## 7. Lo que Si y lo que No

### Si hacer

- Usar el cobalto como lienzo de todas las bandas: al compartir fondo, las transiciones de
  seccion desaparecen y la pagina se lee como una sola superficie.
- Escribir el texto pequeno sobre el cobalto en negro, que da 5.39:1.
- Reservar el gris perla para el display: a 80px pasa, a 13px no.
- Sacar el logotipo por los dos bordes del viewport. Es un elemento grafico, no un titular.
- Dar 0px de radio a todo lo que contiene y capsula a todo lo que se toca.
- Poner el boton de contorno verde solo sobre hueso o sobre crema, nunca sobre el cobalto.
- Colocar la etiqueta de producto sobre la superficie clara de la card, no sobre la
  fotografia.
- Mantener un unico peso en la familia de interfaz y hacer la jerarquia con tamano y familia.
- Terminar los titulos de seccion en puntos suspensivos.

### No hacer

- No usar `#DFE2E5` para texto de 11px a 15px sobre el lienzo: 3.00:1.
- No rellenar el boton de accion. Es de contorno siempre.
- No poner el boton verde sobre el cobalto: 3.12:1, desaparece.
- No redondear cards ni fotografias.
- No anadir sombra a la cartela: esta clavada en la pared, no flota.
- No usar negrita dentro de la familia de interfaz para dar enfasis.
- No meter radios intermedios entre 0 y capsula.
- No usar el rojo lacado como color funcional: solo existe dentro de las fotografias.

## 8. Comportamiento Responsive

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

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

### Cambios por breakpoint

- **Logotipo:** sigue saliendose por los dos bordes. Es lo unico innegociable del hero: si
  cabe entero, deja de funcionar. En movil baja de 80px a 44px y sigue recortandose.
- **Fotografia de portada:** se mantiene centrada y se estrecha; nunca se recorta en alto.
- **Rejilla de cartelas:** de tres columnas a dos y despues a una, con el padding de 20px
  intacto.
- **Navegacion:** los enlaces del centro colapsan en un menu; buscador y carrito se quedan.
- **Marquesina:** sigue fija al pie y sigue corriendo.
- **Gap de seccion:** se queda en 40px. Ya es apretado y no depende de el la separacion.

### Touch targets

El boton de contorno con 12px de padding vertical llega a unos 44px. Los enlaces de
navegacion son texto suelto de 15px y necesitan 12px de padding invisible en movil.
*(derivado para completar el sistema)*

### Filosofia responsive

Se protege el recorte del logotipo y la continuidad del color. Todo lo demas puede apilarse.

## 9. Guia de Prompts para Agentes

### Referencia rapida de color

- lienzo: `#447CF0`
- texto sobre lienzo: `#000000`
- superficie de card: `#FFFFFD`
- superficie crema: `#FFFCDA`
- filete: `#DFE2E5`
- borde de accion y etiqueta: `#1C3C27`
- display: `#DFE2E5`, solo a tamano grande

### Prompt de inicializacion de sesion

```
Trabaja con el sistema Symbol Audio. Lienzo cobalto #447CF0 en todas las bandas, cards
#FFFFFD con filete #DFE2E5, superficie crema alternativa #FFFCDA. El texto pequeno sobre
el cobalto va en NEGRO (5.39:1); el gris perla #DFE2E5 solo vale a tamano de display,
porque a 15px se queda en 3.00:1. Verde #1C3C27 solo como borde de accion y texto de
etiqueta sobre superficies claras, nunca como fondo y nunca sobre el cobalto. Tipografia:
dos grotescas, una pesada para display a 80px con tracking -0.02em y otra de un solo peso
para toda la interfaz. Espaciado base 4px, gap 20px, 40px entre secciones. Radio 0 en todo
lo que contiene y capsula en todo lo que se toca. Sin sombras.
```

### Prompt: crear pantalla nueva

```
Monta la pantalla sobre #447CF0 con contenedor de 1280px. Navegacion transparente, sin
fondo y sin borde, con los enlaces en negro a 15px. En el hero, el logotipo en la
grotesca pesada a 80px con tracking -0.02em y color #DFE2E5, deliberadamente sobredimensionado
para salirse por los dos bordes del viewport, con una fotografia de producto centrada
delante sin marco y sin sombra. Debajo, rejilla de cartelas #FFFFFD con filete #DFE2E5,
0px de radio y 20px de padding, cada una con su etiqueta de contorno verde en capsula
sobre la superficie clara. Marquesina fija al pie con el texto en negro.
```

### Prompt: anadir componente al kit

```
Anade el componente con 0px de radio si contiene algo y capsula si se toca. Sin sombra.
Si va sobre el cobalto y lleva texto pequeno, ese texto va en negro. Si lleva un borde
verde, el componente tiene que vivir sobre hueso o sobre crema. Un solo peso en la
familia de interfaz: si necesita mas jerarquia, sube de tamano o cambia a la familia de
display.
```

### Prompt: revision de consistencia

```
Revisa la pantalla contra el sistema Symbol Audio y senala: 1) texto de 11px a 15px en
#DFE2E5 sobre el cobalto, 2) el boton de contorno verde apoyado sobre el cobalto,
3) cualquier boton relleno, 4) radios intermedios entre 0 y capsula, 5) cards o
fotografias redondeadas, 6) cualquier box-shadow, 7) negrita dentro de la familia de
interfaz, 8) el rojo lacado usado como color funcional, 9) el logotipo cabiendo entero
dentro del viewport.
```

### Prompt: variante de campana

```
Para una campana puedes dejar la fotografia de producto a sangre completa con el logotipo
recortado encima, o invertir una banda a hueso con el verde como color de texto, que ahi
da 12.16:1. Lo que no puedes cambiar: el lienzo continuo, la esquina viva de las cartelas,
la ausencia de sombra y que el boton de accion siga siendo de contorno.
```

## 10. Movimiento (Motion)

Solo se mueve la marquesina. La tabla es *(derivada para completar el sistema)* a partir del
comportamiento observado.

| Elemento | Propiedad | Duracion | Curva |
|---|---|---|---|
| Marquesina | transform translateX, en bucle | continua | lineal |
| Enlace, hover | text-decoration | 120ms | ease-out |
| Boton de contorno, hover | background-color, color | 180ms | ease-out |
| Cartela, hover | border-color | 180ms | ease-out |
| Fotografia | ninguna | 0ms | ninguna |

Principios: el producto no se mueve. Es mueble, y el mueble se mira quieto. Respetar siempre
`prefers-reduced-motion`, y en ese caso congelar la marquesina.

## Anexo: Stack tecnico detectado

| Aspecto | Valor |
|---|---|
| URL de origen | https://www.symbolaudio.com |
| Tema | la ficha lo da como dark; el lienzo real es un cobalto de luminancia media, y sobre el el color legible es el negro |
| Familia de color | blue |
| Color dominante declarado | `#447CF0` |
| Tipografias reales | Chalet-LondonSixty y Chalet-NewYorkSixty (grotescas, no serifs) y SupremeLL-Bold |
| Disponibles en Google Fonts | Ninguna. Chalet sustituida por Familjen Grotesk y Supreme por Archivo |
| Unidad base de espaciado | 4px, con escala de siete valores |
| Densidad | comoda, tirando a apretada |
| Ancho maximo | 1280px, que el logotipo ignora a proposito |
| Radios | 0 en todo lo que contiene, capsula en todo lo que se toca |
| Sombras | ninguna |
| Gradientes | ninguno |
| Imagenes | fotografia documental de producto real, sin marco y sin radio. Aporta el resto de la gama cromatica, incluida la laca roja |

Nota de fidelidad: la escala, los radios, el espaciado y la ausencia de sombra salen de la
ficha publica de refero. Tres cosas se corrigen contra la captura de portada y contra los
contrastes medidos: el lienzo no es verde bosque sino cobalto, la tipografia principal no es
una serif redondeada sino una grotesca, y el gris perla que la ficha asigna a la navegacion y
a la marquesina se queda en 3.00:1 sobre el lienzo real, por lo que solo sirve a tamano de
display. Los estados de interaccion, los colores semanticos, los breakpoints y la tabla de
motion estan marcados como derivados alli donde aparecen.