# Design Language for yongjoon.net ## Aesthetics and Tone yongjoon.net is a retro-styled personal presence that wraps identity in the amber glow of a perpetual golden hour. The visual identity channels the warmth of 1970s photography and vintage magazine spreads -- sun-faded film grain, soft focus bokeh, and the nostalgic optimism of analog media. "YongJoon" becomes not just a name but a warm recollection, as if the entire site is a memory being gently recalled. The hero-dominant layout places a single powerful visual statement at the top that sets the emotional register for everything below. Organic blob shapes float through sections like thought bubbles or lava lamp formations, grounding the retro aesthetic in something fluid and alive. The tone is dreamy-ethereal -- everything seen through a filter of warm nostalgia and gentle optimism. Inspiration from Wes Anderson color palettes, 1970s Sunset Magazine editorial layouts, and the tactile warmth of Polaroid photography. ## Layout Motifs and Structure A **hero-dominant** layout where the opening section commands 80-90vh and establishes the emotional world, with subsequent content serving as gentle elaborations that never compete with the hero's presence. **Primary structure:** - **Hero section (90vh):** A full-bleed warm gradient background (sunset-warm tones transitioning from #e8945a at top to #d4618a at bottom). The name "YONGJOON" is set in oversized serif-revival type, centered vertically and horizontally, with organic blob shapes (SVG, filled with translucent warm tones) drifting slowly behind the text via CSS animation. The typography has a subtle elastic bounce on load (CSS spring animation). - **Identity cards (3 cards, each 60vh):** Below the hero, three content blocks present different facets (Developer, Creator, Human) as large-format cards with generous padding (clamp(40px, 8vw, 80px)). Each card features a single geometric shape (circle, triangle, hexagon) rendered as a thin SVG stroke in sunset colors. - **Thought stream:** A flowing section of short text passages (quotes, reflections, micro-essays) separated by organic blob dividers. Each passage appears via slide-reveal animation as the user scrolls. - **Footer glow:** A minimal footer with contact links, bathed in the deepest sunset tone (#4a1a2a), with text in warm cream. **Spatial relationships:** Extreme vertical generosity -- 100px minimum between sections. Content max-width is 720px, centered, with organic blobs extending beyond the content column into the margins. ## Typography and Palette **Fonts:** - **Display/Name:** "Playfair Display" (Google Fonts) -- a transitional serif with high contrast between thick and thin strokes, used at clamp(56px, 10vw, 120px). The elegant serifs carry the weight of personal identity with vintage gravitas. Weight 700. - **Body text:** "Source Serif 4" (Google Fonts) -- a readable serif designed for extended reading, at 18px/1.8 line-height. Weight 400 for body, 600 for emphasis. The serif pairing creates a cohesive editorial warmth. - **Labels/Meta:** "Inter" (Google Fonts) -- a neutral sans-serif at 12px, weight 500, letter-spacing: 0.1em, uppercase. Used sparingly for dates and category labels to provide modern contrast. **Color Palette:** - **Sunset orange:** #e8945a (primary warm tone, hero gradient start) - **Sunset rose:** #d4618a (secondary warm tone, hero gradient end) - **Deep sunset:** #4a1a2a (dark warm tone for footer, deep backgrounds) - **Cream white:** #faf4e8 (warm white for text on dark backgrounds) - **Soft peach:** #f8e8d8 (light warm tone for card backgrounds) - **Muted gold:** #c8a060 (accent for links, interactive elements) - **Blob pink:** #e87898 (translucent fill for organic shapes, used at 0.15 opacity) ## Imagery and Motifs **Core visual motifs:** - **Organic blob shapes:** 3-5 large amorphous SVG shapes with smooth bezier curves, filled with semi-transparent sunset colors (0.1-0.2 opacity). They drift slowly (CSS animation: translate, 20-40s cycles) behind content, creating a lava-lamp dreaminess. Each blob uses a unique border-radius combination (e.g., 30% 70% 70% 30% / 30% 30% 70% 70%). - **Geometric shape accents:** Simple geometric shapes (circle, triangle, hexagon) rendered as thin 1px strokes in muted gold (#c8a060), one per identity card. They rotate slowly (CSS transform: rotate, 45s per revolution). - **Film grain overlay:** A subtle noise texture (CSS background: url(data:... SVG noise) at 0.04 opacity, blend-mode: overlay) applied to the body, creating the warm grain of vintage film stock. - **Slide-reveal entries:** Content blocks in the thought stream section slide in from below (transform: translateY(40px) to translateY(0)) with an elastic easing (cubic-bezier(0.34, 1.56, 0.64, 1)) triggered by IntersectionObserver. ## Prompts for Implementation **Full-screen sunset narrative:** The site should feel like watching a sunset unfold -- warm, slow, emotionally rich. Every scroll reveals more warmth. The hero section is the sun; subsequent sections are the afterglow. **Hero gradient animation:** - Use a CSS linear-gradient background that subtly shifts hue over time: background-size: 400% 400% with animation cycling the background-position over 15s. - Organic blobs behind the name text use position: absolute, z-index: -1, with CSS animation: translate(random offsets) over 25-40s, infinite, alternate. **Elastic text entrance:** - The hero name uses CSS animation with cubic-bezier(0.34, 1.56, 0.64, 1) -- an elastic overshoot that gives the text a gentle bounce on arrival. - Duration: 1.2s, applied to both opacity (0 to 1) and transform (translateY(30px) to translateY(0)). **Slide-reveal scroll animations:** - Use IntersectionObserver (threshold: 0.2) to trigger CSS class additions. - Default state: opacity: 0, transform: translateY(40px). - Revealed state: opacity: 1, transform: translateY(0), transition: 0.8s cubic-bezier(0.34, 1.56, 0.64, 1). **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, dark/cyberpunk aesthetics. This is warm, personal, and gentle. ## Uniqueness Notes **Differentiators from other designs:** 1. **Sunset-as-identity metaphor:** No other design uses the progression of a sunset as a structural metaphor for revealing personal identity -- the hero is the sun, subsequent sections are the diminishing afterglow, each progressively more intimate. 2. **Organic blob lava-lamp layering:** While other designs may use blob shapes, the specific combination of drifting translucent blobs behind serif typography on sunset gradients creates a uniquely dreamy, retro-warm atmosphere. 3. **Elastic spring typography on a vintage editorial foundation:** The contrast between the measured elegance of Playfair Display and the bouncy elastic animation timing creates a playful tension that is unique -- traditional type that moves with modern physics. **Chosen seed/style:** aesthetic: retro, layout: hero-dominant, typography: serif-revival, palette: sunset-warm, patterns: elastic, imagery: organic-blobs, motifs: geometric-shapes, tone: dreamy-ethereal **Avoided overused patterns:** photography imagery (91%), centered layout (98%), card-grid layout (96%), warm palette (94%), parallax patterns (98%), mono typography (82%).