# Design Language for ppzz.ee ## Aesthetics and Tone ppzz.ee channels a hand-drawn aesthetic — the authentic, personal quality of illustrations made by human hands applied to a creative personal platform. The site sketches — every element carrying the warmth of pencil on paper, the slight irregularity of hand-lettered labels, and the intimate quality of a sketchbook shared between friends. Inspiration draws from the illustrated journals of Maira Kalman, the hand-drawn maps of Her Hand His Map studio, the sketch-style interfaces of Paper by FiftyThree, and the illustrated editorial of They Draw and Cook. The tone is grounded-earthy — practical, down-to-earth language that keeps the hand-drawn visual warmth feeling honest and unpretentious. ## Layout Motifs and Structure The layout uses a **horizontal-scroll** architecture — content organized in a side-scrolling gallery that creates the sketchbook quality of flipping through pages of hand-drawn work. **Horizontal Scroll Architecture:** - Horizontal scroll container: 100vh height - Content panels: 85-95vw width, side by side - Scroll snap: snap to each panel center - 5-6 panels creating the sketchbook browsing experience - Navigation: page dots and arrow controls - The horizontal scroll IS the sketchbook — each panel a page **Section Sequence:** 1. **Cover:** First panel with rounded-sans title on analogous hand-drawn gradient, hand-drawn sketch-style illustrations, sci-fi-hud clean analytical overlays as contrast 2. **Pages:** Content panels in horizontal gallery — scale-hover interactive page zoom with hand-drawn sketched surfaces 3. **Spread:** Featured content in double-width panel with hand-drawn detailed illustration and sci-fi-hud precise annotation labels 4. **Notes:** Quick sketches in smaller panels with hand-drawn margin doodles 5. **Back Cover:** Final panel as closing — grounded-earthy sign-off with hand-drawn farewell sketch and honest closing ## Typography and Palette **Typography:** - **Headlines:** "Nunito" (Google Fonts) — rounded sans at 2.2rem-3rem, weight 700. Its soft, rounded forms complement hand-drawn illustrations with approachable, friendly typography. - **Body Text:** "Nunito" at 0.95rem, weight 400, line height 1.7. - **Accent:** "Nunito" at 1rem, weight 600 for page labels and sketch annotations. - **Labels:** "Nunito" at 0.7rem, weight 600, uppercase, letter-spacing 0.06em. **Color Palette:** - **Sketch Cream:** #faf6ee — warm sketch-paper cream for backgrounds - **Paper Surface:** #f0e8d8 — warm paper for panel surfaces - **Ink Teal:** #388888 — rich ink teal for primary accent - **Ink Coral:** #c86858 — warm ink coral for secondary accent - **Ink Olive:** #788848 — muted ink olive for tertiary accent - **Text Dark:** #1c1810 — warm dark for body text - **Pencil Gray:** #908878 — pencil gray for secondary text - **Border Sketch:** rgba(56,136,136,0.12) — sketch teal border ## Imagery and Motifs **Hand-Drawn Sketch Illustrations:** Content illustrated through irregular, hand-drawn SVG elements — paths with quadratic bezier wobble, creating the organic line quality of pencil sketches. Stroke: 1.5px in Ink Teal and Ink Coral. The wobble creates the authentic quality of illustrations that weren't generated by computer. **Scale-Hover Page Zoom:** Gallery panels scale on hover — transform: scale(1.02) with subtle box-shadow expansion over 200ms ease. The scale creates the quality of leaning in to examine a particular sketchbook page more closely. **Sci-Fi-HUD Analytical Annotations:** In contrast to the hand-drawn main content, precise HUD-style labels (1px borders, 4px corner brackets, small dot indicators) in Ink Teal at 0.1 opacity provide analytical structure. The contrast between hand-drawn warmth and HUD precision creates the quality of an artist's sketchbook annotated with technical notes. **Analogous Color Harmony:** The palette uses analogous tones — teal, coral, and olive sitting in warm proximity on the color wheel. The harmony creates the natural, palette-limited quality of illustrations done with a small set of carefully chosen colored pencils. **Sketchbook Page Texture:** Panel surfaces feature paper-like texture — SVG feTurbulence (baseFrequency: 0.4, numOctaves: 2) at 0.03 opacity creating the tactile quality of sketch paper. Combined with subtle warm tone variation (radial-gradient at 0.01 opacity). ## Prompts for Implementation Build the page as a hand-drawn horizontal sketchbook. Horizontal: .sketchbook { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; height: 100vh; } .page { min-width: 90vw; scroll-snap-align: center; padding: 60px 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #faf6ee; } Scale-hover: .page { transition: transform 200ms ease; } .page:hover { transform: scale(1.02); } Hand-drawn: .sketch-line svg path { stroke-linecap: round; stroke-linejoin: round; stroke: var(--ink-color, #388888); stroke-width: 1.5; fill: none; } HUD annotations: .hud-label { font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(56,136,136,0.4); position: relative; padding-left: 12px; } .hud-label::before { content: ''; position: absolute; left: 0; top: 50%; width: 8px; border-top: 1px solid rgba(56,136,136,0.2); } Paper texture: .paper::after { content: ''; position: absolute; inset: 0; opacity: 0.03; background: url("data:image/svg+xml,..."); } AVOID: Polished portfolio sites, corporate showcase platforms, and digital-native design aesthetics. Let hand-drawn authenticity and grounded-earthy honesty create a sketchbook platform where content feels personally crafted and warmly shared. ## Uniqueness Notes 1. **Hand-drawn for personal platform:** Sketch-style illustration makes content feel authentically human rather than digitally produced. 2. **Horizontal-scroll as sketchbook:** Side-scrolling panels recreate the physical experience of flipping through a personal sketchbook. 3. **Scale-hover as leaning in:** Page zoom on hover creates the quality of examining a particular sketch more closely. 4. **HUD-annotations as technical notes:** Precise analytical labels contrast with hand-drawn warmth, creating the quality of an annotated sketchbook. 5. **Analogous as limited palette:** Warm, harmonious colors create the quality of illustrations done with a small, curated set of art supplies. **Seed/Style:** aesthetic: hand-drawn, layout: horizontal-scroll, typography: rounded-sans, palette: analogous, patterns: scale-hover, imagery: hand-drawn, motifs: sci-fi-hud, tone: grounded-earthy **Avoided Overused Patterns:** corporate aesthetic (84%), parallax patterns (90%), asymmetric layout (88%), mono typography (91%), warm palette (93%), friendly tone (84%), minimal imagery (89%). This design uses hand-drawn aesthetic, horizontal-scroll layout, analogous palette, hand-drawn imagery, and grounded-earthy tone.