pippygames/docs/platform/visual-design.md

# Exploración visual — games2

**Estado: propuesta no aprobada.** La portada actual es un prototipo exploratorio y este documento no establece la identidad visual, los tokens ni criterios obligatorios para el equipo. El sistema de diseño y tokens se definirá en un paso posterior.

## Carácter

Juegoland es una **mesa compartida**: acogedora, clara y contemporánea. La interfaz debe invitar a volver a jugar con otras personas sin parecer un casino, una aplicación de apuestas ni un producto exclusivo para niños. El juego aporta la fantasía; la plataforma aporta orientación, confianza y continuidad.

Tres decisiones reconocibles sostienen la identidad: un plano violeta profundo para el momento de encuentro; piezas geométricas de tablero, carta y dado dibujadas con superficies planas y sombras cortas; y tipografía contundente con mucho espacio para leer. La ilustración nunca representa una partida real ni promete juegos que aún no estén publicados.

## Valores del prototipo (no son tokens oficiales)

La tabla describe únicamente la pantalla exploratoria existente. Ningún nombre, color o medida se adopta como contrato del futuro sistema de diseño.

| Token | Valor inicial | Uso |
| --- | --- | --- |
| `canvas` | `#F5F4EF` | Fondo general; evita superficies oscuras continuas. |
| `paper` | `#FFFFFF` | Contenido, formularios y superficies de lectura. |
| `ink` | `#252241` | Texto principal. |
| `muted` | `#5E6072` | Texto secundario, nunca información crítica con bajo contraste. |
| `violet` | `#392777` | Superficie de marca y navegación principal. |
| `violet-deep` | `#2C1D63` | Profundidad de las piezas y variantes de interacción. |
| `coral` | `#F07860` | Pieza decorativa y acentos puntuales; **no** equivale a error. |
| `gold` | `#F8B951` | Acción principal sobre violeta y ficha ilustrada. |
| `mint` | `#D4E8D2` | Tableros y superficies secundarias ilustradas. |
| `line` | `#DEDDD8` | Separadores y bordes discretos. |

Los colores de éxito, advertencia, error y protección son semánticos y se validan por contraste sobre su superficie; no se deducen de las piezas de marca. Ningún estado depende solo del color: siempre lleva texto o icono con nombre accesible. El violeta ocupa una superficie importante por vista; el resto permanece sobrio. Se prohíben gradientes decorativos repetidos, neón, fichas de casino, monedas, trofeos de retención y muros de tarjetas idénticas.

Se utiliza **Manrope Variable** servida desde el propio frontend, con fallbacks de sistema. Una sola familia evita cambios arbitrarios entre pantallas. Títulos entre 40–105 px según contexto, cuerpo base 16–17 px, texto explicativo 18–21 px, etiquetas al menos 13–14 px y altura de línea de lectura 1,45–1,6. La jerarquía se construye con tamaño, peso y espacio; no con mayúsculas espaciadas ni una etiqueta ornamental encima de cada título. El contenido corriente limita la línea a unas 65–75 letras.

El logotipo usa una única base violeta con tres piezas geométricas. Su nombre se escribe `juegoland` en minúsculas. La marca de un juego puede tener arte propio, pero no sustituye la navegación ni los controles de seguridad de la plataforma.

## Composición y componentes

- **Página:** ancho máximo de 1540 px, margen interior fluido, lectura alineada a la izquierda. Nunca se fija el ancho de toda la app al tablero. La portada separa entrada y catálogo; una sala separará información de personas, estado de partida y acciones.
- **Móvil primero:** navegación, catálogo, diálogos y configuración funcionan desde 320 CSS px, con teclado virtual, cambio de orientación y zoom al 200 %. A 760 px la portada pasa a una columna; la escena visual queda después del mensaje. Los controles esenciales no desaparecen por falta de espacio.
- **Acciones:** primaria rellena y descriptiva; secundaria de contorno; destructiva claramente diferenciada y acompañada de texto. El área táctil objetivo de producto es de al menos 44 × 44 CSS px. El foco visible atraviesa todos los controles, incluidos los de un juego.
- **Tarjetas de juego:** portada del paquete, título, resumen y jugadores. El estado de disponibilidad es explícito. No se presenta una ilustración genérica como portada oficial de un juego. El catálogo vacío explica qué ocurrirá; fallo de red indica cómo reintentar.
- **Sala y partida:** la cabecera de plataforma mantiene identidad, salir, ayuda, conexión y permisos. El juego puede ocupar el espacio central y variar su arte sin recolorear confirmaciones, avisos o moderación. Estado pendiente, confirmado y reconectando son distintos. Ninguna animación adelanta visualmente una transición aún no confirmada por el servidor.
- **Diálogos:** tamaño adecuado a viewport, contenido desplazable y foco contenido. En móvil se prioriza una hoja o pantalla completa cuando el formulario no cabe; nunca una ventana de escritorio comprimida.

Los componentes son tokens y patrones de interacción, no una biblioteca de tarjetas intercambiables. Una nueva pantalla debe explicar su acción primaria y su estado sin depender de la ilustración.

## Arte, recursos y movimiento

La ilustración de plataforma usa SVG/CSS y formas legibles (tablero, carta, dado, ficha) con un único propósito visual por escena. Cada paquete de juego proporciona `cover`, `thumbnail` e `icon`, según el [formato del motor](../game-engine/format-and-protocol.md). Para catálogo se adopta relación 4:3: portada recomendada de al menos 1200 × 900 px, miniatura de 640 × 480 px e icono cuadrado de 256 × 256 px; el publicador generará variantes optimizadas y comprobará peso, recorte, licencia y contraste con el texto superpuesto. El texto esencial no debe ir incrustado en la imagen. Si la imagen contiene texto significativo, se entrega una variante por idioma. Cada arte informativo tiene alternativa textual traducida; el puramente decorativo se oculta a tecnologías de asistencia.

El cambio de estado se narra en tres momentos: **antes**, la acción muestra que se ha enviado o está pendiente; **durante**, la animación representa únicamente un estado confirmado; **después**, resultado y siguientes acciones son legibles sin depender del movimiento. El plan de presentación del motor coordina efectos y marcadores, pero no altera reglas ni orden de confirmación. Las microtransiciones de interfaz se mantienen breves (aprox. 120–240 ms); las animaciones de juego requieren límite, cancelación o salto y una alternativa con movimiento reducido. El sonido parte desactivado hasta una acción explícita y ofrece volumen y silencio accesibles.

## Seguridad y lenguaje

La protección de menores forma parte de todas las vistas. Una sala protegida muestra claramente que la comunicación está desactivada; no se dibuja un chat bloqueado como invitación a verificar un teléfono. Bloquear, reportar, salir y pedir ayuda conservan acceso visible. Las señales de seguridad usan palabras comprensibles y no exponen a otras personas la causa privada de una restricción. No se usan rachas, cuentas atrás persuasivas ni recompensas por permanencia.

La interfaz escribe acciones concretas, en tono breve y cercano. El mismo verbo nombra botón, estado y confirmación. Los errores dicen qué sucedió y qué puede hacer la persona. Todo texto, alternativa, etiqueta, notificación y regla visible sigue la [política de idiomas](localization.md); se deja espacio para expansión y escrituras futuras de derecha a izquierda.

## Criterio de aceptación

Una vista se considera diseñada cuando dispone de estados de carga, vacío, error, permiso y reconexión pertinentes; funciona con teclado, lector de pantalla, zoom y movimiento reducido; se revisa en 320, 375, 768 y 1440 CSS px; y se prueba con textos traducidos más largos. El objetivo es [WCAG 2.2 AA](https://www.w3.org/TR/WCAG22/). Para imágenes se siguen las [pautas WAI sobre alternativas](https://www.w3.org/WAI/tutorials/images/). La tipografía [Manrope se distribuye con licencia OFL-1.1](https://fontsource.org/fonts/manrope/about).