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.
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.