Guía de estilo
Un solo color de marca, mucho contraste y números grandes. El verde marino es la marca; el riesgo nunca usa verde.
Color de marca
brand-900
#072E28
Fondos oscuros, navegación nocturna
brand-700
#0B5247
Presionado, encabezados
brand-600
#0F6B5C
Color principal
brand-500
#13896F
Hover, acentos
brand-100
#E3F2EE
Fondos suaves, chips
Neutros
ink
#111418
muted
#5B6470
line
#E2E5E8
canvas
#F6F7F7
white
#FFFFFF
Escala de riesgo
Para el mapa de calor, la ruta y las alertas. Va de verde (riesgo bajo, zona segura) a rojo (riesgo alto), pasando por amarillo y naranja.
brand-500 (riesgo bajo)
#13896F
risk-yellow
#F2C94C
risk-orange
#E8833A
risk-red
#D64545
Tipografía
Inter para la interfaz. Barlow Condensed en peso grueso para métricas: tiempo, distancia, velocidad y Safety Score.
Llega seguro
Rutas pensadas para ti
Texto base de 16 px para lectura rápida antes de salir.
Texto secundario de 14 px, para detalles y apoyo.
Etiqueta de métrica
Tiempo
Velocidad
Distancia
Botones
Altura mínima de 48 px (56 px en acciones principales).
Chips y badges
Safety Score
80 a 100 usa el verde de marca, 60 a 79 naranja y menos de 60 rojo.
Tarjetas
Tu mes
Recorridos
Rodadas
Bache a 150 m
Carril derecho, Av. Morones Prieto.
Accidente adelante
Av. Constitución y Zaragoza.
Barra inferior
Cinco pestañas. Comenzar es el botón central destacado.
Estados
Aún no tienes reportes
Cuando reportes algo en el camino aparecerá aquí con su estado.
Cargando
No pudimos cargar esto
Revisa tu conexión e inténtalo de nuevo.