# Design Language for 확률.com ## Aesthetics and Tone 확률.com should feel like a sunlit probability laboratory hidden inside an old university observatory: chalk dust in the air, vellum notebooks on a maple desk, and a translucent measurement HUD hovering over everything like a field instrument. The visual mood is **light-academia without nostalgia cosplay** — cream paper, worn brass, optical glass, marginalia, and honest mathematical uncertainty rather than polished ed-tech optimism. Probability is presented as a lived discipline: coffee rings beside Bayesian updates, hand-corrected formulas, and the quiet drama of choosing when evidence is enough. The tone is **raw-authentic**: no heroic claims, no gamified “master statistics” energy, no shiny corporate confidence. The page should admit that uncertainty is uncomfortable and beautiful. Korean typography can carry the domain name as a serious object, while the surrounding interface treats likelihood as something observed through lenses, apertures, and calibration marks. The intended feeling is “a field notebook became an interactive instrument at golden hour.” ## Layout Motifs and Structure Use a **hud-overlay** layout over a full-screen narrative sequence. Instead of cards or centered feature blocks, build the page as a stack of observation plates: each viewport is a different probability experiment seen through layered transparent rulers, crosshairs, confidence bands, and side annotations. The main content should sit slightly off-axis, as if the user is looking through a misaligned overhead projector; mathematical fragments float at different z-depths and slide into registration as scrolling advances. Structure the experience around four immersive “plates”: 1. **The Aperture of Chance** — a full-screen cream field with the word “확률” huge but partially obscured by lens glare, tick marks, and a thin circular reticle. 2. **Prior / Evidence / Revision** — three horizontal translucent bands that slide-reveal over each other like stacked acetates in a lecture hall. 3. **The Sample Room** — scattered coordinate pins, small distributions, and handwritten corrections arranged on an angled baseline rather than a grid. 4. **The Uncollapsed Ending** — a quiet final scene with multiple ghost outcomes visible at once, fading into a soft optical flare instead of a CTA panel. Favor **layered-depth** through overlapping planes: paper layer, ink layer, glass layer, HUD layer, flare layer. Use diagonal measuring rules, marginal sidebars, and floating equation scraps, but avoid dashboards, stat grids, pricing blocks, and generic “sections.” Navigation can be a tiny instrument legend in one corner, more like a lab tool calibration mark than a menu. ## Typography and Palette **Typography:** - **Primary UI and Korean body:** `Noto Sans KR` from Google Fonts, weights 400, 500, 700. Use it with generous tracking for labels and compact, calm Korean explanatory text. - **Latin / instrument labels:** `Nunito Sans` from Google Fonts, weights 400, 600, 800. It gives a Frutiger-clean, readable airport-signage quality without becoming corporate. - **Academic accent serif:** `Literata` from Google Fonts, weights 400 and 600 italic. Use sparingly for notebook captions, theorem-like fragments, and warm scholarly asides. - **Numerical microcopy:** `IBM Plex Sans KR` or `IBM Plex Mono` from Google Fonts for probability values, axis labels, and tiny HUD readouts. **Palette:** muted, warm, optical, and paper-based. - Parchment field: `#F4EBD7` - Warm ivory highlight: `#FFF8E8` - Graphite ink: `#2E2A24` - Muted olive theorem marks: `#7C8061` - Dusty brass calibration lines: `#B79A5B` - Faded probability blue: `#6F8FA6` - Soft correction red: `#B96A5B` - Lens flare amber: `#F6D99A` - Glass shadow gray: `#B8B1A3` The background should never be pure white. Use subtle radial gradients and low-opacity linear rules to create the feeling of aged paper beneath glass. Accent colors should appear as measured marks, not broad fills. ## Imagery and Motifs No stock photography. Create the imagery with CSS gradients, SVG lines, and tiny procedural marks. The signature motif is **probability as optical calibration**: lens flares, circular reticles, translucent acetate sheets, parallaxed tick marks, and distributions drawn like field measurements. Lens flare should be warm and imperfect — elliptical amber blooms, thin rainbow refractions, and dust motes caught in a projector beam — not sci-fi neon. Recurring visual elements: - **Transparent probability lenses:** overlapping circular glass discs with faint blur and brass rims, each revealing a different distribution curve underneath. - **Slide-reveal acetate equations:** formulas and Korean notes hidden behind horizontal masks that move like lecture transparencies. - **Outcome ghosts:** several low-opacity paths or dots occupying different possible futures, with one occasionally sharpening while the others remain visible. - **Notebook marginalia:** small arrows, crossed-out priors, coffee-ring arcs, and hand-drawn bracket marks in dusty red and olive. - **Calibration HUD:** fine corner brackets, rule marks, degree ticks, and probability readouts such as `P(A|B)`, `0.37`, `credible interval`, and `표본`. The Korean domain itself should be treated as an artifact: large, tactile, and partly refracted, with the dot-com rendered as a small registration stamp rather than a logo lockup. ## Prompts for Implementation Build a single-page, full-screen narrative experience where scrolling feels like operating an analog probability instrument. Use HTML/CSS/JS with no framework requirement. Load Google Fonts for `Noto Sans KR`, `Nunito Sans`, `Literata`, and `IBM Plex Mono`. Implement large viewport panels, CSS masks, blend modes, layered pseudo-elements, and subtle JS-driven scroll progress for HUD registration lines. Prioritize **slide-reveal** interactions: equations should slide out from under glass strips, annotation bands should uncover revised beliefs, and lens overlays should expose hidden curves as the user moves. Use animation to tell the story of uncertainty becoming legible: a prior starts blurred, evidence marks accumulate, layers align, then multiple outcomes remain unresolved at the end. Motion should be slow, tactile, and slightly imperfect, like a real projection table being adjusted by hand. Avoid CTA-heavy layouts, pricing blocks, stat-grid panels, generic dashboard widgets, centered SaaS hero sections, and testimonial modules. The design should not sell probability as a product; it should stage probability as an encounter. Let the final screen end with a quiet unresolved visual — ghost outcomes, lens flare, and one understated line of Korean copy — rather than a button wall. ## Uniqueness Notes 1. **Light-academia probability observatory:** Unlike the existing kakuritsu.com pop-art pastoral direction, this version uses quiet academic optics, paper, brass, and glass to make probability feel intimate and observational. 2. **HUD without sci-fi darkness:** The planned hud-overlay is treated as analog calibration equipment in daylight, avoiding the common dark dashboard, neon sci-fi, and corporate analytics patterns. 3. **Lens flare as epistemology:** Flares, blur, and refraction are not decoration; they represent measurement limits, partial evidence, and the distortion between prior belief and observed data. 4. **Layered acetates instead of cards:** The layout avoids the highly overused card-grid, centered, photography, corporate, warm-gradient, parallax, and mono patterns found in frequency analysis, preferring underused light-academia, hud-overlay, lens-flare, slide-reveal, layered-depth, and raw-authentic cues. 5. **Korean mathematical materiality:** The domain name `확률.com` becomes a tactile Korean artifact, balanced with Frutiger-clean labels and notebook marginalia rather than a generic logo/hero treatment. Chosen seed/style: aesthetic: light-academia, layout: hud-overlay, typography: frutiger-clean, palette: muted, patterns: slide-reveal, imagery: lens-flare, motifs: layered-depth, tone: raw-authentic