Guía de diseño visual

1. Origen y alcance

El enlace de Canva corresponde a una presentación de producto/UX titulada Picking Hub v1, orientada a operación de picking, terminales industriales y principios de interfaz «cero capacitación». Los tokens de esta guía se obtuvieron del documento embebido en el visor público de Canva (metadatos Open Graph + payload de diseño), no de capturas manuales.

Miniatura OG (1024×576). Si no carga, abrir el diseño completo en Canva con el enlace superior.

Implementación actual del backoffice: src/Web/src/style.css usa paleta Material por defecto (p. ej. primario #6750a4). Esta guía propone reemplazarla por la paleta Picking Hub documentada abajo.

2. Paleta de color

Colores ordenados por frecuencia en el archivo de diseño. Los roles semánticos son interpretación para MD3 / backoffice web.

Estados operativos (complemento)

El diseño Canva no define semántica de éxito/advertencia; para reparto y mapas se mantienen convenciones Material ya usadas en el proyecto, armonizadas con el primario azul:

• Éxito / entregado: #1b5e20 sobre #e8f5e9
• Advertencia / pendiente: #e65100 sobre #fff3e0
• Error: #b3261e (MD3 error estándar)

3. Tipografía

Escala sugerida para web (MD3 type scale)

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@400;500;600;700;800&display=swap");

:root {
  font-family: "Poppins", "Inter", system-ui, sans-serif;
}

4. Principios de UX (del contenido del diseño)

Texto recuperado de las láminas; aplican al backoffice aunque el mockup sea de hardware/picking.

5. Iconografía

El diseño usa iconografía plana, alto contraste y trazos limpios sobre fondos #e4f2ff / #a0cefd. Para el backoffice se recomienda:

• Material Symbols (Google Fonts) en variante Outlined u Rounded — peso visual similar a las ilustraciones del deck.
• Tamaño base 24px en navegación; 20px en botones y chips.
• Color de icono: #195f85 (primario) o #606060 (inactivo).
• Evitar mezclar sets (Font Awesome + Material) en la misma barra.
• Mapa / estados: mantener marcadores con color semántico (verde/naranja/rojo) ya usados en Leaflet.

6. Forma, elevación y layout

Vista previa de componentes

7. Implementación en el repositorio

7.1 Variables CSS (src/Web/src/style.css)

:root {
  --md-sys-color-primary: #195f85;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #e4f2ff;
  --md-sys-color-on-primary-container: #195f85;
  --md-sys-color-surface: #ffffff;
  --md-sys-color-outline: #d9d9d9;
  --md-sys-color-on-surface: #424242;
  color: #424242;
  background: #d0d7dd;
  font-family: "Poppins", "Inter", system-ui, sans-serif;
}

.drawer { background: #fafcfe; border-right-color: #d0d7dd; }
.nav-link.is-active { background: #e4f2ff; color: #195f85; }

7.2 Documentación HTML hermana

Alinear manual.html y development.html reemplazando #6750a4 por #195f85 y la fuente Poppins en encabezados para coherencia de marca.

7.3 Checklist

• Importar Poppins + Inter en index.html o style.css.
• Reemplazar tokens --md-sys-color-* en la SPA.
• Actualizar gradiente del logo en drawer si se desea acento cian (#02ddea).
• Adoptar Material Symbols en menú (opcional, sustituye texto puro).
• Validar contraste WCAG AA en texto #606060 sobre #d0d7dd y #ffffff.

8. Referencias

• Picking Hub v1 — Canva (visor)
• Material Design 3 — Custom colors
• Material Symbols
• src/Web/src/style.css — estilos actuales del backoffice