# Design Language for sbom.wiki ## Aesthetics and Tone sbom.wiki channels a goblincore aesthetic — the earthy, chaotic, found-object visual language of goblincore applied to an SBOM (Software Bill of Materials) wiki platform. The site hoards — gathering software dependencies like treasured found objects, cataloging each package with the obsessive fascination of a goblin examining their collection of interesting rocks and peculiar mushrooms. Inspiration draws from the forest-floor aesthetics of goblincore fashion, the cabinet-of-curiosities display traditions, the mushroom-and-moss color palette of dark woodland environments, and the found-object art of Joseph Cornell's assemblage boxes. The tone is friendly — warm, enthusiastic language that makes SBOM documentation feel like showing a friend your fascinating collection of software dependencies. ## Layout Motifs and Structure The layout uses a **portfolio-grid** architecture — content organized in a showcase grid that creates the cabinet-of-curiosities quality of software dependencies displayed as collected specimens. **Portfolio Grid Architecture:** - CSS Grid: repeat(auto-fill, minmax(260px, 1fr)) - Cards: uniform with generous padding for specimen display - Feature cards span 2 columns for rare dependency specimens - Gap: 16px between cards - Container: max-width: 1060px centered - The portfolio grid creates the specimen-cabinet quality of software packages displayed for examination **Section Sequence:** 1. **Burrow:** Hero with mono title on burgundy-cream goblincore gradient, bokeh-background warm forest-floor lighting, tropical-fish colorful specimen accents 2. **Collection:** SBOM packages in portfolio grid — fade-reveal interactive specimen-discovery transitions with bokeh-background warm depth 3. **Prized Specimen:** Featured dependency in double-span card with tropical-fish vivid specimen display and bokeh-background atmospheric lighting 4. **Trinkets:** Minor dependencies in compact grid with tropical-fish simplified accents 5. **Nest:** Footer as cozy den — friendly farewell with tropical-fish settled specimens and warm closing ## Typography and Palette **Typography:** - **Headlines:** "IBM Plex Mono" (Google Fonts) — mono at 2rem-2.6rem, weight 700. Its technical monospace creates the catalog-entry quality of specimens labeled with systematic precision by an obsessive collector. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.7. - **Data:** "IBM Plex Mono" (Google Fonts) — monospace at 0.85rem for package names, version numbers, and SBOM specification data. - **Labels:** "Inter" at 0.65rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Burgundy Earth:** #1c1014 — deep burgundy earth for backgrounds - **Cream Surface:** #f0e4d4 — warm cream for cards - **Mushroom Brown:** #8c6848 — earthy mushroom for primary accent - **Moss Green:** #588848 — forest moss for secondary accent - **Berry Red:** #a83848 — wild berry for tertiary accent - **Dark Earth:** #201410 — deep earth for text on light - **Cream Light:** #f0e8d8 — warm cream for text on dark - **Border Moss:** rgba(88,136,72,0.12) — moss tint border ## Imagery and Motifs **Bokeh-Background Forest Floor:** Section backgrounds feature warm bokeh lighting — multiple radial-gradient circles at various positions creating soft, out-of-focus light spots: radial-gradient(at 25% 35%, rgba(140,104,72,0.04), transparent 20%), radial-gradient(at 75% 55%, rgba(88,136,72,0.03), transparent 15%), radial-gradient(at 50% 80%, rgba(168,56,72,0.02), transparent 18%). The bokeh creates the forest-floor quality of dappled sunlight filtering through a dense canopy. **Fade-Reveal Specimen Discovery:** Dependency cards fade into view — opacity 0 to 1 with scale(0.95) to scale(1.0) over 500ms ease-out on scroll intersection. Staggered 60ms delays create the cabinet-opening quality of specimens revealed one by one. The fade creates the discovery quality of finding interesting software packages in a forest of dependencies. **Tropical-Fish Specimen Accents:** Small colorful accent shapes (circles 6px, rounded rectangles 8x4px) in Mushroom Brown, Moss Green, and Berry Red at 0.1-0.15 opacity as specimen markers and category indicators. The vibrant accents create the found-object quality of colorful curiosities discovered among earth-toned surroundings. **Burgundy-Cream Goblincore Atmosphere:** Background alternates between dark burgundy earth (sections) and warm cream (cards) — the contrast creating the underground-burrow quality of a cozy den where collected dependencies are examined by candlelight against clean display surfaces. **Specimen Border Frames:** Cards with earthy, organic borders — border: 2px solid rgba(88,136,72,0.12); border-radius: 8px with subtle inner shadow: box-shadow: inset 0 0 12px rgba(28,16,20,0.04). The organic frames create the display-case quality of specimens mounted for examination. ## Prompts for Implementation Build the page as a goblincore SBOM wiki collection. Portfolio grid: .specimen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; max-width: 1060px; margin: 0 auto; padding: 60px 24px; } .rare-specimen { grid-column: span 2; } Fade reveal: .specimen-card { opacity: 0; transform: scale(0.95); transition: all 500ms ease-out; } .specimen-card.visible { opacity: 1; transform: scale(1.0); } .specimen-card:nth-child(2) { transition-delay: 60ms; } .specimen-card:nth-child(3) { transition-delay: 120ms; } Specimen frame: .goblin-card { background: #f0e4d4; border: 2px solid rgba(88,136,72,0.12); border-radius: 8px; padding: 24px; box-shadow: inset 0 0 12px rgba(28,16,20,0.04); } Bokeh: .forest-bg { background: radial-gradient(at 25% 35%, rgba(140,104,72,0.04), transparent 20%), radial-gradient(at 75% 55%, rgba(88,136,72,0.03), transparent 15%), radial-gradient(at 50% 80%, rgba(168,56,72,0.02), transparent 18%); } AVOID: Standard wiki platforms, corporate SBOM documentation tools, and minimal dependency catalogs. Let goblincore collecting enthusiasm and friendly warmth create an SBOM wiki where software dependencies are treasured specimens in a cabinet of curiosities, each package a fascinating found object worthy of examination and cataloging. ## Uniqueness Notes 1. **Goblincore for SBOM wiki:** Collecting-obsession aesthetic makes software dependency documentation feel like curating a fascinating cabinet of curiosities. 2. **Portfolio-grid as specimen cabinet:** Display grid creates the museum quality of software packages mounted as collectible specimens for examination. 3. **Bokeh as forest-floor lighting:** Soft light spots create the dappled quality of examining specimens under natural woodland lighting. 4. **Mono typography as catalog entries:** Technical monospace creates the systematic quality of specimens labeled by an obsessive, detail-oriented collector. 5. **Burgundy-cream as den atmosphere:** Earth-tone-to-cream contrast creates the underground quality of a cozy burrow where treasured collections are displayed. **Seed/Style:** aesthetic: goblincore, layout: portfolio-grid, typography: mono, palette: burgundy-cream, patterns: fade-reveal, imagery: bokeh-background, motifs: tropical-fish, tone: friendly **Avoided Overused Patterns:** corporate aesthetic (89%), parallax patterns (93%), asymmetric layout (91%), mono typography (94%), warm palette (95%), friendly tone (89%), minimal imagery (92%). This design uses goblincore aesthetic, portfolio-grid layout, burgundy-cream palette, bokeh-background imagery, and friendly tone.