Mèdia
Com es porten les fotos i les captures: un carrusel a l'hero de la pàgina d'inici, un marc de mòbil pla amb carril verd per a captures d'app, un zoom a pantalla completa per a diagrames i imatges, i un marcador de posició per als especímens.
Il·lustracions de capçalera dels posts
Cada post s’obre amb una il·lustració isomètrica rica però plana: escenes vectorials detallades i per capes, sense degradats, sense text llegible ni logotips, sobre un fons suau gairebé blanc. Cadascuna es genera amb Cloudflare AI a partir d’un concepte breu que descriu la idea del post com a objectes: una barra de pestanyes que atrau panells, una malla que reparteix fletxes en safates.
El model mai tria la paleta. Cada il·lustració agafa uns quants colors d’un repertori compartit de deu (la llima de la marca, i després blau marí, corall, verd blavós, pruna, ambre, rosa pàl·lid, cel, carbó i sorra), i l’accent llima sempre hi és. Així no hi ha dues capçaleres amb la mateixa barreja, però totes es queden dins de la mateixa família.
La paleta i els fons per sèrie estan documentats amb la resta del sistema de color a la pàgina de Color.
A la pàgina d’un article, la capçalera reposa sobre una còpia ampliada i desenfocada d’ella mateixa, una banda de fons que s’adapta a qualsevol proporció; el mòbil treu el desenfocament i mostra la imatge tal qual. Les captures altes a la prosa es dibuixen a mitja amplada, amb un topall de 340 píxels, perquè una imatge amb forma de telèfon mai domini el text.
Carrusel
El carrusel de fotos de l'hero de la pàgina d'inici, renderitzat en viu: fletxes i un comptador al marc, una fila de punts a sota a partir de 700 píxels (el punt actiu s'estira fins a fer de píndola), lliscament tàctil, i reproducció automàtica que respecta la reducció de moviment i es pausa amb el control del costat dels punts. En un mòbil els punts deixen pas a un títol superposat sobre la foto.
Marc de dispositiu
Les captures d'app als articles van dins d'un marc de mòbil pla dibuixat amb CSS: un carril del verd de la marca, un bisell negre fi, botons laterals dibuixats just fora del carril i una ombra que s'adapta al tema. Es manté fidel a l'estètica plana del blog en lloc d'un render fotorealista.
Demos animades
Quan una captura no pot explicar una interacció (un toc que empeny una pantalla, un comptador que puja), l'article fa servir un WebP animat curt dins del mateix marc de telèfon. Es construeix amb uns quants estats clau, no amb una gravació de pantalla: un fotograma d'abans, un amb l'indicador de toc dibuixat i el resultat, cadascun en pantalla el temps just per llegir-se. El bucle pesa unes desenes de kilobytes i es reinicia sol.
L'indicador de toc forma part del disseny: un disc blau marí translúcid amb un anell, compost just on cau el dit, perquè el lector vegi la causa a més de l'efecte. Tots els fotogrames comparteixen la mateixa barra d'estat, així que entre estats no salta res llevat del canvi que la demo existeix per ensenyar.
Un límit honest: una imatge animada ignora la preferència de moviment reduït del sistema, perquè un WebP en bucle no té control de pausa. Per això les demos són curtes i suaus, i tot el que mostren també queda explicat a la prosa que les envolta.
Zoom a pantalla completa
Les imatges i els diagrames dels articles s'obren en una lightbox a pantalla completa en tocar-los: l'única superposició que es comporta igual a tots els dispositius. Els diagrames es retematitzen a dins, així que un lector en mode fosc fa zoom sobre un diagrama en mode fosc.
Marcador de posició
Els especímens d'aquesta documentació que portarien una foto fan servir un marcador de posició neutre en lloc d'una imatge manllevada, perquè la maqueta sigui honesta sobre què és contingut i què és chrome.