# Design Language for prototypic.dev ## Aesthetics and Tone prototypic.dev channels a hand-drawn aesthetic — the authentic, personal quality of sketched wireframes and whiteboard diagrams applied to a developer-focused prototyping tools platform. The site sketches — every element carrying the warmth of marker on whiteboard, the spontaneous energy of a brainstorming session, and the honest vulnerability of ideas still being formed. Inspiration draws from the wireframe sketches of Basecamp's Shape Up methodology, the whiteboard photography of design sprint documentation, the notebook sketches of Bruno Munari, and the sketch-style UI of Balsamiq. The tone is warm-inviting — welcoming, encouraging language that makes developers feel at home in a creative sketching environment. ## Layout Motifs and Structure The layout uses a **single-column** architecture — content flowing in a direct vertical scroll that creates the notebook-page quality of sketching ideas one below the next. **Single Column Architecture:** - Content column: max-width: 780px centered - Feature panels: expand to 960px for detailed sketches - Margin annotations at -60px offset for developer notes - Section breaks as torn-paper edges - Container: max-width: 780px; margin: 0 auto - The single column creates the notebook quality of sequential sketching **Section Sequence:** 1. **Sketch:** Hero with slab-serif title on navy-metallic sketch gradient, geometric-abstract wireframe illustrations, layered-depth stacked sketch layers 2. **Tools:** Developer tools in single column — progressive-disclosure interactive reveal animations with geometric-abstract technical diagrams 3. **Deep Sketch:** Featured tool in expanded panel with layered-depth overlapping sketch layers and geometric-abstract detailed illustration 4. **API Notes:** Technical documentation in focused column with margin annotations 5. **Close Notebook:** Footer as final page — warm-inviting farewell with layered-depth settled layers and encouraging closing ## Typography and Palette **Typography:** - **Headlines:** "Zilla Slab" (Google Fonts) — slab serif at 2.2rem-3rem, weight 700. Its sturdy, reliable forms create the engineering-notebook quality of technical headers written in permanent marker. - **Body Text:** "Nunito" (Google Fonts) — rounded sans at 0.95rem, weight 400, line height 1.7. - **Code:** "Fira Code" (Google Fonts) — monospace at 0.85rem for code examples and API references. - **Labels:** "Nunito" at 0.7rem, weight 600, uppercase, letter-spacing 0.06em. **Color Palette:** - **Navy Deep:** #101830 — deep navy for backgrounds - **Navy Surface:** #182040 — rich navy for panels - **Steel Blue:** #4878b8 — steel blue for primary accent - **Bronze Glow:** #c89050 — warm bronze for secondary accent - **Silver Light:** #c8d0dc — silver for text on dark - **Navy Shade:** #303858 — mid navy for secondary text - **Border Navy:** rgba(72,120,184,0.1) — steel blue border ## Imagery and Motifs **Geometric-Abstract Wireframe Illustrations:** Developer tools illustrated through geometric wireframe sketches — rectangles, circles, and connecting lines in Steel Blue and Bronze Glow with 1.5px strokes and dashed outlines (stroke-dasharray: 6 4). The wireframes create the whiteboard-sketch quality of ideas being rapidly prototyped. **Progressive-Disclosure Tool Reveals:** Content sections reveal in stages — first headline (opacity 0 to 1, 300ms), then description (delay 150ms), then code example (delay 300ms), then interactive demo (delay 450ms). Each stage transitions with translateY(8px) to translateY(0). The progressive reveal creates the developer-walkthrough quality of features being explained step by step. **Layered-Depth Stacked Sketches:** Content panels stack with visible depth — 2-3 layers with slight offset (box-shadow: 4px 4px 0 rgba(72,120,184,0.06), 8px 8px 0 rgba(72,120,184,0.03)). The stacking creates the desk-of-papers quality of multiple sketch iterations piled on a developer's workspace. **Navy-Metallic Sketch Atmosphere:** Background uses deep navy with metallic warm accents — radial-gradient(at 50% 30%, rgba(72,120,184,0.04), transparent 40%), radial-gradient(at 60% 70%, rgba(200,144,80,0.02), transparent 30%). The navy creates the late-night quality of developer sessions where best prototyping ideas emerge. **Graph Paper Grid:** Subtle graph-paper lines behind content — repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(72,120,184,0.03) 19px, rgba(72,120,184,0.03) 20px), repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(72,120,184,0.03) 19px, rgba(72,120,184,0.03) 20px). The graph paper creates the engineering-notebook quality of ideas sketched on ruled surfaces. ## Prompts for Implementation Build the page as a hand-drawn developer sketching notebook. Single column: .sketch-notebook { max-width: 780px; margin: 0 auto; padding: 60px 24px; } .sketch-expand { max-width: 960px; margin: 0 auto; padding: 80px 32px; } Progressive disclosure: .tool-reveal > * { opacity: 0; transform: translateY(8px); transition: all 300ms ease-out; } .tool-reveal.visible > *:nth-child(1) { opacity: 1; transform: translateY(0); } .tool-reveal.visible > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 150ms; } .tool-reveal.visible > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 300ms; } Stacked layers: .sketch-stack { box-shadow: 4px 4px 0 rgba(72,120,184,0.06), 8px 8px 0 rgba(72,120,184,0.03); } Graph paper: .graph-bg { background: repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(72,120,184,0.03) 19px, rgba(72,120,184,0.03) 20px), repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(72,120,184,0.03) 19px, rgba(72,120,184,0.03) 20px); } Wireframe sketch: .wireframe svg { stroke: var(--wire-color, #4878b8); stroke-width: 1.5; stroke-dasharray: 6 4; fill: none; } AVOID: Polished developer tool showcases, corporate SaaS dashboards, and minimal documentation platforms. Let hand-drawn warmth and warm-inviting language create a prototyping notebook where every tool feels like a sketch being shared between friends. ## Uniqueness Notes 1. **Hand-drawn for developer tools:** Sketch-style illustration makes technical tools feel like ideas being brainstormed rather than products being sold. 2. **Progressive-disclosure as walkthrough:** Staged reveals create the patient, step-by-step quality of a developer explaining features. 3. **Graph paper as engineering notebook:** Ruled background creates the technical-sketchbook quality of ideas drawn on grid paper. 4. **Layered-depth as iteration stack:** Stacked panels create the desk-of-papers quality of multiple prototype iterations. 5. **Navy-metallic as late-night coding:** Dark palette with warm metallic accents creates the focused atmosphere of late-night developer sessions. **Seed/Style:** aesthetic: hand-drawn, layout: single-column, typography: slab-serif, palette: navy-metallic, patterns: progressive-disclosure, imagery: geometric-abstract, motifs: layered-depth, tone: warm-inviting **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 hand-drawn aesthetic, single-column layout, navy-metallic palette, geometric-abstract imagery, and warm-inviting tone.