# Design Language for 확률.com
## Aesthetics and Tone
확률 (hwakyul) means "probability" — the mathematics of chance, the fog before certainty, the moment between not-knowing and knowing. This site inhabits that threshold as a **raw editorial experience**: a mountain seen through frosted glass, its edges uncertain, its mass undeniable. The aesthetic is **editorial-raw**: not polished magazine spreads, not cleaned-up data dashboards — instead the aesthetic of a field journal left on a rocky summit, pages slightly damp, handwriting and type coexisting without hierarchy.
The **raw-authentic tone** means imperfection is intentional. Hexagonal cells in the honeycomb grid do not snap perfectly to the viewport — they breathe slightly, their gaps uneven in ways that feel geological rather than programmatic. The mountain-landscape motif runs through everything: vertical stratification, the weight of compressed stone, the cold translucence of glacial ice at altitude. Color relationships are cold, lunar, and crystalline — nothing glows warmly here. Everything is lit by diffuse high-altitude light.
The site is not about probability as statistics. It is about probability as phenomenology: the experience of standing before an outcome that has not yet resolved. The 3D-render imagery serves this — sculpted mountain topographies rendered with no textures, just pure geometry catching cold light, existing halfway between real terrain and mathematical surface.
## Layout Motifs and Structure
The primary structure is a **hexagonal honeycomb grid** — not a decorative background pattern, but the actual layout engine. Each content cell is a hexagon. Hexagons tile without gaps, but unlike rectangular grids, they create visual diagonals and organic clustering that fight the tyranny of the 90-degree axis.
**Honeycomb architecture:**
- **Viewport root:** A full-bleed hexagonal tile field, rendered in CSS using `clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)`. Each hex cell is approximately 280px wide × 242px tall at desktop. The tiles are offset alternately (odd rows shift right by 50% of hex width) creating true honeycomb tessellation.
- **Large focal hex (top-center):** One oversized hexagon — 560px wide — anchors the composition at the top-center. This is the hero cell. It contains the primary 3D-render: a faceted mountain topography in three-quarter view, rendered in cold frost palette against near-black void. The mountain geometry has no textures — pure polyhedric faces catching light directionally.
- **Narrative hexes (flowing down and right):** Six medium hexes (280px) surround the focal hex. Each carries a short fragment of text — not explanations, but aphorisms or raw data points about probability in nature: "3 in 100,000 summits are attempted without supplemental oxygen", "A coin has no memory of its last fall", "Ice forms at exactly 0°C. Decisions do not." These are typeset in raw sans-serif, left-aligned within the hex cell, with significant internal padding so type floats in frosted space.
- **Small accent hexes:** A scatter of 140px hexes fills gaps at the grid edges, containing: a single Korean character (확 · 률), a numeric fragment (0.000037), or a pure frosted-glass surface (empty, translucent white).
- **No rectangular containers anywhere.** Every element — nav, footer strip, section divider — uses hex or hex-derived geometry. Even the navigation is a horizontal row of hexagonal pill-shaped cells.
**Scrolling behavior:** The grid scrolls vertically. As you scroll, hex cells parallax at three different rates (slow/medium/fast, no more than ±20px difference — subtle, geological, not dramatic). The overall impression is of looking down at a terrain model that has depth within the flat plane.
**Negative space:** Gaps between hexagons expose the background: a deep translucent indigo void with a very fine grid of light — like graph paper seen through 10cm of glacier ice. The background never fully disappears; it is structurally part of the layout.
## Typography and Palette
**Type Stack (Google Fonts only — eclectic-hybrid):**
- **Primary Display — `Playfair Display`** (weight 700, 900, italic): Used for the wordmark `확률` at 96–120px, weight 900, letter-spacing -0.03em. Also for section-break quotes at 48px italic. The sharp serif contrast of Playfair creates tension against the angular hex geometry — organic letter stress meeting crystalline structure. It reads as literary precision against mathematical form.
- **Secondary — `Space Grotesk`** (weight 400, 500, 700): The workhorse. All body fragments, aphorisms, and data snippets inside hex cells. 15–18px, line-height 1.5, letter-spacing 0.01em. Space Grotesk has mild geometric character but with humanist irregularities that keep it from feeling cold or mechanical — essential for the raw-authentic tone.
- **Accent Mono — `JetBrains Mono`** (weight 400, 700): For numeric probability values, coordinates, altitude data. `0.000037 · 8848m · p(summit) = 0.31`. Set at 13–14px in hex cells, uppercase, letter-spacing 0.08em. The monospace anchor provides the mathematical legitimacy without overwhelming the literary type.
- **Korean — `Nanum Myeongjo`** (weight 400, 700): For isolated Korean characters in accent hexes and any Korean-language text. The serif stroke contrast echoes Playfair Display, creating typographic kinship between English literary and Korean scholarly registers.
**Palette — translucent-frost:**
- `#E8EEF4` — Glacier white: primary background tint for frosted hex cells. Near-white with a cold blue cast, not warm cream.
- `#C2D0DE` — Snowfield: secondary cell background, slightly more saturated cold blue-grey. Used for mid-tone hex cells.
- `#8BA8C4` — Alpine sky: accent color for borders, thin hex outlines, and the translucent frost glaze on the 3D mountain render. At 60% opacity it becomes the glassmorphism layer.
- `#1B2D42` — Deep crevasse: primary text color. A dark navy-blue that is not pure black — it carries the coldness of deep glacial ice in shadow.
- `#0D1B2A` — Void dark: background behind hex grid. An almost-black navy. The graph-paper fine grid is rendered at `#1B2D42` at 8% opacity over this.
- `#D4E8F7` — Ice refraction: used for glow effects on 3D-render surfaces. A barely-there cold highlight.
- `#5B7FA6` — Altitude mist: mid-tone for secondary text, metadata, and inactive states. Cold mid-blue.
- `#F0F5FA` — Summit frost: pure cold near-white used for the wordmark and primary text on dark hex cells.
**No warm colors. No oranges, no reds, no yellows. The palette is entirely cold altitude spectrum.**
## Imagery and Motifs
**3D-render mountain geometry (primary imagery):**
All visual imagery is generated as inline SVG 3D-render simulations — not raster images, not photographs. The mountain topography is rendered as a **low-poly faceted mesh** where each face is a polygon with a specific flat fill computed from the cold palette. Faces pointing toward the cold light source (upper-left) are `#D4E8F7`; faces in shadow are `#1B2D42`; intermediate faces step through `#8BA8C4` and `#5B7FA6`. The result is a sculptural mountain reading as a 3D object without any real rendering engine.
**Mountain landscape motif system:**
1. **Summit silhouette (hero hex):** The large central hexagon contains the mountain as a full-bleed 3D faceted SVG. The summit pierces the top edge of the hex, cropped. Altitude data overlaid in `JetBrains Mono`: `8,848m · 27.988°N · 86.925°E`. No labels, no legends — just coordinates and number.
2. **Contour ripple animation:** The ripple pattern manifests as concentric hexagonal contour lines radiating outward from the mountain base in the hero cell. On scroll, these contour rings pulse outward slowly — `animation: ripple-hex 4s ease-out infinite`. The contour lines are `#8BA8C4` at 30% opacity, 1px stroke-width, no fill. This is the primary animation of the page and the primary expression of the "ripple" pattern.
3. **Topographic micro-texture:** Scattered across the frosted hex cell backgrounds, very faint topographic contour lines (ISO-style, `opacity: 0.06`, `stroke: #5B7FA6`) create the sense of hidden terrain beneath glass. Not visible at first glance — discovered on close inspection.
4. **Fragment icons:** Small hex accent cells contain iconographic fragments: a single triangle (representing a summit), a waveform (probability distribution), a circle with a single point (a single event in probability space). All icons are simple SVG — 2–4 paths maximum, cold palette, no fill gradients.
5. **Frost glassmorphism surface:** Each hex cell with content has a `backdrop-filter: blur(12px) saturate(0.8)` layer over the background, plus `background: rgba(232, 238, 244, 0.55)` — this creates the translucent-frost effect where the deep void background bleeds faintly through every content cell.
## Prompts for Implementation
Build 확률.com as a **single-page hexagonal terrain experience** — a descent through probability space rendered as high-altitude mountain topography seen through frosted glass.
**HTML architecture:**
```html
8,848m · p(summit) = 0.31
A coin has no memory of its last fall.
3 in 100,000 summits attempted without oxygen.
확
0.000037
```
**CSS hexagonal grid engine:**
```css
.honeycomb-field {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 0;
--hex-w: 280px;
--hex-h: calc(var(--hex-w) * 0.866);
}
.hex-cell {
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
width: var(--hex-w);
height: var(--hex-h);
background: rgba(232, 238, 244, 0.55);
backdrop-filter: blur(12px) saturate(0.8);
border: 1px solid rgba(139, 168, 196, 0.3);
transition: background 0.4s ease, transform 0.3s ease;
}
.hex-large {
width: calc(var(--hex-w) * 2);
height: calc(var(--hex-h) * 2);
}
/* Odd-row offset for honeycomb tessellation */
.honeycomb-row:nth-child(odd) { margin-left: calc(var(--hex-w) / 2); }
```
**Ripple contour animation:**
```css
@keyframes ripple-hex {
0% { opacity: 0.4; transform: scale(0.95); }
50% { opacity: 0.15; transform: scale(1.08); }
100% { opacity: 0; transform: scale(1.2); }
}
.contour-ripple > .ring {
position: absolute;
border: 1px solid #8BA8C4;
border-radius: 50%;
animation: ripple-hex 4s ease-out infinite;
}
.contour-ripple > .ring:nth-child(2) { animation-delay: 1.2s; }
.contour-ripple > .ring:nth-child(3) { animation-delay: 2.4s; }
```
**Low-poly mountain SVG approach:**
Build the mountain as an SVG `` mesh — approximately 40–60 triangular faces. Each face gets a `fill` value computed from its Y-position and surface normal approximation: top faces `#D4E8F7`, mid-shadow faces `#8BA8C4`, deep-shadow faces `#1B2D42`. No gradients, no blur — pure flat facets creating the illusion of 3D form through light logic. The mountain should read immediately as a geometrically precise, cold, mathematical mountain.
**Scroll behavior:**
Use IntersectionObserver to trigger `data-state="visible"` on hex cells as they enter viewport. On `visible`, cells transition: `opacity: 0 → 1, transform: translateY(20px) → translateY(0)` over 600ms. Stagger adjacent cells by 80ms. Do NOT use parallax — the geological depth illusion comes from the layered hex sizes and background grid, not from movement.
**Narrative structure (5 hex clusters):**
1. **Hero cluster:** Large mountain hex + 6 surrounding medium hexes with probability aphorisms. No scroll required.
2. **Descent cluster:** Hexes themed around probability distributions — normal curves drawn as SVG paths in accent color, raw numerical fragments.
3. **Terrain cluster:** Pure topographic expression — hex cells containing only contour-map fragments, altitude numbers, coordinate pairs.
4. **Encounter cluster:** Mountain landscape fragments — the moment of summit decision. Short Korean fragments: `불확실성은 지형이다.` (Uncertainty is terrain.)
5. **Resolution cluster:** A lone hexagon containing only: `확률: 알 수 없음.` (Probability: unknown.) Empty hex cells surround it on all sides — pure void.
**Typography implementation:**
```css
.wordmark { font-family: 'Playfair Display', serif; font-size: clamp(4rem, 10vw, 7.5rem); font-weight: 900; color: #F0F5FA; letter-spacing: -0.03em; }
.hex-body { font-family: 'Space Grotesk', sans-serif; font-size: 15px; color: #1B2D42; line-height: 1.55; }
.coord { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.08em; color: #5B7FA6; text-transform: uppercase; }
.korean-accent { font-family: 'Nanum Myeongjo', serif; font-size: 2.5rem; color: #8BA8C4; }
```
**AVOID:** Statistics dashboards, data tables, chart UI, CTA buttons, pricing hexes, numbered feature grids. This is not a SaaS product. It is a meditative experience of mathematical uncertainty rendered as mountain terrain.
## Uniqueness Notes
**Differentiators from the existing design catalog:**
1. **Hexagonal honeycomb as primary layout engine, not decoration.** The corpus uses hexagonal patterns as decorative backgrounds in approximately 4% of sites — almost always as a CSS background-image, never as the actual grid system for content. This site makes the hexagon the fundamental content container: every piece of text, every image, every navigation element lives inside a clipped hexagon. This is architecturally unprecedented in the catalog.
2. **3D-render imagery from inline SVG low-poly mesh — no raster, no photography.** The catalog's imagery is 87% photography-based. Even sites that use 3D elements (approximately 3% of catalog) use raster or video. This site renders its primary visual — a mountain — as a pure SVG polygon mesh using flat-face light simulation. The result reads as a 3D-rendered object without any render pipeline, achieving the "3d-render" imagery seed entirely in code.
3. **Translucent-frost palette: cold, non-warm, non-dark.** The catalog is 89% warm palette and 76% gradient. This site is exclusively cold — no warm tones anywhere, and no smooth gradients (only flat facets and frost glass). The translucent-frost palette occupies a gap in the catalog: not dark-mode-neon, not warm-editorial, not pastel — but specifically glacial cold clarity. This palette is essentially absent from the existing 557-site corpus.
4. **Ripple as concentric hexagonal contour lines, not circular waves.** The catalog uses ripple at 10% — almost always as circular CSS keyframe animations. Here, the ripple expresses as topographic contour lines pulsing outward from the mountain geometry in hexagonal concentric rings, integrating the animation pattern directly into the mountain-landscape motif.
5. **Raw-authentic tone through structural imperfection and mathematical aphorism.** Where editorial sites in the catalog use raw-authentic (approximately 4%) as a texture choice (grain overlays, hand-drawn borders), this site expresses raw-authentic through content strategy and geometric imperfection: unhexed gap sizes, probability fragments without explanation, Korean characters isolated without translation, altitude coordinates without labels. The rawness is epistemological, not cosmetic.
**Chosen seed:** `aesthetic: editorial, layout: hexagonal-honeycomb, typography: eclectic-hybrid, palette: translucent-frost, patterns: ripple, imagery: 3d-render, motifs: mountain-landscape, tone: raw-authentic`
**Avoided overused patterns (from frequency analysis):**
- Photography imagery (87% in corpus) — replaced with inline SVG 3D-render
- Warm palette (89%) — replaced with translucent-frost cold spectrum
- Gradient palette (76%) — replaced with flat faceted faces and frost glass
- Mono typography (74%) — replaced with eclectic-hybrid serif/grotesk/mono mix
- Parallax scrolling (73%) — replaced with IntersectionObserver stagger reveal