# Design Language for 확률.com ## Aesthetics and Tone 확률 (hwaglyul — "probability") inhabits a world where **grainy-textured opulence meets the primordial uncertainty of chance**. The visual direction draws from the physical artifacts of probability throughout history — worn bone dice from ancient Mesopotamia, cracked tortoise shells used in Shang Dynasty divination (卜, bok), the oil-stained velvet of Renaissance gambling houses, the heavy brass mechanisms of early mechanical calculators. This is not the clean mathematical abstraction of probability theory on a whiteboard; this is the **tactile, granular, almost archaeological** encounter with randomness as it has been physically embodied across millennia. The tone is **opulent-grand** — sumptuous yet weathered, like discovering a forgotten cabinet of curiosities in a Baroque palace. Every surface carries film grain, noise, and subtle imperfection. Organic blob-like forms — reminiscent of ink bleeding through parchment, or the irregular shapes of knucklebones (astragali) used for ancient divination — float beneath and around content, lending the composition a breathing, **living unpredictability**. The aesthetic merges the gravitas of a medieval scriptorium with the strange beauty of probability distributions rendered as erosion patterns on stone. The atmosphere should feel like entering a dimly lit exhibition hall in a natural history museum: reverent silence, warm amber lighting on glass cases containing ancient randomness devices, the smell of old wood and polished brass. Digital grain overlays unify every element, as if the entire interface has been printed on hand-pressed paper and then scanned back into existence. ## Layout Motifs and Structure The site uses a **broken-grid** layout — elements deliberately misaligned, overlapping, and shifted from expected positions, mirroring the fundamental unpredictability that probability describes. No two content blocks share the same alignment axis. Text panels overlap image regions by 15-30px. Decorative organic blobs bleed across grid boundaries, dissolving the rigid structure from within. **Spatial Architecture:** - **The Shattered Grid:** A CSS Grid base of 12 columns with `grid-template-columns: repeat(12, 1fr)` and 20px gaps, but every placed element uses irregular `grid-column` spans that overlap neighboring cells. A hero text block might span columns 2-8 while a decorative element spans columns 6-11, creating deliberate collision. Rows use `grid-auto-rows: minmax(80px, auto)` with explicit row placement that breaks the expected top-to-bottom reading order. - **Tilted Containers:** Key content blocks are wrapped in containers rotated `transform: rotate(-1.2deg)` to `rotate(2.5deg)`, with their inner content counter-rotated to remain readable. This creates a subtle visual tension — the frames are crooked but the words within are level, like paintings hung carelessly in a magnificent hall. - **Floating Strata:** Three z-index layers create depth without parallax scrolling. Layer 0 (z-index: 0): the grainy parchment background with color-shifting organic blobs. Layer 1 (z-index: 10): primary content panels with `backdrop-filter: blur(2px)` on semi-transparent warm backgrounds. Layer 2 (z-index: 20): decorative SVG line-work (probability curves, dice outlines, constellation-like node graphs) that drifts slowly via CSS animation, overlaying content at low opacity (8-15%). - **Negative Space as Statement:** Between major content sections, there are expansive breathing zones (40vh minimum) where only the grainy background and a single drifting organic blob are visible. These voids represent the unknown — the unresolved probability space between observed events. - **No Centering:** Nothing is horizontally centered. Every element hugs either an irregular left margin (ranging from 8vw to 18vw) or an irregular right margin. This asymmetry is deliberate and consistent — the eye is never allowed to rest on a predictable axis. ## Typography and Palette **Display Headings:** "Cormorant Garamond" (Google Fonts, weights 300, 500, 700) — an ornate, high-contrast serif with delicate hairlines and dramatic thick strokes that evokes 18th-century probability treatises and Enlightenment-era scientific publishing. Used at `clamp(2.4rem, 6vw, 5.2rem)` with `letter-spacing: -0.03em` and `line-height: 0.92`. Color: Aged Ivory (#F2E8D5) on dark sections, Umber Depth (#2B1810) on light sections. `font-feature-settings: 'liga' 1, 'onum' 1` for old-style numerals, reinforcing the antiquarian character. **Body Text:** "IBM Plex Mono" (Google Fonts, weights 300, 400, 500) — a monospaced typeface that brings clinical precision into tension with the ornate headings. The mono rhythm of equal-width characters mirrors the discrete, countable nature of probability outcomes. Used at `clamp(0.85rem, 1.1vw, 1.05rem)` with `line-height: 1.75` and `letter-spacing: 0.02em`. Color: Warm Stone (#A89279) for secondary text, Parchment (#E8DCC8) for primary body text on dark backgrounds. **Accent / Navigation:** "DM Sans" (Google Fonts, weights 400, 500, 700) — a clean geometric sans-serif used exclusively for small labels, navigation hints, and metadata. All-uppercase with `letter-spacing: 0.18em` and `font-size: clamp(0.65rem, 0.8vw, 0.75rem)`. Color: Tarnished Gold (#B8963E). **Color Palette (warm-earthy):** | Role | Name | Hex | Usage | |------|------|-----|-------| | Background Primary | Charred Walnut | #1A0F0A | Main dark background, deep burnt umber-black | | Background Secondary | Scorched Earth | #2B1810 | Content panel backgrounds, dark cards | | Surface | Aged Parchment | #E8DCC8 | Light content panels, contrast sections | | Text Primary | Dust Ivory | #F2E8D5 | Headings and primary text on dark | | Text Secondary | Warm Stone | #A89279 | Body text, captions, metadata | | Accent Primary | Tarnished Gold | #B8963E | Links, navigation, interactive highlights | | Accent Secondary | Oxidized Copper | #6B8F71 | Secondary accents, decorative line-work | | Accent Tertiary | Dried Blood | #8B3A3A | Sparse emphasis moments, hover states | | Blob Tint 1 | Amber Haze | #D4A54A | Organic blob fill at 12% opacity | | Blob Tint 2 | Burnt Sienna Fog | #A0522D | Organic blob fill at 10% opacity | All colors are chosen for their warm-earthy, desaturated quality. No pure whites, no saturated primaries. Every hue suggests age, oxidation, and material transformation. ## Imagery and Motifs **Organic Blobs as Probability Clouds:** The signature visual motif is large, slow-morphing SVG blobs (using `` on `d` path attributes with 20-40 second morph cycles) that represent probability density distributions in abstract form. These blobs use `fill` colors from the Amber Haze and Burnt Sienna Fog palette entries at very low opacity (8-15%), with `filter: url(#grain)` applied to give them a textured, particulate appearance. Each blob's shape subtly suggests a different probability distribution — one is vaguely bell-curved (Gaussian), another has a long tail (Pareto), a third is bimodal with two humps. They drift across the background at `animation: drift 60s ease-in-out infinite alternate` speeds, never repeating the same position. **Film Grain Overlay:** A full-viewport `` element or SVG `` with `feTurbulence` (type="fractal", baseFrequency="0.65", numOctaves="4") composited via `feColorMatrix` to produce monochromatic warm-toned noise. This grain overlay sits at z-index: 100 with `pointer-events: none` and `opacity: 0.08`, unifying the entire page under a single textural language. The grain pattern regenerates every 100ms for a subtle film-projector flicker effect. **Astragali Scatter:** Small SVG renderings of knucklebone/astragalus shapes (the original dice, used in Greek and Roman probability games) scattered in the negative-space breathing zones. These are drawn with thin strokes (1.5px) in Tarnished Gold (#B8963E) at 20% opacity, rotated to random angles. On scroll, they gently rotate an additional few degrees via `scroll-triggered` animation (IntersectionObserver, threshold 0.3). **Probability Curve Etchings:** Decorative SVG paths tracing classic probability distributions — bell curves, Poisson distributions, exponential decay curves — rendered as if etched into copper plate. These use `stroke-dasharray` and `stroke-dashoffset` animation to draw themselves on-screen as the user scrolls to their section, completing over 2.5 seconds. Stroke color: Oxidized Copper (#6B8F71) at 40% opacity, `stroke-width: 1.2px`, with a slight `filter: drop-shadow(0 0 3px rgba(107, 143, 113, 0.3))` glow. **Abstract-Tech Node Diagrams:** Sparse networks of connected dots (4px circles) linked by thin lines (0.8px), representing Bayesian networks or Markov chain state diagrams. These sit in the floating strata (Layer 2) and drift slowly. Nodes pulse with a gentle `opacity` oscillation (0.15 to 0.35, period 4-8 seconds, staggered start times). Connection lines use `stroke-dasharray: 3 6` for a dashed, technical appearance. All rendered in Warm Stone (#A89279) at base 20% opacity. **Tortoise Shell Crack Patterns:** In one or two key transitional zones, SVG crack patterns (irregular branching lines) reference the ancient Chinese practice of pyromantic divination — heating tortoise plastrons until they cracked, then reading probability from the fracture patterns. These cracks are drawn with variable `stroke-width` (0.5px to 2px) in Dried Blood (#8B3A3A) at 15% opacity, animated with slow `path-draw-svg` reveal over 4 seconds. ## Prompts for Implementation Build 확률.com as a **single-page, full-screen narrative experience** — a vertical descent through the material history and philosophical weight of probability, rendered as an opulent, grain-textured, broken-grid composition. There are no CTA buttons, no pricing blocks, no stat-grids, no testimonial carousels. The entire page is a contemplative scroll through layered visual poetry about chance and uncertainty. **Opening sequence (first 100vh):** The page loads to Charred Walnut (#1A0F0A). After 200ms, the grain overlay activates with a subtle fade. At 400ms, the first organic blob fades in at the lower-right quadrant, already mid-morph. At 800ms, the site title "확률" appears at the left margin (12vw from left, 35vh from top), set in Cormorant Garamond at `clamp(4rem, 10vw, 8rem)`, weight 300, color Dust Ivory (#F2E8D5). The title emerges via a morphing clip-path animation — a blob-shaped mask that expands organically over 1.8 seconds (CSS `clip-path` animated via `@keyframes` with multiple polygon/ellipse states). Below the title at 600ms delay, a subtitle in IBM Plex Mono 300 reads a single Korean phrase about probability in small, tracked-out type. A second blob begins morphing in the upper-left at 1.2 seconds. **Content sections (scrolled experience):** Each content section is a broken-grid composition. Text panels are positioned at irregular margins. Content blocks use `background: rgba(43, 24, 16, 0.75)` with `backdrop-filter: blur(4px)` and `border: 1px solid rgba(184, 150, 62, 0.12)` — creating the impression of viewing through smoked glass. Every panel has micro-rotation (random between -1.5deg and 2deg). Morph animations on blob shapes trigger when sections enter the viewport (IntersectionObserver, rootMargin: "-10%"). Each section introduces one probability distribution curve etching that draws itself on entry. **Transitions between sections:** The 40vh breathing zones between content use only the grainy background with 1-2 drifting organic blobs and scattered astragali SVGs. As the user scrolls through these voids, the background color subtly shifts via CSS custom properties — from Charred Walnut to a slightly warmer `#221510` and back — using `scroll-triggered` JavaScript that updates `--bg-hue-shift` based on scroll position. **Interactive morph moments:** Two or three key moments where hovering over an organic blob causes it to morph more rapidly (transition duration drops from 20s to 3s) and temporarily increase opacity from 12% to 25%. The blob seems to "respond" to attention, embodying probability's observer-dependent nature. Cursor proximity detection via `mousemove` event listener calculates distance from cursor to blob center, with morph speed inversely proportional to distance. **Typography rhythm:** Korean text (확률, 가능성, 우연, 필연 — probability, possibility, chance, necessity) appears as large display headings in Cormorant Garamond. Explanatory passages in IBM Plex Mono are indented irregularly and set in shorter line-lengths (max 42ch) to create a poetic, fragmented reading rhythm. DM Sans labels mark section transitions with understated all-caps tags like "DISTRIBUTION" or "CONVERGENCE" in Tarnished Gold. **Closing sequence (final 100vh):** The grain overlay opacity increases from 0.08 to 0.15 over the final scroll distance. All organic blobs converge toward the center of the viewport, their morph cycles synchronizing. The final text reads a single line — centered for the first and only time — in Cormorant Garamond weight 700 at maximum clamp size. The abstract-tech node diagrams in the floating strata increase their pulse opacity to 0.5, as if the probability network is crystallizing into certainty. Then everything slowly fades to the grain overlay alone over 3 seconds of scrolling, leaving only warm noise on Charred Walnut — pure entropy. **Technical notes:** - All animations use `will-change: transform, opacity` and `transform: translateZ(0)` for GPU acceleration - Organic blob morphing uses pre-calculated SVG path keyframes (6-8 states per blob) cycled via CSS animation or SMIL `` - Grain overlay uses a 256x256 repeating tile (generated once on canvas, applied as CSS `background-image`) animated with `background-position` shifts every 100ms for flicker, avoiding continuous canvas redraws - Total page weight target: under 150KB (no raster images, all SVG and CSS) - No JavaScript frameworks — vanilla JS only for IntersectionObserver callbacks and cursor proximity detection **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial sections, hero image photography, centered symmetric layouts, parallax scroll effects, gradient backgrounds, corporate feel, clean/minimal aesthetic. ## Uniqueness Notes 1. **Broken-grid with micro-rotation as uncertainty metaphor:** No other design in this collection uses CSS Grid with deliberately overlapping placements combined with per-element random micro-rotation (transform: rotate) where the misalignment itself carries thematic meaning — the impossibility of perfect prediction. The layout literally embodies probability's refusal to conform to deterministic grids. 2. **Organic blob morphing as probability density visualization:** While organic-blobs appear in ~3% of designs, no other design uses them as abstract representations of specific probability distributions (Gaussian, Pareto, bimodal) with morph animations that transition between distribution shapes. The blobs are not decorative — they are the subject matter rendered as living geometry. 3. **Tactile grain archaeology vs. kakuritsu.com's clean mathematics:** The sibling domain kakuritsu.com treats probability through generative-mathematical visualization on clean backgrounds with chalk-like aesthetic. 확률.com takes the diametrically opposite approach: probability as a physical, archaeological artifact — worn bone dice, cracked tortoise shells, tarnished brass. The grainy-textured, warm-earthy palette creates a museum-of-curiosities atmosphere that has no counterpart in the collection. 4. **Astragali and pyromantic crack patterns as cultural motifs:** These specific historical probability artifacts (Greek knucklebone dice and Shang Dynasty divination cracks) have never appeared in any other design. They ground the abstract concept of probability in tangible human history, creating imagery that is both visually distinctive and intellectually rich. 5. **Opulent-grand tone applied to mathematical concept:** Most designs treating mathematical or scientific topics default to clean, clinical, or tech-forward aesthetics. This design deliberately applies Baroque opulence — gold accents, rich darkness, ornate serif typography — to probability theory, creating an unexpected and memorable tonal collision. **Seed/Style:** grainy-textured, broken-grid, mono, warm-earthy, morph, organic-blobs, abstract-tech, opulent-grand **Avoided overused patterns:** parallax scrolling (98%), photography imagery (99%), full-bleed layout (97%), corporate aesthetic (97%), warm gradient palette (67%), centered layout (58%), friendly tone (46%), stagger animation (42%). Instead used broken-grid (5%), grainy-textured (1%), warm-earthy (1%), organic-blobs (3%), opulent-grand (4%), morph (8%), abstract-tech (3%).