# Design Language for sbom.day ## Aesthetics and Tone sbom.day channels an anti-design aesthetic — the deliberately rule-breaking, convention-defying visual language of anti-design applied to an SBOM (Software Bill of Materials) daily platform. The site disrupts — intentionally misaligned elements, clashing typographic scales, and the productive chaos of software supply chain documentation that refuses to be boring. Inspiration draws from the deconstructivist experiments of David Carson's Ray Gun magazine, the anti-aesthetic provocations of Experimental Jetset, the typographic collisions of Emigre magazine, and the deliberate visual tension of Tibor Kalman's work at Colors. The tone is friendly — warm, accessible language that makes SBOM documentation feel like a conversation with a colleague who happens to be passionate about software supply chain transparency. ## Layout Motifs and Structure The layout uses a **broken-grid** architecture — content arranged in deliberately misaligned grids that create the deconstructed quality of software dependencies broken apart for examination. **Broken Grid Architecture:** - CSS Grid with intentionally overlapping and offset elements - Content blocks: varying widths (300px to 700px) with deliberate misalignment - Feature elements: rotated 1-3 degrees for visual tension - Overlapping panels at 60-80% opacity for layered reading - Container: max-width: 1000px with irregular internal positioning - The broken grid creates the disassembly quality of software components broken apart for dependency analysis **Section Sequence:** 1. **Shatter:** Hero with kinetic-animated title on pastel anti-design gradient, grain-overlay textured surfaces, aurora-lights shifting atmospheric color 2. **Fragments:** SBOM components in broken grid — scroll-triggered interactive reveal-on-scroll with grain-overlay textured surfaces 3. **Core:** Featured dependency analysis in full-width with aurora-lights immersive color shifts and grain-overlay detailed texture 4. **Debris:** Supporting documentation in offset broken grid with aurora-lights reduced glow 5. **Reassemble:** Footer as reconstruction — friendly farewell with aurora-lights settled atmosphere and warm closing ## Typography and Palette **Typography:** - **Headlines:** "Syne" (Google Fonts) — kinetic-animated geometric sans at 2.2rem-3rem, weight 700. Animate with subtle continuous rotation (0deg to 0.5deg to 0deg over 4s ease-in-out infinite) creating the restless quality of anti-design typography that refuses to stay still. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.7. - **Data:** "JetBrains Mono" (Google Fonts) — monospace at 0.85rem for SBOM entries, package names, and version numbers. - **Labels:** "Inter" at 0.65rem, weight 600, uppercase, letter-spacing 0.06em. **Color Palette:** - **Pastel Cream:** #f4f0e8 — warm pastel cream for backgrounds - **Pastel Lavender:** #e4dce8 — soft lavender for panels - **Anti Pink:** #e85888 — bold anti-design pink for primary accent - **Anti Lime:** #88d848 — vivid lime for secondary accent - **Anti Yellow:** #e8c838 — bright yellow for tertiary accent - **Dark Text:** #181418 — near-black for text - **Pastel Shadow:** #887888 — lavender shadow for secondary text - **Border Anti:** rgba(232,88,136,0.12) — pink tint border ## Imagery and Motifs **Grain-Overlay Textured Surfaces:** SBOM panels feature visible grain texture — background with CSS noise (conic-gradient with randomized stops at 0.015 opacity) overlaid on panel backgrounds. The grain creates the photocopy quality of anti-design's love for degraded, imperfect reproduction. **Scroll-Triggered Dependency Reveals:** SBOM components reveal through scroll with anti-design flair — elements appear with slight rotation (rotate(-1deg) to rotate(0)) and scale shift (scale(0.98) to scale(1.0)) over 400ms ease-out. Some elements intentionally rotate the opposite direction. The scroll reveals create the disorderly quality of software dependencies appearing in their natural, chaotic state. **Aurora-Lights Atmospheric Color:** Background features slowly shifting pastel aurora — linear-gradient(var(--aurora-angle, 135deg), rgba(232,88,136,0.02), transparent, rgba(136,216,72,0.015), transparent). CSS animation rotating gradient over 15s. The aurora creates the psychedelic quality of anti-design color that refuses to stay fixed. **Pastel Anti-Design Atmosphere:** Background uses soft pastels with aggressive accent interruptions — radial-gradient(at 30% 40%, rgba(232,88,136,0.03), transparent 35%), radial-gradient(at 70% 60%, rgba(136,216,72,0.025), transparent 30%). Occasional bold color blocks (Anti Pink, Anti Lime) at full saturation as deliberate visual disruptions. **Offset Sticker Elements:** Small decorative elements positioned with deliberate carelessness — rotated rectangles (20x8px) in accent colors at 0.1 opacity, placed at seemingly random positions like stickers on a punk-zine page. The stickers create the DIY quality of anti-design's rejection of precious, careful composition. ## Prompts for Implementation Build the page as an anti-design SBOM daily report. Broken grid: .sbom-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; max-width: 1000px; margin: 0 auto; padding: 60px 24px; } .sbom-block { grid-column: span var(--cols, 6); transform: rotate(var(--tilt, 0deg)); } .sbom-overlap { position: relative; z-index: 2; margin-top: -20px; } Kinetic title: .anti-title { animation: restless 4s ease-in-out infinite; } @keyframes restless { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(0.5deg); } } Scroll reveal: .dependency-reveal { opacity: 0; transform: rotate(var(--entry-tilt, -1deg)) scale(0.98); transition: all 400ms ease-out; } .dependency-reveal.visible { opacity: 1; transform: rotate(0) scale(1.0); } Grain: .grain-surface { position: relative; } .grain-surface::after { content: ''; position: absolute; inset: 0; background: conic-gradient(from var(--grain-angle, 0deg), rgba(24,20,24,0.015), transparent 10%, rgba(24,20,24,0.01)); background-size: 4px 4px; pointer-events: none; } Anti panel: .anti-card { background: #e4dce8; border: 2px solid rgba(232,88,136,0.12); border-radius: 0; padding: 24px; transform: rotate(var(--tilt, 0deg)); } AVOID: Standard SBOM documentation tools, corporate supply chain dashboards, and minimal dependency viewers. Let anti-design disruption and friendly warmth create an SBOM daily platform where software supply chain transparency is presented with punk-zine energy that makes dependency documentation genuinely engaging. ## Uniqueness Notes 1. **Anti-design for SBOM documentation:** Rule-breaking visuals make software supply chain documentation feel like a punk zine rather than corporate compliance paperwork. 2. **Broken-grid as dependency disassembly:** Misaligned elements create the quality of software components broken apart and examined in their natural, chaotic relationships. 3. **Kinetic-animated as restless type:** Subtly rotating headlines create the anti-design quality of typography that refuses to sit still and behave. 4. **Offset stickers as DIY documentation:** Carelessly placed elements create the zine quality of documentation assembled with deliberate irreverence. 5. **Pastel with aggressive accents:** Soft backgrounds interrupted by bold color blocks create the anti-design quality of deliberate visual disruption. **Seed/Style:** aesthetic: anti-design, layout: broken-grid, typography: kinetic-animated, palette: pastel, patterns: scroll-triggered, imagery: grain-overlay, motifs: aurora-lights, 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 anti-design aesthetic, broken-grid layout, pastel palette, grain-overlay imagery, and friendly tone.