# Design Language for sbom.study ## Aesthetics and Tone sbom.study channels a scandinavian aesthetic — the clean, functional beauty of Nordic design principles applied to an SBOM (Software Bill of Materials) study platform. The site clarifies — honest materials, purposeful simplicity, and the democratic beauty of software supply chain knowledge made accessible to everyone through thoughtful design. Inspiration draws from the functional clarity of Alvar Aalto's furniture, the systematic beauty of Danish design's golden age, the editorial precision of Kinfolk magazine, and the material honesty of Finnish architectural traditions. The tone is playful — lighthearted, spirited language that makes studying software supply chain documentation feel like an enjoyable intellectual activity rather than a compliance chore. ## Layout Motifs and Structure The layout uses a **diagonal-sections** architecture — content arranged with angled section transitions that create the dynamic quality of supply chain data flowing between study modules. **Diagonal Sections Architecture:** - Sections separated by diagonal cuts (CSS clip-path at 3-5 degree angles) - Content: max-width: 860px within diagonal-cut sections - Feature sections: full-width with internal diagonal divisions - Alternating light backgrounds for clear section separation - Container: full-width diagonal sections with 860px inner content - The diagonals create the flow quality of software dependencies moving between supply chain levels **Section Sequence:** 1. **Syllabus:** Hero with bebas-bold title on analogous scandinavian gradient, grain-overlay natural study textures, sci-fi-hud analytical study overlay 2. **Modules:** Study chapters in diagonal sections — glitch interactive error-discovery feedback with grain-overlay textured surfaces 3. **Lab:** Featured study exercise in full-width diagonal with sci-fi-hud detailed analysis overlay and grain-overlay immersive texture 4. **Review:** Study summaries in focused diagonal sections with sci-fi-hud simplified markers 5. **Recess:** Footer as study break — playful farewell with sci-fi-hud settled indicators and lighthearted closing ## Typography and Palette **Typography:** - **Headlines:** "Bebas Neue" (Google Fonts) — bold condensed at 2.4rem-3.2rem, weight 400. Its tall, commanding letterforms create the textbook-header quality of study material organized for maximum visual impact and quick reference. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.8. - **Code:** "JetBrains Mono" (Google Fonts) — monospace at 0.85rem for SBOM formats, package specifications, and study examples. - **Labels:** "Inter" at 0.65rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Nordic White:** #f6f2ea — warm Nordic white for backgrounds - **Birch Panel:** #ece4d4 — warm birch for panels - **Study Green:** #48a868 — fresh study green for primary accent - **Study Blue:** #4878b8 — calm study blue for secondary accent - **Study Amber:** #c8a038 — warm amber for tertiary accent (highlights) - **Nordic Dark:** #201c18 — warm dark for text - **Birch Shadow:** #988870 — birch shadow for secondary text - **Border Study:** rgba(72,168,104,0.1) — green tint border ## Imagery and Motifs **Grain-Overlay Study Textures:** Study panels feature subtle organic grain — background with micro-texture (radial-gradient circles at 0.008 opacity creating fine paper grain) over Birch Panel backgrounds. The grain creates the textbook quality of printed educational materials with honest paper texture. **Glitch Error Discovery:** Study exercises feature glitch feedback for incorrect answers — brief horizontal offset (transform: translateX(-2px) to translateX(2px) alternating over 150ms) with color-channel separation (text-shadow: -1px 0 rgba(72,168,104,0.3), 1px 0 rgba(72,120,184,0.3)). The glitch creates the playful quality of learning through mistakes in a supportive environment. **Sci-Fi-HUD Analytical Overlay:** Study sections feature thin analytical overlay elements — corner brackets (L-shapes, 10px arms, 1px) in Study Green at 0.06 opacity at content block corners. Thin horizontal scan lines at section tops (1px, full-width, 0.04 opacity). The HUD creates the analytical quality of SBOM data examined through systematic study tools. **Analogous Scandinavian Atmosphere:** Color palette uses adjacent hues (green-blue-amber) creating natural Nordic harmony — radial-gradient(at 40% 30%, rgba(72,168,104,0.02), transparent 40%), radial-gradient(at 60% 70%, rgba(72,120,184,0.015), transparent 35%). The analogous warmth creates the Nordic quality of colors found in birch forests and clear northern skies. **Diagonal Cut Transitions:** Section boundaries use CSS clip-path — polygon(0 0, 100% 0, 100% calc(100% - 36px), 0 100%) creating 3-degree angle cuts. The diagonals create the flow quality of study content progressing dynamically between supply chain knowledge levels. ## Prompts for Implementation Build the page as a scandinavian SBOM study platform. Diagonal: .study-section { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 36px), 0 100%); padding: 80px 0 120px; } .study-content { max-width: 860px; margin: 0 auto; padding: 0 24px; } Glitch error: .study-error { animation: study-glitch 150ms steps(2) forwards; } @keyframes study-glitch { 0%, 100% { transform: translateX(0); text-shadow: none; } 50% { transform: translateX(-2px); text-shadow: -1px 0 rgba(72,168,104,0.3), 1px 0 rgba(72,120,184,0.3); } } HUD bracket: .study-bracket { position: absolute; width: 10px; height: 10px; } .study-bracket::before { content: ''; position: absolute; width: 10px; height: 1px; background: rgba(72,168,104,0.06); } .study-bracket::after { content: ''; position: absolute; width: 1px; height: 10px; background: rgba(72,168,104,0.06); } Study panel: .birch-card { background: #ece4d4; border: 1px solid rgba(72,168,104,0.1); border-radius: 4px; padding: 28px; } AVOID: Standard documentation study platforms, corporate compliance training, and minimal learning management systems. Let Scandinavian functional beauty and playful spirit create an SBOM study platform where software supply chain knowledge is presented with Nordic warmth and genuine intellectual enjoyment. ## Uniqueness Notes 1. **Scandinavian for SBOM study:** Nordic functional beauty makes software supply chain education feel like a well-designed learning experience rather than compliance obligation. 2. **Diagonal-sections as knowledge flow:** Angled transitions create the dynamic quality of supply chain data flowing between study levels. 3. **Glitch as learning feedback:** Playful error effects create the supportive quality of mistakes as positive learning moments rather than failures. 4. **Bebas-bold as textbook headers:** Tall condensed type creates the commanding quality of study material organized for maximum visual clarity. 5. **Sci-fi-hud as analytical study tools:** Overlay elements create the systematic quality of SBOM data examined through precise analytical instruments. **Seed/Style:** aesthetic: scandinavian, layout: diagonal-sections, typography: bebas-bold, palette: analogous, patterns: glitch, imagery: grain-overlay, motifs: sci-fi-hud, tone: playful **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 scandinavian aesthetic, diagonal-sections layout, analogous palette, grain-overlay imagery, and playful tone.