# Design Language for yongjoon.xyz ## Aesthetics and Tone yongjoon.xyz ("용준" -- a Korean given name meaning "dragon excellence" or "brave and handsome") is envisioned as a **personal knowledge-sharing site** that feels like reading a hand-painted field journal belonging to a mountaineering software engineer. The visual language fuses the soft, unpredictable edges of watercolor painting with the clinical precision of technical documentation -- as if someone took a beautifully illustrated naturalist's sketchbook and filled it with code snippets, system architecture diagrams, and tutorial walkthroughs instead of botanical specimens. The tone is that of a patient, knowledgeable guide speaking to a colleague on a mountain trail: the voice is clear, unhurried, technically rigorous, but colored (literally) by an appreciation for the sublime landscapes that surround the conversation. Every element on the page should feel like it was placed with the same care a calligrapher uses when setting brush to rice paper -- intentional, slightly imperfect, breathing. The overall mood draws from the Korean concept of "여유" (yeoyu) -- a spacious, unrushed composure -- applied to the act of teaching technology. The aesthetic sits at the intersection of **watercolor artistic gallery** and **tech-tutorial** communication: information architecture is paramount, but the presentation never feels sterile. Marble veining appears as subtle background texture, evoking the geological strata of mountain formations and the weight of accumulated knowledge. Aurora-like color shifts provide ambient luminance that changes as the reader scrolls deeper, suggesting the passage of time from dawn to dusk on a mountain ridge. ## Layout Motifs and Structure The page follows a strict **single-column** layout -- a deliberate rejection of sidebars, multi-pane dashboards, and grid complexity. Content flows vertically like a scroll painting or a mountain stream: one idea follows the next in a linear, meditative descent. The column is narrow by design -- `max-width: 680px`, centered with generous horizontal margins -- creating a reading experience that mirrors the focused corridor of a hiking trail with expansive landscape visible on both sides. **Progressive Disclosure Architecture:** Content is organized into "elevation zones" -- conceptual sections that reveal themselves as the reader scrolls, using a progressive-disclosure pattern rather than dumping all information at once. Each zone begins with a **watercolor wash header**: a full-width band of blended color (CSS gradient mimicking watercolor bleeds) that spans the viewport edge-to-edge, breaking through the narrow column to signal a new topic. Below each wash header, content fades in paragraph by paragraph using `IntersectionObserver`-driven opacity transitions (0 to 1 over 600ms, eased with `cubic-bezier(0.25, 0.46, 0.45, 0.94)`). **The Mountain Profile:** A persistent decorative element runs along the left margin of the viewport: a thin SVG silhouette of a mountain ridgeline (inspired by Seoraksan or Bukhansan peaks), rendered as a single continuous `` in a muted slate color at opacity 0.08. As the user scrolls, this ridgeline subtly shifts vertically via a slow CSS `translateY` tied to scroll position (not parallax -- a gentle 0.15x offset), creating the sensation that the reader is ascending through the content landscape. The ridge is purely decorative, never interactive, and disappears on viewports below 1024px to preserve the clean single-column on mobile. **Section Anatomy:** Each tutorial/article section follows a consistent structure: 1. Watercolor wash divider (80px tall, full-viewport-width) 2. Section title in grotesque-neo typography, fading in 200ms after the wash enters viewport 3. A brief "trail marker" -- a one-line summary in italicized body text, like a signpost 4. Body content with progressive disclosure: initially only the first two paragraphs are visible; a subtle "Continue reading" affordance (a downward-pointing chevron with a watercolor-brush texture) expands the remaining content with a smooth height animation (400ms, ease-out) 5. Code blocks styled as "field notes" -- rounded corners, slightly off-white background with a faint marble texture grain, monospace font with syntax highlighting in aurora-gradient tones **Navigation:** No traditional navbar. Instead, a minimal floating indicator in the top-right corner shows the current "elevation" (section number / total sections) in small grotesque-neo type: "3 / 7". Clicking it reveals a vertical list of section titles that slides in from the right edge, styled as a translucent panel with `backdrop-filter: blur(12px)` over a marble-texture background. ## Typography and Palette **Display Headings:** "Space Grotesk" (Google Fonts, weights 500, 700) -- a grotesque-neo sans-serif with distinctive angular terminals and a slightly technical personality. Used for all section titles and the site name. Set at `clamp(1.8rem, 4vw, 3rem)`, `letter-spacing: -0.01em`, `line-height: 1.15`. Color: #2B2D42 (deep slate) on light sections, #E8E4DF (warm parchment) on dark sections. The angular character of Space Grotesk echoes the jagged profiles of mountain ridgelines while maintaining the utilitarian clarity expected in technical writing. **Body Text:** "Source Serif 4" (Google Fonts, weights 400, 400italic, 600) -- a contemporary serif with excellent screen readability and a warmth that pairs beautifully with the coolness of Space Grotesk. Used for all paragraph text, trail markers, and extended descriptions. Set at `font-size: 1.125rem` (18px), `line-height: 1.72`, `letter-spacing: 0.005em`. Color: #3D3B40 (charcoal mist). The generous line-height provides the "yeoyu" breathing room that defines the site's character. **Code / Technical:** "IBM Plex Mono" (Google Fonts, weights 400, 500) -- for all code blocks, inline code, terminal output, and technical annotations. Set at `font-size: 0.9rem`, `line-height: 1.6`, `letter-spacing: 0`. Code blocks use a custom syntax-highlighting scheme derived from the aurora palette: keywords in #7B6FA6 (soft violet), strings in #3A9E8F (teal mist), comments in #9B8EA8 (lavender gray), numbers in #D4896A (sunset coral), functions in #5C8ABF (glacier blue). **Palette -- "Dawn Ridge":** The color system is derived from the aurora-gradient concept, mapped to the colors visible during a mountain sunrise: | Role | Hex | Name | Usage | |------|-----|------|-------| | Background (primary) | #FAF8F5 | Rice Paper | Main page background, warm off-white | | Background (dark sections) | #1E1D2B | Twilight Stone | Alternate section backgrounds | | Text (primary) | #2B2D42 | Deep Slate | Headings on light backgrounds | | Text (body) | #3D3B40 | Charcoal Mist | Body text on light backgrounds | | Accent 1 | #7B6FA6 | Soft Violet | Links, hover states, code keywords | | Accent 2 | #3A9E8F | Teal Mist | Success states, code strings, secondary accents | | Accent 3 | #D4896A | Sunset Coral | Highlights, callouts, code numbers | | Accent 4 | #5C8ABF | Glacier Blue | Navigation indicators, code functions | | Aurora wash start | #7B6FA6 | (Violet edge) | Left edge of watercolor wash gradients | | Aurora wash end | #3A9E8F | (Teal edge) | Right edge of watercolor wash gradients | | Marble vein | #C9C2B8 | Limestone Vein | Marble texture overlay lines | | Marble base | #EDEAE5 | Quarry Cream | Code block backgrounds | **Watercolor Wash Gradients:** Each section divider uses a CSS gradient that mimics watercolor bleeding. The gradient travels left-to-right: `linear-gradient(102deg, rgba(123,111,166,0.35) 0%, rgba(58,158,143,0.25) 38%, rgba(212,137,106,0.2) 65%, rgba(92,138,191,0.15) 100%)`. A subtle `filter: blur(2px)` and irregular `border-radius` (using `border-radius: 48% 52% 60% 40% / 55% 45% 50% 50%`) applied to an overlaid pseudo-element creates the soft, non-mechanical edge characteristic of real watercolor on paper. Each section uses a slightly different gradient rotation (ranging from 90deg to 135deg) to prevent visual monotony. ## Imagery and Motifs **No photographs. No stock imagery. No icons from icon libraries.** All visual elements are constructed from CSS, SVG, and typographic treatments. **Watercolor Wash Fields:** The primary visual motif. Each section transition features a hand-painted-looking wash of aurora colors spanning the full viewport width. These are implemented as `
` elements with layered CSS gradients: a primary directional gradient for the dominant hue, overlaid with 2-3 radial gradients at varying positions and opacities (0.05-0.15) that create the pooling and concentration effects of real watercolor pigment settling unevenly on wet paper. A barely-visible SVG noise texture (``) is applied as a `filter` to break up the mechanical smoothness of CSS gradients. **Marble Texture Substrate:** Code blocks and the floating navigation panel feature a marble texture background. This is generated entirely in CSS using two overlapping `radial-gradient` layers: one with soft, irregular ellipses in #C9C2B8 at opacity 0.12 (simulating veins), and another with larger, more diffuse shapes in #EDEAE5 at opacity 0.08 (simulating the translucency variation in polished stone). The overall effect is a quiet, geological presence that grounds the technical content in materiality -- as if code is being carved into mountain stone. **Mountain Ridgeline SVG:** A single SVG `` element, hand-drawn to approximate the silhouette of a Korean mountain range (Seoraksan-inspired, with 12-15 peaks of varying height). Rendered in #2B2D42 at opacity 0.06, positioned `fixed` at `left: 2vw`, spanning the full height of the document. The path uses smooth `C` (cubic bezier) commands rather than sharp `L` (line) commands, giving it an organic, brush-drawn quality. On scroll, a `transform: translateY(calc(var(--scroll-y) * -0.15))` creates a gentle drift, making the ridgeline feel like a distant landscape seen through a window. **Aurora Glow Spots:** At three points in the scroll journey (approximately 25%, 50%, and 75% through the page), large, diffuse radial gradients appear behind the content column -- soft blooms of violet, teal, and coral that spread 400-600px in diameter at opacity 0.04-0.07. These are absolutely positioned `
` elements with `border-radius: 50%` and `filter: blur(80px)`, creating the effect of northern-lights color pools seeping through the rice-paper background. They are static (no animation), serving as ambient atmospheric markers that subtly shift the mood as the reader progresses. **Brush-Stroke Separators:** Between major content blocks within a section, instead of horizontal rules, a small SVG brush stroke is placed: an irregular, slightly tapered horizontal mark approximately 60px wide, rendered in the section's dominant aurora color at opacity 0.25. Each brush stroke SVG has slight randomization in its control points, so no two are identical. These replace all `
` elements. **Trail Marker Glyphs:** Each section's "trail marker" (the one-line summary) is preceded by a small decorative glyph: a tiny mountain peak icon (three triangular peaks, the center tallest) rendered as inline SVG, 16x10px, in the current section's accent color. This serves as a consistent wayfinding element without resorting to generic icon libraries. ## Prompts for Implementation Build yongjoon.xyz as a **single-page vertical scroll experience** -- a descent through 5-7 content sections that simulate the feeling of reading a beautifully illustrated technical field journal while ascending a Korean mountain at dawn. The page should feel quiet, spacious, and meticulously crafted. Every pixel should serve either information delivery or atmospheric world-building. There are no distractions: no sidebars, no pop-ups, no call-to-action buttons, no pricing tables, no stat grids. **Opening Sequence (first 100vh):** The page loads with a full-viewport watercolor wash in the aurora gradient palette -- a large, soft bloom of violet-to-teal-to-coral that fills the screen like a mountain sky at first light. The site title "yongjoon.xyz" fades in at center-screen in Space Grotesk 700, #2B2D42, `font-size: clamp(2.5rem, 6vw, 4.5rem)`, after a 400ms delay. Below it, a subtitle in Source Serif 4 italic: "notes from the ridge" -- fading in 200ms after the title. Both texts are centered. A small downward chevron pulses gently (opacity oscillating between 0.3 and 0.7 over 2s) at the bottom of the viewport, inviting scroll. **Content Sections:** Each section represents a "tutorial chapter" or "field note entry." Structure each section as: - Full-width watercolor wash header (80px, unique gradient rotation per section) - Section title in Space Grotesk 500, fading in via IntersectionObserver - Trail marker text in Source Serif 4 italic with mountain-peak glyph - Body content in Source Serif 4 400, progressively disclosed - Code blocks on marble-texture backgrounds with aurora-derived syntax highlighting - Brush-stroke SVG separators between logical subsections **Progressive Disclosure Mechanics:** Each section initially shows only a "preview" -- the title, trail marker, and first 2-3 paragraphs. The remaining content is wrapped in a container with `max-height: 0; overflow: hidden; transition: max-height 500ms ease-out`. A "continue" trigger (the chevron with watercolor texture) toggles this container open. Once opened, it stays open -- no collapse. This prevents the page from feeling overwhelming while rewarding the curious reader. **Code Block Treatment:** ```css .code-block { background: linear-gradient(135deg, #EDEAE5 0%, #FAF8F5 100%); border: 1px solid rgba(201, 194, 184, 0.4); border-radius: 8px; padding: 1.5rem; font-family: 'IBM Plex Mono', monospace; font-size: 0.9rem; line-height: 1.6; overflow-x: auto; position: relative; } ``` Apply the marble-texture as a subtle pseudo-element overlay with `mix-blend-mode: multiply` and `opacity: 0.06`. **Scroll-Linked Atmospheric Shifts:** As the user scrolls past 50% of the page, the background color of light sections transitions gradually from #FAF8F5 (warm rice paper) toward #F5F3F0 (slightly cooler parchment), and the aurora glow spots shift from violet-dominant to teal-dominant. This creates a subliminal time-passage effect -- dawn becoming midday -- without any abrupt color changes. Use CSS custom properties updated via a lightweight scroll listener (`requestAnimationFrame`-throttled) to drive these shifts. **The Navigation Elevation Indicator:** Position a small, fixed element at `top: 2rem; right: 2rem`: a `` showing the current section number and total (e.g., "3 / 7") in Space Grotesk 400 at `0.85rem`, color #7B6FA6. On click, a panel slides in from the right (`transform: translateX(100%)` to `translateX(0)` over 300ms) listing all section titles. The panel has a marble-texture background with `backdrop-filter: blur(12px)` and a left border in the aurora gradient. **Responsive Behavior:** Below 768px: mountain ridgeline SVG hides entirely; watercolor washes reduce in height to 50px; progressive disclosure expands automatically (all content visible, no collapse); navigation indicator moves to bottom-center; code blocks gain horizontal scroll affordance with a subtle shadow on the right edge. The single-column nature means the layout requires almost no breakpoint adjustments -- it naturally adapts. **Performance Notes:** - No JavaScript frameworks -- vanilla JS only, under 3KB minified - SVG noise filter applied only to watercolor washes, not globally - Aurora glow spots are static positioned elements, no animation loop - Scroll listener is `requestAnimationFrame`-throttled, never `scroll` event directly - All fonts loaded via `font-display: swap` to prevent layout shift **AVOID:** CTA buttons, pricing blocks, stat-grids, testimonial carousels, hero images with photography, sidebar navigation, hamburger menus, cookie banners, newsletter signup forms, social media icon rows, footer link forests. ## Uniqueness Notes 1. **Watercolor-wash section dividers as atmospheric storytelling:** No other design in this collection uses CSS-constructed watercolor bleeds as full-viewport-width section transitions that simultaneously serve as mood-setting atmospheric elements. The combination of layered CSS gradients, SVG noise filters, and irregular border-radius creates a hand-painted quality that is structurally integral to the layout (at 5% frequency, watercolor aesthetic is underused). 2. **Mountain ridgeline as persistent marginal illustration:** The fixed SVG mountain silhouette running along the left viewport edge -- shifting subtly with scroll -- is a unique navigational and atmospheric device. Unlike parallax backgrounds (98% frequency, deliberately avoided), this element sits in the margin space outside the content column, creating a landscape "frame" without competing with readability. Mountain-landscape motif sits at 2% frequency. 3. **Aurora-gradient syntax highlighting in code blocks:** Technical code is styled using a custom color scheme derived directly from the site's aurora palette (#7B6FA6 for keywords, #3A9E8F for strings, #D4896A for numbers, #5C8ABF for functions). This makes code blocks feel like natural extensions of the page's visual world rather than foreign embedded widgets. Aurora-gradient palette is at 3% frequency. 4. **Marble-texture code block substrate:** Code blocks sit on a CSS-generated marble texture background (radial gradients simulating stone veining at very low opacity), connecting technical content to the geological/mountain theme. Marble-texture imagery is at 3% frequency and is not used in any other design for code presentation. 5. **Progressive disclosure as reading-pace control:** Rather than infinite-scroll or paginated approaches, the progressive-disclosure pattern (7% frequency) is used here as a deliberate reading-pace mechanism -- each section begins compressed, expanding only on reader intent, mimicking the experience of unfolding a trail map one panel at a time. **Seed/Style:** watercolor, single-column, grotesque-neo, aurora-gradient, progressive-disclosure, marble-texture, mountain-landscape, tech-tutorial **Avoided overused patterns:** corporate aesthetic (97%), photography imagery (99%), full-bleed layout (97% -- used only for watercolor washes, not content), warm palette (98% -- replaced with aurora-gradient cool tones), parallax animation (98% -- replaced with subtle scroll-linked translateY on ridgeline only), mono typography (76% -- used only for code, not as primary type), friendly tone (46% -- replaced with tech-tutorial measured voice).