Media
Kung paano dinadala ang mga larawan at screenshot: isang carousel sa home hero, isang flat na phone frame na may berdeng rail para sa mga app screenshot, isang full-screen zoom para sa mga diagram at larawan, at isang placeholder para sa mga specimen.
Mga hero illustration ng posts
Bawat post ay bumubukas sa isang rich pero flat na isometric illustration: detalyado at may mga layer na vector scene, walang gradient, walang nababasang text o logo, sa malambot na halos puting background. Bawat isa ay ginagawa gamit ang Cloudflare AI mula sa maikling konsepto na naglalarawan sa ideya ng post bilang mga bagay: isang tab bar na humihila ng mga panel, isang mesh na nagbubukod ng mga arrow sa mga tray.
Hindi kailanman ang model ang pumipili ng palette. Bawat illustration ay kumukuha ng ilang kulay mula sa iisang shared pool na sampung kulay (ang brand lime, tapos navy, coral, teal, plum, amber, blush, sky, charcoal at sand)at laging kasama ang lime accent. Kaya walang dalawang hero na eksaktong pareho ang timpla, pero lahat ay nananatili sa iisang pamilya.
Ang palette at ang mga background ng serye ay nakadokumento kasama ng buong colour system sa Colour page.
Sa artikulo, ang hero ay nakapatong sa blurred at pinalaking kopya ng sarili nito, backdrop band na umaangkop sa anumang aspect ratio; tinatanggal ng phone ang blur at ipinapakita ang imahe nang simple. Ang matataas na screenshot sa prose ay lumalabas sa kalahating lapad, hanggang 340 pixels, para hindi kailanman matabunan ng imaheng hugis-telepono ang teksto.
Carousel
Ang photo carousel ng home hero, ni-render nang live: mga arrow at counter sa frame, isang hilera ng dots sa ilalim nito mula 700 pixels (humahaba ang aktibong dot para maging pill), swipe sa touch, at autoplay na gumagalang sa reduced motion at humihinto gamit ang control sa tabi ng mga dot. Sa phone, napapalitan ang mga dot ng overlay na pamagat sa ibabaw ng larawan.
Device frame
Ang mga app screenshot sa mga artikulo ay nakalagay sa loob ng flat na phone frame na iginuhit sa CSS: isang brand-green na rail, isang manipis na itim na bezel, mga side button na iginuhit sa labas mismo ng rail, at isang shadow na sumusunod sa theme. Nananatili ito sa flat na estetika ng blog sa halip na photoreal na render.
Full-screen zoom
Ang mga larawan at diagram sa mga artikulo ay bumubukas sa isang full-screen lightbox kapag na-tap: ang nag-iisang overlay na pare-pareho ang kilos sa bawat device. Nagre-re-theme ang mga diagram sa loob nito, kaya ang mambabasa sa dark mode ay nagzu-zoom sa dark-mode na diagram.
Placeholder
Ang mga specimen sa docs na ito na dapat sana ay may larawan ay gumagamit ng neutral na placeholder sa halip na hiram na imahe, para tapat ang layout kung alin ang content at alin ang chrome.