# Design Language for yongjoon.net ## Aesthetics and Tone yongjoon.net channels a generative aesthetic — the algorithmic creativity, procedural emergence, and code-driven art of generative design applied to YongJoon's personal network hub — a central platform connecting all of YongJoon's projects, identities, and digital presence into one generatively evolving space. The site connects — with the network-visualization beauty of Aaron Koblin's data art, the emergent pattern quality of cellular automata, and the living-network presence of a personal hub where connections between projects generate their own visual beauty. Inspiration draws from the generative network art of Refik Anadol's data sculptures, the bento-box organization of Japanese design tradition, the personal-hub design of link-in-bio platforms elevated to art, and the cultural depth of platforms that blend identity with visual expression. The tone is whimsical-creative — playfully inventive language that matches generative art's delightful unpredictability with creative personal expression. The generative treatment transforms a personal network hub from link directory into living connection map — projects displayed as nodes in an algorithmically arranged network, relationships between works visualized through procedural connecting lines, and the hub's evolving nature celebrated as a generative system that grows with each new project. Each component carries generative network quality — node-like card arrangements, connection lines between elements, and visual systems that suggest algorithmic evolution. The whimsical-creative tone adds personality — playful narration of a network that surprises even its creator. ## Layout Motifs and Structure The layout uses a **bento-box** architecture — compartmentalized grid creating the organized variety of Japanese bento where each section contains a carefully prepared element. **Bento Box System:** - Grid: mixed-size cells at max-width: 960px centered - Large cells: 2x2 for featured projects - Medium cells: 1x2 or 2x1 for secondary content - Small cells: 1x1 for links and quick access - Gap: 12px between cells - The bento-box creates the curated quality of a personal collection where each item has its designated compartment **Section Sequence:** 1. **Network Core:** Hero with bebas-bold typography over generative network visualization, cultural identity motifs blending Korean and global aesthetics, tilt-3d interactive perspective-shift engagement 2. **Project Bento:** Primary projects in bento grid — tilt-3d interactive depth-perspective on hover with cultural decorative identity accents and paper-aged textured surfaces 3. **Connection Web:** Network links in secondary bento cells with cultural identity markers and paper-aged archival quality 4. **Identity Node:** Personal information in featured bento cell with cultural detailed identity expression 5. **Network Edge:** Footer as network boundary — whimsical farewell with cultural final identity mark **Spatial Philosophy:** - Bento-box creates the curated quality of a personal collection with intentional compartmentalization - Generative network lines connect bento cells suggesting relationships between projects - The living-network metaphor makes browsing feel like exploring a growing organic system ## Typography and Palette **Typography:** - **Headlines:** "Bebas Neue" (Google Fonts) — bebas-bold at 2.4rem-3.2rem, weight 400 (Bebas Neue is all-caps by design). Its bold condensed presence creates the poster quality of bold personal branding. - **Body Text:** "Noto Sans" (Google Fonts) — clean sans at 0.9rem, weight 400, line height 1.7. - **Data:** "Fira Code" (Google Fonts) — monospace at 0.8rem for project metadata, connection counts, and network statistics. - **Labels:** "Bebas Neue" at 0.7rem, letter-spacing 0.15em. **Color Palette:** - **Midnight Deep:** #0e1020 — deep midnight blue for primary background - **Navy Panel:** #1a1e34 — dark navy for bento cells - **Electric Blue:** #4a8ae8 — bright blue for primary accent - **Soft Violet:** #8a6aaa — muted violet for secondary accent - **Pearl White:** #e8e4f0 — cool white for tertiary accent - **Frost Light:** #e0dcea — cool light for primary text - **Slate Blue:** #6a6a8a — cool gray for secondary text - **Network Line:** rgba(74,138,232,0.1) — blue-tinted line for connection paths ## Imagery and Motifs **Paper-Aged Textured Surfaces:** Bento cells with aged paper texture — background with subtle noise pattern (CSS repeating-conic-gradient at 0.02 opacity) creating the archival quality of collected documents with the patina of accumulated time. **Tilt-3D Perspective Shift:** Cards respond to hover with perspective transformation — transform: perspective(800px) rotateX(var(--rx)) rotateY(var(--ry)) with mouse-position calculation (max 3deg rotation), creating the physical quality of picking up and examining items in a collection. **Cultural Identity Motifs:** Decorative elements blending Korean and global visual culture — SVG geometric patterns inspired by traditional Korean lattice design (1px stroke, Electric Blue at 0.05 opacity) creating the cultural quality of identity expressed through geometric heritage. **Bento Cell Treatment:** Project containers with bento compartment styling — background: #1a1e34; border: 1px solid rgba(74,138,232,0.06); border-radius: 8px; padding: 24px. Varied sizes create the bento quality of intentionally different compartments. **Generative Network Lines:** SVG connecting lines between bento cells — 1px dashed stroke (Electric Blue at 0.08 opacity) with animated dash-offset creating the network quality of visible connections between related projects. ## Prompts for Implementation Build the page as a generative personal network hub. Bento: .bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap: 12px; max-width: 960px; margin: 0 auto; } .bento-lg { grid-column: span 2; grid-row: span 2; } .bento-wide { grid-column: span 2; } .bento-tall { grid-row: span 2; } Bento cell: .bento-cell { background: #1a1e34; border: 1px solid rgba(74,138,232,0.06); border-radius: 8px; padding: 24px; } Tilt: .bento-cell:hover { transform: perspective(800px) rotateX(2deg) rotateY(-2deg); transition: transform 300ms ease-out; } AVOID: Standard link-in-bio pages, corporate hub portals, and flat personal directories. Let generative network beauty and whimsical-creative expression create a personal hub where projects exist as interconnected nodes in a living, evolving network. ## Uniqueness Notes 1. **Generative for personal hub:** Algorithmic network visualization transforms static link directory into living connection map. 2. **Bento-box as curated collection:** Japanese-inspired compartments create the intentional quality of each project given its designated space. 3. **Whimsical-creative tone as personal expression:** Playful language creates the personality quality of a network narrator who delights in connections. 4. **Cultural identity motifs:** Korean-inspired geometric patterns blend heritage with contemporary digital expression. 5. **Tilt-3D as physical examination:** Perspective-shift hover creates the tangible quality of picking up items from a curated collection. **Seed/Style:** aesthetic: generative, layout: bento-box, typography: bebas-bold, palette: midnight-blue, patterns: tilt-3d, imagery: paper-aged, motifs: cultural, tone: whimsical-creative **Avoided Overused Patterns:** corporate aesthetic, parallax patterns, asymmetric layout, mono typography, warm palette, friendly tone, minimal imagery. This design uses generative aesthetic, bento-box layout, bebas-bold typography, midnight-blue palette, tilt-3d patterns, paper-aged imagery, and whimsical-creative tone.