# Brief #3 · Dashboard de cliente T&E — estilo de la referencia

> Para Open Design. Se pasa **junto con la captura** del dashboard de "retainable".
> La captura aporta el estilo; este brief aporta el contenido.

---

**Usá la captura adjunta como referencia visual primaria.** Replicá su lenguaje:
tema claro, cards blancas con esquinas muy redondeadas (~16px), sombras suaves y
difusas, mucho aire/whitespace, números de métrica grandes y en negrita, acentos
multi-pastel, vibe friendly y premium. **No copies su contenido** (horas
facturables, tareas de diseño, "retainable") — copiá el ESTILO y aplicalo al
dashboard que describo abajo.

## Qué es

Dashboard web que ve el dueño de una PyME — cliente de una agencia de
automatización con IA — para mirar sus automatizaciones, conversaciones y
métricas. El cliente es de ecommerce. 4 pantallas. Prototipo visual, datos de
muestra realistas, sin backend.

## Sistema de diseño (adaptado de la referencia)

- **Layout:** mismo espíritu que la captura — header con saludo ("Hola,
  [nombre] 👋") + botón de acción arriba a la derecha; filas de cards anchas;
  patrón tabla grande + panel lateral. Sidebar claro a la izquierda con
  ícono+label. Esquinas 16px, gaps 20-24px, grilla base de 8px.
- **Estilo:** Soft UI claro como la referencia — fondo muy claro (#F6F7FB),
  cards blancas, sombras difusas suaves (no bordes duros), aireado. Friendly y
  premium, no técnico ni denso.
- **Color:** base clara; texto principal gris oscuro (#2A2E3A), secundario gris
  medio. Acentos **multi-pastel** como la captura (la barra segmentada, las
  pills de estado): pastel azul, lavanda, rosa suave, menta, amarillo suave. El
  **azul pastel `#A6DAFF` es el acento líder** (color de marca T&E); el resto de
  pasteles, de apoyo. Badges de estado = pills suaves de color.
- **Tipografía:** Inter en todo. Números de métrica MUY grandes y bold (estilo
  "43 hrs" de la captura — display 36-44px). Labels chicos, gris, peso medio.
- **Animaciones:** suaves — fade-in de cards con stagger, count-up en los
  números, hover con lift leve y sombra que crece. Nada brusco.

## Las 4 pantallas

1. **Resumen** — header con saludo. Fila de 3-4 cards grandes de KPI con números
   display gigantes: Conversaciones atendidas · % mensajes respondidos · Tiempo
   de 1ª respuesta · Carritos recuperados — cada una con su delta vs mes
   anterior. Card con barra segmentada multi-pastel (estilo "Hours Usage" de la
   captura) para "Leads por canal". Card con gráfico de conversaciones por día.
   Panel lateral "Últimas conversaciones": avatar, nombre, mensaje, pill de
   estado (bot / humano / escalada) — al estilo de la lista de tareas de la
   captura.
2. **Conversaciones** — tabla grande: contacto (avatar+nombre), último mensaje,
   canal, estado (pill pastel), quién respondió, hora. Search + filtros. Fila →
   panel lateral con el chat completo en burbujas.
3. **Clientes (CRM)** — tabla de contactos: nombre, canal de origen, etapa del
   pipeline (pill pastel), nº de conversaciones, última actividad. Fila → ficha
   del cliente.
4. **Reporte mensual** — selector de mes; el mes en una frase grande; grilla de
   KPIs con barras de progreso finas multi-pastel (estilo "Task's status" de la
   captura); tendencias a 6 meses; "Highlights" en bullets; botón "Descargar PDF".

## Datos de muestra

Ecommerce — nombres uruguayos creíbles, productos reales (corrector de postura,
plantillas ortopédicas, rodilleras), números coherentes. Nada de "lorem ipsum".

## Qué NO hacer

- No copiar el contenido de la captura (horas, tareas, nombre) — solo el estilo.
- Multi-pastel sí, pero controlado — que no parezca un arcoíris; los pasteles
  apoyan, no compiten.
- Contraste: es tema claro — el texto gris tiene que ser lo bastante oscuro
  (WCAG AA). `#A6DAFF` es pastel: para acentos y fondos de pill, nunca texto.
- Sin sombras duras ni bordes marcados — la referencia usa sombras difusas.
- Íconos del sidebar siempre con label. Responsive — el cliente lo mira desde
  el celular también.