# Design Language for sbom.wiki ## Aesthetics and Tone sbom.wiki is staged as **an axonometric exploded-view assembly manual for software** — the kind of fold-out plate you find tucked into the back of a 1970s aircraft maintenance binder or a Haynes workshop manual, except the "machine" being disassembled is a compiled binary and its dependency closure. The governing conceit: every software artifact is a *thing with parts*, and a Bill of Materials is the parts list — so the site presents itself as a working **engineering reference desk** where a single program has been pulled apart along a 30°/30° isometric axis and every nut, washer, transitive dependency, license, and CVE is called out with a leader line and a balloon number. The mood is **calm, exacting, slightly austere — a reference work, not a sales pitch**. It should feel like the inside cover of an ISO standard crossed with the legibility of a transit-system schematic: confident in its grid, generous with whitespace, never decorative for decoration's sake. There is a quiet wit in treating "package-lock.json" with the gravity of a parts catalog for a turbine, but the wit is dry — delivered straight-faced, in monospace, with a balloon callout. Nothing bounces. Nothing glows neon. The drama is structural: a 4000-node dependency graph rendered as a wireframe city you fly over, and the realization that *you depend on all of it*. Tone words: technical-tutorial, authoritative, calm-serene, grounded-earthy. The visitor should leave feeling they have consulted a **manual**, not browsed a site. ## Layout Motifs and Structure The load-bearing structural device is **isometric-technical-docs** layout — the entire page is built on a true 2:1 isometric pixel grid (every "tile" 64px wide, 32px tall, lines at 26.57°), and content blocks are not flat cards but **shallow extruded prisms** sitting on that grid, each with a visible top face and one side face, like keycaps or like the parcels in an old SimCity. This is *not* the inflated-3d / claymorphism look — edges are crisp 1px hairlines, faces are flat fills, the only shading is a single 6%-darker side face. Think technical illustration, not Pixar. Spatial inventory: - **The Index Plate (hero, ~140vh):** A large isometric exploded diagram of a generic software artifact — a stack of labeled trays (`/bin`, `/lib`, `/node_modules`, `/vendor`, `manifest`) floating apart along the vertical iso-axis, connected by dotted leader lines to balloon callouts numbered 01–12. Each balloon is a hyperlink into the wiki. The artifact slowly rotates *no more than ±4°* on a gentle sine — enough to read as 3D, never enough to nauseate. - **The Manifest Column:** Primary article body runs in a single **single-column** measure of ~68 characters, but pinned to the *left third* — the right two-thirds is reserved as the **plate margin**, where isometric figures, balloon callouts, version tables, and "see also" leader lines live, scrolling in parallax at 0.85× the body speed. This asymmetric 1:2 split is the signature page skeleton. - **The Parts Drawer (navigation):** A persistent left rail styled as a **flat-file cabinet** of labeled drawers — each top-level wiki section is a drawer that slides open (translateX on the iso x-axis, 180ms, cubic-bezier ease, *no overshoot*) to reveal sub-pages as index cards. - **Cutaway Sections:** Long articles are broken by full-bleed **section-cutaway bands** — a horizontal strip where the iso grid "peels back" to reveal a layer beneath (e.g. peeling back "Direct Dependencies" reveals "Transitive Closure" as a denser wireframe). Implemented as a clip-path wipe on scroll-trigger. - **The Errata Footer:** Closes every page like the back matter of a standard — revision table, "Conformance" stamp, a small isometric drawing of the wiki's own dependency tree (it eats its own dog food). No bento boxes, no hero-with-three-CTAs, no pricing tier columns, no stat-grid of big numbers. The page is a *document plate*, top to bottom. ## Typography and Palette **Typefaces — Google Fonts only, three families, used with drafting-room discipline.** - **IBM Plex Mono** — the workhorse. All body text, all code, all balloon callout numbers, all version strings, all leader-line labels. Set at 16px / 1.65 line-height for body, tracked 0 to +10 for labels in uppercase. This is the *manual's voice* — fixed-pitch, honest, slightly typewriter. Monospace body is unusual and intentional: it makes prose read like a printout, which is the point. - **Archivo** (specifically the heavier weights, 600–800) — display and headings only. A grotesque with a faintly industrial, signage-board quality. Used for page titles (40–56px), section heads (24–28px), and the cabinet-drawer labels. Tracked +20 in uppercase for drawer labels, normal case for titles. It is the *cover-plate stencil* against Plex Mono's body. - **Archivo Narrow** — used exclusively inside isometric figures and tables: column headers, axis labels, dimension callouts. Its condensed width lets dense engineering tables breathe inside cramped iso-projected space. **Palette — "drafting linen + blueprint annotation."** Seven values: - `#F2EEE3` — **drafting linen.** Primary background. A warm, slightly aged paper-white — the color of a vellum sheet, not stark #fff. Carries the iso grid as faint lines. - `#E6E0CF` — **plate margin.** The right-two-thirds margin zone and the side faces of extruded prisms; ~6% darker than linen, gives the 3D read. - `#1C2E3A` — **ink.** Near-black with a blue undertone — all primary text, all hairline borders, the heavy strokes of isometric figures. The "drafting pen" color. - `#1B4F8C` — **blueprint blue.** Links, balloon-callout fills, active drawer, the wireframe dependency graph. The classic technical-annotation blue. - `#B3431E` — **errata vermilion.** Used *only* for warnings, deprecated markers, CVE callouts, and the "this is normative" stamp — the red pencil of a reviewing engineer. Sparingly. Maybe three uses per page. - `#6B7A66` — **olive lichen.** Secondary metadata — timestamps, license tags, "see also" leader-line text. A muted moss that recedes politely. - `#D9B14E` — **brass washer.** A single accent metallic-yellow for the conformance seal and the balloon number type when on a blue fill — the only "warm shine" allowed, and it is matte brass, not gold foil. Contrast pairing: ink on linen for everything readable; blueprint blue on linen for navigation; vermilion reserved as alarm. The page is overwhelmingly paper-and-pen with two surgical color interventions. ## Imagery and Motifs **Three motif families, all line-based, all drawn in CSS/SVG — zero photography, zero raster.** 1. **Exploded-assembly diagrams (the core).** Isometric line drawings of "software as object": a binary as a milled aluminum block, a container image as stacked drawer-trays, a dependency as a labeled bolt, a license as a stamped plate. Always 1px–1.5px strokes in `ink`, side faces in `plate margin`, connected to numbered balloon callouts (circle, 1px blue stroke, brass number inside) by **dotted leader lines** that bend at exactly 26.57° to stay on the iso axis. 2. **Wireframe dependency graphs.** The signature large-format image: a force-directed graph of hundreds-to-thousands of package nodes, projected isometrically and rendered as a pale-blue **wireframe city** — nodes are tiny extruded squares of varying height (height = number of dependents), edges are thin blue lines. Used on the homepage and on "What is a dependency graph?" Drawn on `` but styled to match the linen-and-blueprint flat aesthetic; it pans slowly, hover reveals a balloon callout for any node. 3. **Plate furniture.** Drafting-manual chrome: corner registration marks (⌐ ⌙) at the four corners of every figure; a scale bar ("0 ··· 10 ··· 20 units"); revision-table grids with the classic A/B/C/D row stamps; the **conformance seal** — a hexagonal stamp reading "SBOM · WIKI · CONFORMANT" in brass, sitting slightly rotated (−7°) like it was pressed by hand; section-break **chevron rules** (six chevrons, ink, 1px); and the recurring **balloon-callout** widget itself, which is the wiki's icon for "this term is defined elsewhere." Texture: an extremely faint (3% opacity) paper-fiber grain over the linen background, and a 4%-opacity iso-grid drawn site-wide so every element visibly snaps to it. ## Prompts for Implementation Build sbom.wiki as **static HTML/CSS/JS — one stylesheet, one small ES module, optional `` for the dependency-graph plate. No framework, no SPA router, no build step beyond a single bundler pass.** It is a *wiki*, so multi-page is fine, but every page is a self-contained "plate." **Storytelling is the organizing principle.** Frame the entire wiki as a fictional-but-functional **engineering reference manual** titled something like "The Bill of Materials: A Field Manual for Software Composition." The homepage is *Plate 0 — General Arrangement*: the visitor lands on the big exploded-view of a generic software artifact, the iso diagram assembling itself on load (trays sliding apart along the vertical axis, leader lines drawing themselves via `path-draw-svg` stroke-dashoffset animation, balloon numbers fading in stagger 01→12). Scrolling the homepage flies the camera *down through* the artifact: hero diagram → the wireframe dependency-city → "why this matters" cutaway → index of all plates. Each balloon callout is a real link into the wiki. **Article pages** use the asymmetric 1:2 skeleton: Plex Mono prose pinned left in a 68ch column; the right plate-margin carries iso figures, version tables, and leader lines that physically connect a margin figure to the paragraph it annotates (the leader line redraws on scroll so it always points at the right line of text — this is the hero interaction). Section-cutaway bands wipe via clip-path on `scroll-triggered`. The flat-file `Parts Drawer` nav slides open/closed with crisp 180ms eases, **no spring, no bounce, no overshoot** — this manual is precise. **Motion vocabulary, restrained:** `path-draw-svg` for every leader line and figure outline; `stagger` for balloon numbers and table rows; `fade-reveal` (translateY 12px → 0, 240ms) for content blocks entering; the homepage artifact's ±4° sine rotation; the dependency-city slow pan + node hover-callout; `counter-animate` is *banned* (no big spinning numbers). `cursor-follow` only as a faint crosshair (a 1px ink reticle that snaps to the iso grid) — not a glowing blob. Everything reads as a drafting table, not a toy. **AVOID:** CTA-heavy hero stacks, "Sign up free" buttons, pricing tier columns, big animated stat-grids, glassmorphic blurred cards, neon glows, hand-drawn doodle aesthetics, parallax-photography heroes, testimonial carousels. There is no conversion funnel here — this is a reference work that happens to be beautiful. ## Uniqueness Notes Differentiators this design commits to — none should be duplicated by any other CMassC site: 1. **Monospace-body reference manual on a true isometric pixel grid.** The frequency analysis shows `mono` typography at 94% as a *code-accent*, almost never as the *primary body face for prose*; and `isometric` aesthetic sits at only 13%. This design's signature is using Plex Mono for full-length article prose *while* snapping the whole layout to a 2:1 axonometric grid — prose-as-printout inside an exploded-view plate. That intersection is the fingerprint of sbom.wiki. 2. **The redrawing leader line as the core interaction.** Margin figures are physically wired to the paragraph they annotate by an SVG leader line that re-bends on scroll to keep pointing at the correct line of body text. This "living parts-callout" is the load-bearing UX idea and would be plagiarism if copied. 3. **"Software as a milled object" iconography.** Rendering binaries as aluminum blocks, dependencies as bolts, licenses as stamped plates, and a `package-lock.json` as a turbine parts catalog — the entire visual metaphor of *software composition rendered as physical assembly* — is unique to this site. 4. **Drafting-linen + blueprint-blue + errata-vermilion palette.** Deliberately rejects the cohort-dominant `warm` gradient (98%) and `gradient` (94%) palettes: this is flat fills, paper-white, two surgical accent colors, one matte brass. No gradients anywhere except the optional canvas depth-fog on the dependency-city. 5. **No CTAs, no funnel, no bento boxes** — explicitly avoiding the overused `card-grid` (92%), `bento-box`, `hero-dominant`, `glassmorphism` (83%), `cursor-follow`-as-blob (89%), and `spring`/`elastic`/`bounce` motion (84%/20%/3%). Motion here is drafting-precise: path-draw, stagger, clean clipped wipes, zero overshoot. Chosen seed/style: **isometric technical docs** (from seeds.json), pushed toward a 1970s engineering field-manual register and re-skinned around the Software Bill of Materials domain.