# Design Language for sbom.study ## Aesthetics and Tone **sbom.study** sits at the intersection of supply-chain security and developer education — the kind of domain where trust is the entire product. The site is designed as a **living dependency graph made visible**: every panel, every transition, and every typographic weight choice embodies the logic of a software bill of materials. A bill of materials is, at its core, a declaration of what something is made of. The design makes that act of declaration feel elegant and inevitable rather than bureaucratic. The aesthetic is **corporate-technical with a warm developer pulse** — think Bloomberg Terminal meets a well-loved dev tool documentation site that got a tasteful redesign. Not cold enterprise, not startup playful, but the tone of an expert colleague who explains SBOM concepts as if they are genuinely exciting (because they are). The site feels **approachable-corporate**: authoritative enough for CISOs, readable enough for junior engineers who just heard "SBOM" for the first time in a stand-up. Mood board in words: deep ocean control room at 2am, a sonar display showing the structure beneath the surface, every dependency lit up like a node in a radar sweep. Clean, focused, precise — but not cold. There is warmth in the ocean. The overall color temperature is **cool oceanic** — midnight navy, deep teal, and abyssal indigo form the structural backbone, punctuated by a single vivid bioluminescent accent (#00D4FF — electric cyan, the color of Cherenkov radiation in reactor pools) that fires on interactive states and key facts. A pale polar-white (#F0F6FF) serves as the reading surface, lending the page the calm of early-morning mist over water. Tone: **approachable-casual**. First-person plural ("we think SBOM matters"). Short declarative sentences. No buzzword blizzards. The copy voice is that of a thoughtful security engineer writing a Substack post, not a vendor selling compliance software. --- ## Layout Motifs and Structure The layout is a **disciplined asymmetric dashboard** — not a 12-column grid applied uniformly, but a composition of interlocking rectangles at different scales that together read as a single coherent instrument panel. Think of a submarine's navigation display: multiple readout regions each doing one job, spatially arranged so the eye can scan from macro (the big picture) to micro (the specific fact) without getting lost. **Primary composition rule:** every section of the page is a **card-panel at a fractional tilt** — the tilt-3d pattern is implemented as `perspective(900px) rotateX(-2deg)` on larger content blocks, giving each panel a slight hover-above-the-surface quality, as if the dependency graph cards are floating above the ocean floor. No panel tilts more than 3 degrees. The aggregate effect is a dashboard that breathes. **Five structural zones:** 1. **The Sonar Header** — full-width, height `100svh`, dark ocean navy (#0B1929). The wordmark "sbom.study" set large in DM Sans at 4xl sits above a canvas-driven sonar sweep animation: a rotating radial line crosses a circular dependency graph where nodes (npm packages, container images, SBOs) pulse as it passes them. No hero CTA button. Instead, a single understated link: "start learning →" in the bioluminescent cyan. 2. **The Inventory Rail** — a horizontally scrolling ticker strip beneath the header, ~80px tall, deep navy (#0D2137). Monospace text streams leftward: `log4j@2.17.1 ✓ | openssl@3.0.8 ✓ | left-pad@1.3.0 ✓ | spring-core@5.3.26 ✓` — a fictional but plausible SBOM inventory in motion. The rail is `overflow: hidden` with a CSS marquee; it communicates the domain immediately and sets a kinetic heartbeat. 3. **The Concept Panels** — three to five full-width-minus-gutter panels in the tilt-3d style. Each panel covers one SBOM concept: What is an SBOM, The Supply Chain Problem, Formats (SPDX vs CycloneDX), How to Generate One, How to Consume One. Each panel uses a distinct background within the ocean palette and a large-scale vector illustration on the right half. Panel backgrounds alternate: `#0B1929 → #0D2B45 → #0E3352 → #0B1929`. 4. **The Dependency Graph Viewer** — a full-width interactive section where a force-directed graph (D3.js or plain SVG) renders a sample dependency tree for a Node.js project. Nodes are small circles (10–18px), edges are thin lines (#1A5276 at 40% opacity), and the hovered node expands to show package name, version, license, and known CVEs. This section is the pedagogic core: visitors see an SBOM made visual. 5. **The Learn Footer** — dark (`#071525`), three columns: Formats Reference (SPDX, CycloneDX, SWID), Tools Reference (Syft, Trivy, cdxgen), Further Reading (links to NIST, NTIA, OpenSSF). No newsletter signup. No pricing table. No CTA block. **Grid mechanics:** CSS Grid with `grid-template-columns: 1fr minmax(0, 1200px) 1fr`. Content lives in the center column. The tilt-3d panels break out to `100vw` using negative margins on their inner container. Typography sits on an 8px baseline grid. --- ## Typography and Palette **Typography (Google Fonts only):** - **Display / Wordmark / Section Headings:** [`DM Sans`](https://fonts.google.com/specimen/DM+Sans), variable, axes `wght 100→900`, `opsz 9→40`. DM Sans is a clean geometric-humanist hybrid — precise enough for technical content, warm enough to feel written by a human. Used at `clamp(2.5rem, 6vw, 5rem)` for section titles, `wght 700`, tracking `-0.025em`. The wordmark "sbom.study" uses `wght 800`, the dot between sbom and study rendered as a `color: #00D4FF` glyph. - **Body / Running Text / Panel Copy:** [`Inter`](https://fonts.google.com/specimen/Inter), variable, `wght 300→600`. Set at `1.125rem` / `1.75` line-height on the pale reading surface. Inter's optical sizing ensures readability at every scale from footnotes to pull-quotes. - **Code / Monospace / Inventory Rail / CVE Identifiers:** [`JetBrains Mono`](https://fonts.google.com/specimen/JetBrains+Mono), variable. Used for all code samples, SBOM snippets (SPDX SBOM-Version headers, CycloneDX JSON fragments), package names in the inventory rail, and CVE identifiers (CVE-2021-44228). Color: `#00D4FF` on dark backgrounds, `#0066AA` on pale backgrounds. **Typographic Scale (modular, ratio 1.25):** - `xs`: 0.64rem — footnotes, metadata labels - `sm`: 0.8rem — captions, rail text - `base`: 1rem — body - `lg`: 1.25rem — lead paragraphs - `xl`: 1.563rem — card headings - `2xl`: 1.953rem — subsection titles - `3xl`: 2.441rem — section titles - `4xl`: 3.052rem — hero title **Palette — ocean-deep:** | Role | Name | Hex | |---|---|---| | Background (deepest) | Abyss | `#071525` | | Background (dark panels) | Deep Navy | `#0B1929` | | Background (mid panels) | Ocean | `#0D2B45` | | Background (light panels) | Depth | `#0E3352` | | Reading surface | Polar White | `#F0F6FF` | | Primary text (on dark) | Glacier | `#C8DDF0` | | Secondary text (on dark) | Mist | `#7AA8CC` | | Body text (on light) | Slate | `#1A2E40` | | Accent (interactive, highlights) | Cherenkov | `#00D4FF` | | Accent muted (hover states) | Bioluminescent | `#0099CC` | | Node edge (graph) | Tidal | `#1A5276` | | Success / verified dependency | Kelp | `#1ABC9C` | | Warning / known CVE | Amber Reef | `#F39C12` | | Danger / critical CVE | Coral | `#E74C3C` | **CSS Custom Properties:** ```css --color-abyss: #071525; --color-navy: #0B1929; --color-ocean: #0D2B45; --color-depth: #0E3352; --color-polar: #F0F6FF; --color-glacier: #C8DDF0; --color-mist: #7AA8CC; --color-slate: #1A2E40; --color-cherenkov: #00D4FF; --color-bio: #0099CC; --color-kelp: #1ABC9C; --color-amber: #F39C12; --color-coral: #E74C3C; ``` --- ## Imagery and Motifs **No photography.** The domain is a learning resource for a technical specification — stock photos of handshakes and server racks would be actively wrong. All imagery is **vector-art**, precisely constructed SVGs that serve as pedagogic diagrams made beautiful. **Six core visual motifs:** 1. **The Sonar Sweep (Canvas animation, hero).** A circular radar-style animation occupying the right 50% of the hero section. The radar circle is drawn with a `` element. A rotating radial line sweeps 360° at one revolution per 4 seconds. As the line passes each node (rendered as small filled circles arranged in a dependency-graph topology), the node briefly brightens to `#00D4FF` and a ghost trail fades behind the sweep line. The sweep line itself is a gradient: bright `#00D4FF` at the leading edge, fading to transparent over 40° of arc. No text inside the sonar — it is pure visual texture. 2. **Dependency Graph Nodes (SVG, inline).** Throughout the concept panels, individual package nodes appear as decorative geometry: a circle (the package), with thin radial lines extending to child dependency circles. These are not interactive — they are ornamental SVGs reinforcing the graph metaphor. Color: `#1A5276` fill, `#00D4FF` stroke at 1px, on the dark panel backgrounds. 3. **Format Schema Diagrams (SVG, educational).** In the Formats panel, SPDX and CycloneDX document structures are rendered as nested rectangle diagrams (not screenshots, not code — visual schemas). SPDX is represented as a tree of labeled rectangles with `#0D2B45` backgrounds; CycloneDX as a JSON-like nested block with `#0E3352` backgrounds. Both use `#00D4FF` for required fields, `#7AA8CC` for optional fields. 4. **The Inventory Rail (CSS animation).** The marquee strip is itself a visual motif: monospace text in JetBrains Mono, `#C8DDF0` on `#0D2137`. Package names, version numbers, and checkmark/warning symbols scroll left continuously. The rail has a subtle `box-shadow: inset 20px 0 30px #0B1929, inset -20px 0 30px #0B1929` creating a fade-in/fade-out at both edges, as if the inventory extends infinitely in both directions. 5. **Tilt-3D Panel Cards (CSS transform).** Each concept panel is wrapped in a container with `perspective: 900px; transform: rotateX(-1.5deg) rotateY(0.5deg)` applied. On `IntersectionObserver` entry, panels animate from `rotateX(-4deg) translateY(40px) opacity(0)` to their resting state over 600ms with `ease-out`. The effect is as if each panel surfaces from the ocean depth — a rising-from-below entry that reinforces the depth metaphor without being theatrical. 6. **CVE Severity Badges (SVG inline).** Small pill-shaped badges in the dependency graph viewer and in educational content: `CRITICAL` in `#E74C3C`, `HIGH` in `#F39C12`, `MEDIUM` in `#0099CC`, `NONE` in `#1ABC9C`. Each badge has a 2px inner glow using `filter: drop-shadow(0 0 4px currentColor)` at 60% opacity. These tie the visual language directly to the subject matter. --- ## Prompts for Implementation Build sbom.study as **one continuous vertical scroll through a dependency audit** — the visitor is not browsing a marketing site, they are descending through layers of a stack, learning as they go deeper. Each section is a sonar ping that reveals more of the structure beneath. There are no CTAs, no pricing, no testimonials, no social proof rails, no hamburger menus. **Section-by-section build instructions:** ### Section 1 — Sonar Header (100svh) - Background: `#0B1929`, full bleed - Left column (~55% width): wordmark "sbom.study" in DM Sans 800 at `clamp(2.8rem, 7vw, 5.5rem)`, color `#F0F6FF` with the `.study` portion slightly smaller (`0.7em`) and dimmer (`#7AA8CC`). Beneath: a single sentence in Inter 300 at 1.25rem, `#7AA8CC`: "A field guide to software bills of materials." Below that, "start learning →" in DM Sans 500, `#00D4FF`, 1.125rem — an `` tag styled as inline text, no button chrome. - Right column (~45% width): Canvas sonar sweep. Implement as `` with `requestAnimationFrame` loop. Draw: (a) three concentric circles at r=80, 140, 200px, stroke `#1A5276` at 30% opacity; (b) rotating line at current angle, `ctx.strokeStyle = gradient(#00D4FF → transparent)`, lineWidth 2; (c) 12–16 nodes placed at fixed x/y positions representing a real package dependency topology; (d) ghost trail: nodes store last-lit timestamp, brightness = `max(0, 1 - (now - litAt) / 3000)`. - `IntersectionObserver` is NOT needed here — this is the landing section, it runs immediately on load. ### Section 2 — Inventory Rail - `height: 72px`, `background: #0D2137`, `overflow: hidden` - Inner element: `display: flex; white-space: nowrap; animation: marquee 60s linear infinite` - Content: 20+ entries like `log4j@2.17.1 ✓ ` in JetBrains Mono 13px, `#C8DDF0`; sprinkle 3 entries with `⚠ CVE-2021-44228` in `#F39C12` for visual contrast - Edge fade: `mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent)` ### Section 3 — Concept Panels (tilt-3d entry) Implement five panels stacked vertically. Each: - `min-height: 80vh`, `padding: clamp(3rem, 6vw, 6rem)` - CSS transform: `perspective(900px) rotateX(-1.5deg)` at rest; on `IntersectionObserver` entry animate from `rotateX(-4deg) translateY(50px)` over 600ms `cubic-bezier(0.22, 1, 0.36, 1)` - Left: heading (DM Sans 700, 2.4rem, `#F0F6FF`) + body copy (Inter 400, 1.125rem, `#C8DDF0`), max-width 520px - Right: vector SVG illustration (dependency node diagram, or format schema, or tool-chain flow) - Panel 1 (What is an SBOM): background `#0B1929` - Panel 2 (Supply Chain Problem): background `#0D2B45` - Panel 3 (SPDX vs CycloneDX): background `#0E3352`, show side-by-side format schema SVGs - Panel 4 (Generating SBOMs with Syft): background `#0B1929`, code block in JetBrains Mono showing `syft packages dir:/project -o spdx-json` - Panel 5 (Consuming and Auditing): background `#0D2B45`, show the CVE badge motif inline ### Section 4 — Interactive Dependency Graph - `min-height: 100vh`, `background: #071525` - Title: "See an SBOM live" in DM Sans 700 2.4rem, centered, `#F0F6FF` - Subtitle: "Hover any node to inspect its entry. Color = license risk." in Inter 400 1rem, `#7AA8CC` - Graph: `` using a force simulation (vanilla JS, no D3 required). Nodes: ``, `fill: #1A5276`, stroke `#00D4FF 1px`. Selected node: `r="14"`, glow `filter: drop-shadow(0 0 8px #00D4FF)`. Node tooltip: `` or absolutely positioned `
` showing package name, version, license (MIT/Apache-2.0/GPL-3.0), CVE count. - Implement with ~30 nodes representing a realistic Node.js web app: express, lodash, webpack, typescript, eslint, react, react-dom, axios, chalk, commander, semver, etc. - Edge lines: `stroke: #1A5276`, `stroke-width: 1`, `opacity: 0.4` ### Section 5 — Learn Footer - `background: #071525`, `padding: 5rem 0` - Three-column grid at desktop, single-column at mobile - Column 1: "Formats" — SPDX, CycloneDX, SWID with one-sentence descriptions, links to official docs - Column 2: "Tools" — Syft, Trivy, cdxgen, SPDX tools with brief descriptions - Column 3: "Standards & Policy" — NTIA SBOM minimum elements, NIST SSDF, OpenSSF Scorecard - All links: Inter 400 0.9rem, `#7AA8CC`, hover to `#00D4FF`, no underline by default - Copyright line: "sbom.study — a free learning resource. No tracking. No ads." in `#3A5A72` at 0.8rem **Animation budget:** Sonar (continuous), inventory rail marquee (continuous), panel tilt-entry (once per panel, IntersectionObserver). Graph hover states (interactive). No scroll-jacking. No page transitions. No parallax. The motion vocabulary is functional — every animation conveys information about the subject matter (dependency discovery, inventory scanning) rather than decorating the page for its own sake. **Do NOT implement:** hero CTA button, email capture, pricing, testimonial slider, feature card grid, stat counters, logo bar, social proof rail, sticky header with nav links, mobile hamburger menu drawer, cookie consent banner, or any form elements. --- ## Uniqueness Notes **Three or more deliberate differentiators from other designs in the corpus:** 1. **The sonar-sweep-as-dependency-radar hero is unique in the registry.** No design in the corpus uses a canvas-drawn radar sweep to visualize a technical concept; the corpus is rich in parallax heroes, scroll-triggered reveals, and generative backgrounds, but none have used the sonar/radar metaphor. For sbom.study, the sonar animation is not decorative — it is semantically correct: SBOMs are exactly a sweep of your dependency surface, revealing what is present and where threats exist. The metaphor earns its place. 2. **Domain-driven interactivity: the force-directed dependency graph viewer.** The corpus contains data-viz elements (dashboards, stat grids), but no site uses a live, interactive force-directed graph as its primary educational mechanism. The sbom.study graph viewer is not a screenshot of a graph — it is a working graph that visitors can manipulate. This is possible because the domain is inherently graph-shaped (a dependency tree IS a graph), making the interaction genuinely instructive rather than gimmicky. 3. **The inventory rail as structural motif.** No other design in the corpus uses a horizontal-scrolling monospace ticker as a first-class section. The rail functions as three things simultaneously: a visual separator between sections, an ambient demonstration of SBOM structure (packages, versions, verification status), and a kinetic heartbeat that keeps the dark page alive between the slower concept panels. It is the most domain-specific structural element in the registry. 4. **Approachable-corporate tone without startup-playfulness.** The corpus is polarized: designs are either dark-mode enterprise (cold, icon-heavy, stat-grid) or casual playful (pastel, rounded, emoji-adjacent). sbom.study occupies a gap: the writing is warm and first-person, the design is dark and precise, and there is no decorative whimsy but also no corporate chill. The CVE badge motif maintains technical authority while the prose maintains human warmth. 5. **Palette rarity: ocean-deep at 2% corpus frequency, used without dilution.** Where other ocean-palette designs in the corpus soften the ocean theme with complementary warm tones, sbom.study commits fully: every background shade is an ocean depth, the accent is the blue-white of Cherenkov radiation, and even the success state uses kelp-green rather than standard iOS green. The metaphor is total. The ocean is not decoration — it is the conceptual frame for understanding that SBOMs reveal what lies beneath the surface of software. **Chosen seed:** `dashboard analytics dark` (from seeds.json) — overlaid with the ocean-deep palette, tilt-3d panel pattern, futura-geometric typography (DM Sans as the Google Fonts geometric humanist), and approachable-casual tone. **Avoided patterns from frequency analysis:** - `scroll-triggered` (35% — most overused pattern in corpus; replaced with tilt-3d entry at 6%) - `photography` (87% imagery — entirely absent in this design; all vector-art) - `corporate` aesthetic as usually implemented (17% — avoided cold enterprise aesthetic; kept corporate authority but injected approachable warmth) - `tech` motif dominance (23% — present but expressed through domain-specific graph and sonar metaphors, not generic circuit boards or binary rain)