---
name: Expo Agro 2026 — Navegador de Contactos
description: Cliente navegador de datos para Agro Revolution Colombia — libreta de campo convertida en base de trabajo
colors:
  paper: "#FAFCF7"
  card: "#FFFFFF"
  ink: "#0C1406"
  ink-2: "#3F5147"
  ink-3: "#5C6E62"
  line: "#E2EBDD"
  line-2: "#CFDCC8"
  green: "#2E7D32"
  green-bright: "#54B435"
  green-deep: "#1F5422"
  green-soft: "#EDFBE2"
  green-soft-2: "#D5EAD8"
  gold: "#E9A825"
  amber-bg: "#FFF3D1"
  amber-tx: "#7A5600"
  rose-bg: "#FBE7EC"
  rose-tx: "#93264B"
typography:
  display:
    fontFamily: "'Baloo 2', system-ui, sans-serif"
    fontSize: "clamp(2rem, 4.6vw, 3.1rem)"
    fontWeight: 800
    lineHeight: 1.06
    letterSpacing: "-0.015em"
  headline:
    fontFamily: "'Baloo 2', system-ui, sans-serif"
    fontSize: "clamp(1.4rem, 2.6vw, 1.75rem)"
    fontWeight: 700
    lineHeight: 1.2
  title:
    fontFamily: "'Baloo 2', system-ui, sans-serif"
    fontSize: "1.08rem"
    fontWeight: 700
  body:
    fontFamily: "'DM Sans', system-ui, sans-serif"
    fontSize: "15.5px"
    fontWeight: 400
    lineHeight: 1.55
  quote:
    fontFamily: "'Forum', serif"
    fontSize: "clamp(1.02rem, 1.7vw, 1.2rem)"
    fontWeight: 400
    lineHeight: 1.6
  label:
    fontFamily: "'Lexend', sans-serif"
    fontSize: "12.5px"
    fontWeight: 500
    letterSpacing: "normal"
  overline:
    fontFamily: "'Lexend', sans-serif"
    fontSize: "11.5px"
    fontWeight: 600
    letterSpacing: "0.05em"
rounded:
  sm: "6px"
  md: "8px"
  input: "12px"
  card: "14px"
  pill: "999px"
spacing:
  xs: "4px"
  sm: "9px"
  md: "14px"
  lg: "22px"
  xl: "38px"
components:
  tab-active:
    backgroundColor: "{colors.green}"
    textColor: "#FFFFFF"
    rounded: "{rounded.pill}"
    padding: "9px 16px"
  tab-idle:
    backgroundColor: "transparent"
    textColor: "{colors.ink-2}"
    rounded: "{rounded.pill}"
    padding: "9px 16px"
  chip-active:
    backgroundColor: "{colors.green}"
    textColor: "#FFFFFF"
    rounded: "{rounded.pill}"
    padding: "6px 13px"
  badge-flag:
    backgroundColor: "{colors.amber-bg}"
    textColor: "{colors.amber-tx}"
    rounded: "{rounded.sm}"
    padding: "3px 8px"
  badge-duplicate:
    backgroundColor: "{colors.rose-bg}"
    textColor: "{colors.rose-tx}"
    rounded: "{rounded.sm}"
    padding: "3px 8px"
  badge-ok:
    backgroundColor: "{colors.green-soft}"
    textColor: "{colors.green-deep}"
    rounded: "{rounded.sm}"
    padding: "3px 8px"
---

# Design System: Expo Agro 2026 — Navegador de Contactos

## Overview

**Creative North Star: "La libreta de campo convertida en base de trabajo"**

Un instrumento de Operate: el cliente (Francisco Merino, Agro Revolution) revisa 106 contactos capturados a mano en la Expo Agrofuturo 2026 y sabe, en un clic, qué verificar, a quién llamar y de qué imagen salió cada dato. La densidad es alta pero jerarquizada — la tabla es la protagonista, todo lo demás la sirve. La marca Agro Revolution entra por el verde de acción y el dorado de señal, nunca por decoración: cero gradientes, cero ornamento que no información.

**Key Characteristics:**
- Papel casi-blanco (#FAFCF7) con tarjetas blancas de sombra suave; el color es señal, no relleno.
- Dos voces tipográficas que se alternan: Baloo 2 redondeada para titulares, Forum serif para la voz de campo ("Cultivamos el cambio desde la raíz").
- Todo dato incierto se ve: ámbar = verificar, rosa = duplicado posible, verde suave = listo.
- Un solo momento de movimiento: la entrada de vista de 340 ms; el resto es estático y confiable.

## Colors

Paleta de marca aplicada con estrategia restringida: neutrales de papel/tinta cargan la superficie; el verde es la única voz de acción; el dorado y el rosa son semáforo de datos, no decoración.

### Primary
- **Verde Acción** (#2E7D32): pestaña activa, chips presionados, botón de reproducción, bordes de fila expandida. El verde oscuro del logo; contrasta 4.6:1 sobre blanco.
- **Verde Señal** (#54B435): solo decorativo — puntitos de filtro, acentos pequeños. Nunca texto sobre blanco (2.9:1).

### Secondary
- **Verde Bosque** (#1F5422): enlaces (tel:, wa.me, mailto), texto sobre fondos verdes suaves. Es el verde "legible" del sistema.
- **Dorado Campo** (#E9A825): exclusivo del punto dentro de la insignia "Verificar" — la señal de la marca para datos a confirmar. Nunca como texto.

### Neutral
- **Papel** (#FAFCF7): fondo de página.
- **Tinta** (#0C1406): texto principal — casi negro con raíz verde.
- **Tinta 2** (#3F5147): texto secundario, subtítulos.
- **Tinta 3** (#5C6E62): placeholders y encabezados de tabla en versalitas (5.3:1 — mínimo del sistema para texto tenue).
- **Línea / Línea 2** (#E2EBDD / #CFDCC8): bordes de tarjeta e inputs.
- **Verde Suave 1/2** (#EDFBE2 / #D5EAD8): fondos de estado positivo, hover de chips.
- **Ámbar** (fondo #FFF3D1 / texto #7A5600): insignia "Verificar".
- **Rosa** (fondo #FBE7EC / texto #93264B): insignia "Posible duplicado" y advertencias de duplicado.

### Named Rules
**La Regla del Color-Semáforo.** Ámbar dice "verificar", rosa dice "duplicado", verde suave dice "listo". Ninguna otra superficie usa estos colores; su rareza es lo que los hace legibles de un vistazo.
**La Regla del Verde Único.** Un solo verde por jerarquía: #2E7D32 actúa, #1F5422 enlaza, #54B435 decora. Nunca mezclar roles.

## Typography

**Display Font:** Baloo 2 (system-ui fallback) — la voz del titular, redondeada y con peso.
**Body Font:** DM Sans (system-ui fallback) — cuerpo de datos y prosa.
**Label Font:** Lexend — toda la UI: pestañas, chips, insignias, etiquetas versalitas.
**Editorial Font:** Forum — la voz de campo: versos de marca y solo eso.

**Character:** Cuatro voces con trabajo fijo; la alternancia Baloo 2 ↔ Forum da el contraste "base de datos ↔ libreta escrita a mano" que es la tesis del mundo.

### Hierarchy
- **Display** (800, clamp(2rem–3.1rem), 1.06): el titular de la página, uno solo.
- **Headline** (700, clamp(1.4–1.75rem)): títulos de sección.
- **Title** (700, 1.08rem): títulos de tarjeta y grupos.
- **Body** (400, 15.5px, 1.55): prosa y datos; máx ~65–70ch en notas.
- **Quote** (Forum 400, clamp(1.02–1.2rem), 1.6): versos y voz de campo, entre comillas tipográficas.
- **Label** (Lexend 500, 12.5px): UI y metadatos.
- **Overline** (Lexend 600, 11.5px, +0.05em, MAYÚSCULAS): encabezados de columna de tabla. Único uso de versalitas.

### Named Rules
**La Regla del Número Tabular.** `font-variant-numeric: tabular-nums` en toda columna de datos (teléfonos, conteos, insignias). Los números nunca bailan.

## Layout

Contenedor único de máx 1120px con padding fluido clamp(16–40px). La vista es de una sola superficie con pestañas pegajosas (top 0, fondo translúcido con blur) y una barra de herramientas pegajosa bajo ellas (búsqueda + chips). La tabla de contactos es una grilla de 6 columnas (2.2fr / 1.3fr / 1.6fr / 1.4fr / 90px / 74px, gap 14px) que colapsa a tarjetas apiladas bajo 900px. Ritmo: más aire encima de cada título que debajo (38px de sección, 6px título→nota, 22px título→contenido). Detalles de fila se expanden hacia abajo, nunca en modal.

## Elevation & Depth

Sistema "papel levantado": reposo plano con borde de 1px; la profundidad aparece como respuesta, no como decoración.

### Shadow Vocabulary
- **Reposo** (`0 1px 2px rgba(12,20,6,.05), 0 6px 18px -6px rgba(12,20,6,.12)`): tarjetas y filas en reposo.
- **Levantado** (`0 2px 4px rgba(12,20,6,.06), 0 14px 34px -10px rgba(12,20,6,.2)`): hover de fila, miniaturas de fuente, lightbox.

### Named Rules
**La Regla del Reposo Plano.** Las sombras siempre llevan offset + blur suave; nunca halos de color sin offset.

## Shapes

Radio por jerarquía: 999px para todo lo accionable-pequeño (pestañas, chips, pastillas de estado), 14px para tarjetas y secciones, 12px para inputs, 8px para botones de fuente de imagen, 6px para insignias. Bordes de 1px en --line en reposo que avanzan a --line-2 o al verde de acción en hover/abierto. Sin esquinas cortadas, sin bordes de color por encima de 1px, sin siluetas geométricas sobre fotografía: las miniaturas de las 34 imágenes fuente se recortan con object-fit cover (64×88) dentro de botones de 9px.

## Components

### Pestañas (nav)
- **Shape:** píldora 999px, Lexend 14px.
- **Active:** fondo Verde Acción, texto blanco, contador en cápsula translúcida.
- **Idle → Hover:** fondo Verde Suave, texto tinta. Contenedor pegajoso con `backdrop-filter: blur(10px)` y scroll horizontal sin scrollbar en móvil.

### Chips de filtro
- **Style:** borde 1.5px Línea 2, fondo blanco, Lexend 12.5px + contador tenue; punto de color semáforo cuando el filtro es de estado.
- **State:** `aria-pressed` → Verde Acción sólido (los filtros ámbar usan #7A5600 para mantener contraste).

### Fila de contacto (componente firma)
- **Shape:** tarjeta 14px, grilla de 6 columnas en escritorio / apilada en móvil; fila completa clicable (div role=button, Enter/Espacio) que expande notas + miniaturas de imagen fuente.
- **Data:** nombre en DM Sans 700 con empresa en 12.5px Tinta 2 debajo; teléfono como enlace `tel:` + botón `wa.me` con icono; email `mailto:`; insignias de estado en columna propia.
- **Fuente:** botón-cápsula Verde Suave con icono de imagen + código (D1, L13…) que abre el lightbox con la foto original de la libreta/tarjeta.
- **Duplicate warning:** banda rosa a lo ancho del detalle cuando el nombre lleva "POSIBLE DUPLICADO" en notas.

### Lightbox (componente firma)
- Overlay verde-negro (rgba(10,16,8,.9)), barra superior con caption + Anterior/Siguiente/Cerrar, navegación por flechas del teclado, Esc cierra, clic alterna zoom (scale 2.1, origin top center) con transición de 250ms.

### Insignias y pastillas
- **Shape:** 6px / 999px, Lexend 11–11.5px 600. Ámbar/Rosa/Verde según la Regla del Color-Semáforo.

### Inputs / Fields
- **Style:** fondo blanco, borde 1.5px Línea 2, radio 12px, icono de lupa a la izquierda.
- **Focus:** borde Verde Acción + halo `0 0 0 3px rgba(46,125,50,.14)`.
- **Placeholder:** #5C6E62 (mínimo de contraste del sistema).

### Botones secundarios
- **"Ver contacto":** píldora de borde 1.5px Línea 2 → hover borde verde + fondo suave.
- **"Fuente":** Verde Suave sólido con borde; hover Verde Suave 2.

### Superficies de navegador
Selección Verde Suave 2, scrollbar fina #C6D6BD, focus ring verde 2px con offset 2 — todo tematizado, nada por defecto.

## Do's and Don'ts

### Do:
- **Do** usar #2E7D32 para toda acción y #1F5422 para enlaces; #54B435 solo decorativo.
- **Do** marcar cada dato incierto con la insignia ámbar "Verificar" y citar la imagen fuente (D#/L#).
- **Do** escribir números de teléfono como texto con `font-variant-numeric: tabular-nums` y enlazarlos a `tel:`/`wa.me`.
- **Do** mantener la voz de campo en Forum y entre comillas tipográficas.
- **Do** animar solo la entrada de vista (340ms, cubic-bezier(0.16,1,0.3,1)) y respetar `prefers-reduced-motion`.

### Don't:
- **Don't** usar gradientes decorativos, texto con degradado, ni tarjetas-estadística "número grande + etiqueta" como estructura.
- **Don't** usar kickers/eyebrows sobre títulos: el titular carga su propio peso.
- **Don't** usar bordes laterales de color (>1px) en tarjetas ni sombras duras con offset sin blur.
- **Don't** poner #54B435 o #E9A825 como texto sobre blanco.
- **Don't** fusionar silenciosamente duplicados: se marcan en rosa y se dejan visibles hasta confirmación.