# Design Language for sbom.wiki ## Aesthetics and Tone `sbom.wiki` is **a candlelit terminal archive** — the kind you'd find deep in a medieval scriptorium that has been repurposed as a server room. The monks left their tallow candles burning, the IBM 3270 terminals are still humming, and somewhere between the warm amber glow of taper-flame and the cool phosphor pulse of a CRT screen, someone has been recording the provenance of every piece of software that ever existed. The dominant tension is **warmth-against-cold**: burnt-orange candlelight bleeding into the cool dark of a terminal screen. The background is not pure black — it is the brown-black of scorched wood and aged ink (`#1C0F06`). Against this, CRT phosphor text glows in amber-orange (`#D4622A`) and soft gold (`#E8962A`), with an occasional flicker to warm cream (`#F2E8D0`) for the moments when a flame passes close. The CRT scan-line effect is subtle, layered over a bokeh background where out-of-focus candle flames create warm halation circles at a depth of 60px gaussian. The **pastoral-romantic** tone is not at war with the terminal aesthetic — it has *colonized* it. Dependency lists read like herbarium entries. Package versions are annotated in the margins like monk commentary. The SBOM data is ancient, weighty, reverentially documented. The interface is a terminal only because terminals are how the modern age chose to record its books of hours. There are no heroes, no CTAs, no conversion funnels. Only the long candlelit scroll of provenance. ## Layout Motifs and Structure The page is a **single vertical timeline spine** anchored at the left, 4px wide, glowing amber (`#D4622A`) with a 0.6-opacity blur radius of 4px that suggests a wick-edge rather than a hard rule. This spine runs the full document height. **The Spine Architecture:** - The timeline spine begins 80px from the left viewport edge at all breakpoints - Every entry on the spine is a `sbom.wiki` component record — a package name, its provenance chain, its known vulnerabilities, its license lineage - Entries hang from the spine like monastic marginalia: primary text flush to 120px from left, secondary annotations in smaller type floating further right - The spine itself has periodic `●` knots at each major component category (OS layer, application layer, firmware layer), rendered as burning-coal orange circles with a subtle radial glow **Vertical Rhythm:** - Each component block occupies `min-height: 220px` — enough room to breathe like a page of illuminated manuscript, not a compressed data row - The vertical spacing between blocks collapses slowly as you scroll deeper, creating a density gradient: sparse at the top (curated, important) and dense at the bottom (exhaustive, archival) - Section headers float in the spine's gutter, rotated 90 degrees counter-clockwise, as if stamped into the parchment margin **Fixed Background:** - The bokeh-blur candleflame background is `position: fixed`, never scrolling. The content scrolls over it. The flames appear to breathe — slowly shifting their blur radius via CSS animation at 4-second intervals, 0.3 easing. The result: the content swims above a breathing amber ocean. **Mobile:** - The spine migrates to a 2px top-border strip on mobile, and blocks stack full-width below it. The fixed bokeh background remains. ## Typography and Palette **Type System — all Google Fonts:** - **Display & Component Names — `Bebas Neue`** — All-caps, tracked at 0.12em, used for every package name heading. Set at 48px on desktop, 32px on mobile. The condensed geometry of Bebas Neue evokes both terminal readout and stone-cut lettering. Package names feel chiseled. Weight: 400 (the only weight). Color: `#E8962A` (warm gold-amber). - **Body & Annotations — `Crimson Pro`** — A scholarly, slightly warm serif that carries the prose descriptions, license text, CVE annotations, and version history. 17px/28px line-height on desktop. The serifs whisper of a scriptorium; the terminals didn't fully replace the quill. Color: `#C9B99A` (aged parchment). - **Metadata & Version Strings — `JetBrains Mono`** — A monospaced technical face for all hashes, SHAsum values, version numbers, and machine-readable strings. 13px, tracked at 0.05em. Color: `#8A6A4A` (dim amber, like ink faded on old paper). When a vulnerability is present, this text pulses to `#D4622A` (alert orange). - **Section Spine Labels — `Bebas Neue`** — 14px, letter-spacing 0.25em, rotated 90deg, positioned in the spine gutter. Color: `#5C3A1E` (dark umber, barely readable against the background — intentionally marginal). **Palette (6 hex values):** | Role | Color | Hex | |------|-------|-----| | Background | Scorched-wood black-brown | `#1C0F06` | | Spine & primary glow | Burnt orange | `#D4622A` | | Heading gold | Warm amber gold | `#E8962A` | | Body text | Aged parchment | `#C9B99A` | | Dim metadata | Faded ink amber | `#8A6A4A` | | Faint grid / dividers | Embers dusk | `#3A1E0E` | **CRT Texture Layer:** A `position: fixed` full-viewport overlay of repeating 2px-high horizontal rules at 4px pitch, rendered at 3% opacity using `rgba(0,0,0,0.03)`. This is the scan-line membrane that reminds the eye: this is a terminal, even while the candles burn. ## Imagery and Motifs **Bokeh-Background Candle Flames:** The background layer is a constructed bokeh field — not a photograph, but a CSS+SVG simulation. Six to twelve elliptical SVG blobs float at fixed positions across the viewport, each representing an out-of-focus candleflame. Each blob is: - A radial gradient from `rgba(232, 150, 42, 0.35)` at center to `rgba(212, 98, 42, 0)` at edge - Elliptical: width 120–280px, height 160–350px - Randomly rotated 0–25 degrees - Independently animated: each "breathes" on a 3–6 second loop, scaling between 0.88 and 1.12, with a slight x-drift of ±8px - The aggregate effect: a field of warm, breathing amber bokeh discs behind the timeline, never distracting, always present — like candlelight through frosted glass **Candle-Atmospheric Motifs:** - **Drip marks**: Thin vertical amber lines (`#D4622A` at 15% opacity) descend from the spine dot markers, elongating 30–80px below each knot, as if wax has dripped from a candle held over the page - **Wax seal accents**: At the start of each major section (OS layer, Application layer, etc.), a circular 40px wax seal stamp graphic rendered in SVG — a hexagonal SBOM mark pressed into soft amber wax, with a concave center and a fine ring of text around the perimeter - **Burn edges**: The very top and bottom of the viewport have a vignette shadow — but it is warm amber-brown (`#3A1E0E`), not black, suggesting parchment singed at its edges - **Ember particles**: At page load, 12–18 small circular particles (`3–6px`) rise from the bottom of the spine, following a slow upward drift with random wobble, rendered in `rgba(212, 98, 42, 0.6)` — embers rising from a fire below the archive **Terminal ASCII Ornamentation:** Between major sections, a single line of ASCII box-drawing characters acts as a divider — `─────────────────────────────────` — rendered in `#3A1E0E` (barely-dark-on-dark), with hover brightening to `#8A6A4A`. This is the terminal insisting it is still a terminal, even as the candles burn around it. ## Prompts for Implementation Build `sbom.wiki` as **a single candlelit scripture of software provenance** — a document that moves through software layers the way a psalter moves through psalms: methodically, reverently, with marginalia. There are no sections that can be skipped; every component is recorded. The visitor scrolls this manuscript from creation to current version. **Macro structure (full scroll, top to bottom):** 1. **Flame Opening (`100svh`).** The bokeh background is already present. Over 1.5 seconds, the Bebas Neue wordmark `sbom.wiki` fades in — first the `S`, then `BOM`, then `.wiki` — each letter appearing like a character being written by a slow quill. Below the wordmark, a single Crimson Pro italicized subtitle: *"The open register of software composition."* Below that, a JetBrains Mono timestamp of the last registry update. The spine line extends downward from the bottom of this opening block, growing into the distance. Scroll-indicator: a slow ember particle rising from the bottom of the screen. 2. **Layer Category Header (Sticky).** As the visitor scrolls into the first component group, a sticky header appears: the wax seal stamp on the left, the layer name in Bebas Neue `48px` on the right, a JetBrains Mono count of components in this layer (`// 347 components`) on the far right. Background: `rgba(28, 15, 6, 0.92)` with a 12px blur backdrop-filter. This header sits 56px from top when sticky. 3. **Component Timeline Entries (Scroll-Triggered).** Each component block sits off-screen to the right (`translateX(40px)`, `opacity: 0`) until its spine knot enters the viewport. On scroll entry (Intersection Observer, threshold 0.25), the block slides in (`translateX(0)`, `opacity: 1`) over 400ms with `cubic-bezier(0.16, 1, 0.3, 1)`. The spine drip mark appears simultaneously, growing downward from the knot over 600ms. Components with known vulnerabilities have their Bebas Neue name in `#D4622A` (warning orange) and a small pulsing dot next to the wax seal. 4. **CVE Alert Blocks (Inline Expansion).** Clicking a component with vulnerabilities expands an inline panel — a `max-height` animation from 0 to `auto`, background `#3A1E0E` (embers dusk), left-border 3px `#D4622A`. Inside: each CVE listed in JetBrains Mono with severity color (critical: `#D4622A` pulsing, high: `#E8962A`, medium: `#C9B99A`). The expansion uses `clip-path: inset(0 0 100% 0)` animating to `inset(0 0 0% 0)` for a scroll-unfurling effect. 5. **Dependency Graph Node (Mid-page Interstitial).** At the midpoint of the scroll, a full-width `100svh` section renders a force-directed SVG dependency graph — all nodes as amber circles (`#D4622A`), edges as thin `#3A1E0E` lines brightening to `#8A6A4A` on hover. The graph uses the fixed bokeh background as its depth layer. Nodes drift slowly (physics: low friction, short springs) until hovered, when they lock and highlight their dependency chain. This is the only section with horizontal movement; everything else is vertical. 6. **Archive Footer.** The spine terminates in a final wax seal at the page bottom. Below: a Crimson Pro italic note — *"This registry is regenerated from source on every commit."* — and a JetBrains Mono SHA hash of the last build. The ember particles continue rising throughout the footer until the user stops scrolling. No footer nav, no social links, no copyright notice. Only provenance. **Scroll-Triggered Animation Specifics (scroll-triggered seed):** - Use `IntersectionObserver` for all entry animations — no scroll event listeners - Component blocks: stagger by 80ms per block within a group (max 5 staggered at once) - Spine drip marks: `scaleY()` transform from 0 to 1, `transform-origin: top center` - Wax seals: `scale(0) rotate(-15deg)` → `scale(1) rotate(0deg)` on section entry, 500ms `spring(1, 80, 10, 0)` approximated with `cubic-bezier(0.34, 1.56, 0.64, 1)` - Ember particles: use Web Animations API, not CSS keyframes, for individual particle lifetime control **Implementation Notes:** - No JavaScript frameworks — vanilla JS only. No build step required for the bokeh or animations. - The bokeh layer must run in a `` for performance on long pages — do not use DOM elements for the animated blobs. - CRT scan-line overlay: a single `
` with `background: repeating-linear-gradient(transparent, transparent 2px, rgba(0,0,0,0.04) 2px, rgba(0,0,0,0.04) 4px)` at `pointer-events: none` covering the viewport. - All font imports via `@import` in CSS, not `` tags, to control loading order (Bebas Neue → Crimson Pro → JetBrains Mono, each display-swap). ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **terminal**, layout = **timeline-vertical**, typography = **bebas-bold**, palette = **burnt-orange**, patterns = **scroll-triggered**, imagery = **bokeh-background**, motifs = **candle-atmospheric**, tone = **pastoral-romantic**. **Differentiators from every other design in the registry:** 1. **Warmth-as-terminal-subversion.** Terminal aesthetic is at 32% in the registry — but every terminal design in the corpus uses cold phosphor green or ice-blue. `sbom.wiki` inverts the terminal color vocabulary entirely: amber, burnt-orange, scorched-wood black. The terminal is warm. The CRT flickers like a candleflame. This is the first terminal design in the registry that feels like it belongs in a candlelit room. 2. **Bokeh background as ambient depth without photography.** The registry shows `bokeh-background` at low usage, and all existing uses likely reference actual photographs. `sbom.wiki` constructs its bokeh field entirely in CSS/Canvas — animated radial gradient blobs that breathe independently. This is a fully synthetic bokeh that moves and lives, not a static photo behind text. 3. **Timeline-vertical as manuscript column, not event log.** The other timeline-vertical design in the registry (adhoc.quest) uses the timeline as an event log metaphor. `sbom.wiki` uses it as a *scriptorium manuscript column* — the spine is a wax-drip-annotated vellum edge, each entry is a component record rather than a timestamped event, and the vertical progression is through software *layers* (OS → application → firmware) rather than chronological time. The spatial metaphor is depth, not duration. 4. **Bebas Neue on a technical dataset.** The registry uses Bebas Neue at 6%, almost exclusively for decorative or marketing headings. `sbom.wiki` makes Bebas Neue the primary display face for machine-generated technical data — package names, CVE identifiers, component categories. The condensed all-caps geometry transforms dry technical strings into something that reads like illuminated letters. A SHA hash in Bebas Neue looks like it belongs in a monastic register. 5. **Avoided overused patterns.** The frequency report shows hand-drawn (57%), editorial (52%), mono (74%) as dominant patterns in the corpus. `sbom.wiki` uses none of these: no hand-drawn textures, no editorial content flow, and `JetBrains Mono` appears only for metadata/hashes — the primary type is serif (Crimson Pro) and display condensed (Bebas Neue). The site actively avoids the mono-typography reflex that defines 74% of designs in the registry.