# Design Language for yesang.org ## Aesthetics and Tone yesang.org (예상 -- "prediction," "forecast," "expectation") inhabits the visual world of a Korean mountain observatory at twilight, the kind of place where shamans once read the shape of clouds above Jirisan and astronomers plotted celestial arcs across ink-dark skies. The aesthetic is **maximalist** in the truest sense: every surface carries information, every corner rewards attention, every scroll-depth reveals another layer of ornament and meaning. This is not the maximalism of clutter or chaos -- it is the maximalism of a Joseon-era star chart, where hundreds of data points coalesce into a single breathtaking composition that somehow communicates more clearly through abundance than any sparse diagram ever could. The mood oscillates between the grandeur of Korean mountain ranges at dawn -- mist pouring through valleys like slow-motion waterfalls, ridgeline silhouettes stacking into infinite recession -- and the intimate warmth of a fortune-teller's candlelit table covered in divination tools, almanacs, and hand-drawn charts. The tone is **conversational**: the site speaks to visitors as a knowledgeable friend who happens to have studied the I Ching and modern data science in equal measure, who can explain a complex prediction model with the ease of someone describing tomorrow's weather over tea. Inspiration sources: the layered ink-wash mountain paintings of Jeong Seon (겸재 정선), the dense information design of Korean newspaper infographics from the 1990s, the ornamental excess of Dancheong (단청) temple painting with its five-color symbolic system, and the vertiginous depth of drone photography over Seoraksan at sunrise. ## Layout Motifs and Structure The layout follows an **immersive-scroll** paradigm -- the entire site is a single continuous vertical journey that mimics the experience of ascending a mountain trail, from the foothills (introduction) through the cloud line (main content) to the summit (revelation/conclusion). There is no traditional navigation bar. Instead, a thin vertical progress indicator on the right edge of the viewport -- styled as a miniature mountain elevation profile in #E8D44D -- shows the visitor's position in the ascent. **Structural Zones:** - **Zone 1 (0-100vh): The Valley Floor.** Full-viewport immersive hero with a layered parallax mountain silhouette composition. The domain name "yesang.org" is set enormous (12vw) in Space Grotesk Bold, positioned at the lower third, partially obscured by foreground mountain shapes that overlap the text. Below the name, "예상" appears in a secondary treatment. No buttons, no CTAs -- just the landscape and the name, inviting the scroll. - **Zone 2 (100vh-400vh): The Ascent.** Content panels emerge from the sides as the user scrolls, using a staggered alternating pattern -- left panel, then right panel, then full-width panel. Each panel is a generous rectangle (70-85vw wide) with rounded corners (16px), a subtle backdrop-filter blur over the background, and an inner border of 1px solid rgba(232,212,77,0.2). Panels contain text, icon clusters, and decorative mountain motifs. The background behind the panels slowly shifts color temperature as the user ascends -- from deep navy (#0B1D3A) at the valley floor through indigo (#2A1B5E) at mid-altitude to a rich plum (#4A1942) near the cloud line. - **Zone 3 (400vh-600vh): The Cloud Line.** The densest section. A CSS Grid with `grid-template-columns: repeat(6, 1fr)` creates a bento-like arrangement of cards spanning 1-3 columns and 1-2 rows, each card containing a different predictive insight represented as an icon-heavy vignette. Cards use tilt-3d transforms on hover (perspective: 1200px, rotateX/Y up to 8deg) and have thick colored borders drawn from the triadic palette. - **Zone 4 (600vh-800vh): The Summit.** The background transitions to a warm golden-pink (#F2C94C blending to #EB5757) like a Korean mountain sunrise. Content simplifies to large typographic statements with generous whitespace, creating a sense of arrival and clarity after the maximalist density of the ascent. **No sidebars. No hamburger menus. No footer link grids.** Navigation happens through scrolling alone, with the mountain-profile progress bar as the only wayfinding tool. ## Typography and Palette **Typography:** - **Display / Headlines:** "Space Grotesk" (Google Fonts) -- a proportional sans-serif with a distinctive geometric skeleton and quirky details (the asymmetric lowercase 'a', the squared-off 'g'). Used at 3rem-12vw for headlines and the hero domain name. Weight: 700 (Bold) for primary headlines, 500 (Medium) for subheads. Set with `letter-spacing: -0.02em` and `line-height: 1.05` for tight, impactful headline compositions. The grotesk quality -- rational yet slightly eccentric -- mirrors the site's theme of prediction: systematic yet full of surprises. - **Body / Reading Text:** "DM Sans" (Google Fonts) -- a geometric sans-serif with open apertures and friendly proportions that pairs naturally with Space Grotesk without competing. Weight: 400 (Regular) for body, 500 (Medium) for emphasis. Set at 1.05rem-1.2rem with `line-height: 1.65` and `letter-spacing: 0.005em`. The conversational tone demands a typeface that reads effortlessly at length. - **Accent / Labels:** "Space Mono" (Google Fonts) -- the monospace companion to Space Grotesk, used for data labels, timestamps, numerical predictions, and technical annotations. Weight: 400 at 0.8rem-0.95rem. Creates a visual register shift that signals "this is data" versus "this is narrative." - **Korean Text:** Body Korean text inherits DM Sans but falls back to the system's default Korean font stack. Headlines in Korean use the same Space Grotesk sizing but with `letter-spacing: 0.05em` to accommodate the wider character set. **Palette (Triadic):** The triadic scheme is built on a primary triad of deep navy, vibrant gold, and rich magenta, with supporting neutrals: | Role | Color | Hex | |------|-------|-----| | Primary Deep | Midnight Navy | #0B1D3A | | Primary Accent | Forecast Gold | #E8D44D | | Primary Vibrant | Summit Magenta | #C22E6B | | Secondary Cool | Indigo Mist | #2A1B5E | | Secondary Warm | Plum Altitude | #4A1942 | | Neutral Dark | Mountain Shadow | #121824 | | Neutral Light | Cloud Silk | #F0EDE4 | | Highlight | Sunrise Coral | #EB5757 | | Data Accent | Prediction Teal | #2EC4B6 | The triadic relationship between #0B1D3A (blue), #E8D44D (yellow), and #C22E6B (red-pink) creates high visual energy without the rawness of complementary schemes. The gold (#E8D44D) functions as the primary attention color -- used for the progress indicator, interactive highlights, card borders, and icon fills. The magenta (#C22E6B) marks moments of emphasis and surprise. The navy (#0B1D3A) is the grounding darkness that makes the other two colors sing. ## Imagery and Motifs **Icon-Heavy Visual Language:** The primary imagery mode is **icon-heavy** -- not the generic line-icon sets of UI libraries, but a bespoke icon vocabulary inspired by Korean mountain culture, fortune-telling traditions, and meteorological symbols. Every concept on the site is represented by a custom SVG icon rendered in the triadic palette: 1. **Mountain Silhouette Icons:** Stylized ridge profiles representing different states of prediction -- a single peak for certainty, a jagged multi-peak range for volatility, a cloud-wrapped summit for uncertainty. Each icon is drawn with 2px strokes in #E8D44D against #0B1D3A backgrounds, with occasional fills of #C22E6B for critical states. 2. **Celestial Prediction Icons:** Sun, moon, and star variants drawn in a style that references Korean astronomical charts (천문도) -- circles with radiating lines, crescent forms nested inside circles, star shapes with varying point counts (5 for low confidence, 8 for high confidence). These appear as inline decorations within text blocks and as card header icons. 3. **Weather/Forecast Icons:** Clouds, rain patterns, wind direction arrows, and temperature indicators -- but stylized with thick geometric strokes and the triadic color scheme. Rain uses vertical dashes in #2EC4B6. Sun uses concentric circles in #E8D44D. Lightning uses angular zigzags in #C22E6B. 4. **Korean Motif Icons:** Simplified Dancheong (단청) patterns used as decorative borders and dividers -- the five-directional color symbolism (blue-east, white-west, red-south, black-north, yellow-center) maps loosely onto the triadic palette. Taegeuk-inspired circular motifs appear as loading indicators and section dividers. **Mountain Landscape Motifs:** The mountain-landscape motif pervades the entire site as layered SVG silhouettes. Three to five layers of mountain ridge profiles, each in a slightly different shade of the navy-to-indigo gradient, create a sense of atmospheric perspective and infinite depth. These layers move at different speeds during scroll (parallax via `transform: translateY()` with scroll-linked values), reinforcing the immersive-scroll experience. The mountain shapes are not photographic -- they are geometric abstractions with clean angular peaks and smooth valley curves, rendered as SVG `` elements with `fill` values from the palette. **Decorative Pattern Fills:** Card backgrounds occasionally use subtle repeating patterns inspired by Korean traditional textiles -- small diamond grids, interlocking circles (칠보문), and stylized cloud scrolls (구름문) -- rendered at 3-5% opacity in #E8D44D over the dark backgrounds. These are implemented as SVG `` elements applied via CSS `background-image: url("data:image/svg+xml,...")`. ## Prompts for Implementation **Full-Screen Narrative Mountain Ascent:** The entire site is a single-page vertical scroll experience that tells the story of prediction as a mountain journey. Implementation should use `scroll-timeline` (with IntersectionObserver fallback) to drive all animations. The background color gradient from navy to indigo to plum to gold-pink is driven by scroll position, implemented via CSS custom properties updated in a `requestAnimationFrame` scroll handler: ``` --scroll-progress: clamp(0, (scrollY / totalHeight), 1); background: color-mix(in oklch, var(--color-valley) calc((1 - var(--scroll-progress)) * 100%), var(--color-summit)); ``` **Tilt-3D Card Interactions:** Every card in Zone 3 (the Cloud Line bento grid) implements a tilt-3d effect on mouse hover. The implementation should track mouse position relative to the card center and apply `transform: perspective(1200px) rotateX(Xdeg) rotateY(Ydeg)` where X and Y are calculated from cursor offset (max 8 degrees). On mouse leave, the card springs back to flat with a CSS transition: `transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1)`. The tilt should also shift a subtle inner shadow to reinforce the 3D illusion: `box-shadow: calc(Xoffset * -1px) calc(Yoffset * -1px) 30px rgba(11,29,58,0.4)`. **Scroll-Triggered Stagger Reveals:** Content panels in Zone 2 animate in using IntersectionObserver with `threshold: 0.15`. When a panel enters the viewport, it transitions from `opacity: 0; transform: translateY(60px)` to `opacity: 1; transform: translateY(0)` with `transition-duration: 0.8s` and `transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1)`. When multiple panels are visible simultaneously, they stagger with 120ms delays using `transition-delay` set via CSS custom property `--stagger-index`. **Mountain Parallax Layers:** The 3-5 SVG mountain silhouette layers in Zone 1 use scroll-linked transforms. Each layer has a `data-parallax-speed` attribute (0.1 for the farthest background to 0.5 for the nearest foreground). A scroll handler updates each layer: `transform: translateY(calc(var(--scroll) * var(--speed) * -1px))`. The foreground layer also has a slight `scale()` increase on scroll to enhance the depth effect. **Icon Micro-Animations:** Icons throughout the site are not static. Mountain silhouette icons have a subtle `translateY` oscillation (2px amplitude, 3s duration, ease-in-out infinite) suggesting the shimmer of heat haze. Celestial icons rotate slowly (360deg over 20s for stars, 60s for moons). Weather icons have contextual animations: rain dashes fall with staggered `@keyframes` drops, wind arrows pulse in opacity, lightning zigzags flash intermittently (opacity 0 to 1 over 0.1s, every 4s with random delay). **Progress Indicator:** The right-edge mountain elevation profile is an SVG `` representing the site's scroll depth as a simplified mountain cross-section. A filled region below the line uses `clip-path` animated by scroll position to show how far the visitor has ascended. The fill color transitions from #0B1D3A at 0% to #E8D44D at 50% to #EB5757 at 100%. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, feature comparison tables. The site is a narrative journey, not a conversion funnel. ## Uniqueness Notes **Differentiators from other designs:** 1. **Mountain-as-Information-Architecture:** No other design in the portfolio uses the mountain ascent metaphor as a literal structural principle. The four-zone vertical journey (Valley, Ascent, Cloud Line, Summit) maps content density to altitude -- sparse at the base, maximally dense at the cloud line, clarified at the summit. This is not decorative theming; it is the organizational logic itself. 2. **Korean Prediction Culture as Visual System:** The fusion of Korean traditional fortune-telling iconography (천문도 star charts, Dancheong color symbolism, taegeuk circular motifs) with modern data-prediction visual language creates an entirely novel icon vocabulary. No other design references Korean shamanic/astronomical visual traditions. 3. **Triadic Palette with Altitude-Linked Gradient:** The triadic scheme (navy/gold/magenta) is rare at 2% frequency, and no other design uses it as a scroll-position-driven gradient that shifts the entire page's color temperature from cold depth to warm summit. The palette tells a story: you ascend from the dark valley of uncertainty into the golden light of clarity. 4. **Tilt-3D on Dense Bento Grid:** While tilt-3d appears at 4% frequency, it has never been combined with a maximalist bento grid layout and icon-heavy card content. The combination creates a tactile, almost physical sensation of handling fortune-telling cards -- each card responds to touch/hover as if it were a tangible object on a table. 5. **Conversational Tone in Maximalist Frame:** Most maximalist designs adopt an aggressive or bombastic tone. yesang.org pairs visual abundance with a warm, conversational voice -- the effect is like visiting a beloved aunt's house where every surface is covered in meaningful objects, and she has a story for each one. This contrast between visual density and verbal intimacy is unique in the portfolio. **Documented Seed/Style:** - aesthetic: maximalist - layout: immersive-scroll - typography: sans-grotesk - palette: triadic - patterns: tilt-3d - imagery: icon-heavy - motifs: mountain-landscape - tone: conversational **Avoided Overused Patterns (from frequency analysis):** - playful aesthetic (96%) -- replaced with maximalist (7%) - centered layout (99%) -- replaced with immersive-scroll (2%) - mono typography (99%) -- replaced with sans-grotesk (3%) - warm palette (100%) -- replaced with triadic (2%) - scroll-triggered patterns (97%) -- replaced with tilt-3d (4%) as primary interaction - friendly tone (99%) -- replaced with conversational (4%) - minimal imagery (95%) -- replaced with icon-heavy (4%) - vintage motifs (89%) -- replaced with mountain-landscape (2%)