Use a consistent technical-drawing system of fine outlines, measurement ticks, circular guides, and restrained accent colors to explain an otherwise invisible process. Vary the diagram topology by concept: trees for hierarchy, tiles for parallel work, linked nodes for stages, and enclosed panels for boundaries. Alternate pale paper illustrations with navy blueprint views, retaining a small mascot and fixed heading positions for continuity. For a new subject, replace the browser-specific labels and mechanisms with its actual process, and increase contrast on secondary annotations.
No creator prompt published. This brief was written by Reference.
How browsers work
An illustrated browser explainer showing URL entry, network connections, HTML parsing, layout boxes, raster tiles, JavaScript compilation, and site isolation through sketchbook and blueprint-style diagrams.
How it was made
Claude Opus 5.5 · Plain JavaScript
Source and credit
X · Sep 24, 2026 · 2.4k likes · 217k views
Made with AI, according to the source
Look notesby Reference
Technical explainer about browser rendering, with labeled diagrams of DNS, HTTP connections, the DOM, CSS, JavaScript, site isolation, and rasterization.
- Color
- Deep navy with fine blue, cyan and violet linework, muted white labels and occasional warm cream backgrounds.
- Type
- Small, clean sans-serif labels and headings, mostly white or muted blue.
- Framing
- Wide technical diagrams sit beneath compact headings. Circular guides, fine rules and a small robot motif connect branching trees, process stages and framed browser windows.
- Structure
- DNS and HTTP diagrams lead to the DOM and computed styles, followed by raster tiles, a compilation pipeline, isolated site windows and a completed browser page.
