# Design Language for yesang.org ## Aesthetics and Tone yesang.org should feel like a prediction written on onionskin paper, fed through an old office typewriter, then overlaid by a low-glow spacecraft instrument panel. The Korean word “예상” means expectation, forecast, anticipation; the site should turn that idea into a quiet archive of futures before they arrive. The visual language is **evolved-minimal** rather than plain minimal: sparse, restrained surfaces with small but memorable rituals — typed fragments, calibrated icons, antique paper grain, and faint HUD arcs that imply a machine trying to remember tomorrow. The tone is **nostalgic-retro** without becoming kitsch. Imagine a 1970s forecasting bureau, a university observatory, and a personal diary about possible futures sharing the same desk. The mood should be thoughtful, suspenseful, and intimate: less “AI prediction dashboard,” more “analog oracle console.” Every screen should feel like the visitor is standing in front of a delicate apparatus that prints one careful expectation at a time. ## Layout Motifs and Structure Use an **organic-flow** layout built as a full-screen narrative drift, not a centered hero followed by cards. The page should unfold like a long sheet of forecast paper curling across the viewport. Sections may overlap vertically and diagonally, with text blocks following invisible contour lines, small icons orbiting the text, and HUD rings placed partially off-canvas. Avoid rigid grids; use a loose 10-column planning system only to align anchors, then let individual elements “float” along curved paths. Suggested spatial sequence: 1. **The Before-Signal (100vh):** A nearly empty parchment field with `yesang.org` typed one character at a time near the upper-left third. A thin amber scanline passes slowly across a faded circular HUD, while three tiny forecast icons wait in the margins. 2. **Expectation Current:** A vertical ribbon of short predictions bends through the screen like a river. Each phrase appears on a small typewritten slip, connected by hairline curves and micro glyphs: moon, barometer, bell, seed, satellite. 3. **Analog Instruments:** A full-bleed scene with oversized partial dials, calibration ticks, and serif captions. The layout should feel like looking at a desk covered with transparent acetate overlays; text is placed in pockets between the instrument forms. 4. **The Unprinted Future:** The final viewport becomes quieter and more abstract: a blank paper plane, a blinking caret, and a constellation of icons fading into soft sepia darkness. No aggressive CTA; end with a contemplative line that feels like a page left in the typewriter. Composition rules: keep strong asymmetry, large areas of untouched paper, and curved relationship lines. Use side notes, marginalia, and “instrument labels” instead of navigation-heavy sections. Do not use pricing blocks, stat grids, testimonial cards, or corporate feature tiles. ## Typography and Palette Typography should combine serif-revival warmth with typewriter mechanics and small technical annotations. - **Primary Display Serif:** `Cormorant Garamond` from Google Fonts, weights 400, 500, 600. Use for large atmospheric lines, the domain title, and poetic section headers. Set with generous line-height and slight negative tracking for a literary forecast-office feeling. - **Body Serif:** `Fraunces` from Google Fonts, weights 300, 400, 600. Use for narrative paragraphs and larger typed slips; its old-style personality makes the site feel archival but contemporary. - **Typewriter Accent:** `Special Elite` from Google Fonts. Use sparingly for typed fragments, timestamps, marginal labels, and the blinking-caret animation. Do not let it dominate the whole page. - **HUD Microtext:** `IBM Plex Mono` from Google Fonts only for tiny coordinate labels, dial numbers, and instrument readouts; keep it secondary so the design does not fall into the overused mono-led pattern. Muted vintage palette with restrained sci-fi accents: - **Old Forecast Paper:** `#E9DDC7` — primary background, warm but dusty. - **Oxidized Ink:** `#2F332D` — main text, deep green-black rather than pure black. - **Faded Tobacco:** `#9A6F4B` — rules, typewriter slips, aged borders. - **Dried Rose Signal:** `#B46A63` — gentle emphasis, active typed words, rare icon fill. - **Instrument Teal:** `#527C78` — HUD arcs, calibration marks, subtle science-fiction layer. - **Dim Amber Phosphor:** `#D1A24D` — cursor blink, scanline glow, tiny status lights. - **Night Archive:** `#171B1A` — final-scene depth and dark vignette areas. Use gradients only as extremely subtle paper vignettes or phosphor glows; avoid glossy gradient branding. Add mild grain and uneven ink opacity to keep the evolved-minimal surface from feeling sterile. ## Imagery and Motifs Imagery should be **icon-heavy** but delicate: build a bespoke symbolic vocabulary with inline SVG and CSS, not stock icon libraries. Each icon should look like it was stamped in ink, then measured by a future-facing instrument. Core motif set: - **Prediction Icons:** small recurring symbols for “weather of thought” — crescent moon, seed, closed eye, bell, compass needle, satellite, tide mark, envelope, candle, barometer, calendar leaf, radio mast. Use thin strokes, imperfect fills, and occasional offset duplicates to mimic misregistered printing. - **Sci-Fi HUD Margins:** partial circles, azimuth ticks, bracket corners, range arcs, and soft scanlines. These should frame the story, not become a dashboard. Let rings be cropped by viewport edges and paper slips. - **Typewriter Artifacts:** blinking caret, paper feed perforations, ink dents, correction tape ghosts, overstruck characters, and one or two animated words that retype alternate possible futures. - **Organic Forecast Lines:** fine Bezier curves connecting icons and text slips like currents in air or water. They should drift slowly, making the page feel alive without relying on common parallax spectacle. - **Aged Material Texture:** transparent paper layers, faint coffee halos, soft foxing dots, and low-contrast ruled guide lines. Avoid photography. Avoid generic AI brain, robot, chart, and analytics imagery. The site should be memorable because of its custom forecast-symbol language and its tension between analog paper and quiet orbital instrumentation. ## Prompts for Implementation Build the page as a single immersive HTML/CSS/JS narrative with 4 full-screen scenes. Load Google Fonts for `Cormorant Garamond`, `Fraunces`, `Special Elite`, and `IBM Plex Mono`. The implementation should feel like a slow ritual of anticipation: a future being typed, corrected, measured, and finally left unresolved. Implementation guidance: - Create a paper-like root surface using layered radial gradients, grain texture via CSS pseudo-elements, and low-opacity ruled lines. Keep the base flat and tactile rather than shiny. - Implement a custom typewriter effect for the hero and for 3-5 rotating “possible lines” later in the page. The caret should glow amber and occasionally pause as if the machine is thinking. - Use SVG for the icon system and HUD overlays. Animate only stroke dash offsets, slow rotations, opacity flickers, and small positional drifts; avoid bouncy, springy, or conversion-focused motion. - Let the scroll experience feel organic: sticky instrument overlays, curved connectors that draw as the visitor progresses, and typed slips that slide gently along a wave path. Do not build a normal card grid. - Treat copy as fragments from a forecasting archive: “before the bell,” “probability has a smell,” “the page waits,” “tomorrow, not yet.” Keep the language sparse and poetic. - Add a final darkened archive scene where the paper recedes into `#171B1A`, the HUD becomes barely visible, and the last typed line remains unfinished. - AVOID CTA-heavy layouts, pricing blocks, stat-grids, corporate feature sections, centered hero formulas, and photo-led credibility panels. ## Uniqueness Notes 1. yesang.org becomes an analog forecasting instrument: a typewriter archive crossed with a restrained sci-fi HUD, rather than a prediction dashboard or AI product landing page. 2. The organic-flow structure uses curling paper, drifting slips, and curved forecast lines, directly avoiding the batch’s overused card-grid, centered, corporate, and photo-led patterns. 3. The icon-heavy system is narrative and custom — stamped symbols, barometers, satellites, bells, and seeds — not a generic decorative icon set. 4. Motion is built around typewriter hesitation, line drawing, and instrument calibration instead of the overused parallax, scroll-triggered stagger, and spring animation habits shown in the frequency analysis. 5. The serif-revival typography gives the experience a literary, archival voice while tiny mono HUD labels remain secondary, avoiding the common mono-dominant look. Chosen seed/style: aesthetic: evolved-minimal, layout: organic-flow, typography: serif-revival, palette: muted-vintage, patterns: typewriter-effect, imagery: icon-heavy, motifs: sci-fi-hud, tone: nostalgic-retro. Avoided patterns from frequency analysis: corporate aesthetic, photography/minimal imagery defaults, card-grid and centered layouts, warm glossy gradients, heavy parallax, scroll-triggered stagger, and mono-led typography.