# Design Language for prototype.rs ## Aesthetics and Tone prototype.rs channels a playful aesthetic — the joyful, experimental energy of creative play applied to a Rust-focused prototyping platform. The site experiments — bouncy interactions, surprising color combinations, and the delightful irreverence of a platform that treats systems programming as a creative playground. Inspiration draws from the whimsical product design of Alessi's kitchen objects, the playful identities of Google Creative Lab projects, the interactive joy of Stripe's landing page experiments, and the colorful energy of Studio Dumbar's graphic work. The tone is professional — clean, competent language that balances playful visuals with the technical credibility Rust developers expect. ## Layout Motifs and Structure The layout uses a **split-screen** architecture — content divided into complementary halves that create the duality of play and precision, creativity and systems engineering. **Split Screen Architecture:** - Two-column split: 50/50 or 55/45 depending on content - Left panel: conceptual, visual, playful - Right panel: technical, code-focused, precise - Feature sections: full-width breaking the split for emphasis - Container: max-width: 1120px with split inner grid - The split creates the dual-nature quality of playful creativity meeting Rust precision **Section Sequence:** 1. **Spawn:** Hero with retro-display title on forest-green playful gradient, noise-texture organic grit, sharp-angles geometric accent cuts 2. **Builds:** Prototype showcases in split panels — tilt-3d interactive perspective shifts with noise-texture tactile surfaces 3. **Forge:** Featured prototype in full-width break with sharp-angles dramatic cuts and noise-texture detail surfaces 4. **Crate:** Component library in alternating split with sharp-angles structural dividers 5. **Drop:** Footer as release — professional closing with sharp-angles settled geometry and competent farewell ## Typography and Palette **Typography:** - **Headlines:** "Space Mono" (Google Fonts) — retro monospace display at 2.2rem-3rem, weight 700. Its mechanical, typewriter-esque forms create the terminal-output quality of Rust compilation messages elevated to display typography. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.8. - **Code:** "Space Mono" at 0.85rem, weight 400 for Rust code examples and prototype specs. - **Labels:** "Inter" at 0.65rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Forest Dark:** #0c1c14 — deep forest dark for backgrounds - **Forest Surface:** #142820 — rich forest for panels - **Forest Lime:** #68d838 — bright lime for primary accent (Rust cargo green energy) - **Forest Amber:** #d8a828 — warm amber for secondary accent - **Forest Cream:** #e8e4d8 — light cream for text on dark - **Forest Shade:** #385030 — mid forest for secondary text - **Border Forest:** rgba(104,216,56,0.1) — lime tint border ## Imagery and Motifs **Noise-Texture Organic Grit:** Panel surfaces feature noise-grain texture — SVG feTurbulence (baseFrequency: 0.5, numOctaves: 3) at 0.04 opacity creating the organic, tactile quality of sandpaper or rough bark. The noise prevents the digital-sterile quality that repels playful energy. **Tilt-3D Perspective Shifts:** Prototype cards respond to cursor with perspective tilt — transform: perspective(800px) rotateX(var(--tilt-x))deg rotateY(var(--tilt-y))deg with max rotation of 5deg. Transition: 150ms ease-out. The tilt creates the physical-object quality of handling a prototype in your hands. **Sharp-Angles Geometric Cuts:** Decorative angular cuts (CSS clip-path: polygon with 15-25deg angles) creating section transitions and panel edges with the precision-cut quality of machined metal parts. In Forest Lime at 0.06 opacity for subtle structural emphasis. **Forest-Green Playful Atmosphere:** Background uses layered forest tones — radial-gradient(at 60% 30%, rgba(104,216,56,0.03), transparent 40%), radial-gradient(at 30% 70%, rgba(216,168,40,0.02), transparent 35%). The forest palette creates the natural, organic quality of a workshop nestled in a creative forest retreat. **Compilation Progress Bars:** Decorative horizontal bars (4px height, variable width 30-80%) in Forest Lime with animated width transition (width: 0 to var(--progress) over 600ms ease-out on scroll). The bars create the Rust compilation progress quality of builds compiling in real time. ## Prompts for Implementation Build the page as a playful Rust prototyping workshop. Split: .proto-split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1120px; margin: 0 auto; padding: 80px 24px; } .proto-full { grid-column: 1 / -1; } Tilt-3d: .proto-card { transition: transform 150ms ease-out; transform-style: preserve-3d; } /* JS: track cursor, apply perspective rotation maxing at 5deg */ Noise texture: .grit::after { content: ''; position: absolute; inset: 0; opacity: 0.04; background: url("data:image/svg+xml,...feTurbulence baseFrequency='0.5' numOctaves='3'..."); pointer-events: none; } Sharp angles: .angle-cut { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%); } Progress bar: .compile-bar { height: 4px; background: #68d838; width: 0; transition: width 600ms ease-out; border-radius: 2px; } .compile-bar.visible { width: var(--progress, 60%); } AVOID: Standard developer tool dashboards, minimal code showcases, and corporate tech platforms. Let playful energy and professional clarity create a Rust prototyping workshop where systems programming feels like creative play in a well-equipped forest workshop. ## Uniqueness Notes 1. **Playful for Rust prototyping:** Joyful experimentation energy makes systems programming feel like creative play rather than serious engineering. 2. **Split-screen as play-and-precision:** Dual panels embody the duality of creative exploration meeting Rust's compile-time precision. 3. **Tilt-3D as physical handling:** Perspective tilt creates the quality of holding and examining a prototype as a physical object. 4. **Compilation progress bars:** Animated width transitions create the Rust-specific quality of watching builds compile in real time. 5. **Forest-green as workshop retreat:** Natural palette creates the organic quality of a creative workshop in nature. **Seed/Style:** aesthetic: playful, layout: split-screen, typography: retro-display, palette: forest-green, patterns: tilt-3d, imagery: noise-texture, motifs: sharp-angles, tone: professional **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 playful aesthetic, split-screen layout, forest-green palette, noise-texture imagery, and professional tone.