Estándares de Diseño UI/UX

El Design System de GM Transport establece los lineamientos visuales y de experiencia de usuario que aplican a todos los productos de la empresa. Su propósito es garantizar coherencia entre plataformas, reducir decisiones de diseño duplicadas y producir interfaces que sean funcionales, modernas y reconocibles como parte del ecosistema GM Transport.

Este documento es la fuente de verdad para diseñadores, desarrolladores frontend, desarrolladores móviles y cualquier persona que tome decisiones sobre la apariencia o el comportamiento de un producto.

Principios de Diseño

El diseño de GM Transport combina funcionalidad operacional con acabado visual moderno. Los productos no son aplicaciones de consumo; son herramientas profesionales diseñadas para equipos de trabajo en contextos exigentes.

Los cinco pilares del sistema son:

Pilar	Descripción
Claridad	Cada pantalla tiene una acción primaria visible. El usuario nunca debe dudar qué hacer.
Eficiencia	Las acciones más frecuentes están disponibles en dos pasos o menos desde cualquier punto.
Confianza	El sistema siempre informa al usuario del estado de sus operaciones, incluso sin conexión.
Minimalismo	Solo la información relevante al contexto. Sin decoración que no aporte significado.
Contraste	Los colores y tipografías funcionan en condiciones adversas: luz solar, pantallas de bajo brillo.

Filosofía visual

El estilo visual de los productos nuevos de GM Transport sigue el patrón “Operacional Premium”: la interfaz tiene calidad de producto de consumo moderno, pero está diseñada para uso profesional intensivo. La referencia visual es similar a aplicaciones como DiDi o Uber; la paleta base es naranja energético sobre blanco, con acentos azul y verde para estados informativos y exitosos.

Paleta de Colores

La paleta está definida como un conjunto de tokens que deben usarse en su totalidad. No se crean variantes ad-hoc de color: si un color no está en esta tabla, no pertenece al sistema.

Colores primarios

Token	Valor	Uso
primary	#FF7043	Acciones principales, botones CTA, íconos activos
primaryContainer	#FFF2E8	Fondos de secciones destacadas, chips seleccionados
onPrimaryContainer	#E64A19	Texto sobre primaryContainer
onPrimary	#FFFFFF	Texto e íconos sobre primary

Colores secundarios y terciarios

Token	Valor	Uso
secondary	#1976D2	Acciones secundarias, información, enlaces
secondaryContainer	#E1F4FF	Fondos informativos
onSecondaryContainer	#0D47A1	Texto sobre secondaryContainer
tertiary	#388E3C	Confirmaciones, estados exitosos
tertiaryContainer	#E8F5E8	Fondos de estado correcto
onTertiaryContainer	#1B5E20	Texto sobre tertiaryContainer

Superficies y texto

Token	Valor	Uso
surface	#FFFFFF	Fondo base de pantallas y tarjetas
surfaceDim	#F8F9FA	Fondo de listas y secciones
surfaceContainer	#F5F6F7	Fondo de inputs y elementos neutros
surfaceContainerHighest	#EEF0F2	Secciones con mayor jerarquía visual
onSurface	#1A1C1E	Texto primario: títulos, etiquetas principales
onSurfaceVariant	#6C7075	Texto secundario: subtítulos, metadatos, hints

Estados semánticos

Cada estado tiene un color base y un color de contenedor para fondos sutiles.

Estado	Color base	Contenedor
Error	#D32F2F	#FFEBEE
Éxito	#2E7D32	#E8F5E8
Advertencia	#F57C00	#FFF3E0
Información	#1976D2	#E1F4FF
Pendiente	#EC407A	#FCE4EC
Cancelado	#90A4AE	#F5F5F5

Reglas de uso del color

• El naranja primario (#FF7043) no se usa como fondo de pantalla completa.
• Los estados de error siempre usan el token error. No se crea un rojo personalizado.
• Para overlays oscuros: rgba(0,0,0,0.3). No negro sólido.
• No se usan colores hardcodeados en código. Solo tokens del sistema.

Tipografía

El sistema usa dos familias tipográficas con roles claramente diferenciados.

Familia	Rol
Poppins	Títulos, encabezados, etiquetas de botones, navegación
Inter	Cuerpo de texto, subtítulos, metadatos, datos numéricos

Escala tipográfica

La escala sigue los niveles de Material Design 3, adaptados al contexto operacional.

Niveles de display — pantallas de impacto

Nivel	Familia	Tamaño	Peso	Uso
Display Large	Poppins	64sp / ~64px	300	Pantallas hero, marketing
Display Medium	Poppins	58sp / ~58px	300	Bienvenida, onboarding
Display Small	Poppins	46sp / ~46px	400	Títulos en pantallas vacías

Niveles de encabezado

Nivel	Familia	Tamaño	Peso	Uso
Headline Large	Poppins	32sp / ~32px	500	Título de sección principal
Headline Medium	Poppins	26sp / ~26px	500	Título de pantalla
Headline Small	Poppins	20sp / ~20px	500	Subtítulo de sección

Niveles de título — componentes

Nivel	Familia	Tamaño	Peso	Uso
Title Large	Poppins	18sp / ~18px	500	AppBar, modales, diálogos
Title Medium	Poppins	16sp / ~16px	500	Encabezado de tarjeta
Title Small	Poppins	14sp / ~14px	500	Subtítulo de tarjeta

Niveles de cuerpo y etiqueta

Nivel	Familia	Tamaño	Peso	Uso
Body Large	Inter	16sp / ~16px	400	Texto principal de pantalla
Body Medium	Inter	14sp / ~14px	400	Descripción, detalle de tarjetas
Body Small	Inter	12sp / ~12px	400	Metadatos, fechas, identificadores
Label Large	Inter	14sp / ~14px	500	Texto de botones principales
Label Medium	Inter	12sp / ~12px	500	Chips, badges, etiquetas de navegación
Label Small	Inter	10sp / ~10px	500	Micro-etiquetas, estado en chips

Reglas tipográficas

• El tamaño mínimo de texto legible es 12sp / 12px.
• El tamaño mínimo de texto crítico (alertas, estados) es 11sp / 11px con peso 700.
• No se sobreescriben estilos tipográficos definidos en el sistema sin justificación documentada.

Espaciado y Layout

Sistema de espaciado

Todo espaciado interno usa múltiplos de 4dp. La separación entre componentes usa múltiplos de 8dp.

Token	Valor	Uso
smallPadding	8dp	Padding interno de íconos, separación de chips
defaultPadding	16dp	Padding estándar de pantallas y tarjetas
largePadding	24dp	Separación entre grupos de contenido y secciones

Radios de borde

Componente	Radio
Tarjetas, inputs, contenedores generales	12dp
Botones principales	16dp
Diálogos, modales, tarjetas premium	20dp
Chips de filtro y estado	16–20dp
Checkbox	6dp

Alturas estándar de componentes

Componente	Altura
Barra de navegación superior (AppBar)	56dp
Botones principales	48dp
Inputs / campos de texto	52dp
Barra de navegación inferior	56dp + área segura
Chips	32dp
Avatares	40dp

Márgenes de pantalla

• Margen lateral estándar: 16dp de padding horizontal.
• Separación entre tarjetas en lista: 8dp.
• Padding interno de tarjetas: 16dp horizontal, 12–16dp vertical.

Elevación

El sistema abandona sombras pronunciadas en favor de bordes sutiles con sombras mínimas.

Nivel	Valor	Uso
0	Sin sombra	Barra de navegación superior
1	Sombra sutil + borde 0.5dp	Tarjetas normales
2	Sombra leve	Tarjetas navegables o destacadas
4	Sombra media	Mensajes flotantes (SnackBar)
8	Sombra pronunciada	Botón de acción flotante (FAB)

Componentes y Patrones Visuales

Botones

El sistema define cuatro niveles de botón según la jerarquía de la acción:

Tipo	Uso	Apariencia
Primario (Elevated/Filled)	Acción principal única por pantalla	Fondo primary, texto blanco, radio 16dp
Secundario (Outlined)	Acción secundaria o reversible	Borde primary, fondo transparente
Terciario (Text)	Cancelar o acciones de escape	Solo texto primary, sin borde
Ícono	Acción puntual en contexto	Ícono 24dp, área táctil mínima 48dp

Nunca se presentan dos botones primarios simultáneamente en la misma pantalla.

Tarjetas

Las tarjetas son el contenedor visual principal de la información. Siguen este patrón:

• Fondo: surface (#FFFFFF).
• Borde sutil: outlineVariant al 30% de opacidad.
• Sombra: shadow al 6% de opacidad, desplazamiento vertical 4dp, difusión 16dp.
• Radio: 16dp estándar, 20dp para tarjetas premium o de navegación rápida.

Para tarjetas que responden a interacción del usuario, se aplica efecto ripple en el área interior de la tarjeta.

Campos de texto (Inputs)

• Estilo: filled (fondo relleno).
• Fondo en reposo: surfaceContainer (#F5F6F7), sin borde visible.
• Borde al enfocar: primary 1dp.
• Borde en error: color error 1dp.
• Etiqueta flotante en color primary al activar el campo.
• Radio de borde: 12dp.

Chips de estado

Los chips de estado identifican rápidamente la condición de un elemento (trayecto, solicitud, reporte). Siguen el patrón:

• Forma de píldora: radio 20dp.
• Texto blanco sobre fondo del color de estado semántico.
• Ícono de 14dp a la izquierda del texto.
• Tipografía: Inter w700, 11sp.

Barra de navegación superior (AppBar)

Dos variantes aprobadas:

Variante	Fondo	Texto e íconos	Cuándo usarla
Light	surface (#FFFFFF)	onSurface + primary	Pantallas de detalle y formularios
Brand	primary (#FF7043)	Blanco	Pantallas principales y de inicio

Ambas variantes usan elevación 0. El título se alinea a la izquierda.

Mensajes de retroalimentación (SnackBars)

Los mensajes de estado siguen cuatro tipos fijos: éxito, error, advertencia e información. Se presentan siempre como elementos flotantes con radio 12dp y no se muestran múltiples mensajes simultáneos.

Tipo	Color de fondo	Duración
Éxito	tertiary / #388E3C	3 segundos
Error	error / #D32F2F	4 segundos
Advertencia	warning / #F57C00	3 segundos
Información	secondary / #1976D2	3 segundos

Diálogos y paneles modales

• Radio de borde: 20dp.
• Título: Headline Small, Poppins w500.
• Contenido: Body Large, Inter w400, color onSurfaceVariant.
• Estructura de botones: siempre TextButton para cancelar y botón primario para confirmar.

Iconografía

Librería de íconos

El sistema usa exclusivamente la familia Material Icons Rounded. Esta familia es coherente con la paleta visual y tiene variantes _outlined para estados inactivos.

Tamaños estándar

Contexto	Tamaño
Íconos en barra superior y acciones	24dp
Íconos en navegación inferior	24dp
Íconos en tarjetas de detalle	20dp
Íconos en chips de estado	14dp
Íconos en estados vacíos	80dp

Color de íconos

• Contexto neutro: onSurface (#1A1C1E).
• AppBar light: onSurface.
• AppBar brand: blanco.
• Acciones y CTA: primary (#FF7043).
• Dentro de contenedores de color: el color del estado correspondiente.

Experiencia del Usuario

Flujos críticos

Los flujos más frecuentes e importantes de cada producto son la prioridad máxima de diseño. Deben seguir estas reglas:

1. La acción principal siempre está visible sin necesidad de hacer scroll.
2. Los formularios muestran solo los campos necesarios para el contexto actual.
3. El feedback de operación es inmediato: el usuario no espera confirmación del servidor para continuar.
4. Todo flujo de datos remotos maneja cuatro estados: cargando, vacío, error y con datos.

Formularios

• Validación en tiempo real desde el primer momento que el usuario abandona un campo.
• Los mensajes de error aparecen debajo del campo afectado, no en alertas separadas.
• Los formularios de más de cinco campos se dividen en pasos con indicador de progreso.
• El botón de envío se desactiva visualmente durante el procesamiento.

Listas y búsqueda

• Los filtros rápidos con seis opciones o menos usan chips con scroll horizontal, no menú desplegable.
• Las listas se actualizan con gesto pull-to-refresh explícito, no de forma automática mientras el usuario hace scroll.
• Los estados vacíos muestran un ícono de 80dp, un título descriptivo y, cuando aplica, una acción para comenzar.

Estados de pantalla

Toda pantalla que consulte datos remotos debe manejar estos cuatro estados de forma explícita:

Estado	Descripción visual
Cargando	Indicador circular en color primary, tamaño 42dp
Vacío	Ícono 80dp en onSurfaceVariant, título headlineSmall, mensaje descriptivo
Error	Ícono 80dp en error, mensaje humanizado, botón de reintento
Con datos	Contenido normal de la pantalla

Los mensajes de error nunca exponen detalles técnicos al usuario (códigos HTTP, stack traces). El mensaje debe describir qué falló y qué puede hacer el usuario.

Notificaciones

• El badge de notificaciones muestra el conteo de elementos no leídos.
• Las notificaciones no leídas tienen fondo diferenciado en la lista.
• Al interactuar con una notificación, la navegación lleva directamente al contexto relacionado.

Accesibilidad

Contraste mínimo (WCAG AA)

Caso	Ratio mínimo
Texto normal (menos de 18px)	4.5:1
Texto grande (18px o más) o negrita de 14px o más	3:1
Elementos UI y gráficos informativos	3:1

Combinaciones verificadas del sistema:

Combinación	Ratio	Estado
onSurface (#1A1C1E) sobre surface (#FFFFFF)	~19.5:1	Aprobado
onPrimary (#FFFFFF) sobre primary (#FF7043)	~3.2:1	Aprobado para texto grande e íconos

Áreas táctiles

El área táctil mínima de cualquier elemento interactivo es 48×48dp. Cuando el área visual del elemento es menor, el área de toque se expande de forma transparente.

Texto alternativo

• Los íconos con significado informativo requieren una etiqueta semántica.
• Las imágenes puramente decorativas se excluyen del árbol de accesibilidad.
• Los estados (chips, badges) deben ser legibles por lectores de pantalla (TalkBack / VoiceOver).

Animaciones y Transiciones

Principios

Las animaciones comunican estado o jerarquía. No son elementos decorativos. Una animación que no transmite información no debe existir.

Tipo	Duración	Curva
Micro-interacciones (tap, foco)	150–300ms	EaseInOut
Transiciones de pantalla	300–500ms	EaseInOut
Entradas de bienvenida / splash	800ms	ElasticOut

Reglas de animación

• No se anima texto que cambie de valor en tiempo real (contadores, cronómetros).
• No se aplican animaciones a cada ítem de una lista larga; solo al contenedor.
• Se respeta la preferencia del sistema operativo para reducir movimiento (prefers-reduced-motion).

Patrones Prohibidos

Los siguientes patrones están fuera del sistema y no deben usarse en ningún producto.

Visuales

Prohibido	Alternativa
Fondo de pantalla completa en naranja u otros colores vibrantes	Fondo surface (#FFFFFF) con acentos de color
Más de un botón primario visible a la vez	Un botón primario + uno secundario como máximo
Colores hardcodeados en código de producción	Solo tokens del sistema
Colores de estado personalizados (verde propio, rojo propio)	Solo los tokens semánticos del sistema

De experiencia

Prohibido	Alternativa
Overlay de carga que bloquea toda la pantalla en operaciones de fondo	Indicador contextual en el área afectada
Solicitar todos los permisos al inicio de la aplicación	Solicitar en el contexto de uso, con justificación
Formularios de más de cinco campos en una sola pantalla	Stepper de múltiples pasos
Mensajes de error técnicos al usuario	Mensajes humanizados con acción de reintento
Navegación que descarta formularios sin confirmación	Diálogo de confirmación antes de descartar cambios

Resumen

• El Design System de GM Transport define tokens de color, tipografía, espaciado y componentes como la única fuente de verdad visual para todos los productos.
• La paleta primaria es naranja (#FF7043) sobre blanco, con azul para información y verde para estados exitosos. No se crean variantes fuera del sistema.
• Las dos familias tipográficas son Poppins (títulos y navegación) e Inter (cuerpo y datos). El tamaño mínimo legible es 12sp.
• Todo espaciado interno usa múltiplos de 4dp; la separación entre componentes usa múltiplos de 8dp.
• Toda pantalla con datos remotos maneja cuatro estados obligatorios: cargando, vacío, error y con datos.
• El área táctil mínima de cualquier elemento interactivo es 48×48dp. Los contrastes WCAG AA son un requisito, no una recomendación.
• Los patrones prohibidos (colores hardcodeados, overlays bloqueantes, errores técnicos expuestos al usuario) están excluidos del sistema sin excepciones.