# Design Language for kakuritsu.com ## Aesthetics and Tone kakuritsu.com (確率 — "probability") is a love letter to chance, rendered as a **mid-century probability textbook re-illuminated by neon tubing**. Imagine a 1957 Japanese statistics primer — pale buttermilk pages, fawn-brown ink, hand-drawn dice and Galton boards in the margins — left out overnight in a Shinjuku side-alley where the neon signs of pachinko parlors leak electric pink and electric cyan onto the paper. The neon bleeds *into* the diagrams. The hand-drawn coin still flips, but now it leaves a trailing magenta after-image. The Galton pegs glow. The pastoral remains: rolling hand-sketched hills appear behind histograms, and a single lonely hand-drawn cherry-blossom branch arcs across the upper-right of every spread, shedding petals whose count follows a Poisson distribution. The tone is **pastoral-romantic** in the most literal sense: this site is in love with the *idea* of probability — with the gentle melancholy that nothing is certain, with the warm wonder that everything is possible, with the quiet awe of a coin suspended mid-air. The voice is unhurried, written like marginalia in a beloved old book by someone who whispered "isn't it lovely" into the gutter of every page. There is no urgency, no conversion funnel, no pricing table. Only chance, observed with great tenderness and lit by neon. Inspirational anchors: Charles & Ray Eames' *House of Cards* (1952), Bruno Munari's *Square* (1960), Saul Bass film-title geometry, the buttermilk pages of an Iwanami Shoten paperback from the Showa-32 era, the cyan-magenta sodium glow of late-night Osaka, John Cage's chance operations, hand-painted weather diagrams from old Japanese almanacs, the Atomium pavilion, and the intentionally-imperfect ink of risograph prints. ## Layout Motifs and Structure **Primary layout: full-bleed Z-pattern reading rhythm on a torn-paper substrate, threaded by neon armature.** The page reads as **six full-viewport "spreads,"** each one a single page of the imaginary textbook *The Tender Mathematics of Chance*. The reader's eye is deliberately led along a **Z-pattern** within each spread — top-left → top-right → diagonal sweep → bottom-left → bottom-right — and this Z is not merely implied by content placement; it is *physically drawn* on each spread as a hand-sketched dotted graphite line that animates in stroke-by-stroke as the spread enters the viewport. The Z is the reader's path. The neon glows along the Z as if the line were cold-cathode tubing being switched on at the upper-left and racing to the lower-right. **Spatial Grammar (per spread):** - **Upper-left Quadrant (Z-start):** A single mid-century display word (the chapter's keyword) in Baskerville italic at clamp(4rem, 9vw, 8rem), color #2C2A26 (fawn-ink), with a subtle hand-shaky outer-stroke offset. A small hand-drawn ornament — a die, a coin, a Galton peg — sits at its lower-right shoulder, glowing in #FF2D9D neon-electric pink with a chromatic-aberration shadow. - **Upper-right Quadrant (Z-corner-1):** A floating mid-century geometric panel (mustard #E8B23F or duck-egg #9BCFD6), tilted -3deg, holding an asymmetric paragraph in Baskerville at 1.05rem, with a 1-line marginalia annotation in handwritten Caveat in fawn-ink, slightly angled. - **Diagonal Z-sweep (Z-bridge):** A hand-drawn dotted graphite line crosses the negative space, with three or four hand-sketched icons (cherry petal, dotted parabola, arc of a swung coin) scattered along it. The user's cursor leaves a soft electric-cyan halo trail along this diagonal — the cursor-follow effect *only* lights up on the Z-bridge, as if the diagonal were the only conductive part of the page. - **Lower-left Quadrant (Z-corner-2):** A hand-drawn diagram — Galton board, dice histogram, Buffon's needle, etc. — rendered as a rough-pen SVG with imprecise vertices. The diagram's "active probabilistic element" (falling beads, rolling die, dropping needle) is permanently animated, but its *outline* is hand-drawn and the *moving part* is neon. So a hand-sketched Galton board with neon-magenta beads cascading through it. - **Lower-right Quadrant (Z-end):** The "footnote" — a 2-line aphorism in Baskerville italic, paired with a hand-drawn arrow pointing forward to the next spread. The arrow's shaft is graphite, but its tip is a single neon-cyan stroke that pulses softly. **Substrate:** The entire site's background is a layered paper texture — a base of buttermilk #F4EBD3 with subtle SVG grain, overlaid with very faint ruled lines (1px, opacity 0.06, spaced 28px) as if the textbook were on graph paper. Every spread has one **hand-torn deckle edge** (top or bottom, alternating) drawn as an irregular SVG path, beneath which the *next* page peeks through, suggesting the depth of a real book. Occasionally, a single petal drifts across the spread on its own animated path (CSS keyframes with ease-in-out and a gentle x-axis sway). **No header. No nav bar. No footer.** Navigation is the act of scrolling, and a tiny circular **probability dial** in the bottom-right corner shows progress as a hand-drawn arc filling from 0 to 1 (rendered as p(read) = 0.00 → 1.00 in Baskerville small caps). The act of reading is itself the experiment. ## Typography and Palette **Typography (Google Fonts only):** - **Display & Body Serif — "Libre Baskerville"** (Google Fonts): the foundation of the site. This is the closest faithful Baskerville available on Google Fonts — high-contrast, transitional, with the open counters and sharp serifs that define Baskerville's refined character. Used for chapter keywords (italic, weight 400, clamp(4rem, 9vw, 8rem), letter-spacing -0.01em), body paragraphs (regular, 1.05rem, line-height 1.7, letter-spacing 0.005em, color #2C2A26), and small-caps annotations on the probability dial. The italic is leaned into hard — chapter words *want* to be italic Baskerville because that letterform has the quiet drama of a hand resting on a page. - **Hand-drawn marginalia — "Caveat"** (Google Fonts): a casual handwritten script used for footnote annotations beside diagrams ("note: the dice are tired"), the Z-pattern dotted-line label (a tiny "your eye →" along the diagonal), and the petal-count caption. Always at 0.95rem, slight rotation (-2deg to +3deg). - **Numerical & geometric headers — "DM Serif Display"** (Google Fonts): for the spread numbers (I, II, III, IV, V, VI) and for any large probability value rendered as a glyph. Used very sparingly — once per spread maximum — at 14vw, weight 400, letter-spacing -0.02em. Its sharp serifs evoke mid-century editorial covers (Munari, Lustig). - **Diagram axis labels — "JetBrains Mono"** (Google Fonts): only for axis ticks on hand-drawn charts (e.g. "0.0 0.5 1.0" along an x-axis). 0.7rem, weight 400, fawn-ink color. Tiny dose, just enough to feel like real chart annotation. **Palette — "Neon-Electric on Buttermilk":** A high-contrast pairing of warm mid-century paper tones with cold electric neon accents. - `#F4EBD3` — **Buttermilk Page** (primary background, the textbook paper) - `#EAE0C0` — **Aged Buttermilk** (alternating spread background, ~3% darker) - `#2C2A26` — **Fawn Ink** (primary text, hand-drawn line color) - `#7A6A4F` — **Sepia Margin** (secondary text, captions, dotted lines) - `#E8B23F` — **Saffron Mustard** (mid-century accent panel #1) - `#9BCFD6` — **Duck-Egg Cyan** (mid-century accent panel #2) - `#C45A3F` — **Burnt Ochre Red** (mid-century accent panel #3, used once for emphasis) - `#FF2D9D` — **Neon Pink** (electric accent — coins, beads, glowing dice) - `#00E8FF` — **Neon Cyan** (electric accent — cursor trail, Z-bridge glow, arrow tips) - `#B8FF3D` — **Neon Lime** (electric accent — used once, for the "result" reveal) The neon colors NEVER touch the body text. They appear only as glow effects (text-shadow blur 8px to 24px), as fills on tiny hand-drawn icons (the die, the coin), and as the cursor trail. The buttermilk-and-fawn world is the *book*; the neon is the *night outside the window*. The tension between them is the entire visual thesis. ## Imagery and Motifs **Core Visual Motifs:** 1. **The Hand-Drawn Probability Diagram (per spread):** Each of the six spreads contains one canonical probability artifact, rendered as a rough-edged SVG with deliberately imperfect vertices (use random ±1.5px jitter on path nodes), with a graphite-grey stroke (#2C2A26 at 0.75 opacity, stroke-width 1.4, with `stroke-linecap: round` and a subtle `filter: url(#pencil-grain)` SVG filter). The six diagrams are: (I) a single coin mid-flip, (II) a Galton board with eight rows of pegs, (III) Buffon's needle on parallel ruled lines, (IV) a histogram of dice sums (2-12), (V) Bayes' updating drawn as two overlapping bell curves, (VI) a Brownian-motion path tangling across the page. 2. **Neon Probability Tubing:** On every diagram, the *probabilistic element* — the falling beads, the rolling needle, the resulting bar — is rendered in neon. The Galton beads are #FF2D9D circles with a 12px blur drop-shadow in the same hue. The cascade animates continuously: beads spawn at the top, bounce left or right (random, 50/50), and settle in the bottom histogram which slowly grows. The histogram is hand-drawn fawn-ink outlines, but each bar's *fill* is neon-pink with a soft inner glow. The hand and the lightning, on the same page. 3. **The Cherry Branch & The Poisson Petals:** A single hand-drawn cherry-blossom branch arcs from the upper-right corner of each spread (it's the same branch on every spread, but each spread shows it in a slightly different state, like flipbook frames). Petals fall from it. The number of petals visible at any moment is sampled from a Poisson(λ=4) distribution, recomputed every 3 seconds — a live probability demonstration baked into the decoration. Each petal drifts on its own keyframed path, slow and pastoral. Petals are #FFC9DD (the only "soft" pink, *not* neon, to differentiate from the electric pink of the diagrams). 4. **The Dotted Z-Path:** The Z-shaped reading line on each spread is drawn as a graphite dotted line (SVG `stroke-dasharray: 2 6`), animated to "draw itself" via `stroke-dashoffset` when the spread enters the viewport. Three small hand-sketched marks sit along it — these are the "stops" the eye should make. When the user's cursor approaches the Z within 80px, the segment near the cursor *electrifies*: the dotted graphite becomes a solid neon-cyan glowing line for ~120px around the cursor, with a soft 16px halo. Move away, and the cyan fades back to graphite. The page is alive with the reader's attention. 5. **Mid-Century Geometric Panels:** Floating tilted rectangles, circles, and trapezoids in saffron, duck-egg, and burnt-ochre — flat fills, no gradients, slightly rotated (-5deg to +5deg), each with a thin 1.5px fawn-ink border that mimics letterpress registration. They hold quotes, definitions, and side-thoughts. Each panel has a tiny hand-drawn embellishment in its corner — a star, a tally mark, a tiny arrow — like the corner stamps in Eames-era ephemera. 6. **Marginalia & Annotations:** Every spread has 2-3 handwritten Caveat annotations in sepia, slightly rotated, connected by curving hand-drawn arrows to the elements they comment on. These are not tooltips; they are always visible, like a previous reader's marks in a borrowed book. ("she said this would happen" beside a 50/50 outcome; "the tiredness of dice is real" beside the histogram; "p ≠ 0 always means hope" near a vanishingly-small probability). 7. **The Probability Dial (bottom-right, fixed):** A hand-drawn circle, ~64px diameter, with a single arc filling clockwise as the user scrolls. Inside, in Baskerville small-caps: `p = 0.42`. Below it, in Caveat: "you have read". The dial pulses softly with a neon-cyan inner glow when the cursor approaches. ## Prompts for Implementation **Narrative Spine — "The Tender Mathematics of Chance" (Six Spreads):** The site reads as a single short essay-textbook in six spreads, each a distinct probability concept introduced with mid-century gentleness and lit at its margins by neon. Implement as six full-viewport sections (`100vh` each, `scroll-snap-type: y proximity` on the body — *proximity* not *mandatory*, so the reading rhythm feels like turning pages, not slamming them). Use `scroll-snap-stop: normal`. **Spread I — "On the Coin" (introduction).** The chapter word "CHANCE" in italic Baskerville fills the upper-left. Beside it, a hand-drawn coin mid-flip with a neon-pink trailing arc (the arc renders the coin's last 8 frames of motion as a probability cloud — frame opacity decreasing 1.0 → 0.0). The Z-line dots its way across to the lower-right where a Buffon-needle-like single needle is suspended. A handwritten note in the margin reads: "before it lands, it is everything." **Spread II — "On the Galton Board".** The chapter word "CASCADE." A live, never-ending Galton board occupies the lower-left: hand-drawn pegs in fawn-ink, neon-pink beads spawning at top and bouncing through. The histogram at the bottom is hand-outlined; the bars fill in neon-pink as the distribution emerges. After ~30 seconds it has visibly approximated a normal curve. The marginalia: "every fall is also a choice." The bell-curve overlay is drawn slowly, dotted, by a hand. **Spread III — "On the Needle" (Buffon).** The chapter word "ACROSS." Hand-drawn parallel ruled lines (warm sepia) span the spread. Hand-drawn needles drop one by one at random positions and angles — this is on a slow timer, one needle every 1.6s, max 12 visible. Each needle that crosses a line glows neon-cyan; each that doesn't stays graphite. A live counter in the upper-right (Baskerville small caps): `crossings / drops = 0.637 → π ≈ 3.14`. The reveal is the appearance of π. Marginalia: "she believed geometry would tell her something true." **Spread IV — "On the Dice".** The chapter word "PAIR." Two hand-drawn dice tumble eternally in the upper area, faces hand-shaded, dots in neon-pink. Below, a hand-drawn histogram of sums 2-12 fills as the dice roll (each roll adds to the histogram in real-time; bars are neon-pink fill, fawn-outline). Z-line crosses through. Marginalia: "seven, the lonely middle." Burnt-ochre red panel sits to the side with a mid-century geometric flourish, holding a one-line definition of expectation. **Spread V — "On Belief" (Bayes).** The chapter word "REVISE." Two hand-drawn bell curves overlap — a "prior" in graphite, a "posterior" in neon-cyan. The posterior subtly shifts every few seconds as if new evidence were being received. A handwritten label points to the gap between them: "this is the news." Marginalia: "to be wrong gently is grace." **Spread VI — "On the Tangle" (Brownian motion / closing).** The chapter word "DRIFT." A hand-drawn Brownian path slowly traces itself across the entire spread in graphite, segment by segment, never repeating. As it draws, the cursor-follow neon halo joins the path's tip — your cursor is *guiding* the motion at the very end. The path eventually loops back and ends at the probability dial in the bottom-right. The dial pulses neon-lime once. The final aphorism in italic Baskerville: *"every walk is unlikely, and yet here we are."* **Cursor-Follow Implementation (the key interaction):** - Track `pointermove` on `window`; throttle to ~60fps with `requestAnimationFrame`. - Maintain a small array of the last ~14 cursor positions; render a softly-fading SVG polyline trail with stroke `#00E8FF`, stroke-width 2, `filter: drop-shadow(0 0 12px #00E8FF)`, opacity decreasing along the trail. - The cursor itself is replaced (`cursor: none`) by a custom SVG: a tiny hand-drawn cherry petal in #FFC9DD with a 1px fawn-ink outline. - When the cursor enters the Z-diagonal corridor on each spread (compute proximity to the SVG path of the Z), the diagonal *electrifies* near the cursor: a 160px-wide segment glows cyan with a 20px outer halo, easing in over 200ms and out over 400ms. - When the cursor hovers over a hand-drawn diagram element (coin, die, peg), that element gets a one-time "spark": neon-pink halo expands and dissipates over 600ms, and the element subtly nudges (`translate(2px, -1px)`) as if poked. **Hand-Drawn SVG Treatment:** - All diagram strokes use a single shared SVG filter named `#pencil-grain`: composite of `feTurbulence` (baseFrequency 0.9, numOctaves 2) + `feDisplacementMap` (scale 1.5) to add organic wobble + a `feGaussianBlur` (stdDeviation 0.3) for soft graphite edge. - Path coordinates are pre-jittered: every node is `±rand(1.5)` from its mathematical position. Bezier control points share the jitter. - All stroke-linecaps: `round`. All stroke-linejoins: `round`. No straight machine lines anywhere except the ruled background grid. **Animation Choreography:** - On spread enter: Z-line draws stroke-by-stroke (1.2s, ease-out), chapter word fades up with a 14px blur-to-clear (900ms), accent panels rise from below with a slight overshoot (spring-like, 700ms), diagram begins its perpetual animation, cherry petals begin shedding. - All motion uses `cubic-bezier(0.16, 1, 0.3, 1)` for the "gentle release" feel — never bouncy, never snappy. Pastoral pacing. - The neon glows have a slow 4-6s `pulse` keyframe (opacity 0.7 ↔ 1.0, blur-radius ±4px) so they feel like real neon tubing breathing. - Petals fall on individually-randomized 9-14s loops with a sine-wave x-axis sway; they fade in at the top, fade out near the bottom. **Storytelling Bias:** - This site is a small printed essay set on fire by neon. There are NO calls-to-action. NO pricing. NO email captures. NO stat-grids. NO "why choose us." The only "interactive" elements are the cursor itself and the perpetual probability simulations that the reader passively witnesses. - Long-form reading is the experience. Treat each spread as a page-turn. - The aphorisms in the lower-right of each spread are the emotional payload — write them with care; they are the site's heart. **Sound (optional, opt-in):** A toggle in the lower-left, a hand-drawn speaker icon. When enabled, each falling Galton bead clicks like a peg on a board (very soft, ~-32dB), each dice roll murmurs, and a faint ambient pad plays — the vinyl-pop and tape-hiss of a 1957 educational record. ## Uniqueness Notes **Differentiators from other designs in this collection:** 1. **Mid-century textbook + neon-electric collision is unprecedented in the corpus.** Of 231 designs, mid-century appears in 8% and neon-electric in only 1% — and crucially, none of them combine these two opposed timeframes. The buttermilk-and-fawn paper world *contradicts* the cyan-magenta neon lighting on the same page, and that contradiction is the entire visual thesis. The hand-drawn graphite Galton board with neon-pink beads cascading through it is an image that exists nowhere else in this collection. 2. **Z-pattern is not just implied, it is the literal subject of the page.** Where 7% of designs use a Z-pattern as a layout convention, here the Z is *drawn on the page* as a dotted graphite line, *labeled* in handwritten Caveat ("your eye →"), and *electrified* in real-time by the user's cursor. The Z-pattern transcends being a layout heuristic and becomes a participatory diagram. No other design in the corpus weaponizes the reading-path itself as visible content. 3. **Live probability simulations as ambient decoration.** Most sites in the corpus use static or scroll-triggered animation. kakuritsu.com runs perpetual probability experiments — a Galton board, a Buffon-needle drop, a dice histogram, a Bayes update — that the reader witnesses *passively*. The Poisson cherry-petal counter is the most quietly radical: the *number of petals decorating the page* is itself a live random variable. The site is, formally, a working probability demonstration that happens to also be a website. 4. **Baskerville-refined typography is utterly unused (0%) in the existing corpus.** This design commits to Libre Baskerville italic at display sizes as its primary visual signature — a transitional serif treated with the reverence usually reserved for editorial print, paired with handwritten Caveat marginalia in a relationship that mirrors a beloved old book annotated by a thoughtful reader. 5. **Pastoral-romantic tone (3% of corpus) applied to mathematics.** Probability is almost universally presented as cold, statistical, technical. This site treats it as a love letter — "every walk is unlikely, and yet here we are" — and pairs the tenderest possible voice with neon lighting and falling cherry petals. The romantic register is unusual, and pairing it with rigorous probability content is unique. 6. **No nav, no footer, no CTA — only six spreads of an imagined book.** While `centered` (92%) and `full-bleed` (45%) layouts dominate, this site uses six discrete `100vh` "spreads" with proximity-snap, making the experience formally a *book* rather than a *page*. The progress dial in Baskerville small-caps (`p = 0.42`) is the only navigation element on the entire site. **Chosen seed:** `aesthetic: mid-century, layout: z-pattern, typography: baskerville-refined, palette: neon-electric, patterns: cursor-follow, imagery: hand-drawn, motifs: futuristic, tone: pastoral-romantic` **Frequency-aware choices:** - AVOIDED overused: corporate (92%), centered (92%), gradient palette (96%), counter-animate (91%), mysterious-moody (94%), mono typography (93%), photography imagery (63%) — none used as primary modes here. - PREFERRED underused: mid-century (8%), z-pattern (7%), cursor-follow (7%), futuristic motifs (8%), pastoral-romantic (3%), neon-electric palette (1%), baskerville-refined (0%). The seed deliberately stacks underused vocabulary. - The "futuristic" motif appears as the *neon-electric anachronism* layered over mid-century paper — a 1957 textbook seen by 1985 neon — rather than as sci-fi or cyberpunk imagery.