# Design Language for sbom.day ## Aesthetics and Tone sbom.day is the gathering point for the Software Bill of Materials movement — a day, a manifest, a public ledger of every component humanity ships inside its software. The design treats this as an **architect's blueprint room crossed with a customs manifest hall**: a place where every dependency is drawn, labelled, stamped, and accounted for. The mood is *precise, transparent, quietly civic* — like reading a beautifully engineered exploded-view diagram of a machine you depend on every day. Not corporate-clean, not cyberpunk-dark: think drafting linen, ammonia-print blue, the smell of a print shop, the satisfying click of a stamp. Everything is *legible by design*. Nothing hides. The page should feel like it has nothing to conceal because it literally shows you its own parts list. Tone words: cartographic, declarative, exacting, generous, unglamorous-in-the-best-way. The emotional payoff is *relief* — the relief of finally being able to see what's inside. ## Layout Motifs and Structure - **The Manifest Spine**: a single vertical axis runs down the entire page — a thin double rule (like a ledger margin or a blueprint fold line) at roughly 1/3 from the left on desktop. Section numbers, component IDs, and timestamps live in this gutter in monospace. Content cantilevers off the spine to the right. - **Isometric component drawings**: hero and key sections feature large 2:1 isometric line-drawings — a "software artifact" rendered as a stack of translucent layers / nested crates / a transparent shipping container with labelled boxes inside. These are SVG, drawn in thin strokes, and they assemble on scroll (layers slide in and lock together with a small settle). - **Ledger rows, not cards**: instead of a card-grid, content is organised as **manifest rows** — full-width horizontal bands separated by hairlines, each with a left-aligned ID column, a centre body, and a right-aligned "stamp" column (a status glyph: VERIFIED, OPEN, DRAFT). Rows expand in place (accordion-as-disclosure, like opening a drawer in a flat file). - **The Provenance Trail**: one section is a horizontal-scroll timeline rendered as a customs-stamp strip — overlapping circular and rectangular ink stamps marking moments in the SBOM story (executive orders, format milestones, the founding of the day). It scrolls sideways, ink slightly misregistered for authenticity. - **Margins as content**: generous outer margins carry faint registration marks, fold-line ticks, and a running "sheet 1 of 1" style folio. The page knows it is a document. - **No bento boxes, no dashboards, no hero-with-3-CTAs.** The home page reads top to bottom like an actual bill of materials: cover sheet → what's inside → why it matters → the trail of how we got here → the open ledger (community/contribute) → colophon. ## Typography and Palette **Typefaces (all Google Fonts):** - Display / headlines: **Major Mono Display** — used sparingly for the wordmark and section numbers; its split, monospaced-engineering feel reads like a stencilled crate label. - Primary headings & pull statements: **Archivo** (especially Archivo Expanded weights via variable axis, or just bold) — a grotesque with a slightly technical, signage quality; confident without shouting. - Body & long-form: **Newsreader** — a quietly bookish serif that gives the manifest descriptions a documentary, readable warmth so the page doesn't feel like a spec sheet. - Mono / IDs, timestamps, component hashes, the spine: **Spline Sans Mono** — clean, contemporary monospace for all the ledger machinery. **Palette:** - `#F4F1E8` — Drafting Linen (primary background; warm paper, not white) - `#1B2A4A` — Ammonia Print Blue (primary ink — text, rules, line-drawings) - `#E8E2D0` — Tracing Vellum (secondary surface for expanded rows / margins) - `#C8472B` — Customs Vermilion (the stamp colour — accents, status marks, underlines, the live cursor) - `#5E7BA0` — Faded Blueprint (mid-tone for isometric fills, secondary line work, hover states) - `#0E1526` — Index Ink (near-black for the colophon / footer inversion zone) - `#7A8C5A` — Verdigris Stamp (a single secondary stamp colour for "VERIFIED" glyphs only) Default mode is the warm paper/blue document. The closing colophon section inverts to `#0E1526` with linen text — like flipping the sheet over to read the back. ## Imagery and Motifs - **Isometric exploded-view line art**: the recurring hero motif — a generic "software package" drawn as transparent nested containers, each labelled with a tiny mono caption (`crypto-lib v2.4`, `image-codec`, `tls`, `unknown ⚠`). One box is always left unlabelled and faintly hatched red — the thing an SBOM exists to reveal. - **Customs / notary stamps**: circular and rectangular rubber-stamp graphics — `MANIFEST RECEIVED`, `COMPONENTS: 412`, `SBOM.DAY` with a date ring — applied at slight angles with ink-bleed texture. Used as section seals and the provenance timeline markers. - **Registration marks & fold ticks**: the small `+` crosshairs and corner ticks from print production, scattered in the margins as quiet decoration. - **Ledger hairlines & double rules**: thin `#1B2A4A` lines everywhere, doing the structural work that cards usually do. Double rules mark major divisions. - **Hatching & screentone**: areas of uncertainty (the unknown component, deprecated items) are filled with diagonal hatching or coarse dot screentone, like an engineering drawing flagging a region of concern. - **A barcode-ish element**: the wordmark or footer can carry a vertical-line motif that reads as both a barcode and a city skyline — software as infrastructure. - No stock photography. No glass blur. No neon glow. Everything is drawn ink-on-paper. ## Prompts for Implementation - **Tell it as a document being assembled, not a product being pitched.** On load: a blank "sheet" with just registration marks and the folio; then the manifest spine draws itself top-to-bottom (SVG line-draw), then section numbers stamp in, then content rows settle into place. The whole thing should feel like a printer plotting a blueprint. - **The isometric artifact is the protagonist.** Scrolling through the "What's inside an SBOM" section should physically assemble and then explode the isometric package — layers separate, labels fan out on leader lines, the unlabelled red-hatched box gets isolated and called out. Use scroll-linked transforms; let it settle with a tiny spring overshoot, like blocks dropping into a tray. - **Manifest rows expand like flat-file drawers**: clicking a row slides it open downward on `#E8E2D0` vellum, the right-hand stamp re-inking from DRAFT→VERIFIED as content loads. Stagger the inner lines in. - **Stamps land, they don't fade.** Status glyphs and section seals should scale-down from ~1.15 with a hard ease and a 1px ink-bleed shadow, optionally a 1–3° rotation, like a hand pressing a rubber stamp. Maybe a faint paper-shake. - **The provenance trail is a horizontal-scroll ink strip** — drag or scroll-jacked sideways through overlapping date stamps; parallax the stamps slightly against a faint grid so the strip feels physical and hand-stamped (misregistered ink). - **Cursor as a stamp / draughtsman's pen**: a small vermilion crosshair or registration `+` follows the pointer; over interactive rows it morphs into a tiny stamp outline; on click it leaves a brief ink-press ripple. Subtle, never gimmicky. - **Margins breathe.** Keep the outer columns mostly empty save for folio text, fold ticks, and the running sheet count. Let the asymmetric spine carry the composition. - **Colophon inversion**: the final section flips to dark `#0E1526` — "the back of the sheet" — listing fonts, colours, build provenance, and contributor credits as if they were themselves a bill of materials for the page. Self-referential, honest, fitting. - **AVOID**: CTA-stacked heroes, pricing tables, stat-grids-as-decoration, generic card grids, glassmorphism, dark-neon-SaaS clichés, gradient mesh blobs, parallax-for-its-own-sake. Motion must always read as *paper, plotting, and stamping* — mechanical, deliberate, never floaty. ## Uniqueness Notes Differentiators from other designs: 1. **Document-as-interface, literally**: built around a manifest spine, ledger rows, folio marks, and a colophon-inversion — it presents itself as the very kind of artifact (a bill of materials) that the site is about. Self-referential structure no card-grid site has. 2. **Stamp-and-plot motion language** instead of the ubiquitous parallax/cursor-follow/spring-bounce default — interactions are modelled on rubber stamps landing and a plotter drawing lines, with deliberate ink misregistration. 3. **Isometric exploded-view line art as the recurring protagonist**, complete with a deliberately unlabelled red-hatched "unknown component" — a narrative device, not decoration. Sits in the underused isometric / line-illustration / data-viz space rather than photography or gradient mesh. 4. **Warm drafting-linen + ammonia-blue + customs-vermilion** palette — a print-shop / blueprint world, avoiding the over-represented warm-gradient and midnight-blue-neon territory while still technically warm-leaning. 5. **Typography pairing of Major Mono Display + Archivo + Newsreader + Spline Sans Mono** — engineering stencil meets signage grotesque meets documentary serif; not the default mono-only or mono+humanist combo. Chosen seed / style: **isometric technical docs** (from seeds.json — "isometric technical docs"). Mapped vocabulary: aesthetic `isometric`, layout `single-column` + `timeline-vertical` + `horizontal-scroll`, typography `mono` + `tech-mono` + `serif-revival`, imagery `line-illustration` + `data-viz`, motifs `grid-lines` + `tech`, palette `high-contrast` + `warm`, tone `professional` / `authoritative`. Avoided patterns from frequency analysis: glassmorphism (83%), hand-drawn (94%), photography imagery (98%), card-grid (92%), bento-box, dashboard, gradient-mesh, cursor-follow/parallax/spring as the *primary* motion idiom (replaced with stamp/plot mechanics), midnight-blue-neon and warm-gradient palette clichés, CTA-heavy hero / stat-grid / pricing layouts.