# Design Language for ppss.ee ## Aesthetics and Tone ppss.ee channels a pop-art aesthetic — the bold, screen-printed, mass-culture visual language of Warhol and Lichtenstein applied to a personal/creative platform. The site pops — flat, saturated colors, bold outlines, halftone dot patterns, and the playful irreverence of art that celebrates the ordinary as extraordinary. Inspiration draws from the screen prints of Andy Warhol, the Ben-Day dot paintings of Roy Lichtenstein, the pop typography of Sister Corita Kent, and the bold graphic identity of the Tate Modern. The tone is nostalgic-retro — warmly backward-looking language that treats the platform as a lovingly curated time capsule of creative expression. ## Layout Motifs and Structure The layout uses a **horizontal-scroll** architecture — content organized in a horizontal carousel that creates the gallery-wall experience of walking through a pop art exhibition. **Horizontal Scroll Architecture:** - Horizontal scroll container: 100vh height, overflow-x: auto - Content panels: 80-100vw width each, side by side - Scroll snap: snap to each panel center - 5-7 panels creating the gallery walkthrough - Navigation: dot indicators and arrow controls - The horizontal scroll IS the gallery wall — each panel a pop art piece **Section Sequence:** 1. **Gallery Open:** First panel with handwritten title on coastal-blend pop gradient, noise-texture halftone surface effects, wave-forms bold graphic line patterns 2. **Collection:** Content panels in horizontal gallery — elastic interactive panel snap animations with noise-texture screen-print surfaces 3. **Spotlight:** Featured panel in expanded gallery moment with wave-forms bold accent patterns 4. **Archive:** Historical content in gallery panels with noise-texture vintage print treatment 5. **Exit:** Final panel as gallery exit — nostalgic-retro farewell with wave-forms flowing exit line and warm sign-off ## Typography and Palette **Typography:** - **Headlines:** "Caveat" (Google Fonts) — handwritten script at 2.5rem-3.5rem, weight 700. Its casual, hand-lettered quality creates the personal, authentic voice of an artist's gallery annotations. - **Body Text:** "Nunito" (Google Fonts) — rounded sans at 0.95rem, weight 400, line height 1.7. - **Accent:** "Caveat" at 1.3rem for panel captions and gallery labels. - **Labels:** "Nunito" at 0.7rem, weight 600, uppercase, letter-spacing 0.06em. **Color Palette:** - **Coastal Sand:** #faf4e8 — warm coastal sand for backgrounds - **Driftwood Surface:** #e8dcc8 — warm driftwood for panel surfaces - **Ocean Blue:** #2878a0 — coastal ocean blue for primary accent - **Coral Pop:** #d86050 — coral pop for secondary accent - **Sand Gold:** #d0a040 — sand gold for tertiary accent - **Text Dark:** #181810 — warm dark for body text - **Shadow Shore:** #a89878 — shore shadow for secondary text - **Border Coast:** rgba(40,120,160,0.12) — coastal border ## Imagery and Motifs **Noise-Texture Halftone Surfaces:** Every panel carries pop-art halftone texture — CSS radial-gradient creating dot pattern (radial-gradient(circle, rgba(24,24,16,0.06) 1px, transparent 1px) with background-size: 6px 6px). The halftone creates the screen-printed quality of pop art reproduction. **Elastic Panel Snap:** Gallery panels snap to center with elastic spring — scroll-snap-type: x mandatory with CSS scroll-behavior: smooth. Panels entering view scale from 0.95 to 1 with elastic ease (cubic-bezier(0.25, 1.3, 0.5, 1)). The elastic snap creates the satisfying click of flipping through a pop art catalog. **Wave-Forms Bold Lines:** Bold graphic lines (SVG paths, 3-4px stroke) in Ocean Blue and Coral Pop flowing between panels as connecting elements. The wave forms create the bold, confident line quality of pop art's graphic language — thick, decisive, and unapologetically visible. **Coastal-Blend Pop Warmth:** The palette blends coastal warmth with pop energy — sand foundations with bold ocean and coral accents. Panel backgrounds alternate between warm sand tones with pop color accents. The coastal quality creates the relaxed, sun-faded charm of vintage beach postcards. **Horizontal Gallery Navigation:** Small dot indicators (8px) fixed at bottom center — active dot in Coral Pop, inactive in Shore shadow. Left/right arrow buttons (SVG, 32px) at viewport edges. The navigation creates the gallery-museum quality of guided artwork viewing. ## Prompts for Implementation Build the page as a pop-art horizontal gallery. Horizontal: .gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; height: 100vh; } .gallery-panel { min-width: 90vw; scroll-snap-align: center; padding: 60px 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } Halftone: .halftone { background-image: radial-gradient(circle, rgba(24,24,16,0.06) 1px, transparent 1px); background-size: 6px 6px; } Elastic: .gallery-panel { transform: scale(0.95); transition: transform 400ms cubic-bezier(0.25, 1.3, 0.5, 1); } .gallery-panel.active { transform: scale(1); } Wave lines: .pop-wave { position: absolute; } .pop-wave path { stroke: var(--wave-color, #2878a0); stroke-width: 3; fill: none; stroke-linecap: round; } Gallery nav: .gallery-dots { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; } .dot { width: 8px; height: 8px; border-radius: 50%; background: #a89878; } .dot.active { background: #d86050; } AVOID: Standard portfolio grids, minimal gallery layouts, and corporate showcase platforms. Let pop-art boldness and nostalgic-retro warmth create a horizontal gallery where creative content is displayed with the screen-printed, halftone energy of a beach-town pop art exhibition. ## Uniqueness Notes 1. **Pop-art for personal platform:** Screen-printed, halftone visual language makes creative content feel bold, reproduced, and culturally significant. 2. **Horizontal-scroll as gallery walk:** Side-scrolling panels create the physical experience of walking through a pop art exhibition. 3. **Elastic snap as catalog flip:** Springy panel transitions create the satisfying quality of flipping through a pop art catalog. 4. **Noise-texture as halftone print:** Dot-pattern surfaces create the authentic screen-printed quality of pop art reproduction. 5. **Coastal-blend as beach-town pop:** Warm sandy palette creates the relaxed, sun-faded charm of vintage pop art postcards. **Seed/Style:** aesthetic: pop-art, layout: horizontal-scroll, typography: handwritten, palette: coastal-blend, patterns: elastic, imagery: noise-texture, motifs: wave-forms, tone: nostalgic-retro **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 pop-art aesthetic, horizontal-scroll layout, coastal-blend palette, noise-texture imagery, and nostalgic-retro tone.