# Design Language for prototype.st ## Aesthetics and Tone prototype.st channels an avant-garde aesthetic — the boundary-pushing, convention-defying energy of experimental art applied to a prototyping platform. The site provokes — unexpected compositions, rule-breaking typography, and the intellectual boldness of creative work that questions its own medium. Inspiration draws from the Constructivist posters of El Lissitzky, the experimental typography of Wolfgang Weingart, the deconstructed layouts of David Carson's Ray Gun magazine, and the conceptual installations of Olafur Eliasson. The tone is calm-serene — measured, contemplative language that provides a meditative counterpoint to the visual avant-garde intensity. ## Layout Motifs and Structure The layout uses an **editorial-flow** architecture — content flowing in a considered editorial stream that creates the curated-exhibition quality of an avant-garde gallery walkthrough. **Editorial Flow Architecture:** - Editorial column: max-width: 740px centered - Feature breakouts: full viewport width for immersive moments - Pull-quotes at asymmetric offsets (margin-left: -12%, width: 124%) - Irregular spacing rhythm (50px, 80px, 60px, 90px) between sections - Container: max-width: 740px with full-bleed breakouts - The editorial flow creates the gallery-catalog quality of avant-garde exhibition documentation **Section Sequence:** 1. **Manifesto:** Hero with mono title on translucent-frost avant-garde field, mixed-media layered visual elements, leaf-organic natural growth accents 2. **Experiments:** Prototype explorations in editorial flow — ripple interactive disturbance effects with mixed-media collaged surfaces 3. **Installation:** Featured prototype in full-viewport moment with leaf-organic growing decorations and mixed-media immersive layering 4. **Process Notes:** Working methodology in focused editorial with leaf-organic process growth markers 5. **Stillness:** Footer as contemplative rest — calm-serene closing with leaf-organic settled growth and meditative farewell ## Typography and Palette **Typography:** - **Headlines:** "IBM Plex Mono" (Google Fonts) — precise monospace at 2rem-2.8rem, weight 700. Its technical, grid-aligned forms create the Constructivist poster quality of programmatic typography used as visual art. - **Body Text:** "IBM Plex Sans" (Google Fonts) — clean sans at 0.9rem, weight 400, line height 1.8. - **Accent:** "IBM Plex Mono" at 1rem, weight 400 for experimental annotations and process labels. - **Labels:** "IBM Plex Sans" at 0.65rem, weight 500, uppercase, letter-spacing 0.1em. **Color Palette:** - **Frost White:** #f0f0f8 — cool frost white for backgrounds - **Ice Surface:** #e0e0ec — translucent ice for panels - **Frost Indigo:** #3848a0 — deep indigo for primary accent - **Frost Violet:** #8058b8 — cool violet for secondary accent - **Frost Teal:** #38a0a8 — bright teal for tertiary accent - **Text Slate:** #181828 — deep slate for body text - **Frost Shadow:** #9898a8 — cool gray for secondary text - **Border Frost:** rgba(56,72,160,0.08) — indigo tint border ## Imagery and Motifs **Mixed-Media Layered Collage:** Prototype panels feature layered visual elements — overlapping semi-transparent panels (2-3 layers) with varying opacity (0.7, 0.85, 1.0) and slight offset (transform: translate(4px, -4px)). The layering creates the mixed-media collage quality of avant-garde art combining multiple materials. **Ripple Disturbance Effects:** Interactive elements generate ripple responses — radial outward expansion (0px to 80px border-radius circle) from click/touch point in Frost Indigo at 0.06 opacity fading over 500ms. The ripple creates the stone-in-water quality of avant-garde art that responds to viewer engagement. **Leaf-Organic Growth Accents:** Organic leaf-like SVG shapes (curved paths, 20-40px) in Frost Violet and Frost Teal at 0.06-0.1 opacity. CSS animation: gentle growth (scale 0.9 to 1.0 over 4s ease-in-out infinite). The leaves create the natural-growth quality of prototypes evolving organically. **Translucent-Frost Avant-Garde Field:** Background uses cool, frosted tones — linear-gradient(180deg, rgba(56,72,160,0.02), rgba(128,88,184,0.015), rgba(56,160,168,0.01)). The frost creates the gallery-white quality of avant-garde exhibition spaces with subtle atmospheric color. **Constructivist Grid Lines:** Thin structural lines (1px) in Frost Indigo at 0.04 opacity creating asymmetric grid patterns behind content. The lines create the Constructivist quality of visible structural systems as decorative elements. ## Prompts for Implementation Build the page as an avant-garde prototyping gallery. Editorial: .avant-editorial { max-width: 740px; margin: 0 auto; padding: 70px 24px; } .avant-immerse { width: 100vw; margin-left: calc(-50vw + 50%); min-height: 60vh; display: flex; align-items: center; justify-content: center; } Ripple: .ripple-target { position: relative; overflow: hidden; } /* JS: on click, create expanding circle at click point, fade out over 500ms */ Mixed-media layers: .collage-layer { position: relative; } .collage-layer::before, .collage-layer::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(56,72,160,0.06); border-radius: 8px; } .collage-layer::before { transform: translate(4px, -4px); opacity: 0.7; } .collage-layer::after { transform: translate(-3px, 3px); opacity: 0.5; } Leaf growth: .organic-leaf { animation: leafGrow 4s ease-in-out infinite; } @keyframes leafGrow { 0%, 100% { transform: scale(0.9); } 50% { transform: scale(1.0); } } Grid lines: .constructivist-grid { background: repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(56,72,160,0.04) 60px, rgba(56,72,160,0.04) 61px), repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(56,72,160,0.03) 80px, rgba(56,72,160,0.03) 81px); } AVOID: Standard portfolio galleries, corporate innovation showcases, and minimal prototype displays. Let avant-garde experimentation and calm-serene contemplation create a prototyping platform where every build is an installation worthy of gallery consideration. ## Uniqueness Notes 1. **Avant-garde for prototyping:** Boundary-pushing visual language makes experimental builds feel like conceptual art installations rather than technical demos. 2. **Ripple as viewer engagement:** Click-generated disturbance effects create the interactive quality of avant-garde art that responds to its audience. 3. **Mixed-media as collage layers:** Overlapping semi-transparent panels create the layered, multi-material quality of avant-garde collage. 4. **Calm-serene against visual intensity:** Meditative language provides contemplative counterpoint to avant-garde visual boldness. 5. **Constructivist grid as visible structure:** Structural lines behind content make the design system itself a decorative element. **Seed/Style:** aesthetic: avant-garde, layout: editorial-flow, typography: mono, palette: translucent-frost, patterns: ripple, imagery: mixed-media, motifs: leaf-organic, tone: calm-serene **Avoided Overused Patterns:** corporate aesthetic (87%), parallax patterns (92%), asymmetric layout (90%), mono typography (93%), warm palette (94%), friendly tone (88%), minimal imagery (92%). This design uses avant-garde aesthetic, editorial-flow layout, translucent-frost palette, mixed-media imagery, and calm-serene tone.