# Design Language for hwaklyul.com ## Aesthetics and Tone hwaklyul.com (확률, *probability* in Korean) is a site that sits at the intersection of impermanence and mathematical certainty — the wabi-sabi understanding that beauty lives in incompleteness, asymmetry, and the acceptance that every outcome is only ever a distribution, never a guarantee. The aesthetic is **wabi-sabi imperfect ceramic**: the visual language of a Japanese potter's journal, pages stained with iron oxide, margins annotated with pencil geometry — but the geometry is Gaussian curves, not botanical flourishes. The tone is **dreamy-ethereal**: the feeling of early-morning fog over a stone garden, where shapes resolve slowly and nothing is fully sharp. Every element breathes — negative space is not emptiness but *ma* (間), the meaningful interval between things. Animations are slow, tidal, governed by ease-in-out curves that feel like breath rather than mechanics. The site is neither a product page nor a portfolio. It is an **essay in stone and probability** — a meditation on chance, written by someone who has apprenticed under a master raku ceramicist and also understands Bayes' theorem. Content reads like marginalia in a scholarly notebook: brief, precise, wondering. No urgency. No calls to action. No urgency. The page rewards patience. Color temperature reads cool-to-neutral: the palette is analogous in the grey-sage-stone range, with a single warm accent — the color of iron-red glaze dripping down the side of a tea bowl — used sparingly, only where meaning demands it. ## Layout Motifs and Structure The primary layout is **masonry** — but masonry as it appears in an actual stone wall, not a Pinterest grid. Columns are unequal in width: a primary column at 58% and a secondary column at 34%, separated by a 8% gutter that functions as the *ma* interval. Blocks settle into the grid the way stones settle: their bottom edges are irregular, their heights determined by content weight, never padded to match neighbors. **Macro composition — single vertical scroll, four movements:** 1. **Opening Stone** — Full-viewport entry. A single haiku-length phrase in Jost Light centered in vast negative space, beneath which a 1px horizontal rule in `--glaze-iron` slowly draws itself left-to-right over 2.4 seconds on load. Below the rule, the site title in tiny all-caps tracking-widest. 2. **The Probability Garden** — The first masonry section. Three to five content blocks of varying height (180px, 320px, 240px, 280px, 200px), staggered in the two-column masonry. Each block is a **fragment**: a short thought, a diagram, a raku-fired metaphor for randomness. Blocks have asymmetric padding — more air at top than bottom, more at left than right — honoring wabi-sabi asymmetry. 3. **The Scattered Pages** — A looser masonry passage where blocks are not flush to any grid edge. Small blocks float with gentle `translateY` offsets (–8px to +12px), as if they have been laid on a table rather than typeset. Each block's border animates on scroll-enter: a single side at a time, drawing itself in over 0.6s in the sequence top → right → bottom → left, with a 150ms gap between each side. This is the **border-animate** pattern — used here as the primary reveal mechanic, replacing the ubiquitous fade-in-up. 4. **Colophon Stone** — A single narrow column (480px max-width, centered) holding closing text. The closing text ends mid-sentence, followed by an em dash and silence — like a raku bowl with an intentional crack. **Spatial logic:** Minimum vertical rhythm unit is 24px. All spacing is multiples of this unit. Horizontal margins are generous: 12vw on large screens, 6vw on tablet, 4vw on mobile. The masonry columns collapse to single-column at 768px, but the asymmetric padding and block-height variation survive. **No navigation bar.** No sticky header. A small domain name mark in the upper-left, 11px, tracking-widest, opacity 0.4 — just present enough to orient, not present enough to demand. ## Typography and Palette **Typography (all Google Fonts, verified):** - **Primary display / headings:** [Jost](https://fonts.google.com/specimen/Jost) — weight 100 (Thin) for large display phrases, weight 300 (Light) for section titles. Jost is the geometric sans of choice: a Futura-lineage face designed by Owen Earl with optically corrected circular forms. At weight 100, set at `clamp(3.5rem, 8vw, 7.5rem)`, it reads as engraved stone — the geometry of the letterform echoing the geometry of the raku bowl's rim. - **Body / fragment text:** [Jost](https://fonts.google.com/specimen/Jost) — weight 300, size `clamp(0.9rem, 1.1vw, 1.05rem)`, line-height 1.85. The single-family discipline (inspired by the Futura-geometric typographic tradition) gives all text a unified probability-diagram quality: everything belongs to the same system of measurements. - **Scholarly annotations / marginalia:** [Noto Serif KR](https://fonts.google.com/specimen/Noto+Serif+KR) — weight 300, used only for Korean-language fragments, small Korean numerals, or the occasional hangul character used as a decorative structural element. The Korean letterforms have an inherent wabi-sabi geometry — their strokes end at irregular angles, their negative spaces are never symmetrical. - **Mathematical / probability notation:** [Space Mono](https://fonts.google.com/specimen/Space+Mono) — used exclusively for probability expressions, numeric fragments (`P(x) = 0.37`), and single-line equations. Never used for body text. Creates a deliberate type register shift — the monospace grid against the humanist curves of Jost. **Palette — analogous in the grey-sage-stone range:** ``` --stone-deep: #2C2C28 /* near-black with warm undertone — base surface */ --stone-mid: #4A4A42 /* dark graphite — body text on light backgrounds */ --stone-fog: #9B9B8E /* mid grey-sage — secondary text, borders */ --parchment: #EAE8DF /* warm off-white — primary background */ --parchment-cool: #E0E2DC /* cool parchment — alternate block backgrounds */ --sage-pale: #C8CEBC /* muted sage — subtle block fills, hover states */ --glaze-iron: #8B3A2A /* iron-red raku glaze — sole warm accent */ --glaze-iron-dim: #8B3A2A33 /* iron-red at 20% opacity — border-animate color */ ``` All colors are analogous: the grey-sage range is an analogous arc from warm grey through cool grey through pale sage. The iron-red glaze is the single deliberate break — isolated, never used more than three times per page, always carrying semantic weight (a final word, an accent border, a ceramic-crack SVG line). **Color application:** - Page background: `--parchment` - Primary text: `--stone-mid` - Display text (large Jost Thin): `--stone-deep` - Borders (resting state): `--sage-pale` at 0.6 opacity - Borders (border-animate reveal): `--glaze-iron-dim` drawing to full `--glaze-iron` on completion - Block backgrounds (alternate): `--parchment-cool` - Annotations / marginalia: `--stone-fog` ## Imagery and Motifs **Nature-elements imagery — not photography (photography at 90% corpus frequency; abstained entirely).** All visual elements are inline SVG, rendered in `--stone-fog` with `--parchment` fill, using 1px strokes and no gradients. **The nature-element vocabulary:** 1. **Raku crack lines** — Fine SVG polylines that trace the irregular glaze-crack patterns of raku-fired ceramics. Used as horizontal dividers between masonry blocks. Each crack is unique: procedurally defined with 4–7 waypoints, no two the same. Color: `--glaze-iron` at 60% opacity. 2. **Water ripple rings** — Concentric ellipses, slightly rotated off-horizontal (7° to 12°), representing the probability distribution of a stone dropped in still water. Used as background texture in the opening stone section. Three rings, strokes 0.5px, `--stone-fog` at 25% opacity. 3. **Stone weight marks** — Abstract ovoid forms, 32×20px, in `--stone-fog` at 15% opacity. Scattered in the margins of masonry blocks, three to five per section. They look like the shadows of smooth river stones placed on the page. 4. **Probability branch** — A single branching SVG structure (like a dried umeboshi branch in ink, but rendered as a geometric tree of probability outcomes: a root splits into two branches, each splits into two more). Used once, in the Probability Garden section, as a large (320px wide) background illustration behind a fragment block. 5. **Book-scholarly motifs** — Small inline SVG glyphs used as section ornaments: an open book rendered in 3 straight lines (spine + two covers, like a Mondrian book), a single ruled line with a pencil-tick annotation mark, a tiny grid of dots (3×3) suggesting both graph paper and decision matrices. These appear as 24×24px marks between blocks or at the start of annotation text. 6. **Hangul probability characters** — The Korean character 률 (rate/probability, from 확률) used as a large decorative background element in the colophon section. Rendered in `--stone-fog` at 8% opacity, at 280px font-size, centered behind the closing text. Uses Noto Serif KR weight 900 for maximum stroke presence. **No photography. No stock icons. No emoji. No gradient fills on any element.** ## Prompts for Implementation **The story being told.** A scholar of probability theory keeps a ceramic journal — not a paper one. Each thought is pressed into clay as a text-impressed tablet, fired in a raku kiln in the courtyard. The site is the digital equivalent of spreading those tablets on a stone floor and reading them in the morning mist. The visitor is not a customer. They are a reader who stumbled on the studio. **Full-screen narrative entry:** The opening viewport is nearly empty. `--parchment` background. One line of Jost Thin, weight 100, set at `8vw`, centered: > *모든 것은 확률이다* > *(Everything is probability)* Below it, after a 400ms delay, a 1px horizontal rule in `--glaze-iron` draws left-to-right using a CSS clip-path animation over 2.4s with `cubic-bezier(0.4, 0, 0.2, 1)`. Below the rule, the domain mark in Jost Light 11px tracking-[0.3em] all-caps, opacity building from 0 to 0.4 over 0.8s. **Border-animate as the primary reveal pattern (not fade-in-up):** Every masonry block uses border-animate on scroll-enter. Implementation: each block has `position: relative` and four pseudo-element overlay divs (or a single SVG rect with `stroke-dashoffset`). On IntersectionObserver trigger (threshold: 0.15), CSS custom property `--draw-progress` animates from 0 to 1. The border draws: top edge (0–25% of animation), right edge (25–50%), bottom edge (50–75%), left edge (75–100%). Duration: 0.6s per side = 2.4s total per block. Easing: `ease-out`. The border color is `--glaze-iron`. After the border completes (2.4s), the block content (text) fades in over 0.4s. This means each block's content is hidden behind `opacity: 0` until its border has fully drawn itself. **Masonry implementation:** Use CSS `columns: 2` with `column-gap: 8vw` for the masonry layout. Each block uses `break-inside: avoid`. Block heights are set by content — no artificial height constraints. On screens ≤ 768px, `columns: 1`. The deliberate height variety (short aphorism blocks, medium fragment blocks, longer annotation blocks) creates the wabi-sabi stone-wall visual rhythm naturally. **Asymmetric padding on blocks:** Each masonry block has padding defined as: `padding: 2.5rem 1.5rem 1.25rem 2rem` — more at top and left than bottom and right. This is not accidental; it mirrors the way a potter's thumb leaves deeper impressions on one side of a bowl rim. **Raku crack SVG dividers:** Between the Probability Garden and Scattered Pages sections, insert a full-width SVG crack divider. The crack SVG uses a `stroke-dasharray / stroke-dashoffset` animation triggered on scroll-enter, the crack line drawing itself across the page over 1.8s. Color: `--glaze-iron` at 60% opacity. **Micro-motion principles:** - No transform animations faster than 0.4s - No opacity animations faster than 0.3s - All transitions use `cubic-bezier(0.4, 0, 0.2, 1)` (Material motion standard, but applied at wabi-sabi tempos) - Hover states on blocks: `--sage-pale` background transition over 0.5s, 1px `--stone-fog` solid border fading in over 0.3s - No bounce. No spring. No elastic. Motion is tidal, not mechanical. **Typography implementation:** - Load Jost with `font-display: swap`, weights 100 and 300 only - Load Noto Serif KR with weight 300 and 900 only - Load Space Mono with weight 400 only - All text uses `font-feature-settings: "kern" 1, "liga" 1` - Korean text elements: `word-break: keep-all; overflow-wrap: break-word` - Mathematical fragments in Space Mono: `font-size: 0.85em; letter-spacing: 0.04em` **No hero CTA button. No pricing section. No testimonials grid. No statistics. No "Get Started" anywhere.** The page ends with the colophon stone — a single short sentence that trails off mid-thought, an em dash, and 80px of silence before the page edge. ## Uniqueness Notes 1. **Border-animate as the sole reveal mechanic, used at 0% corpus frequency.** Every other site in the registry defaults to fade-in-up (scroll-reveal). hwaklyul.com replaces that entirely with a four-sided sequential border-draw, making the border itself the storytelling device — each block announces itself by building its own frame before letting its content appear. This is unique in the entire corpus. 2. **Single-family futura-geometric typography (Jost) as the only Latin face, with deliberate register breaks via Noto Serif KR and Space Mono.** The corpus uses futura-geometric at only 4% and typically pairs it with a contrasting serif. Here, Jost carries everything from 8vw display down to 11px footer marks — the discipline of a single geometric system held consistent throughout, broken only by the specific semantic registers of Korean characters and mathematical notation. 3. **Wabi-sabi masonry — stone-wall rhythm from genuine content-height variation, not grid normalization.** The corpus uses masonry at under 5% frequency and typically fills it with uniform card heights. Here, blocks have intrinsically irregular heights (120px to 380px range) driven by content length, and the asymmetric padding (more top-left than bottom-right) is a design specification, not a padding shorthand. The visual rhythm is uneven by intention. 4. **Analogous grey-sage-stone palette with a single iron-red raku glaze accent, breaking from the corpus's 93% warm / 81% gradient dominance.** The palette is cool, quiet, and deliberately non-commercial. The iron-red appears only where something requires attention — the first horizontal rule, the border-animate reveal color, the crack SVG — never decoratively. No gradient anywhere on the page. 5. **Nature-elements imagery delivered entirely as SVG inline illustration (raku cracks, water ripples, stone weight marks, probability branches) with zero photography.** Photography appears in 90% of the corpus. This site abstains entirely, using instead a nature vocabulary that is simultaneously geological, ceramic, and probabilistic — an original intersection not present in any other registry entry. **Chosen seed from assignment:** aesthetic: wabi-sabi, layout: masonry, typography: futura-geometric, palette: analogous, patterns: border-animate, imagery: nature-elements, motifs: book-scholarly, tone: dreamy-ethereal **Avoided overused patterns (from frequency analysis):** hand-drawn aesthetic (65%), editorial aesthetic (47%), warm/gradient palette (93%/81%), photography imagery (90%), vintage motifs (51%), fade-in-up scroll-reveal (corpus default), centered layout (corpus dominant).