# Design Language for yongzoon.net ## Aesthetics and Tone yongzoon.net embodies the **McBling** aesthetic of the mid-2000s -- that precise cultural window between 2003 and 2008 when hip-hop excess, Paris Hilton's bedazzled Sidekick, and rhinestone-encrusted everything defined mainstream visual culture. But this is not a crude pastiche. The site filters that era through a **creamy, desaturated pastel lens**, as if someone found a stack of Polaroids from a 2006 MTV Spring Break party and left them in a shoebox for twenty years, the colors fading into something tender and wistful. The domain name itself -- "yongzoon" -- suggests a Korean personal identity, and the design leans into the specific sub-current of McBling that crossed the Pacific: the K-pop idol photocard culture, the Cyworld minihompy customization craze, the bedazzled flip-phone charms dangling from Samsung Anycall handsets in Myeongdong. The tone is **nostalgic-retro** but self-aware -- not mocking the era, but genuinely missing it. There is a softness to the excess. Every rhinestone gleams gently rather than blindingly. Every gradient dissolves into cream rather than hot pink. The emotional register is that of scrolling through a photo album of a version of yourself you barely remember: someone who unironically wore trucker hats, who customized their Cyworld BGM to play Rain's "Rainism", who believed the future was going to be chrome and crystals. The site should feel like a warm sigh, not a loud shout. ## Layout Motifs and Structure The layout is **full-bleed** but structured in a way that evokes the vertical-scroll profile pages of mid-2000s Korean social platforms -- Cyworld, early Naver Blog, the custom-skinned bulletin boards of that era. The page is a single continuous vertical scroll divided into five distinct "panels" that each occupy the full viewport height, with no traditional navigation bar. Instead, a small floating diamond-shaped indicator in the bottom-right corner rotates gently and displays the current panel number using a geometric sans typeface at 10px. **Panel Architecture:** - **Panel 1 -- "The Foyer"** (100vh): A soft cream (#FFF5EB) background with a single oversized line-illustration of a flip phone rendered in thin pastel strokes. The phone's screen displays the site title in geometric sans. Wave-form lines ripple outward from the phone in concentric arcs, drawn as animated SVG paths in lavender (#D4C1E8) and peach (#F5C6AA). No other content visible -- pure atmospheric entry. - **Panel 2 -- "The Collection"** (100vh): The background shifts to a muted rose-cream (#F8E8E0). Content is arranged in a **scattered constellation** -- not a grid, not a list, but items placed at seemingly random coordinates (actually following a golden-ratio spiral). Each item is a small line-illustration (charm bracelet, flip phone, star-shaped sunglasses, bedazzled initial pendant) enclosed in a soft rounded rectangle with a 1px border in #D4C1E8. Hovering causes a ripple animation that radiates outward from the item, displacing nearby elements by 4-8px. - **Panel 3 -- "The Frequency"** (100vh): Background becomes the palest sage (#EBF0E8). This panel is dominated by a large SVG wave-form visualization that spans the full width -- a continuous sinusoidal line that modulates its amplitude and frequency as the user scrolls, as if tuning through radio stations from 2006. The wave is rendered in a gradient from #D4C1E8 to #B8D4C8 with a 2px stroke. Text fragments appear along the wave's peaks and troughs: short phrases rendered in the geometric sans font, fading in and out as the wave undulates. - **Panel 4 -- "The Mirror"** (100vh): Background returns to warm cream (#FFF5EB). A central circular frame (40vmin diameter) contains a reflected, slightly blurred version of the wave-form from Panel 3, creating a "looking back" motif. Around the circle, small line-illustration icons orbit slowly using CSS animation (60-second full rotation). The circle's border is a dashed line in #C8A8D8 with `stroke-dasharray` animated to create a marching-ants effect. - **Panel 5 -- "The Exit"** (100vh): The softest background of all (#FAF5F0). A single line of geometric-sans text, very large (clamp(3rem, 8vw, 6rem)), slowly fades in letter by letter: the domain name, "yongzoon.net", with each letter triggering a small ripple animation in the background. Below, a thin wave-form line draws itself across the full viewport width and then dissolves into particles that drift upward and fade. Transitions between panels use a **soft cross-dissolve** effect (600ms ease-in-out) on background color, triggered by Intersection Observer at 30% threshold. No hard cuts, no snapping -- everything bleeds into the next state. ## Typography and Palette **Primary Heading Font:** "Urbanist" (Google Fonts, weights 300, 500, 700) -- a geometric sans-serif with perfectly round bowls and a contemporary, approachable personality that bridges the gap between 2006's love of clean sans-serifs (think the Motorola RAZR interface typography) and modern web sensibilities. Used for all headings and the floating panel indicator. Display sizes: `clamp(2.5rem, 6vw, 5rem)`, `letter-spacing: 0.04em`. Weight 300 for large display, 500 for section labels, 700 reserved only for the domain name in Panel 5. **Body/Detail Font:** "DM Sans" (Google Fonts, weights 400, 500) -- a low-contrast geometric sans that reads cleanly at small sizes. Used for all body text and the scattered text fragments in Panel 3. Size: `clamp(0.875rem, 1.2vw, 1.1rem)`, `line-height: 1.7`, `letter-spacing: 0.01em`. Color: #7A6B7A (a dusty mauve-gray that softens against cream backgrounds without disappearing). **Accent/Decorative Font:** "Shadows Into Light" (Google Fonts, weight 400) -- a casual handwritten font used SPARINGLY: only for the small captions beneath line-illustrations in Panel 2 and the phrase fragments riding the wave in Panel 3. Size never exceeds 0.9rem. Color: #B89EB8 (faded lavender). This font evokes the handwritten quality of Cyworld guestbook entries and the cursive MySpace profile headers. **Color Palette:** | Role | Name | Hex | Usage | |------|------|-----|-------| | Background Primary | Cream Linen | #FFF5EB | Panels 1, 4 base | | Background Warm | Rose Cream | #F8E8E0 | Panel 2 base | | Background Cool | Sage Mist | #EBF0E8 | Panel 3 base | | Background Exit | Parchment | #FAF5F0 | Panel 5 base | | Accent Primary | Faded Lavender | #D4C1E8 | Wave-forms, borders, primary accent strokes | | Accent Secondary | Peach Blush | #F5C6AA | Secondary line-illustration strokes, hover states | | Accent Tertiary | Sage Breath | #B8D4C8 | Wave-form gradient endpoint, subtle fills | | Text Primary | Dusty Mauve | #7A6B7A | Body text, primary readable content | | Text Heading | Warm Charcoal | #4A3F4A | Headings, domain name, panel labels | | Decorative | Deep Lilac | #C8A8D8 | Dashed borders, orbiting icon strokes | | Decorative Alt | Rose Gold | #D4A898 | Ripple effect color, hover highlights | | Subtle | Whisper Gray | #E8E0E8 | Divider lines, disabled states, ghost elements | All backgrounds are creamy pastels with warm undertones. No pure whites, no harsh blacks. The darkest color in the entire palette (#4A3F4A) is still a warm charcoal with purple undertones. The overall impression is of looking at the world through a slightly pink-tinted lens -- the rose-colored glasses of nostalgia. ## Imagery and Motifs **Line Illustrations (Primary Visual System):** All imagery is rendered as **thin-stroke line illustrations** -- no photography, no filled shapes, no gradients within illustrations. Stroke weight is consistently 1.5px, color alternates between Faded Lavender (#D4C1E8), Peach Blush (#F5C6AA), and Sage Breath (#B8D4C8). The illustration style is deliberately reminiscent of the simple, charming line-art stickers that populated Cyworld minihompies and early Korean messenger platforms. Specific illustrations include: - **Flip phone** (Panel 1): A clamshell phone drawn in profile, slightly open, with wave-forms emanating from its tiny speaker. The screen shows a pixelated heart rendered as a 5x5 grid of tiny squares. - **Charm bracelet** (Panel 2): A chain of small charms -- star, heart, initial letter, crescent moon, cherry blossom -- each drawn with minimal strokes. The bracelet forms a loose S-curve. - **Star sunglasses** (Panel 2): Oversized frames with star-shaped lenses, drawn from the front. Thin dashed lines suggest reflective glints on the lenses. - **Bedazzled initial pendant** (Panel 2): A large decorative letter (Y for Yongzoon) encrusted with tiny circles suggesting rhinestones. The circles are hollow -- just outlines -- maintaining the line-illustration consistency. - **Cassette tape with earbuds** (Panel 2): A compact cassette with modern earbuds coiled around it, bridging eras. The tape reels are drawn as concentric circles. - **Cherry blossom branch** (Panel 4): A single branch with five blossoms, each rendered in exactly four strokes. Petals are suggested, not filled. **Wave-Forms (Secondary Visual System):** Continuous sinusoidal SVG paths that serve as both decorative elements and structural dividers. These are not simple sine waves -- they are complex waveforms created by layering 3-4 sine functions with different frequencies and amplitudes, producing the organic, almost-musical shapes of actual audio waveforms. The visual reference is the waveform display on a 2006-era MP3 player (the kind that showed bouncing visualizations while playing "Crazy in Love" on repeat). Wave-forms appear in three modes: 1. **Ambient waves** (Panels 1, 5): Very low amplitude, slowly animating, nearly horizontal. Stroke: 1px, opacity 0.3. They drift across the background like the ghost of a song. 2. **Active waves** (Panel 3): Full amplitude, responsive to scroll position. Stroke: 2px, opacity 0.8. They dominate the visual field, carrying text fragments on their crests. 3. **Ripple waves** (all panels, on interaction): Concentric circular wave-forms that emanate from click/hover points. These use `@keyframes` to expand from 0 to 200px radius while fading from opacity 0.6 to 0, duration 800ms, easing `cubic-bezier(0.25, 0.46, 0.45, 0.94)`. **Rhinestone Dots (Tertiary Motif):** Tiny hollow circles (3-4px diameter, 1px stroke in #C8A8D8) scattered at low density across backgrounds. These are positioned using a Halton sequence to avoid clustering while appearing random. They catch the eye only on close inspection -- a subtle nod to the bedazzled surfaces of McBling culture without overwhelming the pastel serenity. ## Prompts for Implementation Build yongzoon.net as a **single-page vertical scroll narrative** -- five viewport-height panels that tell a wordless story of nostalgia through line-illustrations, wave-forms, and ripple interactions. The experience should feel like slowly flipping through a scrapbook that someone assembled from the remnants of their mid-2000s digital life. **Loading Sequence:** The page loads to a solid #FFF5EB background. After a 200ms delay, the flip-phone line-illustration begins drawing itself stroke by stroke using SVG `stroke-dashoffset` animation (total draw time: 2 seconds, eased with `cubic-bezier(0.65, 0, 0.35, 1)`). As the phone completes, wave-form lines begin rippling outward from its position (staggered start, 400ms between each concentric wave). The domain name appears inside the phone screen using a typewriter-style reveal at 80ms per character. No loading spinner, no progress bar -- the drawing IS the loading experience. **Scroll Behavior:** Use `scroll-snap-type: y proximity` (NOT mandatory -- proximity allows partial panel views). Each panel transition triggers a background-color crossfade via CSS `transition: background-color 600ms ease-in-out` applied to the body, with the current panel detected via Intersection Observer at 0.3 threshold. Scroll velocity should subtly influence the wave-form amplitude in Panel 3 -- faster scrolling produces taller waves, detected by comparing `scrollY` timestamps. **Panel 1 Implementation:** - Full viewport, centered flip-phone SVG (max 60vmin tall) - 4 concentric wave-form rings animating outward with `animation: ripple-expand 3s ease-out infinite` staggered by 0.7s each - Domain name inside phone screen: "Urbanist" weight 300, 1.2rem, #4A3F4A - Rhinestone dots scattered in background, very low density (approximately 30 dots across the viewport), fading in with 100ms stagger **Panel 2 Implementation:** - Items positioned using CSS Grid with `grid-template-columns: repeat(12, 1fr)` and explicit `grid-column`/`grid-row` placement to achieve the scattered effect - Each item card: `border-radius: 16px`, `border: 1px solid #D4C1E8`, `padding: 1.5rem`, `background: rgba(255, 245, 235, 0.6)`, `backdrop-filter: blur(4px)` - Hover ripple effect: a pseudo-element `::after` that scales from 0 to 1 with `border-radius: 50%`, `background: radial-gradient(circle, rgba(212, 193, 232, 0.2), transparent)`, duration 600ms - Nearby items displaced on hover using CSS custom properties updated by a lightweight JS mouseover handler (no heavy physics library -- just `transform: translate()` with CSS transitions) **Panel 3 Implementation:** - Single SVG element spanning `width: 100%`, `height: 60vh`, centered vertically - Wave path generated by JavaScript: sum of `Math.sin(x * freq1) * amp1 + Math.sin(x * freq2) * amp2 + Math.sin(x * freq3) * amp3` where freq and amp values modulate based on `window.scrollY` - Text fragments positioned along the wave using `` elements referencing the wave's ``, with `startOffset` values animated to slide text along the curve - Text content: short nostalgic phrases ("the ringtone you chose", "your first away message", "that profile song", "remember the countdown") in "Shadows Into Light" at 0.85rem **Panel 4 Implementation:** - Central circle: `width: 40vmin`, `height: 40vmin`, `border-radius: 50%`, `overflow: hidden` - Inside circle: a blurred (`filter: blur(3px)`) and hue-rotated (`filter: hue-rotate(20deg)`) clone of the Panel 3 wave SVG, creating a dreamy reflection - Orbiting icons: 6 small line-illustration SVGs (16px each) positioned using CSS `animation: orbit 60s linear infinite` with `transform-origin` set to the circle's center. Each icon offset by `animation-delay: calc(var(--i) * -10s)` for even distribution - Marching-ants border: `stroke-dasharray: 8 4`, `animation: march 1s linear infinite` where the animation moves `stroke-dashoffset` by 12px **Panel 5 Implementation:** - Domain name reveal: each letter wrapped in a `` with `animation: letter-appear 400ms ease-out forwards` and `animation-delay: calc(var(--i) * 150ms)`. The animation: `opacity 0 -> 1`, `transform: translateY(8px) -> translateY(0)` - Each letter appearance triggers a ripple in the background (same as Panel 2 hover ripple, but centered on the letter's position) - Bottom wave-form: SVG path draws itself left-to-right using `stroke-dashoffset`, then the path segments dissolve into particles (small circles) that float upward using individual `@keyframes` animations with randomized `translateY` and `opacity` values - Particle dissolution: generate 40-60 small SVG circles positioned along the wave path, each with `animation: float-up 2s ease-out forwards` with random delays between 0 and 1s **Global Interactions:** - All clickable/hoverable areas produce the ripple effect -- this is the universal interaction signature - Scroll progress is tracked and exposed as `--scroll-progress` CSS custom property on `:root` (value 0 to 1), allowing any element to respond to scroll position via `calc()` - No hamburger menus, no footer links, no call-to-action buttons, no pricing blocks, no testimonials, no stat-grids. This is a pure atmospheric experience **Performance Notes:** - All SVG illustrations should be inline (not external files) to enable stroke animation - Wave-form recalculation in Panel 3 should use `requestAnimationFrame` with throttling (recalculate only when `scrollY` has changed by more than 2px since last frame) - Particle system in Panel 5 limited to 60 elements maximum; use `will-change: transform, opacity` on particle elements **AVOID:** CTA buttons, pricing sections, feature grids, testimonial carousels, stat counters, newsletter signup forms, cookie banners, social media icon rows, hamburger navigation, footer link columns. This site is a mood, not a product. ## Uniqueness Notes 1. **McBling-through-pastel-lens reinterpretation:** No other design in this collection uses the McBling aesthetic, and this implementation deliberately subverts the aesthetic's typical associations (loud, garish, maximalist) by filtering it through a creamy-pastel palette. The rhinestones are hollow outlines, the bling is whispered rather than shouted. This creates a unique emotional register: nostalgia for excess, expressed through restraint. 2. **Wave-form as narrative structure:** While wave-forms appear in approximately 2% of designs as decorative motifs, this design uses the wave-form as the primary structural and narrative device. The wave literally carries text content in Panel 3 via SVG ``, modulates in response to scroll velocity, reflects in the mirror of Panel 4, and dissolves into particles in Panel 5. It is not decoration -- it is the story's backbone. 3. **Cyworld/Korean digital nostalgia specificity:** The design references a very specific strand of mid-2000s digital culture -- the Korean social platform aesthetic of Cyworld minihompies, Samsung flip-phone charm culture, and early K-pop photocard aesthetics. No other design in this collection draws from this cultural source. The scattered constellation layout of Panel 2 directly echoes the "room decoration" interface of Cyworld, where users placed stickers and furniture items at arbitrary coordinates. 4. **Ripple as universal interaction language:** While ripple animations appear in approximately 6% of designs, this site makes ripple the ONLY interaction feedback mechanism. Every hover, every click, every letter appearance generates concentric wave-forms. This creates an internally consistent physics -- the entire site exists in a medium that responds to touch with waves, as if the interface is the surface of still water. 5. **Line-illustration-only visual system with no photography:** The complete absence of photography (in a collection where 99% of designs use it) and the exclusive use of thin-stroke line illustrations creates a handmade, personal quality. Combined with the McBling subject matter (flip phones, charm bracelets, rhinestones), it feels like someone drew their memories rather than photographed them -- which is precisely the point of the nostalgic-retro tone. **Seed/Style:** mcbling, full-bleed, geometric-sans, creamy-pastel, ripple, line-illustration, wave-forms, nostalgic-retro **Avoided patterns from frequency analysis:** - corporate aesthetic (97% -- entirely absent here; this is personal and atmospheric) - photography imagery (99% -- replaced with line-illustration throughout) - mono typography (76% -- uses geometric-sans "Urbanist" and "DM Sans" instead) - warm palette as default (98% -- uses creamy-pastel, a distinct sub-category at 2%) - nature motifs (48% -- motifs are cultural artifacts: flip phones, charm bracelets, wave-forms) - friendly tone (46% -- replaced with nostalgic-retro, a quieter emotional register at 2%) - parallax as primary animation (98% -- replaced with ripple as the universal interaction pattern)