# Design Language for prototype.report ## Aesthetics and Tone prototype.report channels a graffiti aesthetic — the raw, unauthorized energy of spray-painted walls and marker-tagged surfaces applied to a prototype reporting and documentation platform. The site writes on walls — bold letterforms claiming space, dripping paint edges, and the fearless creative expression of ideas that refuse to wait for permission. Inspiration draws from the wildstyle lettering of Dondi White, the political murals of Banksy, the documentary photography of Martha Cooper's subway art, and the calligraphic graffiti of RETNA. The tone is conversational — direct, honest language that talks through prototype reports like explaining your latest build to someone who genuinely wants to understand. ## Layout Motifs and Structure The layout uses a **single-column** architecture — content flowing in a direct vertical stream that creates the top-to-bottom reading quality of a wall covered in layered tags and throws. **Single Column Architecture:** - Content column: max-width: 760px centered - Report sections: full column width with varied internal layouts - Feature callouts: slight edge-break at 105% width - Spray-paint style section transitions - Container: max-width: 760px; margin: 0 auto - The single column creates the wall-surface quality of reading graffiti top to bottom **Section Sequence:** 1. **Throw-Up:** Hero with serif-classic title on muted-vintage graffiti gradient, marble-texture aged concrete surfaces, geometric-shapes tag accent elements 2. **Reports:** Prototype documentation in single column — zoom-focus interactive detail examination with marble-texture weathered report surfaces 3. **Piece:** Featured report in expanded callout with geometric-shapes stencil decorations and marble-texture premium concrete 4. **Tags:** Quick prototype notes in compressed column sections 5. **Sign-Off:** Footer as final tag — conversational farewell with geometric-shapes settled stencil and honest closing ## Typography and Palette **Typography:** - **Headlines:** "Playfair Display" (Google Fonts) — serif classic at 2.2rem-3rem, weight 700. Its high-contrast strokes create the unexpected sophistication of formal typography on raw concrete — graffiti's contrast of elegance against grit. - **Body Text:** "Source Sans 3" (Google Fonts) — clean sans at 0.95rem, weight 400, line height 1.7. - **Accent:** "Playfair Display" at 1.1rem, weight 400, italic for report annotations and prototype notes. - **Labels:** "Source Sans 3" at 0.65rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Concrete Gray:** #e8e4dc — muted concrete gray for backgrounds - **Aged Wall:** #d0c8b8 — aged wall surface for panels - **Spray Black:** #1c1818 — deep black for primary text - **Spray Crimson:** #c03038 — vivid crimson for primary accent - **Spray Gold:** #c8a028 — spray-paint gold for secondary accent - **Fade Gray:** #787068 — faded paint gray for secondary text - **Border Concrete:** rgba(28,24,24,0.08) — concrete-tone border ## Imagery and Motifs **Marble-Texture Aged Concrete:** Report panels feature concrete-like surface texture — repeating-linear-gradient(180deg, transparent, transparent 30px, rgba(28,24,24,0.008) 30px, rgba(28,24,24,0.008) 31px) combined with radial-gradient(at 40% 60%, rgba(192,48,56,0.01), transparent 30%). The texture creates the weathered concrete quality of walls that have been painted and repainted. **Zoom-Focus Detail Examination:** Report sections feature focus-zoom on interaction — transform: scale(1.03) on hover with box-shadow expanding from 0 to 0 4px 20px rgba(28,24,24,0.06) over 250ms ease. The zoom creates the quality of leaning in to examine detail on a painted wall. **Geometric-Shapes Stencil Elements:** Sharp geometric stencil shapes (triangles, arrows, circles with cut-out centers, 16-28px) in Spray Crimson and Spray Gold at 0.08-0.12 opacity. Used as section markers and report status indicators. The stencils create the cut-cardboard quality of graffiti stencil art. **Muted-Vintage Graffiti Atmosphere:** The palette uses desaturated, weathered tones — linear-gradient(180deg, rgba(192,48,56,0.02), rgba(200,160,40,0.02), transparent). The muted vintage quality creates the sun-faded, rain-washed appearance of old graffiti that has aged into the wall. **Drip Edge Decoration:** Decorative drip elements (SVG paths with irregular vertical lines, 2-8px wide, 20-40px tall) at section bottoms in accent colors at 0.06 opacity. The drips create the spray-paint overspill quality of fresh tags. ## Prompts for Implementation Build the page as a graffiti-style prototype reporting wall. Single column: .report-wall { max-width: 760px; margin: 0 auto; padding: 60px 24px; } .report-callout { margin: 0 -2.5%; padding: 40px 5%; } Zoom-focus: .report-section { transition: transform 250ms ease, box-shadow 250ms ease; } .report-section:hover { transform: scale(1.03); box-shadow: 0 4px 20px rgba(28,24,24,0.06); } Concrete texture: .concrete { position: relative; background: #e8e4dc; } .concrete::after { content: ''; position: absolute; inset: 0; opacity: 0.5; background: repeating-linear-gradient(180deg, transparent, transparent 30px, rgba(28,24,24,0.008) 30px, rgba(28,24,24,0.008) 31px); pointer-events: none; } Stencil shapes: .stencil { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); background: var(--stencil-color, rgba(192,48,56,0.1)); width: 20px; height: 20px; } Drip: .drip-edge { background: repeating-linear-gradient(90deg, transparent, transparent 40px, var(--drip-color, rgba(192,48,56,0.06)) 40px, var(--drip-color, rgba(192,48,56,0.06)) 44px); height: 30px; mask-image: linear-gradient(180deg, black, transparent); } AVOID: Corporate reporting dashboards, sterile documentation platforms, and minimal status trackers. Let graffiti rawness and conversational honesty create a prototype reporting wall where every document carries the authentic energy of ideas that demanded to be written. ## Uniqueness Notes 1. **Graffiti for prototype reporting:** Raw street art energy makes documentation feel like urgent, authentic expression rather than bureaucratic obligation. 2. **Zoom-focus as wall examination:** Hover zoom creates the quality of leaning in to read detail on a painted surface. 3. **Concrete texture as report surface:** Aged wall texture gives reports the physical presence of ideas written on real surfaces. 4. **Serif-classic on concrete:** Formal typography against raw backgrounds creates graffiti's signature contrast of elegance and grit. 5. **Drip edges as spray-paint overspill:** Paint drip decorations create the fresh-tag quality of newly documented prototypes. **Seed/Style:** aesthetic: graffiti, layout: single-column, typography: serif-classic, palette: muted-vintage, patterns: zoom-focus, imagery: marble-texture, motifs: geometric-shapes, 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 graffiti aesthetic, single-column layout, muted-vintage palette, marble-texture imagery, and conversational tone.