GM Transport Design System
El GM Transport Design System es el sistema de diseño unificado que rige la apariencia, el comportamiento y la experiencia de todos los productos digitales de GM Transport. No es una guía de estilo ni una biblioteca de componentes: es la identidad visual y funcional de la empresa codificada en decisiones de diseño que aplican sin importar la plataforma, el dispositivo, el equipo o la tecnología.
Su existencia tiene un propósito concreto: eliminar la incertidumbre. Cuando el sistema existe, no hay que decidir qué color usar, qué tamaño de texto aplicar, cómo se comporta un botón deshabilitado en mobile frente a web, o cómo se adapta una tabla de un ERP a una pantalla de 375px. Esas decisiones ya fueron tomadas. El equipo construye productos.
Qué es el sistema
El Design System es una capa de decisiones compartidas que vive por encima de cualquier tecnología específica. No depende de Flutter, React, Vue ni de ningún framework. Es independiente de la plataforma porque describe intenciones de diseño, no implementaciones.
| Es | No es |
|---|---|
| Un lenguaje visual compartido | Una biblioteca de widgets o componentes |
| Un conjunto de tokens y principios | Una restricción estética arbitraria |
| La fuente de verdad de decisiones de UI | Un framework de desarrollo |
| Aplicable a cualquier plataforma | Específico para un stack tecnológico |
| Un sistema vivo que evoluciona con control | Un documento estático que se hereda |
El sistema opera a través de cinco documentos principales que forman una jerarquía de conocimiento. Este artículo es el punto de entrada obligatorio. Los demás profundizan en cada capa.
La identidad: naranja sobre blanco
La identidad de GM Transport en interfaces digitales se construye sobre una premisa visual absoluta: naranja energético sobre superficies blancas. Esta combinación no es decorativa. Es funcional y deliberada: el naranja sobre blanco produce contraste máximo con ruido visual mínimo. Es reconocible en luz solar directa, en pantallas de bajo brillo y en interfaces densas de ERP a las diez de la mañana.
El naranja primario (#FF7043) define la acción. Todo lo demás es soporte. Las superficies son blancas o gris muy claro. El texto es casi negro. El azul y el verde aparecen únicamente en estados informativos y de éxito. No existe decoración que no cumpla una función.
Esta combinación no cambia. No se crea una variante naranja diferente para mobile. No se usa un naranja más oscuro en ERP porque “se ve más serio”. La identidad es uniforme en todos los contextos porque la identidad es lo que hace que GM Transport sea reconocible como GM Transport.
La ley del sistema: menos es siempre más
El principal enemigo de la experiencia de usuario no es la complejidad técnica. Es el exceso de información visible en pantalla al mismo tiempo.
Los productos que fallan en experiencia no fallan por bugs ni por rendimiento. Fallan porque el usuario no puede identificar qué hacer. Hay cinco botones y todos parecen igualmente importantes. Hay tres columnas con datos y ninguna tiene jerarquía suficiente para guiar la atención. Hay una tabla de veinte filas sin ninguna señal visual sobre cuál fila necesita atención ahora mismo.
El sistema opera bajo la ley de la reducción: cada elemento que se elimina de una pantalla es una decisión de diseño correcta hasta que se prueba lo contrario. El punto de partida para cualquier pantalla es vacío. Cada elemento que se añade requiere justificación. No se añaden elementos por precaución ni porque el usuario “podría necesitarlos”.
Esta ley aplica con igual fuerza en una pantalla móvil de 375px que en un ERP con monitor de 27 pulgadas. La densidad cambia, pero la jerarquía no. En un ERP se pueden mostrar más datos simultáneamente porque el espacio lo permite; no porque el límite de claridad desaparezca.
Arquitectura del sistema
El sistema se organiza en cinco capas que van de lo más abstracto a lo más concreto. Las capas superiores establecen restricciones que las capas inferiores no pueden violar.
graph TD A["Identidad\nPersonalidad, voz, naranja sobre blanco"] --> B B["Tokens\nColor, tipografía, espaciado, elevación, motion"] --> C C["Fundamentos\nGrid, layout, breakpoints, iconografía, accesibilidad"] --> D D["Componentes\nButton, Card, Input, Table, Navigation..."] --> E E["Patrones\nFlujos, templates, pantallas tipo por plataforma"]
Identidad es el nivel más abstracto. Define quién es GM Transport visualmente: naranja energético, tipografía Poppins para títulos e Inter para cuerpo, superficies blancas, minimalismo funcional, lenguaje directo.
Tokens son los valores nombrados del sistema: no se escribe #FF7043 en un componente. Se escribe primary. Los tokens son el vocabulario compartido entre diseño y desarrollo, independientemente de la plataforma.
Fundamentos traducen los tokens en reglas de composición espacial: cómo se distribuyen los elementos, cómo responde el layout a diferentes tamaños de pantalla, qué espaciados son válidos.
Componentes son las unidades de UI construidas sobre los fundamentos. Un Button que usa el token primary, las reglas de espaciado del sistema y la tipografía definida.
Patrones son combinaciones de componentes que resuelven problemas de UX recurrentes: un flujo de formulario de múltiples pasos, una pantalla de lista con búsqueda y filtros, un dashboard de estado operacional.
Alcance multiplataforma
El sistema aplica a toda plataforma que GM Transport utilice para interactuar con usuarios internos o externos. No existe una plataforma de segunda clase con estándares reducidos.
| Plataforma | Contextos de uso | Perfil de densidad |
|---|---|---|
| Web — Desktop / ERP | Portales administrativos, backoffice, reportes | Alta |
| Web — Mobile | Portales de cliente, consulta de rastreo | Baja a media |
| Aplicación móvil nativa | Operadores, conductores, almacenistas en campo | Baja |
| Tablet | Coordinación en almacén, supervisión en campo | Media |
| Pantalla embebida | Displays de monitoreo, dashboards en TV | Media (solo lectura) |
El sistema define cómo los mismos tokens y principios se expresan de forma diferente en cada contexto sin perder identidad. El naranja es el mismo naranja en todos. El componente Button tiene la misma semántica en todos. Lo que cambia es el tamaño del área táctil, la densidad de la cuadrícula y la profundidad de la navegación permitida.
Principios que rigen toda decisión
Estos cinco principios son la reducción filosófica del sistema. Cuando existe duda sobre una decisión de diseño, la respuesta está en uno de estos principios.
Reducción. Si un elemento puede eliminarse sin pérdida funcional, se elimina. La pantalla más simple que resuelve el problema es la correcta.
Jerarquía única. Cada pantalla tiene una y solo una acción primaria. Una sola cosa es la más importante. No dos. No tres.
Identidad persistente. El naranja, las superficies blancas y la tipografía son constantes en todas las plataformas. Un usuario que conoce la app móvil reconoce el portal web.
Feedback sin ruido. El sistema siempre informa al usuario del estado de sus operaciones. Los estados de carga, vacío, error y éxito están diseñados con la misma atención que el estado con datos.
Corrección en contexto. Lo correcto para una pantalla de ERP no es lo mismo que para una app de operador de campo. Las reglas de densidad, input y contraste se adaptan al contexto. Los valores del sistema no se violan; se aplican con inteligencia contextual.
Cómo leer esta documentación
Esta sección está organizada para leerse de arriba hacia abajo la primera vez y como referencia puntual después:
| Documento | Cuándo leerlo |
|---|---|
| Este artículo | Primera vez y siempre que se inicie un nuevo producto o feature |
| Estándares de UI/UX | Al definir colores, tipografía y componentes visuales |
| Filosofía de diseño | Al justificar o cuestionar decisiones estructurales del producto |
| Principios UX | Al diseñar flujos, estados de pantalla y formularios |
| Qué se hace y qué no | Durante revisión de diseño o code review de componentes de UI |
| Diseño multiplataforma | Al adaptar un componente o flujo a una plataforma nueva |
| Sistema de tokens | Al implementar cualquier valor visual en código |
| Layout y espaciado | Al definir grids, márgenes, breakpoints y composición de pantalla |
Resumen
- El GM Transport Design System es la fuente de verdad de toda decisión visual y de experiencia en los productos de la empresa.
- La identidad es naranja sobre blanco: contraste máximo, ruido mínimo, reconocible en cualquier plataforma.
- La ley del sistema es la reducción: menos elementos visibles produce mejores experiencias en todos los contextos.
- El sistema cubre Web (desktop y mobile), aplicaciones móviles, tablets, ERP y pantallas embebidas bajo los mismos principios.
- La arquitectura tiene cinco capas: Identidad, Tokens, Fundamentos, Componentes y Patrones — cada capa respeta las restricciones de la que está arriba.