# Design Language for yesang.xyz ## Aesthetics and Tone yesang.xyz should feel like entering a private black-and-ivory atelier where anticipation is taught as a precise technical craft. The Korean “예상” carries expectation, prediction, and forecast; the `.xyz` makes it feel experimental, like a premium laboratory for learning how futures are modeled before they become visible. The mood is **luxury-premium** but disciplined: less gold-and-marble opulence, more monochrome couture notebook, sealed engineering manual, and quiet late-night terminal reflected in polished obsidian. The tone is **tech-tutorial** delivered with ceremonial restraint. Each lesson should feel like a guided masterclass in foresight: “observe the variable,” “draw the threshold,” “scale the possible,” “commit to the forecast.” Avoid the common SaaS tutorial look. No friendly pastel code school, no dashboard of metrics, no corporate hero pitch. The site should be instructional, but the instruction is staged like a luxury watchmaker explaining a hidden mechanism under a spotlight. ## Layout Motifs and Structure Use an **asymmetric** layout based on a shifting technical drafting table. The composition should never settle into centered hero plus card grid. Instead, build the page as a sequence of full-screen plates where a dominant serif statement sits off-axis, thin grid-lines divide the viewport into unequal panels, and tutorial annotations cling to margins like calibration marks. Recommended structure: 1. **Plate 00 — The Unseen Input:** full black field with a huge off-left “yesang.xyz” wordmark crossing the fold; a tiny tutorial label in the upper-right introduces anticipation as an interface. 2. **Plate 01 — Trace the Assumption:** an ivory panel slides in from one side, offset against black; grid-lines and numbered rule marks show how a prediction begins as a boundary, not a guess. 3. **Plate 02 — Scale the Possible:** several monochrome “forecast wafers” sit at different sizes and angles; hovering scales them subtly as if zooming into likelihood layers. 4. **Plate 03 — Read the Negative Space:** mostly empty, with a few precise notes and one oversized punctuation mark; the lesson is that absence is data. 5. **Plate 04 — Commit the Expectation:** a final full-screen composition where grid-lines converge into a quiet seal, not a CTA block. Use a 12-column CSS grid only as an invisible construction system; visibly break it with asymmetric spans such as 7/5, 3/9, and 10/2. Let horizontal rules stop before reaching the edge, leaving deliberate gaps. Create large negative-space fields and place microcopy in unexpected corners. Navigation, if present, should be a slim vertical index of plates, like a technical ruler on the left edge. ## Typography and Palette Typography should combine Baskerville refinement with technical annotation, creating a luxury manual for prediction logic. - **Primary Display Serif:** `Libre Baskerville` from Google Fonts, weights 400 and 700. Use for the domain, large lesson titles, and poetic forecast statements. Set large with careful negative tracking around `-0.04em`; keep line-height tight for an engraved, premium feel. - **Secondary Editorial Serif:** `Cormorant Garamond` from Google Fonts, weights 300, 500, and 600. Use sparingly for italic-like captions, chapter epigraphs, and elegant fragments such as “the future is a margin.” - **Technical Annotation Mono:** `IBM Plex Mono` from Google Fonts, weights 400, 500, and 600. Use for step numbers, coordinates, variable names, hover labels, and tutorial instructions. - **Utility Sans:** `Inter` from Google Fonts, weights 400 and 600. Use only for small interface labels when the mono would feel too dense. Monochrome palette with restrained material contrast: - Obsidian black: `#050505` — primary background, deep luxury field. - Porcelain ivory: `#F7F4EE` — primary text and luminous panels. - Warm graphite: `#2B2B2B` — secondary surfaces and quiet rule fills. - Smoked silver: `#C8C2B8` — grid-lines, dividers, and inactive annotation. - Ash taupe: `#8E887F` — secondary notes and tutorial numbering. - Polished white: `#FFFFFF` — rare highlight glints on hover. - Ink shadow: `#111111` — elevated panel shadows and noise modulation. Avoid gradients except for almost invisible radial light blooms in black-on-black. The palette must stay monochrome; any perceived luxury should come from proportion, texture, spacing, and typographic precision rather than color richness. ## Imagery and Motifs Imagery should be almost entirely generated through CSS, SVG, and texture layers. The primary imagery is **noise-texture** over premium monochrome surfaces: a fine film grain on black, faint paper tooth on ivory, and subtle interference patterns where panels overlap. The texture should make the interface feel tangible, like a printed technical proof photographed under museum lighting. Core motifs: - **Grid-lines as instruments:** thin rules, coordinate ticks, crop marks, and measuring brackets that imply prediction is drawn, not guessed. - **Forecast wafers:** flat monochrome discs, rectangles, or thin glass-like plates labeled with variables such as `ASSUMPTION`, `SIGNAL`, `DELAY`, `THRESHOLD`. These scale on hover but do not become cards. - **Expectation brackets:** oversized square brackets, angle marks, and hairline boxes framing negative space. - **Silent cursor seal:** a small blinking or breathing square that acts like a final confirmation mark, placed asymmetrically rather than centered. - **Luxury noise veil:** pseudo-elements using layered `radial-gradient`, `linear-gradient`, and CSS noise textures to give every surface a tactile, premium finish. No stock photography, no product mockups, no smiling users, no dashboard charts. If diagrams appear, they should be abstract: calibration lines, probability shadows, and annotated emptiness. ## Prompts for Implementation Implement yesang.xyz as a single immersive HTML/CSS/JS narrative with 4–5 full-screen plates. Load `Libre Baskerville`, `Cormorant Garamond`, `IBM Plex Mono`, and `Inter` from Google Fonts. Build the experience like a luxury technical tutorial: each screen teaches one principle of anticipation through layout, motion, and typographic staging. Specific implementation guidance: - Use CSS custom properties for the monochrome palette and line weights: `--ink`, `--ivory`, `--graphite`, `--silver`, `--taupe`, `--rule-thin`. - Create a fixed background system with black-on-black noise, soft vignette, and ultra-thin grid-lines that can shift between plates. - Make the hero wordmark oversized and partially cropped; `.xyz` may sit as a tiny monospaced coordinate tag rather than a normal suffix. - Use asymmetric CSS grid placement for every plate. Avoid equal-width columns and avoid centered section stacks. - Use **scale-hover** as the signature interaction: forecast wafers, brackets, and lesson labels enlarge by 1.03–1.12 with refined easing, revealing extra micro-instructions or coordinate marks. - Keep animation elegant and sparse: slow rule-drawing, panel masking, tiny cursor breathing, and hover scaling. Avoid the batch’s overused parallax-heavy, staggered, scroll-triggered showmanship. - Let the story progress through tutorial labels such as `00 / INPUT`, `01 / ASSUMPTION`, `02 / RANGE`, `03 / SILENCE`, `04 / COMMIT`. - Use JavaScript only for subtle plate-state changes, pointer-based light glints, or hover annotations; the site should feel handcrafted, not gimmicky. - Bias toward full-screen narrative scenes and cinematic pacing. Do not build CTA-heavy layouts, pricing blocks, testimonial strips, stat-grids, feature-card grids, or conventional landing-page funnels. ## Uniqueness Notes 1. yesang.xyz interprets “예상” as a luxury technical tutorial for anticipation, distinct from yesang.org’s analog forecast archive and sci-fi typewriter mood. 2. The site uses monochrome materiality — obsidian, porcelain, graphite, silver, ash — instead of the batch’s overused warm gradients, corporate palette, and photography-led surfaces. 3. The asymmetric drafting-table structure avoids centered heroes, card grids, dashboard layouts, and stacked marketing sections identified as overused in the frequency analysis. 4. The main decorative system is grid-lines as instructional instruments, not generic tech circuits, nature motifs, or corporate data graphics. 5. The planned **scale-hover** interaction becomes a refined act of examining probability layers, avoiding the more common parallax, scroll-triggered, stagger, hover-lift, and spring patterns. 6. Chosen seed/style: aesthetic: luxury-premium, layout: asymmetric, typography: baskerville-refined, palette: monochrome, patterns: scale-hover, imagery: noise-texture, motifs: grid-lines, tone: tech-tutorial.