# Design Language for p9r.st ## Aesthetics and Tone p9r.st channels a street-style aesthetic — the raw, authentic visual culture of streetwear, skate culture, and urban creative communities applied to a personal status and microblogging platform. The site has edge — bold graphics, unconventional compositions, and the confident irreverence of a culture that creates its own rules. Inspiration draws from the editorial design of The Face magazine, the graphic identity of Supreme, the zine culture of DIY punk publications, and the raw photography aesthetic of Terry Richardson's early work. The tone is nostalgic-retro — warm, backward-looking language that treats the platform as a throwback to when online presence was personal and handmade. ## Layout Motifs and Structure The layout uses a **bento-box** architecture — content organized in irregularly-sized compartments that feel like a sticker-covered laptop or a well-curated mood board pinned to a bedroom wall. **Bento Box Architecture:** - CSS Grid with named template areas creating varied compartments - Desktop: mix of 1x1, 2x1, 1x2 cells with varied padding - Gap: 12px between cells - Each cell: different background treatment (sticker-board variety) - Container: max-width: 980px centered - Cells feel like patches, stickers, and pinned notes **Section Sequence:** 1. **Block:** Hero as oversized bento cell with humanist title on coastal-blend gradient, icon-heavy street-style icon collection, aurora-lights neon glow accents 2. **Feed:** Status updates in bento grid — blur-focus interactive post previews with icon-heavy reaction icons 3. **Crew:** Following/followers in bento compartments with aurora-lights highlight effects and icon-heavy social icons 4. **Stash:** Saved content in organized bento cells with street-style category labels 5. **Later:** Footer as sign-off — nostalgic-retro farewell with aurora-lights fading neon and casual 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 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 status captions and usernames. - **Labels:** "Source Sans 3" at 0.7rem, weight 600, uppercase, letter-spacing 0.06em. **Color Palette:** - **Coastal Sand:** #f8f4ec — warm sand for light backgrounds - **Driftwood:** #e8dcc8 — warm driftwood for card surfaces - **Ocean Deep:** #1c3048 — deep ocean for dark sections - **Surf Teal:** #2898a0 — surf teal for primary accent - **Sunset Coral:** #d07050 — sunset coral for secondary accent - **Bleach White:** #faf8f4 — bleached white for highlights - **Text Warm:** #1a1810 — warm dark for body text - **Border Shore:** #c8b8a0 — shore-colored border ## Imagery and Motifs **Icon-Heavy Street Collection:** Status and social features illustrated through dense icon sets — SVG icons (20-32px) of hearts, stars, flames, arrows, speech bubbles in Surf Teal and Sunset Coral. Thin strokes (1.5px). Icons scattered throughout bento cells like stickers on a laptop — dense, personal, curated. **Blur-Focus Status Previews:** Status posts start slightly blurred (filter: blur(2px)) and sharpen (blur(0)) on hover over 200ms. The blur-to-sharp creates the anticipation of reading a new status update — content emerging from the social feed noise into clarity. **Aurora-Lights Neon Highlights:** Soft neon glows (radial-gradient, 100-200px) in Surf Teal (rgba(40,152,160,0.05)) and Sunset Coral (rgba(208,112,80,0.04)) behind active/featured bento cells. The aurora glow suggests highlighted status updates and trending content. **Coastal-Blend Atmospheric Color:** The palette blends coastal warmth — sand, driftwood, ocean, and coral creating the beach-town street culture atmosphere. Light sections: warm sand with subtle coral wash (rgba(208,112,80,0.02)). Dark sections: Ocean Deep with teal glow. **Bento as Mood Board:** Each cell has slightly different styling — some with thin borders, some borderless with shadow, some with colored backgrounds at 0.03 opacity. The variety creates the personalized, curated quality of a hand-assembled mood board. ## Prompts for Implementation Build the page as a street-style status bento board. Grid: display: grid, grid-template-columns: repeat(3, 1fr), grid-template-rows: auto, gap: 12px. Varied cells: .cell-1x2 { grid-column: span 2; } Container: max-width: 980px, margin: 0 auto. Blur-focus: .status-post { filter: blur(2px); transition: filter 200ms ease; } .status-post:hover { filter: blur(0); } Icon collection: .street-icon { display: inline-block; margin: 2px; } .street-icon svg { width: 24px; height: 24px; stroke: var(--icon-color, #2898a0); stroke-width: 1.5; fill: none; } Aurora highlights: .featured-cell::before { content: ''; position: absolute; inset: -20px; border-radius: 50%; background: radial-gradient(circle, rgba(40,152,160,0.05), transparent 70%); pointer-events: none; } Bento variety: .bento-cell:nth-child(3n+1) { border: 1px solid #c8b8a0; } .bento-cell:nth-child(3n+2) { box-shadow: 0 2px 8px rgba(26,24,16,0.06); } .bento-cell:nth-child(3n) { background: rgba(40,152,160,0.03); } AVOID: Modern social media platform designs, corporate microblogging tools, and polished status dashboards. Let street-style authenticity and nostalgic-retro warmth create a status platform that feels as personal as a hand-decorated notebook. ## Uniqueness Notes 1. **Street-style for status platform:** Urban creative culture makes personal updates feel like authentic self-expression rather than social media performance. 2. **Bento-box as mood board:** Varied compartments recreate the curated, personal quality of sticker-covered surfaces and pinned collections. 3. **Blur-focus as feed emergence:** Status posts sharpening on hover creates the anticipation of reading emerging social updates. 4. **Icon-heavy as sticker culture:** Dense icon collections create the personal, decorated quality of street-culture visual identity. 5. **Coastal-blend as beach-town vibe:** Sand-and-ocean palette creates the relaxed, authentic atmosphere of coastal creative communities. **Seed/Style:** aesthetic: street-style, layout: bento-box, typography: humanist, palette: coastal-blend, patterns: blur-focus, imagery: icon-heavy, motifs: aurora-lights, 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 street-style aesthetic, bento-box layout, coastal-blend palette, icon-heavy imagery, and nostalgic-retro tone.