Medios
Cómo se presentan las fotos y las capturas de pantalla: un carrusel en el hero de la portada, un marco de teléfono plano con raíl verde para capturas de la app, un zoom a pantalla completa para diagramas e imágenes, y un marcador de posición para las muestras.
Ilustraciones de cabecera de los posts
Cada post se abre con una ilustración isométrica rica pero plana: escenas vectoriales detalladas y por capas, sin degradados, sin texto legible ni logotipos, sobre un fondo suave casi blanco. Cada una se genera con Cloudflare AI a partir de un concepto breve que describe la idea del post como objetos: una barra de pestañas que atrae paneles, una malla que reparte flechas en bandejas.
El modelo nunca elige la paleta. Cada ilustración toma unos pocos colores de un repertorio compartido de diez (la lima de la marca, y después azul marino, coral, verde azulado, ciruela, ámbar, rosa pálido, celeste, carbón y arena), y el acento lima siempre está entre ellos. Así no hay dos cabeceras con la misma mezcla, pero todas se quedan dentro de la misma familia.
La paleta y los fondos por serie están documentados con el resto del sistema de color en la página de Color.
En la página de un artículo, la cabecera se apoya sobre una copia ampliada y desenfocada de sí misma, una banda de fondo que se adapta a cualquier proporción; el móvil quita el desenfoque y muestra la imagen tal cual. Las capturas altas en la prosa se dibujan a mitad de ancho, con un tope de 340 píxeles, para que una imagen con forma de teléfono nunca domine el texto.
Carrusel
El carrusel de fotos del hero de la portada, renderizado en vivo: flechas y un contador sobre el marco, una fila de puntos debajo a partir de 700 píxeles (el punto activo se estira hasta formar una píldora), deslizamiento táctil y reproducción automática que respeta la preferencia de movimiento reducido y se pausa desde el control junto a los puntos. En un teléfono los puntos dan paso a un título superpuesto sobre la foto.
Marco de dispositivo
Las capturas de la app en los artículos van dentro de un marco de teléfono plano dibujado en CSS: un raíl verde de marca, un bisel negro fino, botones laterales dibujados justo fuera del raíl y una sombra que se adapta al tema. Mantiene la estética plana del blog en lugar de un render fotorrealista.
Demos animadas
Cuando una captura no puede contar una interacción (un toque que empuja una pantalla, un contador que sube), el artículo usa un WebP animado corto dentro del mismo marco de teléfono. Se construye con unos pocos estados clave, no con una grabación de pantalla: un fotograma de antes, uno con el indicador de toque dibujado y el resultado, cada uno en pantalla el tiempo justo para leerse. El bucle pesa unas decenas de kilobytes y se reinicia solo.
El indicador de toque forma parte del diseño: un disco azul marino translúcido con un anillo, compuesto justo donde cae el dedo, para que el lector vea la causa además del efecto. Todos los fotogramas comparten la misma barra de estado, así que entre estados no salta nada salvo el cambio que la demo existe para enseñar.
Un límite honesto: una imagen animada ignora la preferencia de movimiento reducido del sistema, porque un WebP en bucle no tiene control de pausa. Por eso las demos son cortas y suaves, y todo lo que muestran está también contado en la prosa que las rodea.
Zoom a pantalla completa
Las imágenes y los diagramas de los artículos se abren al tocarlos en un lightbox a pantalla completa, el único overlay que se comporta igual en todos los dispositivos. Los diagramas cambian de tema dentro de él, de modo que quien lee en modo oscuro amplía un diagrama en modo oscuro.
Marcador de posición
Las muestras de esta documentación que llevarían una foto usan un marcador de posición neutro en lugar de una imagen prestada, para que el diseño sea honesto sobre qué es contenido y qué es chrome.