:root {
  /* Colors */
  --color-carbon: #000000;
  --color-paper-white: #FFFFFF;
  --color-sky-wash: #DCEEFF;
  --color-concrete-gray: #CCCCCC;
  --color-soft-mist: #E9E9E9;
  --color-electric-blue: #4DA2FF;
  --color-mint-pop: #55DB9C;
  --color-lavender: #E9CCFF;
  --color-ember: #FB4903;
  --color-sunburst: #FFD731;
  --color-voltage-violet: #5C4ADE;

  /* Texto sobre cada pegatina, medido */
  --on-electric-blue: #000000;   /* 7.93:1 */
  --on-mint-pop: #000000;        /* 12.00:1 */
  --on-lavender: #000000;        /* 14.55:1 */
  --on-ember: #000000;           /* 6.06:1 */
  --on-sunburst: #000000;        /* 15.02:1 */
  --on-voltage-violet: #FFFFFF;  /* 6.02:1, la unica excepcion */

  /* Roles */
  --color-background: #DCEEFF;
  --color-surface: #FFFFFF;
  --color-text-primary: #000000;
  --color-border: #000000;

  /* Typography */
  --font-display: 'Archivo Black', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Tracking: va en dos direcciones */
  --tracking-body: -0.010em;
  --tracking-caps: 0.032em;

  /* Scale */
  --text-display-lg: 640px;
  --leading-display-lg: 0.75;
  --text-display: 200px;
  --leading-display: 0.80;
  --text-heading: 64px;
  --leading-heading: 1;
  --text-heading-sm: 30px;
  --leading-heading-sm: 1.1;
  --text-subheading: 24px;
  --leading-subheading: 1.2;
  --text-body-lg: 15px;
  --leading-body-lg: 1.39;
  --text-label: 13px;
  --text-caption: 12px;
  --leading-caption: 1.56;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-12: 12px;
  --spacing-24: 24px;
  --spacing-48: 48px;
  --spacing-80: 80px;
  --spacing-128: 128px;
  --spacing-224: 224px;

  /* Layout */
  --page-max-width: 1440px;
  --section-gap: 48px;
  --card-padding: 24px;
  --element-gap: 12px;

  /* Radius: escala de blandura */
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-body: 30px;
  --radius-40: 40px;
  --radius-pill: 1600px;

  /* Elevation: ninguna. La profundidad esta pintada en las ilustraciones */
  --shadow-none: none;
  --border-cut: 1px solid #000000;
}

@theme {
  /* Colors */
  --color-carbon: #000000;
  --color-paper-white: #FFFFFF;
  --color-sky-wash: #DCEEFF;
  --color-concrete-gray: #CCCCCC;
  --color-soft-mist: #E9E9E9;
  --color-electric-blue: #4DA2FF;
  --color-mint-pop: #55DB9C;
  --color-lavender: #E9CCFF;
  --color-ember: #FB4903;
  --color-sunburst: #FFD731;
  --color-voltage-violet: #5C4ADE;

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

  /* Scale */
  --text-display-lg: 640px;
  --text-display-lg--line-height: 0.75;
  --text-display: 200px;
  --text-display--line-height: 0.80;
  --text-heading: 64px;
  --text-heading--line-height: 1;
  --text-heading--letter-spacing: -0.010em;
  --text-heading-sm: 30px;
  --text-heading-sm--line-height: 1.1;
  --text-subheading: 24px;
  --text-subheading--line-height: 1.2;
  --text-body-lg: 15px;
  --text-body-lg--line-height: 1.39;
  --text-body-lg--letter-spacing: -0.010em;
  --text-label: 13px;
  --text-label--letter-spacing: 0.032em;
  --text-caption: 12px;
  --text-caption--line-height: 1.56;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-12: 12px;
  --spacing-24: 24px;
  --spacing-48: 48px;
  --spacing-80: 80px;
  --spacing-128: 128px;
  --spacing-224: 224px;

  /* Radius */
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-body: 30px;
  --radius-40: 40px;
  --radius-pill: 1600px;
}

{
  "stickers": {
    "electricBlue": { "hex": "#4DA2FF", "text": "#000000", "black": "7.93:1", "white": "2.65:1" },
    "mintPop": { "hex": "#55DB9C", "text": "#000000", "black": "12.00:1", "white": "1.75:1" },
    "lavender": { "hex": "#E9CCFF", "text": "#000000", "black": "14.55:1", "white": "1.44:1" },
    "ember": { "hex": "#FB4903", "text": "#000000", "black": "6.06:1", "white": "3.47:1" },
    "sunburst": { "hex": "#FFD731", "text": "#000000", "black": "15.02:1", "white": "1.40:1" },
    "voltageViolet": { "hex": "#5C4ADE", "text": "#FFFFFF", "black": "3.49:1", "white": "6.02:1" },
    "regla": "voltear por luminancia: cinco piden negro, solo el violeta pide blanco"
  },
  "color": {
    "surface": {
      "skyWash": "#DCEEFF",
      "paperWhite": "#FFFFFF",
      "concreteGray": "#CCCCCC",
      "softMist": "#E9E9E9"
    },
    "carbon": "#000000",
    "border": { "color": "#000000", "width": "1px", "nota": "en absolutamente todo: es el efecto de recortado a mano" }
  },
  "font": {
    "display": "Archivo Black",
    "body": "Schibsted Grotesk",
    "original": { "display": "Lateral", "body": "Aeonik Pro con ss01 y tnum" },
    "weights": { "display": [800], "body": [500, 700] },
    "tracking": { "body": "-0.010em", "caps": "0.032em", "nota": "van en direcciones opuestas a proposito" },
    "scale": {
      "displayLg": { "size": "640px", "lineHeight": 0.75 },
      "display": { "size": "200px", "lineHeight": 0.80 },
      "heading": { "size": "64px", "weight": 700, "lineHeight": 1, "tracking": "-0.01em" },
      "headingSm": { "size": "30px", "weight": 700, "lineHeight": 1.1 },
      "subheading": { "size": "24px", "weight": 700, "lineHeight": 1.2 },
      "bodyLg": { "size": "15px", "weight": 500, "lineHeight": 1.39 },
      "label": { "size": "13px", "weight": 700, "tracking": "0.032em" },
      "caption": { "size": "12px", "weight": 500, "lineHeight": 1.56 }
    }
  },
  "spacing": {
    "base": "4px",
    "scale": ["4px", "8px", "12px", "16px", "20px", "24px", "28px", "32px", "40px", "44px", "48px", "60px", "80px", "128px", "180px", "224px"],
    "density": "comfortable",
    "sectionGap": "48px",
    "cardPadding": "24px",
    "elementGap": "4-12px",
    "maxWidth": "1440px"
  },
  "radius": {
    "sticker": "16px",
    "card": "20px",
    "pageBody": "30px",
    "cardElevated": "40px",
    "pill": "1600px",
    "nota": "escala de blandura: cuanto mas grande el objeto, mas blando"
  },
  "shadow": {
    "all": "none",
    "nota": "la profundidad esta pintada dentro de las ilustraciones, no en CSS"
  }
}

---
version: "1.0"
name: "Slush"
description: "Sistema visual de album de pegatinas sobre papel pastel: lienzo azul palido, cintas 3D infladas en azul electrico, tipografia de display a 640px con interlineado 0.75 que convierte las palabras en objetos, y seis colores saturados que solo existen como relleno de pegatina. Todo lleva contorno negro de 1px, como si estuviera recortado a mano."
colors:
  primary: "#000000"
  primary-hover: "#1A1A1A"
  primary-active: "#000000"
  secondary: "#FFFFFF"
  accent: "#4DA2FF"
  accent-soft: "#DCEEFF"
  neutral: "#CCCCCC"
  background: "#DCEEFF"
  surface: "#FFFFFF"
  surface-elevated: "#E9E9E9"
  text-primary: "#000000"
  text-secondary: "#000000"
  text-muted: "#666666"
  text-on-primary: "#FFFFFF"
  text-accent: "#5C4ADE"
  border: "#000000"
  border-subtle: "#CCCCCC"
  success: "#000000"
  success-bg: "#55DB9C"
  warning: "#000000"
  warning-bg: "#FFD731"
  error: "#000000"
  error-bg: "#FB4903"
  info: "#FFFFFF"
  info-bg: "#5C4ADE"
typography:
  display-lg:
    fontFamily: "Archivo Black"
    fontSize: "640px"
    fontWeight: 400
    lineHeight: "0.75"
    letterSpacing: "0"
  display:
    fontFamily: "Archivo Black"
    fontSize: "200px"
    fontWeight: 400
    lineHeight: "0.8"
    letterSpacing: "0"
  heading:
    fontFamily: "Schibsted Grotesk"
    fontSize: "64px"
    fontWeight: 700
    lineHeight: "1"
    letterSpacing: "-0.01em"
  heading-sm:
    fontFamily: "Schibsted Grotesk"
    fontSize: "30px"
    fontWeight: 700
    lineHeight: "1.1"
    letterSpacing: "-0.01em"
  subheading:
    fontFamily: "Schibsted Grotesk"
    fontSize: "24px"
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: "-0.01em"
  body:
    fontFamily: "Schibsted Grotesk"
    fontSize: "15px"
    fontWeight: 500
    lineHeight: "1.39"
    letterSpacing: "-0.01em"
  label:
    fontFamily: "Schibsted Grotesk"
    fontSize: "13px"
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: "0.032em"
  caption:
    fontFamily: "Schibsted Grotesk"
    fontSize: "12px"
    fontWeight: 500
    lineHeight: "1.56"
    letterSpacing: "-0.01em"
rounded:
  sm: "16px"
  md: "20px"
  lg: "30px"
  xl: "40px"
  pill: "1600px"
  full: "1600px"
spacing:
  base: "4px"
  sm: "12px"
  md: "24px"
  lg: "48px"
  xl: "80px"
  2xl: "128px"
  3xl: "224px"
  gap: "12px"
  section-padding: "48px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.text-on-primary}"
    fontSize: "13px"
    fontWeight: 700
    letterSpacing: "0.032em"
    padding: "10px 12px"
    borderRadius: "{rounded.xl}"
    border: "1px solid {colors.border}"
    boxShadow: "none"
  button-ghost:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text-primary}"
    fontSize: "13px"
    fontWeight: 700
    letterSpacing: "0.032em"
    padding: "10px 12px"
    borderRadius: "{rounded.pill}"
    border: "1px solid {colors.border}"
    boxShadow: "none"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text-primary}"
    fontSize: "15px"
    padding: "12px 20px"
    borderRadius: "{rounded.pill}"
    border: "1px solid {colors.border}"
    boxShadow: "none"
  card:
    backgroundColor: "{colors.surface}"
    padding: "24px"
    borderRadius: "{rounded.md}"
    border: "1px solid {colors.border}"
    boxShadow: "none"
  badge:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.text-primary}"
    fontSize: "12px"
    fontWeight: 700
    letterSpacing: "0.032em"
    padding: "6px 14px"
    borderRadius: "{rounded.pill}"
    border: "1px solid {colors.border}"
    boxShadow: "none"
---

# DESIGN.md - Slush

Sistema visual extraido de https://slush.app.
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. Los valores
marcados `(derivado para completar el sistema)` no aparecen en el sitio.

## 1. Tema Visual y Atmosfera

Slush funciona con logica de album de pegatinas. El lienzo es un papel azul palido, por
encima se cruzan cintas tridimensionales infladas en azul electrico, y alrededor flotan
pegatinas de colores saturados como confeti: un cohete, una moneda, una cartera, una cara
sonriente.

La decision que define el sistema es el interlineado del display: **0.75.** A 640px eso
significa que las lineas se meten unas dentro de otras y la palabra deja de ser una palabra
para ser un objeto fisico, algo por detras de lo cual la cinta azul puede pasar. Es
anticonvencional de verdad: casi nadie combina un display de peso 800 con un interlineado
por debajo de 0.85.

La tercera decision es el contorno. **Todo lleva una linea negra de 1px**: las pildoras de
navegacion, las cards, las pegatinas, el logotipo. Es lo que da el efecto de recortado a
mano y lo que hace que el conjunto se lea como un collage pegado a una pared clara y no como
una landing de fintech.

Palabras clave: pegatina, cinta inflada, interlineado 0.75, contorno negro, confeti.

## 2. Paleta de Colores y Roles Semanticos

Once colores, y seis de ellos son saturados. Es de las paletas mas ruidosas de esta galeria,
y funciona porque todos los saturados hacen el mismo trabajo: rellenar una pegatina.

### Colores de marca

| Nombre | Hex | Rol |
|---|---|---|
| Carbon | `#000000` | Texto primario, borde de card, relleno del CTA, logotipo. Es lo que crea el efecto de contorno recortado sobre las superficies pastel |
| Electric Blue | `#4DA2FF` | Color dominante: esculturas de cinta 3D, fondos de cuerpo, lavados de card. La firma visual que ancla todas las pantallas |
| Paper White | `#FFFFFF` | Lienzo de card, relleno de boton de contorno, texto sobre rellenos oscuros |

### La paleta de pegatinas

Los seis saturados funcionan como un set compartido. Cada uno aparece como relleno de
pegatina, superficie de card o lavado decorativo, **nunca como acento contenido.**

| Nombre | Hex | Rol | Texto encima |
|---|---|---|---|
| Electric Blue | `#4DA2FF` | Cinta 3D, fondo de cuerpo, lavado de card | negro, 7.93:1 |
| Mint Pop | `#55DB9C` | Lavado verde de fondo, bandas decorativas | negro, 12.00:1 |
| Lavender | `#E9CCFF` | Lavado suave de card, etiquetas, relleno de pegatina | negro, 14.55:1 |
| Ember | `#FB4903` | Iconos de pegatina, rellenos de badge, cuerpo del cohete | negro, 6.06:1 |
| Sunburst | `#FFD731` | Rellenos de moneda y decoraciones amarillas | negro, 15.02:1 |
| Voltage Violet | `#5C4ADE` | Pegatinas de cartera, card de descarga, CTA secundario | **blanco, 6.02:1** |

### La regla de volteo

Cinco de los seis piden texto negro y solo uno pide blanco. Los numeros:

| Color | Negro encima | Blanco encima | Gana |
|---|---|---|---|
| `#4DA2FF` | 7.93:1 | 2.65:1 | negro |
| `#55DB9C` | 12.00:1 | 1.75:1 | negro |
| `#E9CCFF` | 14.55:1 | 1.44:1 | negro |
| `#FB4903` | 6.06:1 | 3.47:1 | negro |
| `#FFD731` | 15.02:1 | 1.40:1 | negro |
| `#5C4ADE` | 3.49:1 | 6.02:1 | **blanco** |

Dos consecuencias practicas:

- **Sobre el azul dominante no se puede escribir en blanco.** 2.65:1. Y el azul es
  precisamente el que la ficha describe como fondo de cuerpo y lavado de card, es decir, el
  que mas superficie ocupa. Todo lo que caiga encima va en negro.
- **El violeta es la unica excepcion**, y ahi la ficha ya acierta: describe la card de
  descarga con texto blanco sobre `#5C4ADE`, que da 6.02:1. Si a alguien le da por
  homogeneizar el sistema poniendo todo en negro, esa card se cae a 3.49:1.

### Colores de superficie

| Nombre | Hex | Rol |
|---|---|---|
| Sky Wash | `#DCEEFF` | Fondo de la seccion de hero, el pastel azul del papel |
| Paper White | `#FFFFFF` | Lienzo de card y relleno de boton |
| Concrete Gray | `#CCCCCC` | Fondo de seccion secundaria, interludio neutro |
| Soft Mist | `#E9E9E9` | Tintes sutiles de boton y superficie, estados deshabilitados |

Los cuatro llevan el texto en negro con muchisimo margen: 17.72:1, 21:1, 13.08:1 y 17.30:1.
En este sistema el contraste no es un problema en las superficies; el problema esta en las
pegatinas, y ya esta resuelto arriba.

### Colores de estado

El sitio no expone estados. Se derivan de la propia paleta de pegatinas, que ya tiene un
color para cada humor.

| Estado | Color | Fondo | Origen |
|---|---|---|---|
| Success | `#000000` | `#55DB9C` | *(derivado)*: la menta |
| Warning | `#000000` | `#FFD731` | *(derivado)*: el amarillo |
| Error | `#000000` | `#FB4903` | *(derivado)*: el naranja brasa |
| Info | `#FFFFFF` | `#5C4ADE` | *(derivado)*: el violeta, el unico que lleva texto blanco |

## 3. Reglas de Tipografia

Dos familias, y una de ellas solo dice tres o cuatro palabras en toda la pagina.

### Sustitucion

**Original: Lateral -> HTML: Archivo Black (Google substitute).**

Lateral es una display ancha y muy pesada, y el sistema la usa unicamente en peso 800, entre
200px y 640px. La ficha de origen propone Druk, Bowlby One o Antonio: la primera no es libre,
la segunda no esta en el catalogo de este repositorio y la tercera es condensada, que es la
direccion contraria. La captura de portada resuelve la duda, porque las formas de SLUSH son
anchas, con la U muy abierta y terminales planos. Se compararon dos alternativas:

- **League Spartan** a 900 tiene el peso y la anchura, pero su geometria de circulo perfecto
  suaviza demasiado unas letras que aqui tienen que comportarse como bloques.
- **Bricolage Grotesque** a 800 es contemporanea y variable, pero sus rasgos deliberadamente
  irregulares compiten con las pegatinas, que ya aportan todo el ruido que la pagina admite.

Se elige **Archivo Black**, la misma sustituta que usa la ficha de Agence Foudre. No es
pereza: es que a la misma pregunta, una grotesca ultra negra y ancha en Google Fonts, la
respuesta es la misma. Viene en un unico corte que declara peso 400 y pinta como una negra.

**Original: Aeonik Pro -> HTML: Schibsted Grotesk (Google substitute).**

Aeonik es una grotesca a medio camino entre lo geometrico y lo neo-grotesco, y el sistema la
usa en pesos 500 y 700. La ficha propone Inter, Satoshi o General Sans: la primera esta
descartada por politica del repo y las otras dos no estan en Google. Schibsted Grotesk cubre
ese punto medio, se sirve variable de 400 a 900 y tiene la neutralidad justa para hacer de
interfaz debajo de un display de 640px.

La ficha menciona que el sitio activa `ss01` y `tnum` en Aeonik. La alternativa estilistica
no tiene equivalente en la sustituta, pero las cifras tabulares si, y conviene mantenerlas
donde haya numeros alineados.

### El tracking va en dos direcciones

Es el detalle mas fino del sistema y el mas facil de perder:

| Rango | Tracking |
|---|---|
| Cuerpo de 14px a 16px | **-0.010em** |
| Etiquetas de navegacion y boton | **+0.030em** |
| Mayusculas pequenas | **+0.032em** |
| Display | 0 |

El cuerpo se aprieta y las etiquetas se abren. Abrir las etiquetas es lo que da aire dentro
de las pildoras, que son estrechas de padding, y apretar el cuerpo es lo que lo mantiene
compacto al lado de un display gigante.

### Escala tipografica

| Rol | Fuente | Tamano | Peso | Interlineado | Tracking |
|---|---|---|---|---|---|
| display-lg | display | 640px | 800 | 0.75 | 0 |
| display | display | 200px | 800 | 0.80 | 0 |
| heading | sans | 64px | 700 | 1 | -0.01em |
| heading-sm | sans | 30px | 700 | 1.1 | -0.01em |
| subheading | sans | 24px | 700 | 1.2 | -0.01em |
| body-lg | sans | 15px | 500 | 1.39 | -0.01em |
| label | sans | 13px | 700 | 1.2 | +0.032em |
| caption | sans | 12px | 500 | 1.56 | -0.01em |

Entre los 64px de la sans y los 200px del display no hay nada. Ese hueco es deliberado: o es
interfaz, o es escultura.

### Pesos tipograficos

| Peso | Valor | Uso |
|---|---|---|
| Black | 800 en el original | Solo el display |
| Medium | 500 | Cuerpo y metadatos |
| Bold | 700 | Subtitulos, navegacion y etiquetas de boton |

## 4. Estilos de Componentes

Todo lleva contorno negro de 1px y todo esta redondeado hasta la blandura. Cero sombras.

### Pildora de navegacion

```css
background: #FFFFFF;
color: #000000;
border: 1px solid #000000;
border-radius: 1600px;
padding: 15px 12px;
font: 700 13px/1.2 "Schibsted Grotesk";
letter-spacing: 0.032em;
text-transform: uppercase;
```

Van en fila con 4px de separacion entre ellas. El radio de 1600px es una forma barroca de
escribir "capsula", y aparece en toda la navegacion.

### CTA relleno

```css
background: #000000;
color: #FFFFFF;
border: 1px solid #000000;
border-radius: 40px;
padding: 10px 12px;
font: 700 13px/1.2 "Schibsted Grotesk";
letter-spacing: 0.032em;
```

Un solo CTA relleno por pantalla, y siempre en negro. En un sistema con seis colores
saturados, la accion primaria es la unica cosa que no lleva color: es asi como consigue
destacar.

Estados *(derivados para completar el sistema)*:

| Estado | Cambio |
|---|---|
| hover | `background: #1A1A1A` |
| active | `transform: translateY(1px)` |
| focus-visible | `outline: 2px solid #5C4ADE; outline-offset: 3px` |
| disabled | `background: #E9E9E9; color: #666666` |

### Boton de contorno

Mismo contorno negro sobre relleno blanco, radio de capsula y el mismo padding. Va al lado o
debajo del relleno.

### Pegatina

```css
border: 1px solid #000000;
border-radius: 16px a 20px;
background: uno de los seis saturados;
transform: rotate(-8deg .. 8deg);
```

Ilustraciones planas (cohete, moneda, cartera, marca de verificacion) colocadas superpuestas
y giradas alrededor del display. **Nunca alineadas a la rejilla**: si se alinean, dejan de
ser pegatinas y pasan a ser iconos.

### Card

```css
background: #FFFFFF;
border: 1px solid #000000;
border-radius: 20px;
padding: 24px;
box-shadow: none;
```

La variante elevada sube a 40px de radio. La diferencia entre 20px y 40px es la unica
jerarquia de card que tiene el sistema.

### Card de descarga

Radio de 20px, fondo `#5C4ADE`, partida en dos: un panel blanco con el codigo y otro violeta
con la etiqueta en blanco a 700. Es el unico componente del sistema con texto blanco sobre
color, y esta bien: 6.02:1.

### Marquesina

Franja a sangre en la parte superior de la pagina con un mensaje que se repite, en
mayusculas a 12px o 13px con tracking 0.032em.

**Corregida respecto a la fuente:** la ficha la describe con fondo `#000000` y texto blanco.
En la portada real es **una banda lavanda con texto negro**. Tiene sentido dentro del
sistema: una franja negra a sangre encima de un lienzo pastel seria el elemento de mas
contraste de la pagina, por delante del propio CTA.

### Logotipo

Insignia circular con contorno negro sobre relleno blanco, en posicion fija arriba a la
izquierda.

## 5. Principios de Layout

### Escala de espaciado

Base de 4px y una escala larguisima, dieciseis valores, que llega hasta 224px.

| Token | Valor | Uso |
|---|---|---|
| `--spacing-4` | 4px | Separacion entre pildoras de navegacion |
| `--spacing-12` | 12px | Padding horizontal de boton, gap entre elementos |
| `--spacing-24` | 24px | Padding de card |
| `--spacing-48` | 48px | Gap entre secciones |
| `--spacing-80` | 80px | Aire entre bloques |
| `--spacing-128` | 128px | Respiro de seccion |
| `--spacing-224` | 224px | Respiro de escultura |

### Contenedores

Ancho maximo de 1440px. El cuerpo de la pagina lleva **30px de radio en sus propias
esquinas**, lo que hace que toda la pagina se lea como una tarjeta pegada sobre el fondo del
navegador. Es un detalle raro y facil de pasar por alto.

### Grid

No hay rejilla en el sentido habitual. Hay un bloque de display centrado, las pegatinas
colocadas en absoluto a su alrededor y la cinta 3D pasando por detras. Debajo, secciones de
cards con contorno.

### Filosofia de espaciado

Apretado dentro de los controles (12px de padding horizontal en un boton es muy poco) y muy
generoso alrededor de la escultura tipografica. El contraste entre ambas densidades es lo que
hace que el display parezca aun mas grande.

## 6. Profundidad y Elevacion

Cero sombras. La profundidad de esta pagina es **ilustrada**: las cintas 3D tienen volumen
propio, con luces y sombras pintadas dentro de la imagen, y las pegatinas se solapan entre
si. El CSS es completamente plano.

| Nivel | Nombre | Hex | Uso |
|---|---|---|---|
| 0 | Sky Wash | `#DCEEFF` | Fondo del hero |
| 1 | Paper White | `#FFFFFF` | Cards y botones |
| 2 | Concrete Gray | `#CCCCCC` | Seccion secundaria |
| 3 | Saturados | los seis | Pegatinas y lavados |

Lo que separa un objeto de su fondo es su contorno negro, no una sombra. Cambiar el contorno
por una sombra suave deshace el efecto de recortado a mano, que es el sistema entero.

### Radios de borde

| Token | Valor | Uso |
|---|---|---|
| `--radius-16` | 16px | Icono de cartera y pegatinas pequenas |
| `--radius-20` | 20px | Cards |
| `--radius-30` | 30px | Las esquinas del propio cuerpo de la pagina |
| `--radius-40` | 40px | Cards elevadas y CTA relleno |
| `--radius-pill` | 1600px | Navegacion, pildoras y botones de contorno |

Cinco radios es mucho, y aqui no molesta porque todos van en la misma direccion: cuanto mas
grande el objeto, mas blando. Es una escala de blandura, no una taxonomia.

## 7. Lo que Si y lo que No

### Si hacer

- Poner el display con interlineado entre 0.75 y 0.80. Es lo que convierte la palabra en un
  objeto por detras del cual puede pasar la cinta.
- Dar contorno negro de 1px a todo: pildoras, cards, pegatinas y logotipo.
- Elegir el color de texto de cada pegatina por luminancia. Cinco de los seis piden negro;
  solo el violeta pide blanco.
- Usar negro para el unico CTA relleno de cada pantalla. En una paleta de seis saturados, la
  accion primaria destaca por no llevar color.
- Apretar el cuerpo a -0.010em y abrir las etiquetas a +0.032em. Van en direcciones
  opuestas a proposito.
- Girar las pegatinas y superponerlas, nunca alinearlas a la rejilla.
- Dejar los 30px de radio en las esquinas del propio cuerpo de la pagina.

### No hacer

- No escribir en blanco sobre el azul dominante: 2.65:1, y es el color que mas superficie
  ocupa.
- No homogeneizar el texto de las pegatinas a negro: sobre el violeta cae a 3.49:1.
- No sustituir el contorno negro por una sombra suave: deshace el recortado a mano.
- No poner la marquesina en negro a sangre: seria el elemento de mas contraste de la pagina,
  por delante del CTA.
- No usar interlineados por encima de 0.85 en el display.
- No alinear las pegatinas a la rejilla: dejan de ser pegatinas y pasan a ser iconos.
- No usar un segundo CTA relleno en la misma pantalla.
- No aplicar el mismo tracking al cuerpo y a las etiquetas.

## 8. Comportamiento Responsive

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

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

### Cambios por breakpoint

- **Display:** de 640px baja a 96px conservando el interlineado 0.75. La compresion es
  identidad; el tamano no.
- **Pegatinas:** en movil se quedan dos o tres, no las seis. Amontonarlas alrededor de un
  display estrecho tapa el propio display.
- **Cinta 3D:** se recorta por los lados y sigue pasando por detras del texto.
- **Navegacion:** las pildoras colapsan en un menu; el logotipo y el CTA relleno se quedan.
- **Botones:** de fila a pila, cada uno a ancho completo, conservando el radio de capsula.
- **Gap de seccion:** de 48px a 32px. Ya es apretado de origen.
- **Radio del cuerpo:** los 30px se mantienen. Es lo que hace que la pagina siga leyendose
  como una tarjeta.

### Touch targets

Las pildoras de navegacion tienen 15px de padding vertical y llegan bien. El CTA relleno,
con 10px sobre 13px de texto, se queda en unos 36px y necesita subir a 14px en movil.
*(derivado para completar el sistema)*

### Filosofia responsive

Se protege el display y la cinta. Las pegatinas son lo primero que se sacrifica, porque son
decoracion, no contenido.

## 9. Guia de Prompts para Agentes

### Referencia rapida de color

- texto: `#000000`
- fondo de hero: `#DCEEFF`
- superficie de card: `#FFFFFF`
- contorno: `#000000`, 1px
- color dominante: `#4DA2FF`
- pegatinas: `#55DB9C`, `#E9CCFF`, `#FB4903`, `#FFD731`, `#5C4ADE`
- accion primaria: `#000000` con texto blanco

### Prompt de inicializacion de sesion

```
Trabaja con el sistema Slush. Lienzo pastel #DCEEFF, cards #FFFFFF, texto #000000, y un
contorno negro de 1px en absolutamente todo: pildoras, cards, pegatinas y logotipo. Seis
colores saturados que solo existen como relleno de pegatina o lavado: #4DA2FF (el
dominante), #55DB9C, #E9CCFF, #FB4903, #FFD731 y #5C4ADE. El texto de cada uno se elige
por luminancia: negro en todos menos en #5C4ADE, que lleva blanco. Tipografia: una
display ultra negra solo para el titular, con interlineado entre 0.75 y 0.80, y una
grotesca en pesos 500 y 700 para la interfaz, con el cuerpo a -0.010em y las etiquetas a
+0.032em. Espaciado base 4px, gap 12px, 48px entre secciones. Radios: 16px, 20px, 30px en
el cuerpo de la pagina, 40px en elevadas y capsula en la navegacion. Cero sombras: la
profundidad la ponen las ilustraciones.
```

### Prompt: crear pantalla nueva

```
Monta la pantalla sobre #DCEEFF con el cuerpo de la pagina redondeado a 30px. Arriba, una
marquesina lavanda con texto negro en mayusculas de 12px con 0.032em. Debajo, una fila de
pildoras blancas con contorno negro y un CTA relleno en negro. En el centro, un titular en
display ultra negra a 200px o mas con interlineado 0.75, con una cinta 3D azul pasando por
detras y tres o cuatro pegatinas de colores giradas y superpuestas alrededor, cada una con
su contorno negro. Debajo, una linea de apoyo en la grotesca a 64px peso 700 y dos botones
de capsula. Sin sombras.
```

### Prompt: anadir componente al kit

```
Anade el componente con contorno negro de 1px y el radio que le toque segun su tamano:
16px si es pequeno, 20px si es card, 40px si es card elevada, capsula si es control. Si
lleva fondo saturado, calcula el color de texto por luminancia en vez de asumir blanco;
en este sistema casi siempre sale negro. Sin sombra: si necesita separarse, lo hace el
contorno.
```

### Prompt: revision de consistencia

```
Revisa la pantalla contra el sistema Slush y senala: 1) texto blanco sobre #4DA2FF o
sobre cualquier saturado que no sea #5C4ADE, 2) texto negro sobre #5C4ADE, 3) cualquier
box-shadow, 4) elementos sin contorno negro de 1px, 5) display con interlineado por
encima de 0.85, 6) pegatinas alineadas a la rejilla o sin girar, 7) mas de un CTA relleno
por pantalla, 8) el mismo tracking en cuerpo y en etiquetas, 9) la marquesina en negro.
```

### Prompt: variante de campana

```
Para una campana puedes llevar el display a 640px y dejar que la palabra se salga del
encuadre por los dos lados, con la cinta pasando por detras y las pegatinas amontonadas
en una esquina. Tambien puedes cambiar el pastel del lienzo por otro de la paleta. Lo que
no puedes cambiar: el contorno negro, el interlineado por debajo de 0.85, la ausencia de
sombra y que el CTA relleno siga siendo el unico elemento sin color.
```

## 10. Movimiento (Motion)

El movimiento vive en la marquesina y en las pegatinas. La tabla es
*(derivada para completar el sistema)* a partir del comportamiento observado.

| Elemento | Propiedad | Duracion | Curva |
|---|---|---|---|
| Marquesina | transform translateX, en bucle | continua | lineal |
| Pegatina, hover | transform rotate y scale(1.06) | 240ms | cubic-bezier(.34,1.56,.64,1) |
| Pildora de navegacion, hover | background-color | 160ms | ease-out |
| CTA relleno, active | transform translateY(1px) | 80ms | ease-out |
| Cinta 3D | animacion propia, en bucle lento | continua | ease-in-out |

Principios: este es el unico sistema de la galeria donde una curva elastica esta permitida,
y solo en las pegatinas. Un objeto recortado a mano puede rebotar; una card no. Respetar
siempre `prefers-reduced-motion`, y en ese caso congelar la marquesina y la cinta.

## Anexo: Stack tecnico detectado

| Aspecto | Valor |
|---|---|
| URL de origen | https://slush.app |
| Tema | light |
| Familia de color | blue |
| Color dominante declarado | `#4DA2FF` |
| Tipografias reales | Lateral en peso 800 y Aeonik Pro en 500 y 700, con `ss01` y `tnum` |
| Disponibles en Google Fonts | Ninguna. Lateral sustituida por Archivo Black, Aeonik Pro por Schibsted Grotesk |
| Unidad base de espaciado | 4px, con escala de dieciseis valores hasta 224px |
| Densidad | comoda |
| Ancho maximo | 1440px, con 30px de radio en las esquinas del propio cuerpo |
| Radios | 16, 20, 30, 40px y capsula. Una escala de blandura, no una taxonomia |
| Sombras | ninguna en CSS. La profundidad esta pintada dentro de las ilustraciones |
| Gradientes | ninguno en interfaz |
| Imagenes | cintas tridimensionales infladas en azul electrico y pegatinas planas con contorno negro |

Nota de fidelidad: la paleta, la escala, los radios y la ausencia de sombra salen del sitio
real y de su ficha publica. La sustitucion tipografica esta declarada. Los contrastes se han
calculado para esta ficha y dan la regla de volteo de las seis pegatinas, que la fuente no
recoge: cinco piden negro y solo el violeta pide blanco. La marquesina se corrige contra la
captura de portada, donde es lavanda con texto negro y no negra con texto blanco. Los estados
de interaccion, los colores semanticos, los breakpoints y la tabla de motion estan marcados
como derivados alli donde aparecen.