El arte lleva la historia.
Conservar fondos, transparencias y coordenadas de las escenas. Escalar el escenario como conjunto; no mover a Stella para acomodar un botón.
EL MUNDO TIENE CARÁCTER. LA INTERFAZ LO RESPETA.
Una señal.
Una identidad.
Todo ACE.
El libro de estilo de Ace: Cosmic Defender. Arte de aventura, herramientas claras y decisiones que se pueden ver, probar y conservar.
Cómo leer este libro
EN EL JUEGO documenta la versión entregada. CRITERIO fija reglas editoriales adoptadas para conservarla. PENDIENTE no es un recurso ni una función que ya exista. Las etiquetas del juego se muestran en inglés; las explicaciones, en español.
01 / DIRECCIÓNAventura en el arte.
Aventura en el arte.
Calma en los controles.
La estética viene del proyecto: personajes expresivos, el Chevy rojo, cielo cósmico, aventura retrofuturista y viñetas montadas por capas. La interfaz no debe competir con esa puesta en escena.
Elegir no es ejecutar.
Human / AI elige el controlador. Play AI entrega el control. Reiniciar pide confirmación. Un clic exploratorio no debe destruir una partida.
Menos ruido, no menos juego.
Editor, ajustes y aprendizaje siguen disponibles. Analysis es un inspector; Animated / Quick permanece a mano porque determina el ritmo de la sesión.
Una acción principal cálida, herramientas reconocibles, feedback breve y navegación estable.
Una ilustración por botón, diez colores compitiendo o paneles que empujan el escenario cuando aparecen.
02 / IDENTIDAD
La cara de la aventura.
El emblema completo identifica al juego. El retrato recortado identifica una pestaña o una firma compacta. Son dos usos del mismo original, no dos estilos nuevos.
Cuadrado completo, sin recorte y con su fondo oscuro original. WebP de 400 y 800 px; PNG original conservado a 1254 × 1254.
PNG original · WebP 800
FIRMA DE APLICACIÓN
ACECOSMIC DEFENDERRetrato + título HTML. Firma práctica de cabecera; no se presenta como un nuevo logo horizontal ilustrado.
Espacio y tamaños
CRITERIO V8 Dejar un margen libre exterior de al menos el 8 % de la anchura del emblema. Usarlo a 160 px o más siempre que el espacio lo permita. La portada móvil utiliza una excepción compacta de 132 px, sin información esencial dependiente de sus detalles.
Para 16–64 px, utilizar el retrato; no comprimir todas las letras y estrellas del emblema. Estos límites son decisiones del proyecto, no mínimos de una norma externa.
Fondo y legibilidad
El PNG elegido no tiene fondo transparente útil: su placa oscura forma parte de la imagen. En fondos claros se presenta como una pieza delimitada; no se simula un recorte con mezclas de color que alteren piel o letras.
La marca no sustituye etiquetas, nombres accesibles ni controles. Nunca convertir el rostro en el único modo de saber qué hace un botón.
PENDIENTE Recorte transparente fino, marca monocroma y logo horizontal ilustrado requieren una adaptación específica y revisión visual. No se incluyen como variantes supuestamente terminadas. Tampoco hay un PWA: un icono táctil no convierte el juego en una aplicación instalable.
03 / COLORNo es decoración.
No es decoración.
Es información.
Los nueve tokens siguientes proceden de mini.css. La guía los utiliza directamente. Pulsa un valor para copiarlo; si el navegador bloquea el portapapeles, el valor sigue visible.
Deep space
--ace-inkFondo principal
Cabin
--ace-panelSuperficie de panel
Starlight
--ace-paperTexto principal
Mist
--ace-mutedTexto secundario
Afterburner
--ace-accentAcción principal
Bulkhead
--ace-lineSeparadores; no es color de texto
Signal
--ace-mintComunicaciones
Workshop
--ace-toolHerramientas
Selected
--ace-selectedFondo de selección
La paleta operativa
Naranja: avanzar, confirmar o reanudar. Cian: herramientas, especialmente el editor. Marfil: contenido principal. Menta: comunicaciones. Una selección combina borde, fondo y estado semántico: el color no trabaja solo.
El tono de peligro existente es #ffbdac, con borde #c78676; se reserva a confirmaciones destructivas. No se usa como decoración del menú.
Contraste comprobable
Estos son cálculos de pares sólidos, no una certificación de toda la interfaz. El texto normal de referencia necesita 4.5:1; el texto grande admite 3:1 según su definición en WCAG. Las imágenes y los estados requieren comprobar su fondo efectivo. [3]
| Par | Relación |
|---|---|
| Paper / Ink | 15.35:1 |
| Muted / Panel | 8.61:1 |
| Primary text / Accent | 9.41:1 |
| Tool / tool surface | 8.69:1 |
04 / TIPOGRAFÍA Y ESPACIODos voces.
Dos voces.
La misma aventura.
The stars took Stella.
Texto claro, frases breves, títulos compactos. La familia declarada es Inter con sustitución del sistema; no se distribuyen archivos de fuentes y su disponibilidad depende del navegador.
INCOMING TRANSMISSION
“Hey, dream big
or stay grounded.”
La voz gráfica del prólogo se conserva. Sus escalas viven dentro de la composición de 1600 × 740, no se reemplazan por los tamaños de una tarjeta administrativa.
Jerarquía útil
| Botones | 13–14 px; 44–46 px de alto |
|---|---|
| Texto principal | 15–16 px; interlineado 1.55–1.7 |
| Ayuda breve | 12–14 px, nunca única instrucción crítica |
| Metadatos | 9–11 px; uso secundario |
| Título de misión | clamp(29px, 3vw, 44px) |
Ritmo, no huecos arbitrarios
CRITERIO Usar 4 / 8 / 12 / 16 / 24 / 32 / 48 px como escala orientativa en los nuevos componentes. El juego heredado contiene otros valores: esta edición no los normaliza silenciosamente.
481216243248
Reducir márgenes antes que encoger el arte. Reservar la fila de navegación del prólogo y los pies de los diálogos. El contenido largo desplaza su interior, no las acciones.
05 / CONTROLESEl botón cuenta
El botón cuenta
lo que va a pasar.
Los botones de acción principal y secundaria de esta muestra usan las clases del juego. Hover y foco pueden probarse; las muestras forzadas de estado se etiquetan como tales.
Human / AI
Son estados. AI queda preparado y espera Play AI. Volver a Human cancela pasos automáticos. Las flechas mueven el foco; Enter o Espacio seleccionan.
Animated / Quick
Selector persistente junto al control de la partida, también en móvil. Quick usa las reglas aleatorias existentes; no equivale a reproducir el mismo combate sin animación. Se cambia entre encuentros.
Ace / Stella
Selector junto al retrato, bloqueado antes del rescate y durante encuentros. La razón se puede leer sin hover. Cambiar de piloto no reinicia el mapa.
Objetivo práctico para nuevos botones: 44 × 44 CSS px o más. WCAG 2.2 AA establece 24 × 24 px o una separación que cumpla su excepción; 44 px es el objetivo más cómodo adoptado aquí, no una afirmación de que toda la interfaz ya cumpla todos los criterios. [4]
06 / LABORATORIO VISUALPruébalo.
Pruébalo.
No es tu partida.
Esta maqueta mantiene su propio estado temporal. No carga index.html, no consulta workers, no guarda datos y no modifica la pestaña del juego. Los mapas y valores de la demo son ilustrativos.
Choose AI, then Play AI. Selecting AI alone never starts movement.
| Componente | Al abrir | Al cerrar / confirmar |
|---|---|---|
| Pause | Detiene la acción y los temporizadores gestionados. | Resume mission continúa; Return to title deja el encuentro parcial sin guardar. |
| Settings | Partida pausada, valores en borrador, categorías Game / World / Advanced AI. | Apply valida; Cancel descarta. Se recupera el estado previo. |
| Analysis | Inspector modal a la derecha; hoja inferior en móvil. El tablero no cambia de sitio. | Devuelve foco y pausa previa. Una IA preparada sigue preparada. |
| Map editor | Edición en el propio tablero sobre un borrador; nunca directamente sobre la campaña. | Apply comprueba rutas. Cancel descarta. TEST COPY protege el checkpoint. |
| Flight manual | Ayuda por tareas; un encuentro abre directamente Combat. | Cerrar devuelve el mismo estado de juego. |
| Resultado del duelo | Ventana sobre la arena, sin empujarla. Explica el motivo del resultado. | Human espera la continuación; AI usa la continuación temporizada existente. |
La demo de editor usa un diálogo y 16 casillas para explicar el borrador. El editor real trabaja en el tablero de 100 casillas. Los ejemplos no sustituyen las pruebas de los componentes del juego.
07 / MOVIMIENTO
Coreografía, no ruido.
La intro conserva sus trece escenas y sus capas originales. Los diálogos no son texto que aparece por casualidad: su secuencia forma parte de cómo se cuenta la historia.
Cape Canaveral, 1959.
Something is about to change.
Dream big.
Or stay grounded.
Secuencia real conservada
| 300 ms | Transición del fondo |
|---|---|
| 350 ms | Narración |
| 1400 ms | Personajes |
| 1900 ms + n × 1000 | Líneas de diálogo |
No son duraciones universales para botones. Son los tiempos de esta coreografía. Se cancelan las acciones pendientes al cambiar de escena.
Movimiento reducido y geometría
Con la preferencia de movimiento reducido, esta demo muestra todas las capas sin desplazamiento. El juego ofrece su propia alternativa reducida y Reading view. La navegación conserva su fila y la ilustración escala como una unidad.
Cinematic view aprovecha la ventana del navegador; no usa Fullscreen API. Los resúmenes se superponen al duelo. Ningún efecto decorativo debe ocultar un botón o desplazarlo durante la acción.
CRITERIO Para interfaz nueva: transiciones discretas de aproximadamente 150–220 ms, preferiblemente color u opacidad; sin pulsos permanentes pidiendo atención.
08 / VOZLa historia tiene actitud.
La historia tiene actitud.
La interfaz tiene claridad.
Ace puede bromear con el cosmos. Un error de guardado no. Mantener el carácter de los diálogos y utilizar lenguaje concreto en los controles, avisos y consecuencias.
AI ready. Press Play AI to hand over control.Dice qué se ha preparado y qué falta. Evita «AI activated» cuando todavía no está jugando.
Restart this mission?Explicar que se reemplaza el recorrido actual, el checkpoint y las tablas de esa sesión. Primero ofrecer Keep playing; después Restart mission.
Checkpoint held in memory only. Closing this page will lose it.No mostrar «Saved» si el almacenamiento ha sido rechazado. No atribuir al jugador un problema del navegador.
Quick uses the original random outcome rules.La etiqueta corta necesita una explicación accesible de esa diferencia. No prometer equivalencia con el combate animado.
Las formulaciones de estado y confirmación anteriores proceden de las funciones existentes; las explicaciones alrededor son criterios editoriales de esta guía. Los mensajes críticos deben permanecer junto a su control, no depender solo de un aviso temporal.
09 / RECURSOSMás intención.
Más intención.
No más imágenes porque sí.
El arte base ya existe. Esta edición añade identidad, no enemigos ni paisajes nuevos. Una imagen adicional debe mejorar reconocimiento, explicar una acción o sostener una escena.
Mapa del proyecto
index.html
mini.css
assets/
images/
brand/ ← identidad de v8
interface/
intro/backgrounds/
intro/layers/
game/
icons/
tiles/
audio/music/
audio/effects/
workers/
data/
docs/
style-guide.htmlLa lógica del juego sigue en index.html. Los workers existentes no se convierten en módulos nuevos. La guía usa ../mini.css con reglas propias bajo .ace-style-guide.
Reglas de conservación
Las capas narrativas conservan sus márgenes transparentes, nombres y geometría. No eliminar un recurso solo porque parezca una variante sin uso. Las rutas de fondos y capas se resuelven desde sus carpetas actuales.
El favicon es un recorte documentado del logo aprobado: caja 285,45 → 825,585 sobre el original de 1254 px. Esta excepción de identidad no autoriza recortar las capas del prólogo.
Las exportaciones WebP son versiones web derivadas; el PNG original se conserva intacto. La guía permite bajarlos por separado, sin exportar fuentes tipográficas.
| Recurso | Estado | Decisión |
|---|---|---|
| Logo elegido + tamaños web | Incluido en v8 | Portada, guía y firma compacta. |
| Iconos y favicon | Incluidos en v8 | Retrato derivado del mismo original, no otra cara. |
| Diagramas de ayuda | HTML y CSS | Teclas, pasos y estados editables; no rasterizar texto de interfaz. |
| Fondos y personajes de la campaña | Arte existente | No generar más hasta diseñar contenido que lo requiera. |
| monstroattack.png / monstroattacked.png | Pendientes | Buscar originales primero. El juego conserva el fallback de la pose existente. |
| Transparente / horizontal / monocromo | Adaptaciones pendientes | No reemplazar la marca aprobada por una nueva generación sin revisión. |
| Backend / capítulo 2 | Fuera de esta edición | El estilo no implica que existan nuevos servicios ni niveles. |
10 / PUBLICACIÓNLa coherencia
La coherencia
también se prueba.
Lista de revisión manual para una entrega. Sus casillas son notas temporales de esta página: no representan resultados automáticos ni se guardan.
0 / 8 notas marcadas en esta página.
Proteger lo que ya funciona. Esta edición integra identidad y documentación. No amplía la campaña, no cambia el equilibrio de combates y no certifica accesibilidad integral. Las pruebas ejecutadas y sus límites se documentan en el paquete de revisión v8, separado de los archivos públicos.
11 / REFERENCIASCriterios con origen.
Criterios con origen.
Decisiones con contexto.
La fuente del comportamiento descrito es la v7 confirmada y la integración v8: showInitialLandingPage, selectSessionController, setCombatPresentation, mountSessionTools, openAnalysisPanel, toggleSettingsOverlay, ComicIntro.showPanel y los tokens de mini.css. Las demos son implementaciones pequeñas e independientes, no esos métodos conectados a un juego oculto.
Las referencias externas siguientes sustentan principios generales. No constituyen un aval de sus autores a Space Ace ni imponen los colores o mecánicas del proyecto. Consultadas el 12 de septiembre de 2026.
- Nielsen Norman Group — 10 Usability Heuristics
Visibilidad del estado, control del usuario, prevención de errores y reducción de información que compite con la tarea. La separación AI / Play es nuestra aplicación al juego, no una receta universal del artículo.
- W3C WAI — Dialog (Modal) Pattern
Entrada y contención del foco, cierre y devolución al elemento que abrió el diálogo. Las demos usan
<dialog>nativo y recuperación explícita del foco. - W3C — WCAG 2.2, contraste mínimo
Referencia de contraste de texto; los cálculos de esta guía son solo pares sólidos declarados.
- W3C — WCAG 2.2, tamaño mínimo del objetivo
24 × 24 CSS px o las excepciones aplicables. El objetivo de 44 px para controles nuevos es una decisión práctica más amplia.
- CSS Zen Garden
Referencia histórica de la separación entre estructura y presentación. Inspiración, no una dependencia ni un tema copiado.