Design style del sitio Drivin

Paleta cerrada del manual Descartes 3.0 y la web de Descartes. Cada color tiene un solo rol: si un elemento necesita otro color, es otro tipo de elemento. Light Green y Light Orange son "con moderación" en el manual: el verde queda sólo para el botón secundario y el naranjo sólo para las estrellas. Ronda 2: "hay distintas jerarquías de color y botones".

Roboto (manual Descartes). Cuatro niveles, siempre los mismos: H1 sólo en el hero, H2 en todos los títulos de sección (también "Somos el partner tecnológico…", que hoy está a 20 px), H3 en filas y bloques, H4 en tarjetas. El tamaño lo da el nivel, no la sección. El eyebrow va sólo sobre un H3 o un H4: etiqueta un módulo dentro de una sección ("Equipo de Soporte Local", "Integridad"). Sobre un H2 no va: la sección se explica con su título. Ronda 2: "mantener una jerarquía de títulos estable entre los h2" y "retirar tags flotantes innecesarios en los encabezados". Design system: "usarla como etiquetas en pequeños módulos… lo que no vemos útil es que se use como etiqueta en una sección completa".

Tres estilos, sin excepciones. Un solo botón principal por bloque. El navy deja de ser botón (el "Agendar demo" del header y "Descargar certificados" pasan a principal y secundario). Mismo alto (48, 44 en el header), mismo radio, mismo peso. Ronda 2: principal azul a la demo, secundario verde para casos y blog, sin fondo para lo complementario.

Tres fondos de sección: blanco, pastel (alterna) y navy (máximo dos por página, para lo que tiene que resaltar). Una caja: radio 16, padding 32 (24 en móvil), sin borde ni sombra; gris sobre blanco y blanca sobre pastel o navy. La sombra queda sólo para lo que flota encima de una foto. Ícono Descartes arriba, H4 y un párrafo corto. La caja con enlace (módulos, soluciones, industrias) es blanca sobre navy y con el mouse se da vuelta a la foto de lo que enlaza, con un velo navy y el texto en blanco; en el teléfono la foto queda puesta. La foto de la caja es oscura: se elige por lo que muestra y se oscurece hasta un brillo medio de 35 o menos, con el 90 % de sus píxeles bajo 90 (de 255), como la de "Reportes en tiempo real". Así todas las cajas quedan parejas aunque la foto venga de una escena clara. El velo no se toca. Pásale el mouse a la banda de abajo. Design system: "al pasar el hover, las imágenes toman mucho protagonismo… no es un tema de gradiente-opacidad, es más de selección de imágenes".

Fotografía real como protagonista, de personas trabajando en logística (bodega, andén, ruta, oficina de planificación). Encima, un solo detalle de la plataforma con datos de muestra que dice qué hace Drivin en esa escena, como 3gtms en "Built for modern supply chains". El detalle está vivo: más íconos que texto y una animación interna que muestra la plataforma andando (los canales de soporte mandan mensajes al equipo; las barras de rutas se mueven sin parar, cada una a su ritmo). Con el mouse, la foto se acerca y el detalle sube. Radio 20. En el contenido la foto va en su color; el tratamiento azul del manual queda para los heros y la banda de casos. Ronda 2: "fotografía real como protagonista, y que la iconografía y mockups acompañen" · reemplazar el call center por "un equipo colaborando en una mesa de trabajo".

Librería oficial de Descartes en line art (abril 2026, "the preferred visual standard"), con sus tres tonos tal cual: Dark Blue, Light Blue y gris. 64 px en tarjetas, 48 en móvil, 88 cuando el ícono es el protagonista. Sobre navy van dentro de un cuadro blanco, nunca recoloreados. Las flechas, chevrons y checks de botones y listas son íconos de interfaz (trazo de 2 px) y no se usan como ilustración. Compartir es la tercera familia: las marcas de WhatsApp, Facebook, LinkedIn, X y el correo, rellenas y en un solo color (navy, azul con el mouse), nunca con el color de cada red. Van en círculos de 40 px y sólo en el artículo de blog: en escritorio en una columna fija al costado del texto, en móvil en una fila bajo el título. Ronda 2: "vamos a ocupar los iconos compartidos por Descartes". Design system: "agregarle los botones de compartir, principalmente para el uso del blog: Whatsapp, Facebook, Linkedin, X, Mail".

Los tabs aprobados en la ronda 2 se quedan tal cual: pila de tarjetas en los tonos Descartes, una abierta a la vez, título y CTA a la izquierda. Lo nuevo es la zona de mockup bajo el título: cada tab muestra su pantalla de la plataforma (datos de muestra) y al cambiar de tab entra con un fundido y sus barras, avances o ruta se dibujan. En móvil el mockup sube sobre la pila y de cada tab queda sólo su frase. Contraste: la escala pasó a tonos donde todo se lee (medido): navy sobre los tres claros, 13,2 · 10,6 · 7,5 a 1, y blanco sobre los tres oscuros, 6,7 · 10,6 · 7,4 a 1. El Light Blue puro salió de la pila: daba 4,9 con navy y 3,0 con blanco. Ronda 2: "nos quedamos con los siguientes tabs… enriquecer visualmente el interior de cada tab con elementos más tangibles (mockups o animaciones sutiles de la plataforma)… en la zona marcada".

Hover en todo lo que se puede tocar, entradas una sola vez cuando la sección aparece y sólo tres cosas que se mueven solas: los módulos del hero, los detalles de la plataforma sobre las fotos y la franja de logos. Esta guía ya se mueve como el sitio: cada título, texto, caja y foto entra al aparecer. Tres duraciones (0,2 s el color de un botón, 0,45 s una tarjeta, 0,7 s una foto o una entrada) y dos curvas: salida suave para todo y rebote corto para íconos y flechas. Pasa el mouse por cada ejemplo; en las entradas, "Repetir" las vuelve a correr. Ronda 2: "animaciones sutiles de la plataforma" en los tabs y los textos del hero "apareciendo de forma progresiva". El resto lo fija esta guía para que las 7 plantillas se muevan igual.

Se diseña a 390. Menos scroll: el titular y lo esencial, sin la descripción secundaria (clase m-oculto). Las grillas de 3 o más tarjetas pasan a carrusel con la siguiente asomando (85 % de ancho) y puntos: nunca un scroll horizontal sin señal. Botones a todo el ancho. Abajo, cuatro secciones reales lado a lado: escritorio contra móvil, con el mismo contenido. Las dos vistas funcionan: hover, carruseles y tabs. Ronda 2: "comprimir la versión móvil eliminando descripciones secundarias… o formatos deslizables (carrusel)".