# Design Language for sbom.day ## Aesthetics and Tone `sbom.day` is read as a bulletin board pinned to the door of the supply chain: **SBOM** — Software Bill of Materials — the daily ledger of every component, library, and dependency that breathes inside a piece of software, followed by **.day**, the single rotation of the earth during which one audit window closes and another opens. The site materialises that concept as a **brutalist hall of transparent inventory**, raw, undecorated, radically honest — a place where the ledger is the art. The aesthetic is **brutalist-editorial**, not brutalist-hostile. Raw concrete is replaced with raw *forest* — deep mossed greens, fern shadow, lichen grey — so the brutalism reads as **verdant permanence** rather than urban severity. Think of a botanical archive carved into stone: the taxonomy is real, the material is honest, the feeling is alive. Every component listed is a specimen. Every dependency is a pressed leaf. Tone is **optimistic-bright** — this is not a compliance wall, it is a celebration of transparency. The site argues that knowing what is inside your software is joyful, not burdensome. Stars appear as motifs not because the domain is cosmic but because **every open-source component is a named star in a constellation**: the SBOM is the star chart. Inspiration sources: - The Linnaean specimen sheet: ruled columns, Latin binomial names, collector stamps - Swiss grid poster design of the 1970s crossed with a living herbarium wall - The visual language of celestial cartography: star magnitudes, constellation lines, coordinate grids --- ## Layout Motifs and Structure The core structure is a **horizontal-scroll panorama** — a single unbroken canvas 600vw wide, divided into **six full-viewport panels**, each 100vw × 100svh, laid out left-to-right along a single rail. There is no vertical scroll. The only navigation is horizontal drag/swipe/wheel, plus a six-dot star-pip indicator at the bottom centre that marks position. **Panel sequence (left to right):** 1. **The Cover Panel.** Full-bleed deep forest green (`#1B3A2D`). A single enormous Playfair Display headline in cream — `sbom.day` — set at `clamp(7rem, 18vw, 16rem)`, weight 700, centred. Below it a single sub-clause in Playfair Italic at 1.4rem: *"every component, named and known."* Three constellation lines (SVG, cream, 1px stroke, 0.3 opacity) radiate from the lettermark like a specimen label. No other elements. Enters with a single elastic spring-in over 1200ms. 2. **The Inventory Panel.** Off-white parchment (`#F4F0E6`) background. A brutalist three-column ledger table fills the panel edge-to-edge: `COMPONENT`, `VERSION`, `LICENSE` columns. Rows are real (populated with a curated 12-item SBOM of the site's own hypothetical dependencies). Row heights are generous at 48px. Borders are 2px solid forest green. The font is Playfair Display for column headers, IBM Plex Mono for cell content. One starred row (the most-used dependency) is highlighted in pale chartreuse (`#D6E8A4`). The table elastic-springs in column by column with 80ms stagger. 3. **The Specimen Panel.** Deep charcoal (`#2A2E25`) background. Abstract botanical shapes — twelve SVG fern-frond silhouettes in varying forest greens (`#2D6A4F`, `#52B788`, `#B7E4C7`) — float at large scale (200px–500px) as background texture at 12% opacity. Foreground: a single large circular frame, 70vmin diameter, containing a generative star-map SVG of 40 named stars, each star a small Playfair numeral (the star's magnitude). Connecting constellation lines in chartreuse. The star-map slowly rotates at 0.5rpm on a CSS transform. A four-line annotation in IBM Plex Mono at 0.85rem labels the circle: `"COMPONENT CONSTELLATION / SBOM v2.3 / VERIFIED 2025-05-11 / SHA-256: 4f9a…"`. 4. **The Philosophy Panel.** Forest green (`#2D6A4F`) background, cream text. Three brutalist typographic blocks, each occupying a horizontal third of the panel, separated by 2px cream hairlines. Block 1: Playfair Display `"KNOW"` at `14vw`. Block 2: Playfair Display `"EVERY"` at `14vw`. Block 3: Playfair Display `"PART"` at `14vw`. Below each word: three lines of IBM Plex Mono body text explaining one pillar of SBOM transparency. The words spring into position from below with staggered elastic timing (300ms apart). On hover each column lifts 6px with a 200ms ease. 5. **The Star Chart Panel.** Cream (`#F4F0E6`) background. A full-panel SVG botanical-celestial hybrid: forest floor plants rendered in precise line-weight illustration style (2px strokes, forest greens) rise from the bottom third; above them a night-sky grid of coordinate lines (sage green, 0.4 opacity) forms the celestial sphere. At 20 intersections, six-pointed star motifs (`★`) in deep forest green mark fictional component names. Each star has a small handwritten-style Playfair label: `react@18.3`, `openssl@3.2`, etc. The whole composition is static, architectural, map-like. A circular magnifier (CSS backdrop-filter blur + scale) follows the cursor, enlarging the region under it by 1.4×. 6. **The Day Panel.** Returning to deep forest green (`#1B3A2D`). A single centred date-stamp in Playfair Display Italic — today's date in the format `11 May 2026` — at `clamp(3rem, 8vw, 7rem)`. Below it: `"Today's SBOM window."` Sub-body in IBM Plex Mono: three lines of forest-audit cadence copy. In the lower-right corner a single large abstract-shape motif: a six-pointed star (`#D6E8A4`) at 40vmin, semi-transparent (0.08 opacity), as a colophon watermark. The panel fades in with a single 800ms opacity transition after arriving from panel five. **Horizontal scroll mechanics:** - Wheel delta mapped 1:1 to translateX on the rail container - Touch/pointer drag with inertial momentum (elastic overshoot at both ends: 80px spring-back) - Keyboard: arrow keys advance one full panel with a 600ms ease-out-cubic snap - The six star-pips at bottom are clickable and snap to each panel with elastic spring **No sticky nav. No header. No footer links. No CTA buttons. No pricing.** --- ## Typography and Palette **Type system — two families, both Google Fonts:** - **[Playfair Display](https://fonts.google.com/specimen/Playfair+Display)** — weights 400, 400 italic, 700, 900. The primary voice. Used for all headlines, panel titles, the three-word brutalist triad, the wordmark, and the date-stamp. Its high-contrast serifs and refined editorial posture contrast sharply with the raw structural grid, creating the core tension of the design: botanical archive meets brutalist ledger. - **[IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono)** — weights 400, 500. The data voice. Used for all table cell content, annotation strings, SHA hashes, version numbers, and body copy paragraphs. Its mono spacing aligns with the SBOM's nature as machine-readable inventory. **Palette (six values):** | Token | Hex | Role | |---|---|---| | `--forest-deep` | `#1B3A2D` | Primary dark bg (panels 1, 6) | | `--forest-mid` | `#2D6A4F` | Secondary green (panels 4, specimen accents) | | `--forest-light` | `#52B788` | Highlight green (star-map lines, hover states) | | `--sprout` | `#B7E4C7` | Pale mint (fern silhouettes, faint overlays) | | `--chartreuse` | `#D6E8A4` | Accent (starred table row, colophon star) | | `--parchment` | `#F4F0E6` | Light bg (panels 2, 5), primary text on dark | | `--ink` | `#2A2E25` | Dark charcoal (panel 3 bg, body text on light) | --- ## Imagery and Motifs **Botanical silhouettes (abstract-shapes).** Twelve SVG fern-frond and leaf shapes, each a single filled path with no outlines. Derived from real botanical forms (Asplenium, Osmunda, Dryopteris) but abstracted to 5–8 bezier control points each. Never photographic. Used as large-scale background texture in panel 3 and as smaller decorative stamps in the panel 2 table margin. The shapes are the site's primary abstract imagery — not geometric, not illustrative, but halfway between a botanical press and a woodblock print. **Constellation lines (star-celestial).** Thin SVG polylines connecting star-dots on the star-map in panel 5. Each line is 0.8px, forest green, 60% opacity. The constellation is fictional but structured as a recognisable pattern: the twelve major SBOM component categories (OS libs, runtime, build tools, etc.) each form a small asterism. The connecting geometry is purely decorative but encoded with meaning: density of connections represents dependency depth. **Six-pointed star motifs.** Used as: position pips in the nav indicator, the colophon watermark in panel 6, inline bullet replacements in body copy (`★`), and hover-state icons on table rows. Always flat, always the same path, scaled from 8px to 40vmin. The star is the site's single recurring graphic primitive — its `★` role mirrors the asterisk as a footnote marker in scholarly texts. **Botanical-celestial hybrid (panel 5).** The site's most complex image: a single full-panel SVG where the bottom half is a forest-floor illustration (line art, 2px stroke, 4–6 plant specimens) and the top half is a coordinate-grid sky. The two halves share the same drawing language — thin lines, precise angles, measured space — so the join is seamless. This is the site's hero image and narrative climax. **No photographs. No stock art. No 3D. No gradients.** --- ## Prompts for Implementation Build `sbom.day` as **a horizontal panorama of six botanical-brutalist panels on a single unbreaking rail, navigated by wheel inertia and elastic snap, populated with a real 12-row SBOM table, a rotating star-map, and a full-panel celestial-forest illustration.** This is not a landing page. It is a specimen archive you walk through from left to right. **HTML structure:** ``` body (overflow-x: hidden; overflow-y: hidden) .rail (display: flex; width: 600vw; will-change: transform) .panel × 6 (width: 100vw; height: 100svh; flex-shrink: 0) .nav-pips (position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%)) ``` **Horizontal scroll implementation:** - Capture `wheel` events on `body`; accumulate `deltaX` or `deltaY` into a target offset - Clamp offset to `[0, 5 * 100vw]` - On each rAF tick, lerp current offset toward target at factor 0.12 (smooth inertia) - After lerp settles within 1px of a panel boundary (multiples of 100vw), elastic-snap to nearest panel with a spring function: `x += (target - x) * 0.18; v *= 0.72` - Touch: `pointerdown` / `pointermove` → accumulate drag delta; `pointerup` → apply inertia **Elastic spring animations (elastic pattern):** - Panel entrance: `transform: translateY(40px) scale(0.97)` → `translateY(0) scale(1)` with `cubic-bezier(0.34, 1.56, 0.64, 1)` over 700ms - Table columns stagger: same cubic-bezier, 80ms apart, `translateX(-20px)` → `translateX(0)` - Word-columns in panel 4: `translateY(60px)` → `translateY(0)`, 300ms stagger, same cubic - Pip clicks: snap with `cubic-bezier(0.34, 1.56, 0.64, 1)` over 600ms **Rotating star-map (panel 3):** - SVG `` with 40 `` (r 2–5px) and 38 `` elements - `transform-origin: center center` on the group - `@keyframes rotateStar { to { transform: rotate(360deg); } }` with `animation-duration: 120s; animation-timing-function: linear; animation-iteration-count: infinite` - Stars are cream (`#F4F0E6`) on charcoal bg; constellation lines are chartreuse at 0.6 opacity **Magnifier cursor (panel 5):** - `
` follows `mousemove` with `transform: translate(x, y)` - CSS: `width: 160px; height: 160px; border-radius: 50%; border: 1.5px solid #2D6A4F; backdrop-filter: none; overflow: hidden` - Instead of backdrop-filter, duplicate the SVG artwork inside `.magnifier` scaled 1.4× and positioned to track the cursor offset (offset the duplicate by `-0.4 * cursorX, -0.4 * cursorY`) **SBOM table (panel 2):** - 12 rows of real-feeling data: `react`, `lodash`, `openssl`, `zlib`, `curl`, `node-fetch`, `express`, `webpack`, `babel-core`, `typescript`, `eslint`, `prettier` - Columns: `COMPONENT`, `VERSION`, `LICENSE`, `HASH (SHA-256, truncated to 12 chars)` - Row 3 (`openssl`) starred with a `★` prefix in the component cell and `background: #D6E8A4` - On row hover: entire row shifts `translateX(6px)` with `transition: 0.15s ease`; a star pip appears at the row's right edge **Fern silhouettes (panel 3 bg):** - 12 `` elements, each a simplified fern frond (7–9 bezier points) - `fill: #52B788` or `#2D6A4F` alternating - `opacity: 0.12` - Positioned absolutely, `pointer-events: none` - No animation — static, wallpaper-like **Do NOT use:** parallax scroll (it conflicts with horizontal-scroll UX), infinite-scroll loading, canvas WebGL, video backgrounds, carousels within panels, hamburger menus, sticky headers, modals, toast notifications. **Avoid overused corpus patterns:** scroll-triggered (35% of corpus), brutalism without a modifying palette (7%), star-celestial as the sole motif (5%), generic card grids. --- ## Uniqueness Notes 1. **Horizontal-scroll at 1% corpus frequency.** Of all designs in the registry, only 1% use horizontal-scroll as the primary navigation paradigm. `sbom.day` commits fully — no fallback vertical scroll, no hybrid mode. The entire experience is a left-to-right walk through six panels. This makes it the definitive horizontal-scroll specimen in the corpus. 2. **Forest-green as a brutalist palette (2% corpus frequency for forest-green, 7% for brutalist — zero overlap).** The corpus has many brutalist designs but all lean toward concrete greys, blacks, or neon accents. `sbom.day` is the first brutalist design that is *also* forest-green, creating a new compound aesthetic: verdant brutalism. The rawness comes from the grid and the undecorated ledger table; the warmth comes from the green spectrum and the parchment. 3. **Playfair Display in a data-density context (3% corpus for playfair-elegant).** Playfair is used in the corpus for editorial and literary designs. Here it is placed in direct typographic collision with IBM Plex Mono inside a live SBOM ledger table — Playfair headers, monospace cells. This is an unusual pairing that expresses the site's core tension: transparency is both a legal obligation (mono, tabular, precise) and a cultural choice (serif, elegant, proud). 4. **SBOM as specimen archive.** No other design in the corpus uses the domain's technical subject matter (software bill of materials) as a visual metaphor for natural history taxonomy. The botanical-celestial hybrid in panel 5 is the site's singular image: a forest floor grows upward into a star chart, and every plant label is a software component name. This metaphor is not explained — it is shown. 5. **Chosen seed:** aesthetic: brutalist, layout: horizontal-scroll, typography: playfair-elegant, palette: forest-green, patterns: elastic, imagery: abstract-shapes, motifs: star-celestial, tone: optimistic-bright 6. **Avoided overused patterns:** scroll-triggered (35% corpus — not used anywhere; all animations are entrance-based or continuous, never scroll-triggered), generic card grids, CTA button clusters, pricing blocks, stat counters, hero-image overlays.