# Design Language for yongjoon.net ## Aesthetics and Tone yongjoon.net embodies a **fairycore** aesthetic -- the visual equivalent of stumbling into a hidden glen at the golden hour, where moss-covered stones are inscribed with fragments of poetry and translucent wings catch the last light. This is a personal domain, and the design treats it as an enchanted journal: intimate, layered with whispered stories, and suffused with the soft glow of bioluminescent flora in a twilight forest. The tone is **conversational** -- not performative or polished, but like a letter written by candlelight, addressed to someone who already understands. Text feels handwritten-in-spirit even when typeset in refined serifs. There is no corporate veneer, no sales pitch. The site speaks as though you have been invited into a private library where every object on the shelf has a story, and the host is happy to tell you each one if you linger long enough. Inspiration sources: the illustrated marginalia of medieval manuscripts, the pastel watercolor washes of Alphonse Mucha's lesser-known botanical studies, the translucent layering of Korean hanji paper craft, and the quiet maximalism of a well-tended fairy garden -- tiny doors in tree trunks, glass bottles catching light, handwritten labels on specimen jars. The cultural motif draws from Korean aesthetic traditions -- the concept of "jeong" (deep, accumulated affection for a place or thing), the layered translucency of hanbok fabric, and the organic asymmetry of Korean celadon pottery glazes where imperfection is the beauty. ## Layout Motifs and Structure The layout is deliberately **asymmetric**, rejecting the centered-column monotony that dominates modern web design. Content is arranged like objects scattered across a naturalist's desk -- intentionally off-center, with generous negative space on alternating sides that shifts the eye in a meandering, exploratory path rather than a rigid scroll. **Grid System:** - A CSS grid using `grid-template-columns: 1fr 2fr 1fr 3fr 1fr` at desktop breakpoints, creating an irregular 5-column framework where content blocks span unpredictable column ranges - The leftmost and rightmost columns (each 1fr) serve as breathing channels -- sometimes empty, sometimes holding small decorative SVG motifs (a tiny moth, a curling fern tip, a crescent moon) - Major content cards occupy columns 2-4 or 3-5, never the full width, always leaving at least one gutter column visible - On mobile, collapses to a single column but preserves asymmetry through alternating `margin-left: 8vw` and `margin-right: 8vw` on successive blocks **Structural Flow:** - **Opening Portal:** A full-viewport entry section with a CSS-animated iris/portal effect -- a soft radial gradient that expands from center outward over 1.5 seconds, revealing the content beneath as though parting a curtain of mist - **Story Segments:** Content is organized into 4-6 narrative segments, each occupying roughly 80-100vh, separated not by hard lines but by transitional zones where decorative SVG vines or root systems grow across the boundary - **Card Clusters:** Within segments, information is presented in asymmetrically positioned cards that use the **card-flip** interaction pattern -- front faces show a title and a duotone photograph, back faces reveal full text content with a secondary palette shift - **Floating Navigation:** A small, semi-transparent navigation element drifts in the lower-right corner, styled as a luminous firefly cluster -- each nav dot glows softly with a 4-second pulse cycle, and the active section's dot burns brighter ## Typography and Palette **Typography:** - **Headings:** "Cormorant Garamond" (Google Fonts) -- weight 600 for primary headings, weight 400 italic for subheadings. This is a **serif-classic** choice: high-contrast strokes with graceful terminals that evoke handset letterpress type. Sized at `clamp(2rem, 4vw, 3.5rem)` for h1, with `letter-spacing: 0.03em` to let each character breathe like calligraphy. Line-height: 1.2. - **Body:** "Lora" (Google Fonts) -- weight 400 for body text, weight 700 for emphasis. A well-balanced literary serif with gentle brushed curves that complement Cormorant's elegance without competing. Sized at `clamp(1rem, 1.3vw, 1.125rem)` with `line-height: 1.75` for generous, restful reading. Letter-spacing: 0.01em. - **Accent / Labels:** "Josefin Sans" (Google Fonts) -- weight 300 for navigation labels, metadata, and small UI text. The light geometric sans provides contrast against the two serifs and adds a modern whisper to otherwise classical typography. Sized at 0.8rem-0.9rem, `letter-spacing: 0.08em`, `text-transform: uppercase` for labels. **Palette:** The palette is **pastel** -- soft, desaturated, and suffused with light as though viewed through frosted glass in early morning. | Role | Color | Hex | Description | |------|-------|-----|-------------| | Background Primary | Petal White | `#f5f0eb` | A warm off-white with the faintest blush of peach, like aged hanji paper | | Background Secondary | Moss Whisper | `#e8ede4` | Pale sage green for alternating sections and card backgrounds | | Text Primary | Charcoal Thorn | `#2e2a27` | Deep warm charcoal, softer than pure black, like aged ink on parchment | | Text Secondary | Dusk Slate | `#6b6560` | Muted warm gray for body text and secondary copy | | Accent Primary | Peony Blush | `#d4a0a0` | Dusty rose -- the color of dried peonies pressed in a journal | | Accent Secondary | Fern Dew | `#8db89c` | Soft sage green for links, hover states, and botanical motifs | | Accent Tertiary | Wisteria Haze | `#b0a3c8` | Muted lavender for card-flip reverse faces and highlights | | Glow / Firefly | Moonpetal Gold | `#e8d4a2` | Warm gold for navigation firefly dots and luminous accents | **Duotone Photo Treatment:** All photographs are processed through a CSS duotone filter combining Peony Blush (`#d4a0a0`) for shadows and Petal White (`#f5f0eb`) for highlights, achieved via: ```css filter: grayscale(100%) contrast(1.1) sepia(30%); mix-blend-mode: multiply; ``` overlaid on a background of Peony Blush, creating ethereal, dreamlike image treatments that feel like hand-tinted daguerreotypes. ## Imagery and Motifs **Cultural SVG Motifs (Korean-Inspired):** - A set of 6-8 hand-drawn-style SVG elements inspired by Korean artistic traditions: a stylized celadon crane (simplified to 15-20 path strokes), a hanji paper lantern with translucent layering, the curved eaves of a hanok roofline, a lotus bud, a crescent moon with a trailing cloud (inspired by Joseon-era ink paintings), and delicate geometric patterns derived from dancheong (traditional Korean decorative painting on wooden buildings) - These SVGs use stroke-only rendering (stroke: Fern Dew #8db89c or Wisteria Haze #b0a3c8, stroke-width: 1-1.5px, fill: none) and appear as margin decorations, section dividers, and card corner ornaments - The celadon crane appears only once, in the opening portal section, where it performs a slow glide animation (CSS transform: translateX + rotate, 8-second duration, ease-in-out) across the viewport as the portal opens **Duotone Photography:** - All photographic content uses the duotone treatment described in the palette section - Images are presented within organic-shaped clip-paths (`clip-path: polygon()` with soft, irregular curves) rather than rectangular frames, reinforcing the fairycore naturalism - On hover, images slowly shift from duotone to a slightly warmer colorization (transition: filter 0.8s ease) as though color is seeping back into a memory **Botanical Border Illustrations:** - Between major sections, a horizontal SVG vine/root system grows across the full viewport width using `stroke-dasharray` / `stroke-dashoffset` animation triggered by Intersection Observer - Each vine section is unique -- one uses fern fronds, another uses wisteria tendrils, a third uses lotus stems -- so the transitions feel hand-crafted rather than repetitive - Growth animation duration: 2-3 seconds per vine, with a slight overshoot-and-settle elastic easing **Particle System -- Fireflies:** - A lightweight canvas-based particle system generates 15-25 floating luminous particles (3-5px diameter) across the viewport - Particles drift with Perlin-noise-influenced movement, glowing in Moonpetal Gold (#e8d4a2) with soft radial gradients - Opacity oscillates between 0.2 and 0.7 on staggered 3-6 second sine wave cycles - Particles avoid the text content area (collision boundary around main content grid) so they float only in the margins and gutters ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens with a full-viewport **portal sequence**. Initial state: the screen is Petal White (#f5f0eb) with a single small circle (40px diameter) of Moss Whisper (#e8ede4) centered on the viewport. After a 0.3-second pause, the circle expands via CSS `scale()` animation (duration: 1.5s, cubic-bezier(0.25, 0.46, 0.45, 0.94)) to fill the viewport, revealing the first content section beneath. Simultaneously, the celadon crane SVG glides from left to right across the expanding circle. The site title ("yongjoon.net") fades in at center in Cormorant Garamond 600, 4rem, Charcoal Thorn, with 0.5s delay after the portal completes. **Card-Flip Interaction Pattern:** - Content cards use CSS `transform-style: preserve-3d` with `backface-visibility: hidden` on both faces - Front face: duotone photograph filling 60% height, title in Cormorant Garamond below, subtle 1px border in Peony Blush - Back face: full text content in Lora, background shifts to Wisteria Haze (#b0a3c8) at 15% opacity over Petal White - Flip triggered on click/tap (not hover, to respect mobile), using `transform: rotateY(180deg)` with 0.6s cubic-bezier transition - A small SVG lotus icon in the card corner rotates 180 degrees in sync with the flip as a visual cue **Scroll-Driven Storytelling (NOT scroll-triggered in the overused sense):** - Instead of typical scroll-trigger fade-ins, use CSS `scroll-timeline` (with IntersectionObserver fallback) to drive continuous animations tied to scroll position - As the user scrolls through a section, the botanical vine SVGs grow proportionally to scroll progress (0% scrolled = 0% drawn, 100% scrolled = 100% drawn) - Background color subtly shifts between Petal White and Moss Whisper using `scroll-timeline` interpolation, creating a breathing effect between warm and cool - Cards within each section have staggered entry using `animation-delay` based on their grid position, but the animation itself is a gentle `translateY(20px)` + `opacity` fade (no dramatic scale or rotation) **Responsive Behavior:** - At tablet (768px), the 5-column grid collapses to 3 columns (1fr 2fr 1fr), cards stack more vertically but maintain alternating asymmetric margins - At mobile (480px), single column with alternating indentation; card-flip still works via tap; firefly particle count reduces to 8-10; botanical vines simplify to single-path versions - Navigation firefly cluster repositions to bottom-center on mobile **Performance Considerations for Storytelling:** - SVG animations use `will-change: stroke-dashoffset` and are paused when off-viewport via IntersectionObserver - Canvas particle system runs at 30fps cap and pauses entirely when `document.hidden === true` - Duotone photo effect uses CSS filters only (no canvas processing), keeping GPU acceleration active **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, hero-with-signup-form patterns, testimonial carousels, cookie-cutter SaaS layouts. This is a personal site that tells a story, not a product page that sells a conversion. ## Uniqueness Notes **Differentiators from other designs:** 1. **Portal Entry Sequence with Cultural SVG Animation:** No other design in the portfolio uses an expanding-circle portal reveal paired with a single animated cultural motif (the celadon crane glide). This replaces the standard hero section with a moment of wonder -- the user enters the site rather than arriving at it. 2. **Korean Cultural Motifs as Structural Elements:** While 7% of designs use cultural motifs, none draw specifically from Korean artistic traditions (dancheong patterns, celadon forms, hanji translucency, hanok architecture). These are not decorative afterthoughts but structural: dancheong-inspired geometric patterns form card borders, the hanok roofline curve defines section header shapes, and the hanji layering concept drives the translucent overlay system. 3. **Fairycore Aesthetic with Literary Serif Typography:** The fairycore aesthetic (1% frequency) is combined with serif-classic typography (1% frequency) -- a pairing that creates an "enchanted manuscript" feeling entirely absent from the portfolio. Most fairycore implementations lean on rounded sans-serifs and bubbly shapes; this design instead channels the elegance of illuminated manuscripts where nature and calligraphy intertwine. 4. **Firefly Particle System as Navigation:** The navigation is not a bar, not a hamburger, not a sidebar -- it is a cluster of luminous particles that function as section indicators. This transforms a utilitarian element into an atmospheric one, reinforcing the fairycore world-building. 5. **Duotone Photography with Organic Clip-Paths:** While 1% of designs use duotone-photo imagery, none combine it with irregular organic clip-paths. The result is photographs that feel like memories pressed between the pages of a botanical journal -- soft-edged, tinted, and fragmentary rather than sharp and rectangular. **Seed:** aesthetic: fairycore, layout: asymmetric, typography: serif-classic, palette: pastel, patterns: card-flip, imagery: duotone-photo, motifs: cultural, tone: conversational **Avoided overused patterns:** centered layout (99%), scroll-triggered animation (96%), parallax (73%), mono typography (99%), warm palette (100%), friendly tone (99%), minimal imagery (95%), vintage motifs (89%), playful aesthetic (96%). Every seed dimension was chosen from the low-frequency end of the spectrum to maximize design diversity.