Guía completa de marca: identidad visual, voz, tono, estilo de escritura, componentes y accesibilidad.
01 — Misión
Qué es trafico.live
Plataforma de inteligencia vial en tiempo real para España. Datos oficiales de la DGT actualizados cada 60 segundos.
Para quién
Viajeros personales y transportistas profesionales. Desde el conductor que planifica su ruta de vacaciones hasta el gestor de flotas que necesita alertas en tiempo real.
Qué ofrecemos
Incidencias, cámaras DGT, radares, precios de combustible, cargadores eléctricos, ZBE, restricciones y operaciones especiales. Todo en un solo lugar.
Por qué existimos
La información vial en España está fragmentada. trafico.live la unifica, la actualiza y la hace accesible para cualquier conductor.
Principio fundacional: Lideramos con datos, no con opiniones. Cada número en la plataforma viene de una fuente oficial verificable.
02 — Sistema de logo
3 Puntos + trafico + .LIVE badge
El logotipo tiene tres componentes: el icono (3 puntos de semáforo), el wordmark (“trafico” en Exo 2 800) y el badge (.LIVE). Juntos forman el lockup.
Primary lockup — light
Primary lockup — dark
trafico
.LIVE
Stacked
trafico.LIVE
Inline
Icon only
Clear space: Mínimo 1d (un diámetro de punto = 24px a tamaño base) en todos los lados. Ningún elemento puede invadir esta zona.
Uso correcto
trafico
✓ Colores correctos, proporción correcta
trafico
✗ Nunca un solo color en los 3 puntos
✓ Siempre rojo arriba, ámbar centro, verde abajo
✗ Nunca invertir el orden
trafico.LIVE
✓ Badge siempre con punto blanco + .LIVE
trafico.live
✗ Nunca “.live” como texto plano
03 — Color
Sistema de color
Paletas OKLCH de 11 pasos con contraste WCAG AA+ validado. Los colores de señal del icono son los mismos que se usan en la interfaz para estados semánticos.
Signal Blue — Primary
50
100
200
300
400
500
600
700
800
900
950
Signal Amber — Accent
50
100
200
300
400
500
600
700
Signal Colors
#dc2626 Red
#d97706 Amber
#059669 Green
Regla: Siempre usar tokens tl-* y tl-amber-*. Nunca hex hardcodeado en componentes. Nunca colores genéricos de Tailwind (blue-500, amber-600).
04 — Tipografía
Sistema tipográfico
Tres familias con roles claros. Exo 2 para impacto, DM Sans para legibilidad, JetBrains Mono para datos.
HEADINGS
Aa Bb
Tráfico en tiempo real
Exo 2 — 500, 600, 700, 800
BODY
Aa Bb Cc
Datos oficiales de la DGT actualizados cada 60 segundos.
DM Sans — 400, 500, 600
DATA
1.284 €
40.4168°N 3.7038°W
JetBrains Mono — 400, 500
Escala tipográfica
48pxHeadline 1
36pxHeadline 2
24pxHeadline 3
20pxHeadline 4
16pxBody text — párrafos, descripciones, contenido principal.
14pxSmall text — labels, captions, metadata.
12pxTiny — badges, timestamps, legal.
Nunca usar: Inter, Roboto, Arial, Geist, Space Grotesk, Helvetica, system-ui en UI visible.
05 — Voz y tono
Cómo habla trafico.live
Nuestra voz es constante (quiénes somos), nuestro tono se adapta al contexto (cómo lo decimos según la situación).
Personalidad
Directa
Lideramos con el dato, no con la explicación. El número primero, el contexto después.
Segura
Hablamos con autoridad porque tenemos los datos. Fuentes oficiales, actualización constante.
Accesible
Lenguaje claro para todos: desde el conductor ocasional hasta el gestor de flotas profesional.
Útil
Cada frase debe ayudar a tomar una decisión. Si no añade valor, no se dice.
Espectro de tono
Situación
Tono
Ejemplo
Alerta crítica
Urgente, claro
“Corte total AP-7 km 342. Retenciones de 12 km. Alternativa: N-340.”
Dato normal
Neutro, factual
“47 incidencias activas. 892 cámaras operativas.”
Buen estado
Positivo, breve
“Tráfico fluido en todas las vías principales.”
Explicación
Didáctico, cercano
“Las ZBE restringen el acceso según tu distintivo ambiental.”
Error/no data
Honesto, breve
“Sin datos disponibles para esta zona. Fuente DGT no responde.”
Sí / No
✓ Así sí
“47 incidencias activas en la red de carreteras.”
“Diésel desde 1.284 €/L en MURCIA.”
“Datos DGT actualizados hace 23 segundos.”
✗ Así no
“¡Ojo! Parece que hay bastantes incidencias hoy...”
“El precio del diésel está por las nubes ↑↑↑”
“Nuestros datos son los mejores del mercado.”
06 — Estilo de escritura
Reglas de formato y redacción
Regla
Correcto
Incorrecto
Números siempre en cifra
3 incidencias, 47 cámaras
Tres incidencias, cuarenta y siete
Precios: mono, 3 decimales
1.284 €/L
1,28€ o “uno veintiocho”
Horas: formato 24h
14:30, 08:00
2:30 PM, 8 de la mañana
Atribución de datos
“Fuente: DGT”, “Datos MINECO”
Sin atribución
Carreteras: mayúsculas
AP-7, A-2, N-340, M-30
ap-7, la autopista 7
Coordenadas: grados
40.4168°N, 3.7038°W
Cerca de Madrid
Fechas: formato español
25 mar 2026, 25/03/2026
Mar 25, 2026 o 03/25/2026
Idioma: español natural
Zona de Bajas Emisiones
Low Emission Zone
Marca: siempre minúscula
trafico.live
Trafico.Live, TRAFICO.LIVE
.live: siempre badge
.LIVE
.live como texto plano
Tono general: Escribimos como hablaría un copiloto experto — conciso, preciso, útil. Nunca como un vendedor, nunca como una máquina.
07 — Componentes
UI Kit de referencia
NAVEGACIÓN
trafico.LIVE
MapaCarreterasCombustibleAlertasProfesional
BOTONES
BADGES DE SEÑAL
FluidoObrasIncidencia
TARJETAS DE DATOS
Incidencias
47
Cámaras DGT
892
Diésel mín.
1.284 €
Cargadores EV
3.241
TARJETA INFORMATIVA
Operación retorno activa
Restricciones en la AP-7 y A-2 para vehículos pesados.
Alta densidad14:32
08 — Accesibilidad
WCAG 2.1 AA mínimo
trafico.live es una herramienta de seguridad vial. La accesibilidad no es opcional — es parte de nuestra misión.
Estándar
Requisito
Contraste texto
4.5:1 mínimo para texto normal, 3:1 para texto grande (≥18px bold)
Contraste UI
3:1 para bordes, iconos y controles interactivos
Touch targets
44×44px mínimo en móvil
Focus states
Visible en todos los elementos interactivos (teclado)
Reducción movimiento
prefers-reduced-motion: desactiva TODA animación Motion/GSAP
Color no suficiente
Nunca usar solo color para transmitir información — añadir texto o icono
Imágenes
Alt text descriptivo en todas las imágenes
Formularios
Labels visibles en todos los inputs. Error messages descriptivos.
Iconos
Lucide React con aria-label cuando son funcionales
Idioma
<html lang="es"> siempre declarado
Regla de oro: Si un usuario con daltonismo no puede distinguir una alerta de un estado normal, hemos fallado. Siempre: color + texto + icono.