PALETA DE COLOR
Todos los colores definidos como tokens CSS. Usar siempre los tokens, nunca valores hex directos en componentes.
Pac-Man
#FFD700
--color-pacman
Primary
#2A3FE5
--color-primary
Secondary
#F4B9B0
--color-secondary
Surface
#000000
--surface-base
Success
#16A34A
--color-success
Warning
#D97706
--color-warning
Danger
#DC2626
--color-danger
Info
#0891B2
--color-info
Colores de fantasmas — uso decorativo exclusivo en avatares y juegos:
👻
BLINKY
#FF0000 — ghost-blinky
👻
PINKY
#FFB8FF — ghost-pinky
👻
INKY
#00FFFF — ghost-inky
👻
CLYDE
#FFB847 — ghost-clyde
TIPOGRAFÍA
Press Start 2P para headlines y UI de juego. Space Mono para cuerpo, labels y datos.
Los reps de ventas que completan retos diarios suben su nivel y desbloquean recompensas. El sistema gamificado aumenta la motivación hasta un 34%.
PUNTOS TOTALES · NIVEL ACTUAL · RACHA DIARIA
v1.0.0 · INSERT COIN · PRESS START
SPACING — 8pt GRID
Escala basada en múltiplos de 8px. Nunca usar valores fuera de la escala.
space-1 = 8px — micro gaps, iconos inline
space-2 = 16px — padding de componentes compactos
space-3 = 24px — padding de cards, entre items de lista
space-4 = 32px — secciones internas, page padding
space-6 = 48px — separación entre bloques mayores
space-10 = 80px — separación entre secciones de página
BOTONES
Todos los botones requieren min-height 44px (touch target WCAG). Focus-visible siempre visible con outline 3px.
Variantes principales
Tamaños
Estado deshabilitado
BADGES
Indicadores de estado y categoría. Siempre con borde, nunca relleno sólido opaco.
LIVE
Activo
En Progreso
Bloqueado
Nivel 5
Inactivo
INKY MODE
CARDS
Tres variantes: default, dotted (retro signature), y glow (highlight state).
12.847
Puntos acumulados
▲ +23% vs ayer
Cierra 5 deals esta semana
Progreso
3 / 5
Recompensa: +2.500 pts + badge exclusivo
👻
SARAH K.
Sales Lead · Madrid
47.200 pts · 3 retos completados · Nivel 12
▲ #1 del equipo esta semana
FORMULARIOS
Inputs con estados claros: default, focus (glow azul), error, success. Siempre label visible.
Máximo 280 caracteres
ALERTAS
Sistema de notificaciones contextual. Borde izquierdo grueso como indicador semántico de tipo.
🏆
RETO COMPLETADO
Sarah K. ha completado "Cierra 5 deals esta semana" y ganado 2.500 puntos extra. ¡Nuevo récord personal!
⚠️
RACHA EN RIESGO
Llevas 6 días de racha. Completa al menos una acción hoy antes de las 23:59 para no perder tus puntos bonus.
💀
RACHA PERDIDA
Tu racha de 12 días ha terminado. Puedes recuperarla con un "Revive Token" (500 pts) desde tu inventario.
ℹ️
NUEVO RETO DISPONIBLE
El reto "Pac-Man Mode: 10 llamadas en un día" estará activo hasta el viernes. Recompensa: 5.000 pts + insignia exclusiva.
BARRAS DE PROGRESO
Barras de salud estilo arcade. Usar color semántico según estado del indicador.
XP NIVEL ACTUAL
8.400 / 10.000
OBJETIVO MENSUAL
€ 42.000 / € 50.000
RETOS COMPLETADOS
17 / 25
TIEMPO RESTANTE — RETO URGENTE
6h / 24h
LEADERBOARD
Tabla de ranking. Top 3 con color diferenciado. Hover state con fondo sutil.
| # |
Rep |
Equipo |
Pts. semana |
Retos |
Racha |
Estado |
| 🥇 1 |
Sarah K. |
Norte |
12.847 |
7 / 7 |
🔥 14 días |
Activo |
| 🥈 2 |
Carlos M. |
Sur |
11.203 |
6 / 7 |
🔥 9 días |
Activo |
| 🥉 3 |
Elena R. |
E-Com |
9.780 |
6 / 7 |
🔥 6 días |
Activo |
| 4 |
Ahmed B. |
Norte |
8.445 |
5 / 7 |
3 días |
En reto |
| 5 |
Marta P. |
Sur |
7.120 |
4 / 7 |
1 día |
Bloqueado |
ACCESIBILIDAD — WCAG 2.2 AA
Ratios de contraste verificados. Mínimo 4.5:1 para texto normal, 3:1 para texto grande y UI.
Pacman / Negro
Ratio 19.1:1
✓ AAA
Blanco / Negro
Ratio 21:1
✓ AAA
Success Light / Negro
Ratio 8.9:1
✓ AAA
Primary / Negro
Ratio 4.8:1
✓ AA
Text Secondary / Negro
Ratio 4.7:1
✓ AA
Text Muted / Negro
Ratio 2.4:1 — solo decorativo
✕ Decorativo
REGLAS DE ACCESIBILIDAD
- ✓ Focus-visible MUST ser visible con outline 3px en todos los elementos interactivos
- ✓ Touch targets MUST ser ≥ 44×44px (botones, inputs, checkboxes)
- ✓ Animaciones MUST respetar prefers-reduced-motion: disable all non-essential motion
- ✓ Color alone MUST NOT convey meaning — siempre acompañar de icono o texto
- ✓ ARIA labels MUST estar en todos los iconos interactivos sin texto visible
QA CHECKLIST
Ejecutar en cada code review antes de merge a main. Todos los ítems son testables en implementación.
TOKENS & FUNDAMENTOS
- ✓Todos los colores usan CSS tokens, no valores hex directos
- ✓Spacing en múltiplos de 8px únicamente
- ✓Tipografía usa Press Start 2P o Space Mono exclusivamente
- ✓Sin mezcla de metáforas visuales (solo retro arcade)
- □Dark mode tokens definidos (v2.0)
COMPONENTES & A11Y
- ✓Focus-visible visible en todos los interactivos
- ✓Touch targets ≥ 44px en mobile
- ✓Contraste AA mínimo en textos funcionales
- ✓Estados: default/hover/focus/active/disabled
- ✓prefers-reduced-motion aplicado a animaciones