# Design Language for ppzz.lu ## Aesthetics and Tone ppzz.lu channels a street-style aesthetic — the raw, authentic visual culture of urban creative communities applied to a personal creative platform based in Luxembourg. The site has edge — bold typographic choices, unconventional compositions, and the confident irreverence of a creative who makes their own rules. Inspiration draws from the editorial design of The Face magazine, the graphic identity of Stussy, the zine culture of independent publishing, and the bold photography aesthetic of i-D magazine. The tone is optimistic-bright — forward-looking, energetic language that treats the platform as a celebration of creative possibility. ## Layout Motifs and Structure The layout uses a **portfolio-grid** architecture — content organized in a masonry-style grid that showcases creative work with the curated, intentional quality of a gallery wall. **Portfolio Grid Architecture:** - CSS Grid: repeat(auto-fill, minmax(280px, 1fr)) with varied heights - Cards: diverse styling (border variety, background shifts) - Feature cards span 2 columns for visual emphasis - Gap: 14px between cards - Container: max-width: 1020px centered - Each card a curated piece in the creative collection **Section Sequence:** 1. **Tag:** Hero with humanist title on duotone street gradient, glassmorphic-cards frosted creative preview windows, crystalline faceted accent markers 2. **Gallery:** Creative works in portfolio grid — lottie-animation interactive work animations with glassmorphic-cards translucent showcase surfaces 3. **Feature:** Highlighted work in expanded grid with crystalline geometric accent details and glassmorphic-cards premium display 4. **Archive:** Past works in grid format with glassmorphic-cards archival treatment 5. **Sign-Off:** Footer as street tag — optimistic-bright farewell with crystalline settled marker and creative sign-off ## Typography and Palette **Typography:** - **Headlines:** "Source Sans 3" (Google Fonts) — humanist sans at 2.2rem-3rem, weight 700. Its warm, readable quality creates the accessible, community-native voice of street creative culture. - **Body Text:** "Nunito" (Google Fonts) — rounded sans at 0.95rem, weight 400, line height 1.7. - **Accent:** "Source Sans 3" at 1rem, weight 600 for work titles and creative labels. - **Labels:** "Source Sans 3" at 0.7rem, weight 600, uppercase, letter-spacing 0.06em. **Color Palette:** - **Duo Dark:** #101018 — deep duotone dark for backgrounds - **Duo Surface:** #1c1c28 — dark duotone for panels - **Duo Cyan:** #38b8c8 — bright duotone cyan for primary accent - **Duo Magenta:** #c848a0 — duotone magenta for secondary accent - **Duo White:** #f0ecf4 — bright duotone white for text - **Shadow Duo:** #383848 — duotone shadow for secondary text - **Border Duo:** rgba(56,184,200,0.1) — duotone cyan border ## Imagery and Motifs **Glassmorphic-Cards Creative Windows:** Portfolio cards use glassmorphism — background: rgba(28,28,40,0.7); backdrop-filter: blur(12px); border: 1px solid rgba(56,184,200,0.06); border-radius: 12px. The frosted glass creates showcase windows where creative work is visible through polished, translucent surfaces. **Lottie-Animation Work Movement:** Portfolio pieces feature subtle animation (CSS-animated SVG) — gentle rotation (0deg to 2deg over 3s), subtle scale breathing (1.0 to 1.01 over 4s ease-in-out). The animation gives creative works the living quality of pieces that continue to evolve in their display frames. **Crystalline Creative Markers:** Small faceted geometric markers (8-14px, SVG diamonds) in Duo Cyan and Duo Magenta at 0.1-0.15 opacity used as work-category indicators, section markers, and quality badges. The crystalline quality gives creative markers the precious, valued appearance of carefully crafted insignia. **Duotone Street Atmosphere:** The palette uses strict duotone — Duo Cyan and Duo Magenta as the only colors against dark backgrounds. Gradients: linear-gradient(135deg, rgba(56,184,200,0.04), rgba(200,72,160,0.03)). The duotone creates the screen-printed quality of street-style graphic design. **Portfolio Variety Styling:** Grid cards with varied treatments — nth-child(3n+1): thin cyan border; nth-child(3n+2): subtle magenta glow; nth-child(3n): gradient background tint. The variety creates the curated, hand-assembled quality of a street creative's portfolio wall. ## Prompts for Implementation Build the page as a street-style creative portfolio. Grid: display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; .feature-work { grid-column: span 2; } Container: max-width: 1020px; margin: 0 auto; padding: 60px 24px. Glassmorphic: .glass-card { background: rgba(28,28,40,0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(56,184,200,0.06); border-radius: 12px; padding: 24px; } Work animation: .work-anim { animation: workBreath 4s ease-in-out infinite; } @keyframes workBreath { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.01) rotate(1deg); } } Crystalline: .creative-marker { width: 10px; height: 10px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background: var(--marker-color, #38b8c8); opacity: 0.12; } Portfolio variety: .glass-card:nth-child(3n+1) { border-color: rgba(56,184,200,0.1); } .glass-card:nth-child(3n+2) { box-shadow: 0 0 20px rgba(200,72,160,0.04); } .glass-card:nth-child(3n) { background: rgba(56,184,200,0.03); } AVOID: Standard portfolio grids, corporate creative showcases, and polished agency layouts. Let street-style authenticity and optimistic-bright energy create a creative portfolio where work is displayed with the confident, curated quality of an independent artist's gallery wall. ## Uniqueness Notes 1. **Street-style for creative platform:** Urban creative culture makes portfolio work feel authentically personal rather than commercially polished. 2. **Portfolio-grid as gallery wall:** Masonry layout with varied card styling creates the hand-assembled quality of a curated creative collection. 3. **Lottie-animation as living works:** Subtle movement gives portfolio pieces the breathing quality of creative work that continues to evolve. 4. **Duotone as screen-print:** Strict two-color palette creates the graphic impact of street-style screen-printed design. 5. **Glassmorphic as showcase windows:** Frosted glass panels create polished display surfaces for creative work. **Seed/Style:** aesthetic: street-style, layout: portfolio-grid, typography: humanist, palette: duotone, patterns: lottie-animation, imagery: glassmorphic-cards, motifs: crystalline, tone: optimistic-bright **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 street-style aesthetic, portfolio-grid layout, duotone palette, glassmorphic-cards imagery, and optimistic-bright tone.