# Design Language for sbom.study ## Aesthetics and Tone sbom.study is **The Exploded Diagram** — a study site presented as a single, enormous axonometric engineering plate, the kind that used to fold out of a 1960s field-service manual for a turbine or a teletype. The conceit: a Software Bill of Materials is not a spreadsheet, it is an *exploded-view drawing*. Every dependency is a machined part suspended in mid-air along a dotted assembly axis; every transitive dependency is a smaller part floating off the part above it; every license, hash, and version string is a callout balloon tethered by a leader line to the component it annotates. The whole site is one continuous draughtsman's plate that the reader pans and zooms across, the way an engineer leans over a drafting table with a loupe. The tone is **scholarly-intellectual** crossed with the dry, exacting patience of a technical illustrator who has drawn ten thousand parts and never once drawn one wrong. Nothing here is "fun" in the dopamine sense; the pleasure on offer is the pleasure of a *correct* drawing — clean isometric projection, consistent line weights, leader lines that never cross, a title block in the corner that is filled in completely and legibly. It is cool, blueprint-cold, faintly nostalgic for an era when documentation was a craft. There is wit, but it is deadpan: the kind of joke an exploded diagram makes when it labels the one bolt that, if missing, brings the whole assembly down. Inspiration sources, named precisely so the implementer can hunt them down: the exploded isometrics in old Haynes manuals and IKEA assembly sheets; the axonometric cutaways of Stephen Biesty; mid-century Bell System practice drawings; the Bauhaus-adjacent drafting style of *Architectural Graphic Standards*; the cyan-on-darkroom-blue of true diazo blueprints (not the faux-blueprint kitsch of stock vectors — the *real* ammonia-print look, where the line is white and the field is Prussian-dark). The site should feel like it was inked with a Rotring 0.18 on a single sheet of A0 vellum, then photographed under raking light. ## Layout Motifs and Structure The governing layout is **isometric / hexagonal-honeycomb** thinking (hexagonal-honeycomb at 2%, isometric layout deliberately rare in the corpus) applied as a *true 30°–30° axonometric plane*. The entire document lives on one oversized canvas — call it the **Plate** — sized far larger than the viewport (target 4000×6000 CSS px or larger), and the visitor navigates it by scroll-pan and pinch/scroll-zoom, never by paging. There is no card grid. There is no centered column. There is no hero. There is the Plate, and there is the loupe (the viewport) moving over it. Spatial structure of the Plate, top to bottom along the **assembly axis** (a single vertical dotted center-line that runs the height of the drawing): 1. **The Title Block** — pinned bottom-right of the Plate *and* mirrored as a sticky HUD element bottom-right of the viewport. A real engineering title block: ruled rectangle divided into cells — DRAWING NO. (sbom.study), TITLE (What a Bill of Materials Actually Is), SCALE (1:1, ALWAYS), DRAWN BY, CHECKED BY, SHEET 1 OF 1, REV. The HUD version updates its "ZONE" cell live (engineering drawings have a grid of zones labelled A–H × 1–12 around the border) to tell you which part of the Plate the loupe is currently over. 2. **The Border Zone Ruler** — every edge of the Plate carries the classic drawing-frame tick marks and zone letters/numbers. Faint, but present, so the reader always knows their coordinates. 3. **The Root Assembly** — at the top, the largest single isometric object: a stylized "application" rendered as a clean axonometric box with a cutaway corner. From it, the assembly axis descends. 4. **The Explosion Column** — descending the axis: tiers of components, each drawn as an isometric primitive (box, cylinder, hex prism, washer-ring), each floating at an apparent z-offset off the axis with a fine dotted explosion line connecting it back. Direct dependencies are large and near the axis; transitive dependencies are smaller and float further out, with their *own* mini-explosion lines. The deeper the tree, the further the part drifts toward the margins — a literal visualization of "you have no idea how deep this goes." 5. **Callout Balloons** — every part has at least one circular callout balloon (the numbered circle of a parts list) and a leader line to a detail panel: a ruled rectangle, drafting-style, containing real text — what the package is, why it's here, its license, a truncated content hash rendered in a monospace face, its publish date, known facts. These detail panels are the actual *content* of the site; they are the prose. They are arranged in the negative space around the explosion column, never overlapping a leader line. 6. **The Parts List (Bill of Materials proper)** — anchored along the right margin of the Plate as a tall ruled table: ITEM | QTY | PART NO. | DESCRIPTION | MATERIAL(license) | NOTES. Each row's ITEM number lights up when the corresponding balloon enters the loupe. This is the only "table" on the site and it is rendered as a *drawing element*, with hand-drafted-looking double rules at the header. 7. **Section Detail Bubbles** — three or four oversized circular "DETAIL A / DETAIL B" magnified insets, drawn as the classic broken-circle-with-leader convention, each blowing up one sub-topic (provenance, vulnerability propagation, license compatibility, the difference between SPDX and CycloneDX) into a richly annotated mini-plate within the big Plate. Composition rules: everything snaps to the isometric grid. Leader lines are *only* horizontal, vertical, or on the two iso axes — never freeform curves. Whitespace (the vellum) is sacred and generous; the drawing breathes. The reader's eye is asked to travel *along axes*, tracing a leader from balloon to part to detail panel, the way you read any good exploded diagram. ## Typography and Palette **Type system — Google Fonts only, chosen to read as drafting lettering.** - **`B612`** (Google Fonts) — the primary face for all running prose, detail panels, and the Bill-of-Materials table. B612 was literally designed for aircraft cockpit displays: legible at small sizes, unambiguous digits, a faintly technical-but-humane voice. Using it as body copy (rather than as UI chrome) is the rare move — it gives every paragraph the authority of an instrument label without the coldness of pure mono. Use `B612` for text, `B612 Mono` for hashes, version strings, part numbers, and the title-block cells. - **`Major Mono Display`** (Google Fonts) — reserved exclusively for the **drawing-frame zone labels** (A–H, 1–12), the gigantic "SBOM" watermark ghosted across the Plate, and DRAWING NO. headers. Its all-caps, monospaced, vaguely stencil-CAD character is perfect for frame furniture; never use it for anything a human reads in a sentence. - **`Spectral`** (Google Fonts, the light and extra-light weights, italic available) — used *only* inside the DETAIL bubbles, for the longer essayistic passages. The shift from technical B612 to a true reading serif inside the magnified details signals "here we slow down and actually talk." It is the single warm-blooded gesture in an otherwise instrument-panel typography. Set body text generously: 17–18px, line-height 1.65, measure capped near 62 characters inside detail panels. Numerals everywhere should be tabular. Letter-spacing on Major Mono Display frame labels: +0.18em. **Palette — true diazo blueprint, not the cliché.** A real ammonia print is white line on a deep, slightly-violet Prussian field — the opposite of the cheap "white background, thin blue lines" stock blueprint. We honor the real thing, with a parchment alternative for the detail panels (which read as separate sheets of vellum laid on the dark plate). - `#0E1A2B` — **Diazo Ground.** The deep blue-black of the developed print. The whole Plate background. - `#16273D` — **Ground Lift.** A half-step lighter, for the inset DETAIL bubble fields and the title-block fill, so they sit slightly proud. - `#E8EEF2` — **Drafting White.** The line color. Every iso edge, leader line, balloon stroke, frame tick. Crisp, very slightly cool, never pure #FFFFFF. - `#7FA8C9` — **Faded Blueprint.** Mid-blue for secondary line work, hatching, the ghost grid, dimension lines — the lines that recede. - `#F4ECD8` — **Vellum.** Warm parchment for the detail-panel cards and the Bill-of-Materials table — the "loose sheets" laid on the dark plate. Text on vellum is `#1B2530` ink. - `#D98C3F` — **Annotation Amber.** The one accent. Used like a draughtsman's red pencil correction mark, *very sparingly*: the active balloon, the "critical path" explosion line, the REV stamp, a circled warning. If amber is on screen in more than two places, something is wrong. - `#5C7A52` — **Verdigris Stamp.** A muted oxidized-bronze green, used once, for the "APPROVED" / "VERIFIED" rubber-stamp graphic that appears when a component's provenance checks out. Default state of every screen: deep Diazo Ground, white iso line work, faded-blue ghost grid, a vellum panel or two, a single amber balloon. It should look like a photograph of a real drawing under a desk lamp. ## Imagery and Motifs **Imagery system: line-illustration + isometric-icons + data-viz, zero photography.** Not one photograph appears — photography is wrong for a drawing plate. Every visual element is one of these classes, all rendered as inline SVG so they scale infinitely under the loupe: - **Isometric component primitives.** A small kit of axonometric solids — open box (a "package"), capped cylinder (a "library"), hex prism (a "module"), thin washer-ring (a "shim/polyfill"), bracket (a "binding"). Each component on the Plate is one of these, drawn in Drafting White line with faint Faded-Blueprint interior hatching to suggest a cut face. They never get fills; they are *drawings* of objects, not objects. - **Explosion lines.** Fine dotted/dash-dot leader lines (the real drafting convention: long-dash short-dash for center/axis lines, evenly-dotted for hidden detail). These are the connective tissue — balloon to part, part to detail panel, part to its own transitive children. - **Callout balloons.** Perfect circles, Drafting-White stroke, containing a tabular numeral. The convention from any parts catalog. Active one fills Annotation Amber. - **Drawing-frame furniture.** The border ruler with zone letters/numbers, corner tick marks, the title block grid, a North/orientation arrow, a scale bar (reading "1:1 — there is no abstraction layer here"), a "FIRST ANGLE PROJECTION" truncated-cone symbol in the corner. - **DETAIL break-circles.** The classic convention: a part of the drawing enclosed in a circle with a leader to a magnified inset elsewhere. We use these for the essay sections. - **Hatching & section-lining.** Where a primitive is "cut," fill the cut face with 45° section-line hatching at consistent spacing — the universal drafting signal for "this is a sliced surface." - **Rubber stamps.** Two, used rarely: a Verdigris "VERIFIED PROVENANCE" stamp (slightly rotated, slightly broken-edged, like real ink) and an Annotation-Amber "REV — A" stamp in the title block. - **The ghost watermark.** Across the whole Plate, ghosted at ~6% opacity in Major Mono Display: the word **SBOM** at enormous size, plus, beneath it, the long-form "SOFTWARE BILL OF MATERIALS" — the way archival drawings have a faint property stamp bleeding through. Recurring motif: **the leader line that never crosses another.** It is the site's quiet flex and its visual signature. Everything is routed. Everything connects. Nothing tangles. ## Prompts for Implementation Build sbom.study as **one HTML file, one CSS file, one ES module, plus a handful of inline SVG sprite definitions** — no framework, no build step, no router, no canvas/WebGL. The Plate is a single very large absolutely-positioned `
` (the "drawing surface") inside a viewport `
` (the "loupe"); panning is transform translate, zooming is transform scale with `transform-origin` at the pointer. All component prose, all detail-panel text, the entire Bill-of-Materials table — hand-authored, real, footnoted. Actual definitions, actual examples (SPDX vs CycloneDX vs SWID, what a PURL is, how transitive vulnerability propagation works, the Log4Shell case as a worked example, the difference between a lockfile and an SBOM). The prose is the heaviest payload and that is correct. Storytelling structure — the reader's journey across the Plate: 1. **Cold open: the loupe parked on the Title Block.** Before anything moves, the visitor sees only the bottom-right corner — a fully filled-in engineering title block. DRAWING NO.: sbom.study. TITLE: *What a Bill of Materials Actually Is.* SCALE: 1:1. It reads as a found object. A single line of B612 Mono beneath: "Pan up to begin the explosion." The whole rest of the drawing is *off-screen above*, hinted only by the assembly axis descending into the title block from the top edge. 2. **The pan-up reveal.** As the reader scrolls/drags up, the loupe climbs the assembly axis. Parts fade in *along the axis* as they enter, drawn on with a path-draw-svg stroke animation — each iso primitive's outline inks itself in over ~600ms, its explosion line dashes outward, its balloon pops (a tiny spring-scale, no bounce — drafting is precise), its leader line draws to its detail panel, the detail panel's ruled border draws last and the text inside fades up. Stagger children off parents. The effect: the drawing is being *inked in real time* as you read it. 3. **DETAIL bubbles as the deep dives.** When the loupe centers on a DETAIL break-circle, gently auto-ease the zoom *in* (scale up the Plate ~1.6×, recenter) so the magnified inset fills the loupe — the literal act of leaning closer with the loupe. Inside, the type shifts to Spectral and the reader gets the essay. Zoom back out on leave. 4. **The Bill-of-Materials table as a live index.** Always reachable along the right margin. Its rows highlight (Annotation Amber left-border) as their balloons enter the loupe; clicking a row eases the loupe to that part. It is the table of contents, disguised as the document's reason for existing. 5. **The critical-path easter egg.** One transitive dependency, buried deep and far out in the margin, has an Annotation-Amber explosion line instead of white. Tracing it (the leader is long) leads to a DETAIL bubble that *is* the Log4Shell worked example — the one tiny part, four levels deep, that nobody listed, that brought the assembly down. The Verdigris "VERIFIED PROVENANCE" stamp is conspicuously *absent* from that part's panel. This is the site's thesis, hidden where a thesis belongs in an exploded diagram: in the small print. 6. **HUD persistence.** The title-block HUD stays pinned bottom-right of the viewport the entire time, its ZONE cell updating live to the current Plate coordinates (e.g. "ZONE D-7"), its SHEET cell always "1 OF 1." A faint scale bar and a North arrow live top-left of the viewport. These never move; the drawing moves under them. Motion vocabulary: path-draw-svg inking, precise spring-scale on balloons (stiffness high, no overshoot — *no elastic, no bounce*; this is a drafting tool, not a toy), dash-offset animation on explosion lines, ease-in-out auto-zoom into DETAIL circles, fade-up on panel text. Honor `prefers-reduced-motion` by rendering the whole Plate fully inked and static, navigable by scroll only. Cursor: a faint crosshair reticle (a draughtsman's loupe center-mark) — but *no* cursor-trail, no magnetic buttons, no parallax-mesh. The restraint is the point. AVOID, hard: hero banners, CTA buttons, "Get Started," pricing tables, three-column feature grids, big-number stat blocks, signup forms, testimonials, glassmorphic frosted cards, neon glows, gradient meshes, decorative parallax layers, cookie-banner-shaped marketing furniture of any kind. There is one "interface": the loupe and the title block. Everything else is *drawing*. ## Uniqueness Notes Deliberate departures from the 554 designs already in the registry and from the seed's defaults: 1. **A true axonometric Plate as the entire site — not "isometric icons" sprinkled on a normal page.** Isometric aesthetics sit at ~13% of the corpus but virtually always as decorative isometric *illustrations* inside a conventional scrolling column or card-grid layout. Here the 30°–30° projection *is* the layout: one giant canvas, navigated by loupe-pan and loupe-zoom, no cards, no centered column, no hero. The exploded-diagram metaphor (parts on an assembly axis, callout balloons, leader lines, a title block) is, as far as the frequency analysis shows, unused — and it is the single most literal possible visualization of what a Software Bill of Materials *is*. 2. **Real diazo-blueprint palette, inverted from the cliché.** The corpus is 98% warm and 94% gradient. This is cold, flat, ungraduated: white line on a deep Prussian-violet field, with parchment "loose sheets" laid on top. No gradients anywhere except the faint photographic vignette of a desk lamp. The one accent (Annotation Amber, #D98C3F) is rationed like a draughtsman's red pencil — at most two on screen. 3. **B612 (a cockpit-display face) used as reading body type, with Spectral reserved only for the magnified DETAIL essays.** Mono typography is at 94% of the corpus — but almost always as terminal/dev-tool chrome. B612 as *prose* is rare and gives every paragraph an instrument-label authority; the deliberate, signposted shift to a warm serif *only* inside the loupe-zoomed DETAIL circles is a typographic gesture I have not seen in the registry. 4. **Zero photography, zero glassmorphism, zero hand-drawn wobble** — three of the four most overused looks in the corpus (photography 98%, glassmorphism 83%, hand-drawn 94%) are categorically excluded. Every visual is precise inline-SVG drafting: consistent line weights, 45° section hatching, dash-dot center lines, leader lines that never cross. The aesthetic pleasure offered is *correctness*, not warmth or whimsy. 5. **The thesis is hidden in the small print, where an exploded diagram hides its warnings.** No CTA, no manifesto banner — the entire argument (transitive dependencies you never listed can bring the whole assembly down) is encoded as a single amber explosion line leading four levels out to a Log4Shell DETAIL bubble, with the "VERIFIED PROVENANCE" stamp conspicuously missing. Content delivered as drawing convention, not as copywriting. Avoided overused patterns per frequency analysis: parallax (90%), cursor-follow (89%), magnetic (79%), card-grid (92%), full-bleed hero (87% / 16%), warm palette (98%), gradient (94%), photography (98%), glassmorphism (83%), hand-drawn (94%), counter-animate stat blocks. Preferred rare territory: hexagonal/isometric layout thinking (~2%), path-draw-svg as primary motion (used here as literal "inking"), line-illustration + isometric-icons + data-viz imagery only, scholarly-intellectual tone. Chosen seed / style: **isometric technical docs** (from `tools/design/seeds.json`) — honored fully and pushed to its literal extreme: the documentation *is* an exploded technical drawing.