# Design Language for yongjoon.xyz ## Aesthetics and Tone yongjoon.xyz channels a street-style aesthetic — the raw energy, underground authenticity, and self-made visual language of street culture applied to YongJoon's experimental and creative playground — the .xyz domain as the wildcard space where creative experiments, side projects, and unconventional ideas find their home. The site represents — with the tag-and-paste energy of Shepard Fairey's street art, the DIY confidence of zine culture, and the experimental freedom of a creative space where rules are broken by someone who knows them well. Inspiration draws from the street-style design of Supreme's graphic identity, the underground typography of rave flyer culture, the experimental web design of brutalist personal sites, and the creative playground energy of Virgil Abloh's quotation-mark aesthetic. The tone is nostalgic-retro — warmly retrospective language that frames street-style rawness as a love letter to creative subcultures past and present. The street-style treatment transforms a creative playground from portfolio into street gallery — projects displayed as wheat-pasted posters on digital walls, experiments presented with the raw energy of gallery openings in converted warehouses, and the experimental nature celebrated with the authentic confidence of someone who creates because they must. Each component carries street-style energy — raw edges, bold graphic treatment, and the intentional imperfection of work that values authenticity over polish. The nostalgic-retro tone adds depth — experiments framed as part of a creative lineage. ## Layout Motifs and Structure The layout uses a **dashboard** architecture — dense information display creating the command-center quality of a creative laboratory where multiple experiments run simultaneously. **Dashboard Lab System:** - Panels: mixed-size dashboard modules at max-width: 1080px centered - Primary panels: 60% width for featured experiments - Status panels: 40% width for project metrics and status - Data rows: full-width for activity feeds - Gap: 8px (tight, industrial spacing) - The dashboard creates the lab-monitor quality of creative experiments tracked in real-time **Section Sequence:** 1. **Street Corner:** Hero with tech-mono typography on street-style raw ground, abstract-tech geometric street motifs, underline-draw interactive tag-line emphasis 2. **Experiment Grid:** Active projects in dashboard panels — underline-draw interactive project-title markers with abstract-tech geometric pattern overlays and duotone-photo processed imagery 3. **Archive Wall:** Past projects in dense dashboard list with duotone-photo archival treatment and abstract-tech minimal geometric accents 4. **Status Board:** Project statuses in compact dashboard data rows with abstract-tech technical indicators 5. **Exit Tag:** Footer as street signature — nostalgic farewell with abstract-tech final geometric tag **Spatial Philosophy:** - Dashboard creates the laboratory quality of multiple experiments monitored simultaneously - Tight spacing creates the industrial quality of street-style design that fills every available surface - The street-gallery metaphor makes browsing feel like walking through a converted warehouse exhibition ## Typography and Palette **Typography:** - **Headlines:** "Share Tech Mono" (Google Fonts) — tech-mono at 2.0rem-2.6rem, weight 400. Its monospaced technical quality creates the terminal-screen aesthetic of experimental code output. - **Body Text:** "IBM Plex Sans" (Google Fonts) — technical sans at 0.9rem, weight 400, line height 1.7. - **Data:** "Share Tech Mono" at 0.8rem for project IDs, timestamps, and experiment metrics. - **Labels:** "IBM Plex Sans" at 0.6rem, weight 600, uppercase, letter-spacing 0.14em. **Color Palette:** - **Frost Base:** #f0f0f4 — cool translucent frost for primary background - **Ice Panel:** #e4e4ec — cool panel surface - **Concrete Dark:** #2a2a30 — dark concrete for primary accent - **Neon Cyan:** #2aaab0 — electric cyan for secondary accent - **Signal Pink:** #c04a6a — bright pink for tertiary accent - **Ink Heavy:** #1a1a1e — near-black for primary text - **Steel Gray:** #6a6a74 — cool gray for secondary text - **Tag Line:** rgba(42,42,48,0.12) — dark line for structural borders ## Imagery and Motifs **Duotone-Photo Processed Imagery:** Project images processed as duotone — images filtered through two-tone mapping (Concrete Dark shadows, Neon Cyan highlights) creating the screen-print quality of street-art reproductions with limited-palette graphic impact. **Underline-Draw Tag-Line Emphasis:** Key elements highlighted with rapid underline drawing — pseudo-element expanding from 0% to 100% width over 200ms (2px solid Signal Pink), creating the quick-tag quality of street art markers emphasizing important elements. **Abstract-Tech Geometric Patterns:** Decorative elements using abstract technical geometry — SVG circuit-inspired angular patterns, grid overlays (1px stroke, Concrete Dark at 0.05 opacity) creating the experimental quality of technical diagrams mixed with street-style graphic energy. **Street Dashboard Panel Treatment:** Experiment panels with industrial dashboard styling — background: #e4e4ec; border: 1px solid rgba(42,42,48,0.12); border-radius: 2px; padding: 20px; font-family: 'Share Tech Mono'. The treatment creates the lab-monitor quality of experimental status displays. **Wheat-Paste Overlap:** Elements with slight rotational variation — transform: rotate(calc(var(--r) * 0.5deg)) creating the wheat-pasted quality of street posters applied with authentic imprecision. ## Prompts for Implementation Build the page as a street-style creative playground dashboard. Dashboard: .lab-grid { display: grid; grid-template-columns: 60% 40%; gap: 8px; max-width: 1080px; margin: 0 auto; } .lab-full { grid-column: 1 / -1; } Street panel: .experiment-panel { background: #e4e4ec; border: 1px solid rgba(42,42,48,0.12); border-radius: 2px; padding: 20px; } Tag underline: .project-tag::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: #c04a6a; transition: width 200ms ease-out; } .project-tag:hover::after { width: 100%; } AVOID: Polished creative portfolios, corporate project showcases, and refined experimental galleries. Let street-style raw energy and nostalgic retrospection create a creative playground where experiments are displayed with the authentic confidence of street-gallery installations. ## Uniqueness Notes 1. **Street-style for creative playground:** Raw subcultural energy transforms polished portfolio into authentic creative laboratory. 2. **Dashboard as experiment monitor:** Dense information display creates the lab-quality of multiple creative experiments tracked simultaneously. 3. **Nostalgic-retro tone as creative lineage:** Retrospective language frames experiments within the history of creative subcultures. 4. **Duotone-photo as screen-print:** Two-tone image processing creates the limited-palette quality of street-art reproduction techniques. 5. **Wheat-paste overlap as authentic imprecision:** Rotational variation creates the hand-applied quality of street posters. **Seed/Style:** aesthetic: street-style, layout: dashboard, typography: tech-mono, palette: translucent-frost, patterns: underline-draw, imagery: duotone-photo, motifs: abstract-tech, tone: nostalgic-retro **Avoided Overused Patterns:** corporate aesthetic, parallax patterns, asymmetric layout, warm palette, friendly tone, minimal imagery. This design uses street-style aesthetic, dashboard layout, tech-mono typography, translucent-frost palette, underline-draw patterns, duotone-photo imagery, and nostalgic-retro tone.