Broadcast Cyber-Athletic
Un design system para un tracker de Rocket League con estética broadcast cyber-athletic: dark, denso, high-contrast e information-forward. Cada píxel tiene un propósito.
Cuatro pilares, cero distracción
RL Stats no es una app para "ver estadísticas". Es una herramienta para entender tu rendimiento en milisegundos. El design system prioriza la velocidad de lectura y la densidad de información sin sacrificar claridad.
Dark First
El fondo oscuro no es una opción de tema: es la base. Reduce la fatiga visual en sesiones largas y hace que los datos brillen. Todo el sistema está diseñado para funcionar primero en dark.
Data Density
Un jugador de Rocket League necesita ver goles, asistencias, saves, shots y MVP en un solo vistazo. La densidad de información es una feature, no un bug. Grids tight, padding mínimo, datos primero.
Real-time Feedback
Las animaciones no son decorativas: comunican estado. Un pulse indica live, un flash indica cambio de score, un slide indica nuevo evento. Cada movimiento tiene un significado funcional.
Privacy by Design
Los datos del usuario nunca salen de su máquina. El diseño refuerza esa promesa: sin login walls, sin banners de cookies, sin tracking. La interfaz respeta la privacidad sin fricción.
Color con función
La paleta de RL Stats está optimizada para legibilidad en pantallas oscuras y transmisión en streaming. Cada color tiene un trabajo específico: el azul identifica, el verde gana, el rojo pierde, el naranja advierte.
WCAG AA Pass
Todos los contrastes superan 4.5:1. El texto primario #F8FAFC sobre #0A0E17 alcanza 16.5:1. El azul de acento #3B82F6 sobre fondo oscuro pasa con 5.2:1.
Semantic Colors
Verde y rojo nunca se usan solos para comunicar estado. Siempre acompañados de ícono o texto para usuarios con daltonismo.
Tres familias, tres roles
Space Grotesk para impacto visual en números y títulos. Sora para lectura prolongada de stats y etiquetas. JetBrains Mono para datos tabulados y códigos. La jerarquía se construye con peso y tamaño, nunca con familias mezcladas al azar.
Rocket League Stats
Space Grotesk Bold · 700Piezas de alta fidelidad
Los componentes de RL Stats están diseñados para escenarios de alta densidad: cards de partido con score visible a 3 metros, badges que comunican estado en 200ms, tablas sorteables sin perder contexto.
Cards
Badges
Buttons
Player Stats Table
| Jugador | Score ↓ | Goals | Assists | Saves | MVPs |
|---|---|---|---|---|---|
| #1Fairy Peak | 1240 | 342 | 189 | 412 | MVP67 |
| #2Kaydop | 1180 | 298 | 210 | 380 | 54 |
| #3Turbo | 1150 | 310 | 175 | 395 | MVP61 |
| #4JSTN | 1320 | 380 | 150 | 320 | MVP72 |
Search Input
Movimiento con significado
En RL Stats, una animación que no comunica estado es una animación que sobra. Cada movimiento responde a un evento real: un gol, un cambio de ranking, una conexión en vivo.
Score Change
Scale + flash azul. Usado cuando cambia el score de un partido. La atención del usuario se dirige automáticamente al dato que mutó.
Event Feed Entry
Slide desde la derecha + fade. Cada nuevo evento entra con dirección, indicando progreso temporal. Ideal para feeds de partido en vivo.
Live Pulse
Pulso sutil en el indicador de estado. Comunica "esto está pasando ahora" sin distraer del contenido principal.
Card Hover
translateY(-4px) + shadow intensificado. Indica interactividad sin cambiar el layout. El feedback es inmediato y sutil.
Rendimiento para todos
Un dashboard de estadísticas debe ser usable a las 3 AM con sueño, a 2 metros de distancia en streaming, y con un lector de pantalla. El sistema cumple WCAG 2.1 AA por diseño, no por compromiso.
Contraste que no negocia
Texto primario #F8FAFC sobre fondo #0A0E17: ratio 16.5:1. El azul de acento #3B82F6 sobre fondo oscuro: 5.2:1. Todos los contrastes superan 4.5:1 sin excepciones. Si no pasa, no se usa.
Reduced Motion por defecto
Si el usuario prefiere reduced motion, todas las animaciones se reducen a fades instantáneos o desaparecen. El badge Live pasa a un estado estático sólido. La información nunca se pierde.
Navegación por teclado completa
Tab order lógico, focus rings de 2px en acento #3B82F6, atajos de teclado para sorting de tablas (S para score, G para goals, A para assists). Todo navegable sin mouse.
El sistema es la base
Este design system alimenta una app desktop completa: tracking en tiempo real, análisis de replays, comparativas de rendimiento y exportación de datos. Si querés ver cómo se aplica en el producto final, el case study tiene todo el recorrido.