# Design Language for sbom.study ## Aesthetics and Tone sbom.study inhabits the visual world of a neon-drenched metropolitan control room -- the kind of space where a city's entire software supply chain is rendered as a living, breathing map of dependencies, vulnerabilities, and trust relationships projected onto glass walls overlooking a skyline at night. The aesthetic is **flat-design** executed with the precision of an urban transit map and the electric energy of a Times Square billboard. Think of Massimo Vignelli's New York subway diagram if it were redesigned by a cybersecurity analyst who grew up skateboarding through Shibuya crossing: clean geometric shapes, bold unmodulated color fills, zero gradients, zero drop shadows, but every surface crackling with fluorescent intensity. The tone is **optimistic-bright** -- not naive, but the confident optimism of someone who believes that making software supply chains transparent is genuinely world-improving work. There is no doom-and-gloom vulnerability scanner aesthetic here. SBOMs (Software Bills of Materials) are presented as acts of radical transparency, as civic infrastructure, as something worth celebrating. The visual language communicates: "We can see everything, and that clarity is beautiful." The inspiration draws from three specific sources: (1) the flat, color-coded zone maps of Tokyo's rail network, where complexity is tamed through rigorous color discipline and geometric simplification; (2) the neon signage of Hong Kong's Mong Kok district at night, where stacked horizontal signs in electric pink, cyan, and yellow create an overwhelming but strangely harmonious wall of light; (3) the dashboard interfaces of air traffic control systems, where every pixel of screen real estate carries life-or-death informational weight, yet the overall composition achieves a severe, functional beauty. ## Layout Motifs and Structure The layout follows a **dashboard** architecture -- not the corporate SaaS dashboard of interchangeable metric cards, but a purpose-built command center layout where every panel has a specific, non-negotiable position determined by informational hierarchy. **Grid System:** The page is divided into a 12-column grid with 16px gutters, but the actual content arrangement uses an asymmetric dashboard topology: - A narrow left rail (2 columns) serves as a persistent vertical navigation strip, rendered as a dark sidebar (#0a0a0f) with neon-accented icons and abbreviated labels. This rail is always visible, never collapsible -- it functions like the fixed instrument panel of a cockpit. - The main content area (10 columns) is subdivided into dashboard panels of varying sizes. The top row spans the full 10 columns as a status banner (48px height) displaying a real-time-style ticker of SBOM metadata. Below this, content is arranged in a 2:1 ratio -- a primary panel (6.5 columns) flanked by a secondary panel stack (3.5 columns). - Panels are separated by 2px gaps filled with the background color (#0a0a0f), creating the illusion of discrete screens embedded in a dark console. **Spatial Relationships:** Nothing floats. Every element snaps to the grid with mechanical precision. There are no rounded corners anywhere in the layout -- all panels use sharp 0px border-radius, reinforcing the flat-design commitment. The spatial metaphor is architectural: panels are rooms in a building, not cards on a table. Content within panels uses 24px internal padding and aligns to a 4px baseline grid. **Scroll Behavior:** The left navigation rail and top status banner are position: fixed. The main content area scrolls vertically, but individual dashboard panels can also have internal scroll (overflow-y: auto with custom scrollbar styling -- 4px wide, neon-cyan thumb on dark track). The overall page height is generous but not infinite; the design aims for a "one-screen-plus-one-scroll" experience where the most critical information is visible without scrolling and deeper exploration requires exactly one viewport of additional scroll. **Breakpoint Strategy:** At viewport widths below 768px, the sidebar collapses to a bottom tab bar (56px height, 5 icon slots), and the dashboard panels reflow into a single-column stack. The flat-design language remains intact but the spatial hierarchy shifts from side-by-side comparison to sequential drill-down. ## Typography and Palette **Typography:** - **Headlines / Panel Titles:** "Exo 2" (Google Fonts) -- a geometric sans-serif with a slightly futuristic character. The squared letterforms and even stroke widths align perfectly with the flat-design grid discipline. Used at 1.75rem for panel titles and 2.5rem-4rem for hero-level headings. Weight: 700 (Bold). Letter-spacing: +0.02em. Text-transform: uppercase for panel titles only. Color: #ffffff on dark backgrounds, #0a0a0f on light panels. - **Body / Data Labels:** "Nunito Sans" (Google Fonts) -- a geometric sans-serif with open, friendly proportions that counterbalance the severity of the dashboard layout. The rounded terminals soften the experience without compromising the geometric discipline. Used at 0.875rem-1rem for body text and 0.75rem for data labels. Weight: 400 (Regular) for body, 600 (SemiBold) for labels and emphasis. Line-height: 1.6 for body, 1.3 for labels. Color: #c8d6e5 (desaturated blue-white) for body text on dark, #3d3d4a for text on light panels. - **Monospace / Code / SBOM Data:** "Share Tech Mono" (Google Fonts) -- a clean, narrow monospace designed for technical contexts. Used exclusively for SBOM package names, version strings, hash values, and code snippets. Size: 0.8125rem. Weight: 400. Letter-spacing: +0.04em. Color: #39ff14 (electric green) for package names, #ff006e (hot pink) for vulnerability indicators, #ffffff for neutral code. **Palette:** The palette is **neon-electric**: saturated, unapologetic, and high-voltage, but applied with flat-design discipline (no gradients, no glows, no opacity variations except for specific interactive states). | Role | Color | Hex | Usage | |------|-------|-----|-------| | Background (Primary) | Void Black | #0a0a0f | Main background, panel gaps, sidebar | | Background (Panel) | Deep Graphite | #14141f | Dashboard panel backgrounds | | Neon Cyan | Electric Cyan | #00f0ff | Primary accent, navigation highlights, links, active states | | Neon Pink | Hot Magenta | #ff006e | Vulnerability indicators, warnings, critical status | | Neon Green | Radioactive Green | #39ff14 | Success states, safe/verified indicators, package names | | Neon Yellow | Hazard Yellow | #ffe600 | Caution states, medium-severity, hover emphasis | | Text Primary | Cool White | #ffffff | Headlines, panel titles | | Text Secondary | Muted Periwinkle | #c8d6e5 | Body text, descriptions | | Text Tertiary | Slate Ghost | #6b7b8d | Metadata, timestamps, de-emphasized labels | | Panel Border | Dim Neon Cyan | #00f0ff | 1px panel borders at 20% opacity for subtle definition | **Color Application Rules:** - Neon colors are NEVER used as backgrounds for large areas. They appear only as 1-2px borders, text color for specific semantic elements, icon fills, and small indicator dots/bars. - The dark background (#0a0a0f and #14141f) occupies 85-90% of the visual field, allowing neon accents to command maximum contrast. - Status semantics are strict: green = safe/verified, pink = critical/vulnerable, yellow = warning/medium, cyan = interactive/informational. These mappings never cross. ## Imagery and Motifs **Marble Texture as Geological Data Metaphor:** The primary imagery mode is **marble-texture** -- but not the decorative marble of luxury branding. Here, marble is used as a metaphor for geological strata: the idea that software dependencies, like rock layers, accumulate over time, each layer representing a different era of code, a different author, a different set of assumptions. Specific implementation: 1. **SVG Marble Veining Patterns:** Custom SVG patterns using `` and `` filters generate procedural marble-vein textures. These textures are rendered in the neon palette -- electric cyan veins (#00f0ff) on deep graphite (#14141f) -- and applied as subtle background patterns for specific dashboard panels (the "dependency tree" panel, the "license audit" panel). The turbulence parameters are tuned for long, sweeping veins rather than chaotic noise: baseFrequency="0.003 0.008", numOctaves="3", seed varies per panel. 2. **Marble Cross-Section Headers:** Section dividers between major content areas use a horizontal strip (8px height, full width) filled with a marble-vein SVG pattern, suggesting a geological cross-section. The color of the veins rotates through the neon palette (cyan, green, pink) to indicate the content category below. 3. **Marble as Data Density Indicator:** In certain panels, the density and complexity of the marble-vein pattern increases to visually communicate data density. A panel showing 5 dependencies has sparse, calm veining; a panel showing 500 dependencies has dense, intricate veining. This is achieved by dynamically adjusting the `baseFrequency` parameter via CSS custom properties set by JavaScript. **City-Urban Motifs:** The urban motif manifests as a persistent **skyline silhouette** rendered in flat geometric shapes along the bottom edge of the hero section. The skyline is abstract -- rectangular blocks of varying heights and widths, rendered in #14141f against the #0a0a0f background, with scattered neon-colored window dots (1x1px to 3x3px squares) in cyan, pink, green, and yellow. The skyline is not decorative; it is a visual metaphor for the "city of code" -- each building represents a major dependency, and its height correlates to its importance/usage frequency in the SBOM ecosystem. Additional urban motifs: - **Grid-Line Street Maps:** Thin (#1a1a2e) grid lines overlaid on certain panels evoke city street grids seen from above. These are purely decorative but reinforce the urban-planning metaphor of SBOM analysis as city planning for code. - **Traffic Signal Dots:** Small colored circles (8px diameter) in red (#ff006e), yellow (#ffe600), and green (#39ff14) appear next to status items, directly referencing traffic lights. Flat, no gradients, no gloss. - **Building Block Icons:** All icons in the navigation rail are constructed from simple rectangular shapes -- no curves, no organic forms. A "package" icon is a flat rectangle with a horizontal line at the 30% mark. A "vulnerability" icon is a flat triangle (warning sign). A "license" icon is a flat rectangle with three horizontal lines (document). All icons are 20x20px, stroke-only at 1.5px in #c8d6e5, switching to neon cyan fill on active state. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to a full-viewport dark screen (#0a0a0f) that presents itself as a "boot sequence." The word "sbom.study" appears letter-by-letter in Share Tech Mono at 3rem, colored #00f0ff, positioned at the vertical and horizontal center. Each letter appears with a 60ms delay, no animation -- just sudden appearance, like characters printing to a terminal. After the full name renders (720ms total for 12 characters including the dot), a 400ms pause, then the dashboard UI assembles itself: 1. The left sidebar slides in from the left edge (transform: translateX(-100%) to translateX(0), 300ms, ease-out). 2. The top status banner drops from above (transform: translateY(-100%) to translateY(0), 250ms, ease-out, 100ms delay). 3. Dashboard panels **zoom-focus** into position: each panel starts at scale(0.85) with opacity: 0, then transitions to scale(1) opacity: 1 over 400ms with staggered delays (50ms between each panel, starting 200ms after the sidebar animation). This is the primary animation pattern -- zoom-focus -- where elements materialize by scaling up from a slightly smaller size, as if the user is zooming into a map and the details are resolving into focus. **Zoom-Focus Animation Pattern (Primary):** The zoom-focus pattern is the signature interaction. It applies to: - Dashboard panels on initial load (as described above) - Content within panels when they are scrolled into view (IntersectionObserver triggers scale 0.92 -> 1.0, opacity 0 -> 1, 350ms) - Tooltip/popover appearance (scale 0.9 -> 1.0 from the anchor point, 200ms) - Navigation state transitions: when clicking a nav item, the current panel content zooms out (scale 1.0 -> 0.95, opacity 1 -> 0, 150ms) and new content zooms in (scale 0.95 -> 1.0, opacity 0 -> 1, 250ms) - All zoom-focus animations use cubic-bezier(0.34, 1.56, 0.64, 1) easing, which produces a subtle overshoot that gives the flat-design elements a sense of physical snap. **Interactive Dashboard Behaviors:** - Hovering over a panel header causes a 1px bottom-border to transition from #6b7b8d to #00f0ff over 200ms. - Clicking a dependency item in the SBOM tree highlights all related items across panels simultaneously, using the neon-green color (#39ff14) for the selected item and neon-cyan (#00f0ff) at 40% opacity for related items. - The status ticker in the top banner scrolls horizontally using CSS animation (translateX(0) to translateX(-100%), linear, duration calculated from content width to achieve ~60px/second). **Storytelling Structure:** The page tells the story of an SBOM from creation to consumption: - **Act 1 (viewport 1):** "What is this software made of?" -- the hero dashboard showing a dependency overview as flat-colored rectangular blocks arranged like a city skyline. - **Act 2 (scroll section):** "What risks hide in the layers?" -- vulnerability analysis panels with marble-veined backgrounds, traffic-signal status dots, and the zoom-focus reveal pattern. - **Act 3 (final section):** "Transparency builds trust" -- a simplified, zoomed-out view where the detailed dashboard resolves into a single clean statement, the urban skyline motif returns at larger scale, and the neon palette reduces to just cyan-on-black for a calm, resolved conclusion. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids with large counter numbers, testimonial carousels, feature comparison tables, gradient backgrounds, any rounded-corner elements, any box-shadow or drop-shadow, any opacity gradients or blur effects (except the marble SVG filter which is a pattern, not a blur). ## Uniqueness Notes **Differentiators from other designs:** 1. **Flat-Design with Neon-Electric Palette on Dashboard Layout:** This is a triple combination that has near-zero overlap in the existing corpus. Flat-design appears at only 1% frequency, neon-electric palette at 2%, and dashboard layout at 16%. The intersection of all three is unique. Most dashboard designs use corporate or dark-mode aesthetics with gradient palettes; this design strips away all depth cues (no shadows, no gradients, no rounded corners) while cranking the chromatic intensity to maximum, producing a visual tension between geometric austerity and electric vibrancy. 2. **Marble Texture as Procedural Data Visualization:** Marble-texture imagery (3% frequency) is exclusively used for luxury/decorative purposes in other designs. Here, marble veining is generated procedurally via SVG filters and its parameters are dynamically tied to data density, transforming a decorative pattern into a functional information layer. The geological strata metaphor for software dependency layers is conceptually novel. 3. **City-Urban Motifs as Code Infrastructure Metaphor:** City-urban motifs appear at only 1% frequency and are never combined with SBOM/software supply chain subject matter. The treatment of software dependencies as buildings in a city -- with height representing importance, window dots representing active usage, and street-grid overlays representing interconnections -- creates a visual narrative that makes abstract software concepts tangible and spatial. 4. **Zoom-Focus as Sole Animation Pattern:** While zoom-focus appears at only 2% frequency in existing designs, this design uses it as the single, unified animation paradigm. Every transition -- panel entry, content reveal, tooltip appearance, navigation state change -- uses the same scale-up-from-smaller mechanic. This monolithic approach to animation creates a coherent kinetic identity that most designs lack (they typically mix multiple animation patterns). 5. **Boot Sequence Narrative Opening:** The letter-by-letter domain name reveal followed by the mechanical assembly of the dashboard UI creates a narrative experience that frames the entire site as a system coming online, reinforcing the SBOM-as-infrastructure concept without resorting to the overused terminal aesthetic (25% frequency). The boot sequence uses flat-design principles (no cursor blink, no CRT scanline effects) to stay true to the aesthetic. **Chosen Seed:** aesthetic: flat-design, layout: dashboard, typography: geometric-sans, palette: neon-electric, patterns: zoom-focus, imagery: marble-texture, motifs: city-urban, tone: optimistic-bright **Avoided Overused Patterns:** playful aesthetic (96%), centered layout (99%), warm palette (100%), scroll-triggered animation (97%), friendly tone (99%), mono typography (99%), minimal imagery (95%), vintage motifs (88%), gradient palette (88%). None of these appear as primary choices in this design.