# Design Language for mechanic.stream ## Aesthetics and Tone mechanic.stream channels a pop-art aesthetic — bold outlines, halftone dots, saturated primary colors, and the explosive visual language of Lichtenstein and Warhol applied to live mechanical repair and fabrication streaming. The site celebrates the spectacle of hands-on mechanical work — sparks flying, gears turning, and machines coming apart and back together as riveting entertainment. Inspiration draws from Roy Lichtenstein's Ben-Day dot compositions, Andy Warhol's serial repetitions, vintage auto repair shop signage, and the dramatic close-up cinematography of How It's Made. The tone is opulent-grand — mechanical craftsmanship elevated to high art, each stream presented as a premiere event worthy of red-carpet treatment. ## Layout Motifs and Structure The layout uses a **modular-blocks** architecture — distinct rectangular content modules that snap together like mechanical components, each block a self-contained unit with clear borders and systematic spacing. **Modular Block Architecture:** - Rigid grid of content blocks: display: grid, grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) - Each module: fixed padding (32px), hard borders (2px solid), no border-radius — mechanical precision - Gap: 0px — blocks touch edges, separated only by their borders - Feature modules span 2 columns, creating visual hierarchy - Block headers: bold color bars (8px) at top of each module **Section Sequence:** 1. **The Bay:** Hero section with oversized title in halftone-overlay background, slab-serif type at maximum scale, stream status indicator pulsing 2. **Live Feeds:** Current streams in modular grid — each block a live stream card with thumbnail, mechanic name, and viewer count in bold pop-art frames 3. **The Catalogue:** Archive of past streams organized in tight modular grid, each with halftone-processed thumbnail and bold category labels 4. **Specs Sheet:** Technical information section — stream schedules, equipment lists, and category breakdowns in grid-line bordered data tables 5. **Shop Floor:** Footer as industrial signage — bold type, grid-line borders, social links as pop-art icon buttons ## Typography and Palette **Typography:** - **Headlines:** "Alfa Slab One" (Google Fonts) — heavy slab serif at 2.5rem-4.5rem, weight 400. Its massive slab serifs channel industrial stencil lettering and pop-art impact. - **Body Text:** "Work Sans" (Google Fonts) — geometric sans at 0.95rem, weight 400, line height 1.7. - **Stream Data:** "Alfa Slab One" at 0.85rem for viewer counts, durations, and stream metrics. - **Labels:** "Work Sans" at 0.75rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Pop Red:** #d02020 — vivid red for primary accents and live indicators - **Pop Yellow:** #f0d020 — bright yellow for secondary accents and highlights - **Pop Blue:** #2060d0 — strong blue for interactive elements and links - **Ink Black:** #1a1a1a — near-black for primary backgrounds and text - **Panel White:** #f8f8f0 — clean white for card backgrounds - **Halftone Gray:** #c0c0c0 — medium gray for halftone dot patterns - **Steel:** #404050 — dark steel for borders and secondary text - **Flash Orange:** #e08020 — warm orange for category accents ## Imagery and Motifs **Halftone Dot Overlays:** Stream thumbnails and hero imagery processed with a CSS halftone effect — radial-gradient dots (background: radial-gradient(circle, currentColor 25%, transparent 25%) with background-size: 4px 4px) overlaid at 0.12 opacity in Pop Red or Pop Blue, creating the Ben-Day dot texture of comic book printing applied to mechanical imagery. **Grid-Line Technical Borders:** All content modules framed with precise engineering-drawing borders — 2px solid lines in Steel, with small cross-marks (+) at corners (pseudo-elements, 8px arms, 1px stroke) suggesting technical drawing registration marks. Creates the feeling of mechanical blueprints. **Slide-Reveal Stream Entrances:** Stream cards enter viewport with a dramatic slide-reveal — a solid Pop Red block slides across from left, revealing the content underneath. The reveal block width animates from 100% to 0% over 500ms with ease-out timing, like a curtain lifting on a show. **Lens-Flare Highlight Accents:** Featured streams and live indicators emit a stylized lens flare — a pseudo-element with background: radial-gradient(ellipse at 30% 40%, rgba(240,208,32,0.3) 0%, transparent 50%) positioned at the corner of featured cards, suggesting the bright light of welding torches and workshop lamps. **Pop-Art Speech Bubbles:** Stream descriptions occasionally framed in comic-book speech bubbles — border: 2px solid Ink Black, border-radius: 50% 50% 50% 0%, with a CSS triangle tail. Contains mechanic quotes or stream highlights in bold slab type. ## Prompts for Implementation Build the page as a pop-art mechanical workshop. Grid: display: grid, grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)), gap: 0. Modules: border: 2px solid #404050, padding: 32px. Feature modules: grid-column: span 2. Halftone overlay: pseudo-element with background: radial-gradient(circle, var(--dot-color) 25%, transparent 25%), background-size: 4px 4px, opacity: 0.12, pointer-events: none, mix-blend-mode: multiply. Slide-reveal: container overflow: hidden. ::after with position: absolute, inset: 0, background: Pop Red. On .visible: @keyframes slideOut { from { transform: translateX(0); } to { transform: translateX(100%); } } 500ms ease-out forwards. Grid-line corners: .module::before, .module::after for top-left and top-right corner crosses. Small spans for bottom corners. Each cross: width: 8px height: 1px + width: 1px height: 8px, background: Steel, position: absolute. Lens flare: .featured::after { background: radial-gradient(ellipse at 30% 40%, rgba(240,208,32,0.3) 0%, transparent 50%); position: absolute; inset: 0; pointer-events: none; } AVOID: Minimalist tech-startup aesthetics, muted color palettes, and sterile streaming interfaces. Let the pop-art energy and opulent-grand tone make mechanical streaming feel like explosive entertainment. ## Uniqueness Notes 1. **Pop-art aesthetic for mechanical streaming:** Lichtenstein/Warhol visual language transforms workshop streams into bold visual spectacles. 2. **Modular-blocks as mechanical components:** Content modules that snap together like machine parts reinforce the mechanical theme at the layout level. 3. **Halftone dot processing for stream imagery:** Ben-Day dot overlays give stream thumbnails the printed-comic quality of pop art. 4. **Lens-flare as workshop lighting:** Stylized light effects reference the bright sparks and torches of real mechanical work. 5. **Grid-line registration marks for technical precision:** Engineering drawing borders frame streaming content with mechanical drafting authority. **Seed/Style:** aesthetic: pop-art, layout: modular-blocks, typography: slab-serif, palette: high-contrast, patterns: slide-reveal, imagery: lens-flare, motifs: grid-lines, tone: opulent-grand **Avoided Overused Patterns:** corporate aesthetic (76%), parallax patterns (85%), asymmetric layout (85%), mono typography (86%), warm palette (89%), friendly tone (76%), minimal imagery (84%). This design uses pop-art aesthetic, modular-blocks layout, high-contrast palette, lens-flare imagery, and opulent-grand tone.