# Design Language for xbom.wiki ## Aesthetics and Tone xbom.wiki channels a glassmorphism aesthetic — the frosted-glass transparency, layered depth, and luminous backdrop-blur of glassmorphism applied to a comprehensive wiki platform documenting XBOM — a knowledge base with the translucent clarity of information that lets you see through layers to understand deeper structures. The site clarifies — with the translucent elegance of Apple's macOS window chrome, the layered-glass depth of modern notification panels, and the see-through honesty of a wiki platform where knowledge layers are visible simultaneously. Inspiration draws from the glassmorphism trend pioneered by Apple's Big Sur design language, the translucent interface experiments of Microsoft's Fluent Design, the multi-layered information architecture of complex wiki systems, and the editorial clarity of well-organized knowledge repositories. The tone is professional — clear, competent language that matches glassmorphism's corporate elegance with information precision. The glassmorphism treatment transforms wiki browsing from opaque page-switching into transparent layered exploration — articles visible through semi-transparent panels, cross-references seen through frosted overlays connecting related content, and category hierarchies rendered as stacked glass planes where deeper layers are visible through the surface. Each component carries glassmorphism's translucent quality — backdrop-blur effects on surfaces, subtle white borders suggesting glass edges, and layered z-depth where multiple content planes are partially visible simultaneously. The professional tone maintains clarity — precise language through transparent visual surfaces. ## Layout Motifs and Structure The layout uses an **editorial-flow** architecture — content flowing in editorial rhythm creating the knowledge-publication quality of a wiki organized with the editorial authority of a professional reference work. **Editorial Flow System:** - Editorial columns: fluid width with max-width: 960px centered - Feature blocks: full-width with glassmorphism panel treatment - Supporting content: 2-column grid for category browsing - Gap: 32px between editorial blocks - The editorial flow creates the reference-publication quality of a professionally organized knowledge base **Section Sequence:** 1. **Glass Index:** Hero with condensed typography floating over glassmorphism-layered ground, circuit precision-engineering decorative motifs, underline-draw interactive progressive line emphasis 2. **Knowledge Panels:** Wiki categories in glassmorphism editorial panels — underline-draw interactive term-highlight emergence with circuit simplified technical diagrams 3. **Article Depths:** Detailed wiki content in generous editorial layout with circuit detailed technical motifs and data-viz informational chart visualizations 4. **Reference Matrix:** Cross-reference system in dense editorial grid with circuit minimal technical accents 5. **Closing Index:** Footer as reference appendix — professional closing with circuit final technical mark **Spatial Philosophy:** - Editorial flow creates the publication quality of a wiki organized with professional editorial authority - Glassmorphism panels create the see-through quality of knowledge layers visible simultaneously - The library metaphor makes browsing feel like examining translucent reference cards ## Typography and Palette **Typography:** - **Headlines:** "Barlow Condensed" (Google Fonts) — condensed at 2.0rem-3.0rem, weight 700. Its condensed proportions create the efficient quality of index headings maximizing information density. - **Body Text:** "Source Sans 3" (Google Fonts) — clean sans at 0.9rem, weight 400, line height 1.75. - **Data:** "IBM Plex Mono" (Google Fonts) — monospace at 0.8rem for article metadata, revision data, and reference numbers. - **Labels:** "Barlow Condensed" at 0.6rem, weight 600, uppercase, letter-spacing 0.15em. **Color Palette:** - **Soft Lavender:** #f0eef8 — light pastel lavender for primary background - **Glass White:** rgba(255,255,255,0.6) — translucent white for glassmorphism panels - **Focus Violet:** #6a4aaa — medium violet for primary accent - **Link Teal:** #2a8a8a — teal for secondary accent - **Warm Rose:** #aa5a6a — muted rose for tertiary accent - **Deep Ink:** #1e1e2a — dark for primary text - **Slate Gray:** #6a6a7a — medium gray for secondary text - **Glass Border:** rgba(255,255,255,0.3) — white-tinted border for glass edges ## Imagery and Motifs **Data-Viz Informational Charts:** Wiki content supported by clean data visualizations — minimal bar charts, line graphs, and comparison tables rendered in Focus Violet and Link Teal, creating the reference quality of encyclopedic information supported by visual data. **Underline-Draw Progressive Emphasis:** Key terms highlighted with animated underline drawing — pseudo-element width expanding from 0% to 100% over 300ms (2px solid Focus Violet), creating the scholar quality of important terms being marked for attention. **Circuit Technical Precision:** Decorative elements using circuit-inspired patterns — SVG right-angle paths with node junctions (1px stroke, Focus Violet at 0.05 opacity) creating the knowledge-infrastructure quality of information systems systematically organized. **Glassmorphism Panel Treatment:** Content containers with frosted-glass effect — background: rgba(255,255,255,0.6); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.3); border-radius: 16px; box-shadow: 0 4px 16px rgba(106,74,170,0.04). The treatment creates the translucent quality of knowledge layers visible through glass surfaces. **Pastel Gradient Atmosphere:** Page background with soft pastel gradient — linear-gradient(135deg, #f0eef8 0%, #e8f0f8 50%, #f0f0e8 100%) creating the soft-environment quality of a well-lit, comfortable knowledge space. ## Prompts for Implementation Build the page as a glassmorphism wiki platform. Editorial: .wiki-editorial { max-width: 960px; margin: 0 auto; padding: 0 24px; } .wiki-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } Glass panel: .glass-card { background: rgba(255,255,255,0.6); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.3); border-radius: 16px; padding: 32px; box-shadow: 0 4px 16px rgba(106,74,170,0.04); } Underline draw: .term-highlight { position: relative; } .term-highlight::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: #6a4aaa; transition: width 300ms ease-out; } .term-highlight:hover::after { width: 100%; } AVOID: Standard wiki templates, corporate knowledge-management platforms, and generic documentation generators. Let glassmorphism translucent elegance and professional precision create a wiki platform where knowledge layers are simultaneously visible through frosted-glass panels. ## Uniqueness Notes 1. **Glassmorphism for wiki:** Translucent panels create the see-through quality of knowledge layers visible simultaneously. 2. **Editorial-flow as reference publication:** Magazine-style layout positions the wiki as professionally organized reference work. 3. **Professional tone as information precision:** Clear, competent language matches glassmorphism's corporate elegance. 4. **Circuit motifs as knowledge infrastructure:** Technical patterns suggest the systematic quality of well-organized information architecture. 5. **Underline-draw as scholarly emphasis:** Animated underlines create the scholar quality of marking important terms for attention. **Seed/Style:** aesthetic: glassmorphism, layout: editorial-flow, typography: condensed, palette: pastel, patterns: underline-draw, imagery: data-viz, motifs: circuit, tone: professional **Avoided Overused Patterns:** corporate aesthetic, parallax patterns, asymmetric layout, mono typography, warm palette, friendly tone, minimal imagery. This design uses glassmorphism aesthetic, editorial-flow layout, condensed typography, pastel palette, underline-draw patterns, data-viz imagery, and professional tone.