# Design Language for hwaklyul.com ## Aesthetics and Tone `hwaklyul.com` — *hwaklyul*, 확률, the Korean word for **probability** — is staged as **the recovered teaching portfolio of a fictional 1924 Dessau workshop devoted entirely to the study of chance**: a "Vorkurs für Wahrscheinlichkeit," a preliminary course where students were handed not clay and wire but **dice, urns, Galton boards, and a single humming relay-box**, and asked to *draw* probability the way other Bauhaus students drew a chair. The site behaves like a **portfolio sleeve of letterpressed lecture-plates** pulled from a flat archival drawer eighty years later: the paper has gone the warm brown of aged rag stock, the once-primary inks have dulled to a museum sepia, the corners are foxed, and someone has pencilled marginalia in a careful Bauhaus hand. The whole thing is **calm-serene (5% in the corpus)** — not the calm of a spa or a zen garden, but the **calm of a quiet studio at 4 p.m.**: the calm of someone who has made peace with uncertainty, who finds dice *restful*. Nothing flashes. Nothing urges. The page does not want anything from the visitor; it simply lays out, plate by plate, a way of seeing the world as a distribution. The governing aesthetic is **bauhaus (7% in the corpus, deliberately under-represented)** — but executed *aged*, not bright. Real Bauhaus design is loud primaries, hard geometry, sans-serif confidence. This is that grammar **after eighty years in a drawer**: the circle, the triangle, the square are still there, still load-bearing, still doing Kandinsky's color-shape assignments — but the red has gone to **oxblood-sepia**, the blue to **dusty slate**, the yellow to **toasted ochre**, and a fine **paper-grain bloom** sits over everything. The mood is *bauhaus-as-memory*: rigorous, calm, slightly faded, deeply confident in the idea that the right diagram can make any uncertainty legible. Inspiration touchstones: Herbert Bayer's universal-alphabet sketches gone brown at the edges; Joost Schmidt's exhibition posters reprinted on cheap stock; Moholy-Nagy's photograms reimagined as **probability-density photograms**; a 1920s Galton quincunx photographed in raking light; a Marey chronophotograph of a thrown die; the muted register of a colour-separation proof that never went to final press; the patient hand of a teacher who would rather you understood the binomial than memorised it. ## Layout Motifs and Structure The composition is a **sidebar (23% in the corpus — present but far from saturated, and here used in a way the corpus has not)** — specifically, a **persistent left-hand "lecture index" rail occupying the leftmost 280px (collapsing to a 56px gutter-spine below 900px)**, designed to read as the **printed contents-strip down the binding edge of the portfolio sleeve**. The rail is not navigation in the SaaS sense; it is a **syllabus**: eight numbered lecture-plates (00 Preliminaries · 01 The Coin · 02 The Urn · 03 The Quincunx · 04 The Tree · 05 The Long Run · 06 The Relay · 07 Colophon), each rendered as a Bauhaus list-item — a small **circle / triangle / square** glyph (the shape rotating per plate, Kandinsky-style), the plate number in oversized display digits, the title in lowercase universal-alphabet sans, and a **thin sepia rule that draws itself left-to-right** when its plate enters the viewport (the underline-draw motif, see Patterns). The currently-active plate's rule stays drawn and slightly thickened; the others sit as faint 0.5px hairlines. The rail has a paper-grain background one shade darker than the main field, with a single vertical 1px sepia rule on its right edge — the *binding stitch*. To the right of the rail, the **main field is a strict Bauhaus modular grid: a 6-column grid on a 24px baseline, gutters 24px, with an asymmetric weighting** — content blocks habitually occupy columns 1–4 or 3–6, never the full 1–6 except for the masthead band, so the page always reads slightly off-axis the way a Schmidt poster does. Each lecture-plate is **one full-viewport-height "plate"** stacked vertically: the visitor scrolls down through eight plates, ~800vh total, like turning over sheets in the portfolio. Within a plate, the canonical composition is **a large primitive shape (circle/triangle/square) anchored to one corner of the grid, a block of display-set title type set against it, a body-text column in the opposite quadrant, and one working diagram** (a coin-flip strip, an urn cross-section, a quincunx, a probability tree drawn as circuit-traces, a long-run convergence plot, a relay-ladder). The negative space between these is **deliberate and large** — `ma`-like breathing room, because a calm studio is mostly empty floor. Two structural rules enforced everywhere: **(1) every horizontal edge is a real Bauhaus rule** — 0.5px hairline, 1px standard, 3px emphasis, in sepia ink, never a soft shadow, never a gradient border; **(2) the only curves on the page are circles and arcs of circles** — no organic blobs, no flowing curves, no wave-forms; if something is round it is a *perfect* round, because that is the Bauhaus discipline, and chance, drawn properly, is made of perfect circles (the wheel, the coin, the orbit of the die). There are **no cards in the card-grid sense, no pricing blocks, no stat-grids, no CTA bands, no testimonial carousels**. The portfolio does not sell; it teaches. ## Typography and Palette **Typography — display-bold (7% in the corpus, intentionally under-represented), executed as Bauhaus-poster display, not as marketing-hero display.** Three Google Fonts families, used with workshop discipline: - **Archivo Black** (the display-bold voice — heavy, geometric, near-mono-width, the closest Google Fonts gets to a 1920s exhibition-poster sans). Carries the wordmark (`hwaklyul` set lowercase, 96px / 0.92 line-height / +1px tracking), all plate-numbers (the giant `00`–`07` digits, 140–200px, near-black sepia), all plate-titles (48–64px, lowercase, generous tracking). Used **big or not at all** — Archivo Black never appears below 32px. - **Space Grotesk** (the workhorse — a geometric grotesk with just enough quirk to feel hand-cut; weights 300, 400, 500). Carries every body paragraph (19px / 1.65 line-height, weight 400, max 64ch measure), the sidebar lecture titles (15px, weight 500, lowercase, +0.3px tracking), figure captions, the pencilled marginalia (rendered in 300-weight italic, slightly smaller, in a lighter sepia, as if jotted later). - **Spectral** (a single, restrained serif-revival accent — used *only* for the running mathematical glosses and the inline expressions: "P(A) = …", "the long run", binomial coefficients written out — set in 400 and 400-italic, 18px, because a serif italic is how a 1920s European textbook set its mathematics, and the contrast against the Bauhaus sans is the *point*). Spectral never sets a headline and never sets body copy; it is the voice of *the equation*, kept quietly apart. Type behaviour: lowercase everywhere in the display register (Bayer's universal-alphabet creed — no capitals); numbers are the **only** thing allowed to be enormous; line-lengths short; the baseline grid visible if you squint. Letter-spacing is positive on display, neutral on body, never negative. **Palette — sepia-nostalgic (4% in the corpus, deliberately under-represented) — a Bauhaus primary palette put through eighty years of drawer-aging.** Eight values, no more: - `#2b2017` — **bistre** (near-black warm brown; the primary ink, all heavy display type, the binding rule) - `#4a3826` — **walnut** (secondary ink; body text, hairline rules) - `#8a5a3c` — **oxblood-sepia** (the aged "red" — Kandinsky's square; the active-plate accent, the relay glow) - `#5e6b62` — **dusty slate** (the aged "blue" — Kandinsky's circle; the quincunx pegs, the tree-traces) - `#b08436` — **toasted ochre** (the aged "yellow" — Kandinsky's triangle; the highlight, the marginalia-pencil, the drawn-underline) - `#d9c7a8` — **rag** (mid paper; the main field background) - `#ece0c8` — **bone** (light paper; the sidebar rail is *darker* than this — wait, the rail is `#cdb992`, between rag and bistre, the *binding-edge shadow*) - `#cdb992` — **binding-edge** (the sidebar rail background — one notch darker than the field, like the shadowed gutter of a bound portfolio) Plus a near-white `#f6efe0` reserved exclusively for the rare "fresh" element — a single un-aged paper inset, used once, on the colophon, to say *this part was reprinted recently*. Pure black and pure white appear nowhere. Gradients appear only as the controlled **gradient-mesh density fields** described below — never as button fills, never as section backgrounds. ## Imagery and Motifs **Three motif families, in strict hierarchy: gradient-mesh (the atmospheric medium), circuit (the connective diagram language), and Bauhaus-primitive (the structural alphabet) — all drawn in CSS/SVG, zero photographs, zero raster.** **1. gradient-mesh (18% in the corpus) — reframed as *probability-density fields*, not as decorative blur.** Every lecture-plate carries, behind its diagram, **one soft multi-stop radial-and-conic mesh that *is* a probability distribution rendered as light**: plate 01 (the coin) shows a flat two-lobe mesh — two equal warm pools; plate 02 (the urn) a mesh that pools toward whatever proportion the urn holds; plate 03 (the quincunx) the canonical **bell curve as a 2-D mesh** — a single bright ridge of toasted-ochre fading symmetrically into rag on both sides; plate 05 (the long run) a mesh that **visibly tightens** as you scroll, the spread collapsing toward its mean. The meshes are built from layered `radial-gradient()` / `conic-gradient()` stops in the sepia palette at 12–30% opacity over the rag field, with the fixed paper-grain overlay (SVG ``, `baseFrequency≈0.85`, 4% opacity, `mix-blend-mode: multiply`) sitting on top so even the smoothest mesh has the tooth of old stock. They never use blue-purple SaaS-gradient hues; they live entirely in brown-ochre-slate. **2. circuit (8% in the corpus, deliberately under-represented) — reframed as *probability-graph traces*, not as silicon decoration.** The "circuit" motif here is the visual language of **right-angled traces, junction nodes, and a single relay** — but every trace is a **probability path**: the branches of a probability tree (plate 04) are drawn as PCB-style traces with rounded 90° bends, each branch labelled with its weight in Spectral italic, the nodes drawn as small filled circles (the Bauhaus circle, doing double duty); the Markov chain on plate 06 is literally a **relay-ladder diagram** — the "relay" is the one piece of machinery in the whole studio, a stylised electromechanical relay (coil drawn as a tight SVG spiral, armature as a triangle, contacts as two squares) whose state *is* the chain's state, and it clicks between positions on a slow, calm cadence. Traces are 1.5px walnut; active traces (the path "currently being walked" in an animation) brighten to oxblood-sepia and a 1px toasted-ochre underline draws along them. No glow, no neon, no electric blue — a 1924 relay is brass and bakelite, not LED. **3. Bauhaus-primitive — the structural alphabet.** Circle, triangle, square, used per Kandinsky's color-shape law (circle↔slate-blue, triangle↔ochre, square↔oxblood), as: the sidebar plate-glyphs; the giant corner-anchor shape on each plate; the dice (a square in axonometric projection with circular pips); the urn (a tall rectangle with an arc top); the section-dividers (a single thin sepia rule terminated at each end by a tiny solid square). These primitives never deform, never gradient-fill (flat sepia only), never rotate continuously — they may *snap* by 90° or 45° on interaction, the way a typesetter rotates a sort, but they do not spin. Iconography beyond these: none. No icon set, no emoji, no photographs, no stock illustration. The page is dice, urns, pegs, traces, a relay, and three holy shapes. ## Prompts for Implementation Build `hwaklyul.com` as **one HTML document, one CSS file, one small ES module, and one inline SVG sprite (the three primitives, the relay, the quincunx pegs)** — no framework, no router, no React, no Tailwind, no build step beyond a single bundling pass. The page is **one continuous vertical scroll, ~800vh, eight lecture-plates** (00 Preliminaries → 01 The Coin → 02 The Urn → 03 The Quincunx → 04 The Tree → 05 The Long Run → 06 The Relay → 07 Colophon), with the persistent left sidebar-rail (the lecture index) fixed for the whole journey. The visitor lands, reads the masthead, and scrolls slowly downward through the portfolio — five to eight minutes, top to bottom, like a quiet lecture. There is **no second page**, no external link except a single restrained sepia-underlined footer line in the colophon. **Storytelling is the spine, not navigation.** Each plate is a beat in a single argument — *"uncertainty is not chaos; it has shape, and the shape can be drawn"*: - **00 Preliminaries** — the masthead band (the only full-width 1–6 block): `hwaklyul` in 96px Archivo Black lowercase, the subtitle in Space Grotesk ("a vorkurs in chance · dessau, 1924 · recovered"), a single oxblood square and slate circle and ochre triangle laid out in a row beneath. The paper-grain is already visible. The sidebar's first rule draws itself. - **01 The Coin** — a giant axonometric square (the "table") in column 1–3; a strip of coins (circles with a simple head/tail mark) flips one by one as you scroll, the running ratio printed in Spectral; behind it, the flat two-lobe density mesh. Body copy explains "P = ½" with calm understatement. - **02 The Urn** — a tall ochre rectangle with an arc top (the urn) in column 4–6; draggable (or scroll-driven) marbles; the density mesh pools toward the urn's true proportion as the count grows. - **03 The Quincunx** — the centrepiece: a CSS/SVG **Galton board** — rows of slate-circle pegs, balls dropping (CSS-transform animation, no physics engine — pre-computed left/right walks), accumulating into bins at the bottom that **grow into the bell curve** which is simultaneously rendered as the gradient-mesh ridge behind them. This plate is the emotional peak; let it breathe, give it the most negative space. - **04 The Tree** — the probability tree drawn as PCB-style circuit traces (rounded 90° bends, junction-circle nodes, branch weights in Spectral italic); on scroll, one root-to-leaf path lights to oxblood-sepia with the ochre underline drawing along it; the leaf probability counts up softly. - **05 The Long Run** — a convergence plot: a jagged sample-mean line settling toward a flat ochre rule (the true mean); as the visitor scrolls, the density mesh behind it **visibly narrows**, the spread collapsing — the literal picture of the law of large numbers, drawn calmly, no triumph. - **06 The Relay** — the Markov chain as a relay-ladder: the stylised 1924 relay (SVG: coil-spiral, triangle armature, square contacts) clicks between states on a slow 2.4s cadence; the transition matrix shown beside it as a small Bauhaus grid; traces brighten as the chain "moves." This is the one mechanical sound-shaped beat; keep it patient, almost meditative. - **07 Colophon** — on the single `#f6efe0` "freshly reprinted" inset: the recovery story in two short Space Grotesk paragraphs, the type/colour credits, the one external footer link. The sidebar's last rule completes; the rule beneath it is terminated by two tiny solid squares. **Animation register — calm-serene, which means *slow, eased, and few*.** Global motion vocabulary: **underline-draw** is the signature — every sidebar rule, every emphasis underline under a key term in the body copy, every "active path" on a tree-trace, draws itself left-to-right with `stroke-dashoffset` over 600–900ms on `ease-out` (the underline-draw pattern, used as *the* connective gesture). Plate transitions: a gentle 24px parallax offset between the corner-primitive (slower) and the body column (faster), nothing dramatic. Coins flip, marbles drop, balls fall through the quincunx, the relay clicks — all on **long, restful eases** (`cubic-bezier(.2,.7,.3,1)`), nothing bouncy, nothing springy, nothing magnetic-to-cursor. The paper-grain overlay does not animate. Honour `prefers-reduced-motion`: freeze the quincunx mid-fall into a still bell, hold the relay in one state, draw all underlines instantly. **Constraints:** lowercase display type only; no pure black/white; no soft drop-shadows (Bauhaus rules only — hairline/1px/3px sepia strokes); curves are perfect circles/arcs only; no card-grid, no pricing, no stat-grid, no CTA band, no testimonial carousel, no hero-overlaid-on-photograph (there are no photographs); no cookie banner; Korean/Latin glyphs only. Performance and accessibility tuning are out of scope here — chase the *visual* fidelity of an aged Bauhaus probability portfolio. ## Uniqueness Notes Chosen seed/style: `aesthetic: bauhaus, layout: sidebar, typography: display-bold, palette: sepia-nostalgic, patterns: underline-draw, imagery: gradient-mesh, motifs: circuit, tone: calm-serene`. Of the eight seed dimensions, five sit in actively under-represented corpus territory (bauhaus 7%, display-bold 7%, sepia-nostalgic 4%, circuit 8%, calm-serene 5%); underline-draw (17%) and gradient-mesh (18%) are moderate-frequency but reframed away from their corpus cliches (underline-draw becomes the lone connective gesture; gradient-mesh becomes literal probability-density fields in sepia); sidebar (23%) is present in the corpus but reframed here as a printed lecture-index / portfolio binding-strip rather than app/dashboard chrome. Deliberate departures from the existing corpus, all checkable against the registry and the frequency table: 1. **Bauhaus (7%) executed *aged-in-a-drawer*, not bright-primary.** The handful of bauhaus designs in the corpus lean on loud red/yellow/blue and crisp white. `hwaklyul.com` is the first to render the Bauhaus grammar **eighty years foxed** — every primary dulled to sepia, a paper-grain bloom over everything, pencilled marginalia — so the *discipline* of Bauhaus survives but the *brightness* is gone. The conceit (a fictional 1924 Dessau "Vorkurs für Wahrscheinlichkeit," a Bauhaus course in *probability*) appears nowhere else. 2. **The intersection of sepia-nostalgic (4%) + gradient-mesh (18%) is novel — and the gradient-meshes are literally probability distributions.** Corpus gradient-meshes are decorative SaaS blur in blue-purple. Here the mesh is **never decoration**: it is the bell curve, the urn proportion, the collapsing variance — rendered in brown-ochre-slate only, with paper-grain on top. A density-field-as-light, in sepia, is not in the corpus. 3. **Circuit (8%) reframed as probability-graph traces with a single 1924 electromechanical relay — no neon, no silicon.** Every other circuit motif in the corpus glows blue and reads as "tech / crypto / sci-fi." This one is **brass-and-bakelite**: the "circuit" is a probability tree and a Markov relay-ladder, traces in walnut, the relay an actual stylised coil-armature-contacts mechanism that clicks calmly. A circuit motif that is *pre-electronic* and *pedagogical* is unique here. 4. **Sidebar (23%) used as a printed "lecture index" / portfolio binding-strip, not as app navigation.** The corpus's sidebars are dashboard chrome and doc-nav. This rail is a **syllabus printed down the binding edge**, with Kandinsky-shape bullets and self-drawing sepia rules, sitting on a deliberately *darker* paper to read as the shadowed gutter of a bound sleeve. 5. **display-bold (7%) restricted to a "big-or-nothing" Bauhaus-poster register, and the only enormous things are numbers.** Archivo Black never drops below 32px; the 140–200px plate-numbers are the visual anchors; mathematics is set apart in Spectral italic (a 1920s-textbook gesture). This "numbers are the only giant element, lowercase everything, equations in a quiet serif italic" rule is not a pattern present in the corpus. 6. **Tone calm-serene (5%) realised as "a quiet studio at 4 p.m."** — no spa, no zen-garden, no ethereal-blue. Nothing flashes, nothing urges, nothing converts; the page is a teacher laying out plates, at peace with uncertainty. Patterns deliberately avoided per the frequency analysis: **cursor-follow (88%), magnetic (81%), spring (86%), stagger (80%), tilt-3d (26%), parallax (95% — used here only as a single restrained 24px offset, not as the headline gesture)** — none of these "everyone-does-it" interaction tropes drive this page; **underline-draw (17%)** is the lone signature motion, paired with slow restful eases. Avoided aesthetics: **hand-drawn (96%), glassmorphism (67%)** — this page is letterpress-on-aged-rag, the opposite of both. Avoided imagery: **photography (98%)** — zero photographs anywhere; everything is CSS/SVG. Avoided layout: the full-bleed/card-grid/centered triad (93/87/85%) is replaced by a strict asymmetric 6-column Bauhaus modular grid with a persistent binding-strip sidebar.