# Design Language for prototype.moe ## Aesthetics and Tone prototype.moe channels a street-style aesthetic — the raw, authentic energy of urban creative culture applied to a prototyping platform rooted in moe (萌え) subculture sensibility. The site tags — every surface carrying the handmade quality of wheat-pasted posters, spray-painted stencils, and the DIY energy of a creative community that builds its own tools. Inspiration draws from the graphic identity of Supreme's box logo simplicity, the zine culture of Nigo's early BAPE lookbooks, the hand-lettered flyers of underground music venues, and the sticker-bomb aesthetic of Tokyo's Harajuku district. The tone is conversational — warm, direct language that talks to you like a friend sharing their latest build over coffee. ## Layout Motifs and Structure The layout uses an **editorial-flow** architecture — content flowing in a curated editorial stream that presents prototypes as featured stories in a street-culture magazine. **Editorial Flow Architecture:** - Editorial column: max-width: 720px centered - Feature breakouts: expand to 920px for visual emphasis - Pull-quotes at 108% width for prototype insights - Generous whitespace between features for breathing room - Container: max-width: 720px centered with breakouts - The editorial flow creates the magazine-feature quality of street-culture publications **Section Sequence:** 1. **Tag:** Hero with playful-rounded title on candy-bright street gradient, gradient-mesh vibrant color washes, circuit technical accent markers 2. **Builds:** Prototype features in editorial flow — path-draw-svg interactive blueprint animations with gradient-mesh colorful surfaces 3. **Drop:** Featured prototype in expanded editorial with circuit technical annotations and gradient-mesh premium display 4. **Archive:** Past prototypes in focused editorial with circuit schematic treatments 5. **Peace:** Footer as street sign-off — conversational farewell with circuit settled markers and friendly closing ## Typography and Palette **Typography:** - **Headlines:** "Quicksand" (Google Fonts) — playful rounded sans at 2.2rem-3rem, weight 700. Its soft, approachable forms create the friendly-yet-technical quality of moe subculture design language. - **Body Text:** "Quicksand" at 0.95rem, weight 400, line height 1.7. - **Accent:** "Quicksand" at 1rem, weight 600 for prototype labels and build tags. - **Labels:** "Quicksand" at 0.7rem, weight 600, uppercase, letter-spacing 0.06em. **Color Palette:** - **Candy Pink:** #f878a8 — bright candy pink for primary accent - **Candy Mint:** #58d8b0 — fresh mint green for secondary accent - **Cream Base:** #fef8f0 — warm cream for backgrounds - **Soft Lilac:** #c8a8e8 — gentle lilac for tertiary accent - **Text Dark:** #282028 — warm dark for body text - **Candy Yellow:** #f8d848 — bright candy yellow for highlights - **Border Candy:** rgba(248,120,168,0.12) — candy pink border ## Imagery and Motifs **Gradient-Mesh Vibrant Washes:** Prototype panels feature gradient mesh backgrounds — conic-gradient(from 45deg at 60% 40%, rgba(248,120,168,0.06), rgba(88,216,176,0.05), rgba(200,168,232,0.04), rgba(248,216,72,0.03)). The mesh creates the spray-painted quality of street art color blending with moe-culture softness. **Path-Draw-SVG Blueprint Animations:** Prototype showcases feature SVG blueprint lines that draw on scroll — stroke-dasharray equal to path length, stroke-dashoffset animating from full to 0 over 800ms ease-out. The path-draw creates the blueprint-sketch quality of prototypes being designed in real time. **Circuit Technical Markers:** Small circuit-board-style connection nodes (6-10px circles with 1px connecting lines) in Candy Pink and Candy Mint at 0.15 opacity. Used as section dividers and prototype status indicators. The circuits create the technical-meets-kawaii quality of moe subculture applied to engineering. **Candy-Bright Street Atmosphere:** The palette uses saturated candy tones against warm cream — linear-gradient(180deg, rgba(248,120,168,0.04), rgba(88,216,176,0.03), rgba(200,168,232,0.02)). The candy palette creates the Harajuku-street quality of playful color in technical context. **Sticker-Bomb Accent Patches:** Small decorative patches (24-32px rounded rectangles, border-radius: 8px) in rotating candy colors used as prototype category badges and skill tags. The patches create the sticker-bomb quality of street-culture personalization. ## Prompts for Implementation Build the page as a street-style moe prototyping magazine. Editorial: .moe-editorial { max-width: 720px; margin: 0 auto; padding: 60px 24px; } .moe-breakout { max-width: 920px; margin: 0 auto; padding: 80px 32px; } Path-draw: .blueprint-line { stroke-dasharray: var(--path-length); stroke-dashoffset: var(--path-length); transition: stroke-dashoffset 800ms ease-out; } .blueprint-line.visible { stroke-dashoffset: 0; } Gradient-mesh: .mesh-panel { background: conic-gradient(from 45deg at 60% 40%, rgba(248,120,168,0.06), rgba(88,216,176,0.05), rgba(200,168,232,0.04)); border-radius: 16px; } Circuit markers: .circuit-node { width: 8px; height: 8px; border-radius: 50%; background: var(--node-color, #f878a8); opacity: 0.15; } .circuit-line { height: 1px; background: rgba(248,120,168,0.1); } Sticker badge: .prototype-tag { display: inline-block; padding: 4px 10px; border-radius: 8px; font-size: 0.7rem; font-weight: 600; background: var(--tag-bg, rgba(248,120,168,0.1)); color: var(--tag-color, #f878a8); } AVOID: Corporate prototype dashboards, sterile tech demos, and minimal product galleries. Let street-style energy and conversational warmth create a moe prototyping platform where every build feels like a celebrated creative drop in a friendly community. ## Uniqueness Notes 1. **Street-style meets moe subculture:** Urban creative energy combined with kawaii sensibility creates a unique technical-yet-approachable prototype platform. 2. **Path-draw as live blueprinting:** SVG line animations create the real-time quality of prototypes being designed before your eyes. 3. **Candy-bright as Harajuku palette:** Saturated pastel colors create the playful street-fashion quality of Tokyo's creative districts. 4. **Circuit as kawaii-tech:** Technical circuit markers with soft, rounded aesthetics embody the moe philosophy applied to engineering. 5. **Editorial-flow as zine format:** Magazine-style content flow treats prototypes as featured stories worth reading. **Seed/Style:** aesthetic: street-style, layout: editorial-flow, typography: playful-rounded, palette: candy-bright, patterns: path-draw-svg, imagery: gradient-mesh, motifs: circuit, tone: conversational **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 street-style aesthetic, editorial-flow layout, candy-bright palette, gradient-mesh imagery, and conversational tone.