# Design Language for xbom.wiki ## Aesthetics and Tone xbom.wiki should feel like a Scandinavian midnight toy workshop for serious supply-chain knowledge: pale birch surfaces, black lacquer, brushed gold indexing tabs, and tiny vector creatures carrying component labels through the air. Interpret “XBOM” as an expandable bill-of-materials wiki — a place where hidden dependencies, parts, proofs, licenses, origins, and maintenance notes unfold like a mechanical pop-up book. The mood is luxurious but playful: not corporate procurement, not cyber-security dashboard, not blockchain charting. Imagine a Nordic design museum after closing time where every exhibit label wakes up, detaches from the wall, and floats toward a central artifact. The tone should be whimsical-creative with a precise editorial backbone: calm, clever, charming, and slightly magical, as if the page is teaching the visitor how complex things are made without losing the wonder of making. Keep the visual atmosphere uncluttered and tactile. Black should feel like velvet shadow, gold should feel like thin foil stamping, and the off-white surfaces should feel like matte paper or pale wood. Avoid the common corporate gradient SaaS look; any gradients should be quiet metallic sheens, not rainbow backgrounds. ## Layout Motifs and Structure Use a hero-dominant composition where the first screen behaves like an exploded-view object suspended in a dark gallery. The hero should occupy nearly the entire viewport: `xbom.wiki` as a fluid typographic title on the left or upper-left, and a large floating vector “artifact” on the right — a whimsical assembly of labeled rings, screws, document leaves, package cubes, license tags, and provenance ribbons orbiting a golden core. The underlying structure should be a diagonal knowledge mobile rather than a centered card grid. Build a loose 12-column stage, but let content hang from invisible strings: small annotation panels at irregular heights, thin gold connector lines, and hovering glossary chips that drift around the central hero object. Later sections should feel like walking around the artifact in a museum: each full-screen chapter rotates attention to one layer — Components, Origins, Obligations, Changes, and Unknowns. Prefer generous Scandinavian negative space with asymmetrical weight. Use full-screen panels, large quiet margins, and overlapping floating elements. Avoid pricing blocks, CTA-heavy hero buttons, repetitive stat grids, and standard feature-card rows. If multiple facts must appear, place them as museum labels, drawer pulls, stamped tags, or suspended index cards rather than uniform rectangles. ## Typography and Palette Use Google Fonts with variable-feeling scale and personality: - **Fraunces** for the main display wordmark and chapter titles. Use its soft optical-size character at very large sizes, with fluid `clamp()` sizing so “XBOM” feels like a sculptural object rather than a headline. - **Roboto Flex** for body copy, navigation, and annotation text. Its variable width and grade options support a clean Scandinavian information voice without looking generic. - **IBM Plex Sans Condensed** for tiny material labels, inventory stamps, and vertical edge notes; use sparingly to give technical labels a narrow museum-catalog rhythm. Palette: - Velvet black: `#080704` for the primary background and deep shadow fields. - Nordic ink: `#171611` for raised dark panels and quiet dividers. - Foil gold: `#D8AA3D` for connectors, small highlights, and animated indexing marks. - Pale birch: `#F3EBDD` for text surfaces, label cards, and calm Scandinavian contrast. - Warm bone: `#CFC4AF` for secondary text and inactive labels. - Lingonberry red: `#B74235` for rare whimsical alerts, seals, and “unknown part” accents. - Soft sage: `#A6B49A` for provenance and sustainability notes. Use gold sparingly; it should trace relationships and reveal structure rather than flood the screen. Let `#F3EBDD` and `#CFC4AF` carry warmth without becoming a generic warm palette. ## Imagery and Motifs Imagery should be entirely vector-art and CSS/SVG generated. No photography. The signature motif is an “exploded bill-of-materials mobile”: floating components arranged like a delicate Scandinavian ceiling sculpture. Each object can be a simplified vector part — a cube, washer, circuit leaf, paper strip, package label, checksum bead, wrench-shaped comma, or tiny animal-like courier — connected by fine gold hairlines. Use skeleton-loading as a visual metaphor for unknown inventory becoming known. Before labels resolve, show softly shimmering placeholder bones inside tags and document slips; then animate them into named parts, origin marks, and wiki annotations. The shimmer should be ivory-gold on black, like light passing across foil, not gray app placeholders. Decorative motifs can include floating index tabs, star-like screw heads, birch-grain line textures, gold-stamped brackets, tiny rune-like part codes, and playful “question mark components” that wobble gently until documented. Create a few recurring vector mascots: small abstract helpers made from circles and labels, carrying dependency strings across the viewport. ## Prompts for Implementation Implement as a full-screen narrative experience. The opening should begin with a nearly empty velvet-black field and a few skeleton labels glimmering in place; then the `xbom.wiki` title blooms in Fraunces while vector components drift into an exploded-view constellation. Use CSS custom properties for the palette, `clamp()` for fluid type, and SVG lines for relationship connectors. Animation should feel like quiet mechanical choreography: floating elements bob at different speeds, connector lines draw in with golden strokes, labels unfold like paper tabs, and skeleton placeholders resolve into real terms as chapters enter view. Use scroll or simple interaction to “rotate” the artifact between layers instead of stacking ordinary sections. Keep transitions slow, precise, and whimsical, with small surprises such as a label tugging another label into view. Build sections as immersive chapters: **The Object**, **The Parts**, **The Origins**, **The Obligations**, **The Changes**, and **The Unknowns**. Each chapter should occupy most of the viewport and shift the same central mobile rather than replacing it with separate marketing blocks. Avoid CTA-heavy layouts, pricing blocks, stat-grids, stock photography, generic card grids, and analytics-dashboard panels. The final scene can show the artifact fully annotated, with a quiet wiki-like invitation to explore rather than a loud conversion button. ## Uniqueness Notes - Uses a Scandinavian luxury toy-workshop atmosphere for a bill-of-materials wiki, contrasting calm Nordic restraint with whimsical floating vector helpers. - Treats skeleton-loading as narrative discovery: unknown BOM entries shimmer as “unidentified parts” before becoming documented knowledge. - Replaces overused card-grid and centered layouts with a hero-dominant exploded-view mobile that persists through full-screen chapters. - Uses gold-black-luxury in a restrained foil-and-velvet way, avoiding the common warm gradient SaaS language identified in frequency analysis. - Avoids overused photography, minimal imagery, corporate tone, mono-heavy typography, parallax-as-default, CTA-heavy landing sections, pricing blocks, and stat grids; prefers underused scandinavian, vector-art, floating-elements, skeleton-loading, variable-fluid typography, and whimsical-creative tone. - Document chosen seed/style: aesthetic: scandinavian, layout: hero-dominant, typography: variable-fluid, palette: gold-black-luxury, patterns: skeleton-loading, imagery: vector-art, motifs: floating-elements, tone: whimsical-creative.