# Design Language for kakuritsu.com ## Aesthetics and Tone kakuritsu.com — 確率, "probability" — is **a midnight observatory bound in worn saddle leather**, a place where chance is not a casino's neon roulette but a quiet, contemplative thing watched from a hilltop after dark. The mood is **dark-mode zen contemplation rendered on warm-earthy leather**: imagine the field notebook of an 18th-century astronomer who also happened to study dice — its cover soft brown cowhide gone slightly bald at the corners, its endpapers the color of campfire embers, and pressed between its pages a constellation chart where every star is a possible outcome of some unrepeatable throw. This is **not** a probability *calculator*, not a stats dashboard, not a betting site. It is a **slow, breathing essay-experience about uncertainty** — the kind of page you scroll through at 1 a.m. with a cup of something warm, watching probability distributions bloom like nebulae and collapse like the night sky at dawn. The aesthetic refuses the cold blue-grey of every "dark mode SaaS"; instead the darkness here is **warm** — the deep brown-black of old leather seen by lamplight, never pure #000, always tinted with tobacco and char and a faint glow of buried orange. The tone is **zen-contemplative, never anxious**: probability is presented as something to *sit with*, not something to *win*. Copy is sparse, aphoristic, set with generous breathing room — fragments like "Every coin remembers nothing." or "The die is fair. You are not the die." Animations are slow, with long ease curves; nothing snaps, nothing demands. The single deliberate exception is the **pulse-attention** motif: at three precise moments in the scroll, one element — a single die face, a lone star, a probability bar at its mode — performs a slow, four-second luminous pulse, like a heartbeat heard through a leather pillow, drawing the eye gently toward the one idea that matters on that screen. ## Layout Motifs and Structure The page is **hero-dominant**: the opening view is not a banner-with-headline but a **full-viewport leather sky**, 100vh of textured dark-brown grain with a slow-drifting field of stars, the wordmark "確率 / kakuritsu" set small and centered like a brand stamped into the cover of a book. The hero owns the experience — it occupies the full screen for an unhurried beat (8–10 seconds of ambient drift) before the first scroll cue, a faint ember-orange dotted line, breathes its way up from the bottom edge. Below the hero, the structure is a **single vertical column of "leaves"** — full-bleed scroll panels, each one a "page" of the astronomer's dice-notebook, separated not by hard rules but by **stitched seams**: thin dashed lines in waxed-thread ochre that mimic saddle-stitching, running horizontally across the page where one leaf gives way to the next. Each leaf is centered, with deep margins (a true *ma* of negative leather space — at least 14vh of breathing room top and bottom), and each carries exactly one idea, one visual, one fragment of text. Spatial system: - **The Stitch Grid.** A baseline grid where the vertical rhythm unit is the "stitch" — 9px — and every spacing value is a multiple (18, 27, 45, 72, 144). Section gaps are 144px (16 stitches). This gives the whole page a hand-bound, deliberate cadence. - **Star anchoring.** Each leaf's central visual sits at the optical center, but small celestial motifs (single stars, tiny constellation fragments) are scattered into the margins on a sparse, irregular grid — never symmetric, always feeling *found* rather than placed, like real stars. - **The leather frame.** The entire viewport carries a permanent, very subtle inset shadow at the edges — as if you are always looking *into* the page, the leather cover curving away at the borders. This frame never scrolls; it's the binding. - **No cards. No grids of tiles. No stat blocks.** Where another site would show a "3-column feature grid," kakuritsu shows three consecutive full-screen leaves, each contemplated alone. - **Footer-as-colophon.** The page ends not with a CTA but with a **colophon leaf** — set like the last page of a hand-bound book: "確率 — a small notebook on chance — bound in the dark, [year]" — the stars overhead going pale, the leather lightening one shade toward dawn-tan, then a final fade to the warm-black. ## Typography and Palette **Fonts (Google Fonts only):** - **Display / Wordmark — *Frutiger*-spirit via "Inter Tight" (weight 600, slightly tightened tracking).** The "frutiger-clean" brief calls for the humanist, optically-balanced, eternally-legible quality of Adrian Frutiger's work; on Google Fonts, **Inter Tight** carries that DNA — clean, neutral, warm-edged, with apertures open enough to read at any size. Used for the wordmark "kakuritsu", the rare large pull-quotes, and the leaf numerals ("Leaf I", "Leaf II"…). Set generously letter-spaced when small (+0.18em), tightened when huge. - **Body / Essay text — *"Source Sans 3"* (weight 400, with weight 300 for long quiet passages).** A humanist sans with a soft, readable, faintly literary feel — it reads like quality book-paper text, not UI chrome. Line-height a luxurious 1.85, max line length ~58 characters, color never pure white. - **Numerals & probability captions — *"IBM Plex Mono"* (weight 400).** Probabilities, percentages, dice pip-counts, and the tiny coordinate labels on constellation diagrams are set in this warm, slightly-mechanical monospace — the "instrument readout" voice of the notebook. Tabular figures so the numbers don't dance as distributions animate. - **Japanese accents — *"Zen Kaku Gothic New"* (weight 500)** for the 確率 glyphs in the wordmark and the occasional kanji marginalia (e.g. 偶然 "chance", 必然 "necessity") set vertically in the right margin of two leaves. **Palette — warm-earthy, dark-mode, leather-and-embers (all hex explicit):** - `#1C140F` — **Saddle Black.** The base. A near-black brown, the color of leather in shadow. Page background, the binding-frame. - `#2A1E16` — **Tooled Brown.** One step up; used for the raised "panel" of each leaf, giving the faintest sense of leather pressed and embossed. - `#4A3526` — **Worn Cowhide.** Mid-brown; the color of leather grain texture, stitch-line shadows, and the faint relief on celestial diagrams. - `#C9762F` — **Ember Orange.** The single warm accent of "buried fire" — the pulse-attention glow, the active probability-bar fill, the scroll-cue dotted line, the saddle-stitch thread at full opacity. Used sparingly; it is the heartbeat color. - `#E0B97D` — **Dawn Tan / Brass.** Soft warm gold; star fills, the lighter stitching, large numerals, hover states. The "lamplight on metal instruments" color. - `#EDE3D2` — **Page Cream.** The text color — never `#FFFFFF`. Warm parchment-white for body copy and the wordmark. - `#7C6A52` — **Faded Ink.** Muted warm grey-brown for secondary text, captions, the IBM Plex Mono coordinate labels — text that's "written in pencil, half-erased." - `#3D5A6C` — **Twilight Slate (whisper accent).** One restrained cool note — the very deepest part of the night sky behind the warm stars, used only as a low-opacity radial gradient at the top of the hero so the warmth has something to glow *against*. Never more than ~12% presence on any screen. Contrast logic: warm-on-warm everywhere, the darkness graded in browns; Ember Orange is the *only* saturated color and appears on perhaps 5% of pixels at any moment. Star/celestial motifs use Dawn Tan and Page Cream; the "active" star pulses to Ember Orange. ## Imagery and Motifs **No photography. No 3D renders. No stock illustration. Everything is CSS/SVG/Canvas — hand-built textures and generative starfields.** - **Leather texture (the ground of everything).** Built with layered CSS: a fine `background-image` of two overlapped SVG noise-turbulence filters (one large-scale for "hide grain," one fine for "pore stipple"), tinted in Saddle Black → Worn Cowhide, plus a subtle `mix-blend-mode: overlay` radial vignette so the "leather" catches a soft lamplight in the center of each leaf. Edges of leaves carry a 1px Dawn Tan top-highlight and a 1px Saddle Black bottom-shadow so they read as gently embossed panels. - **Saddle-stitching.** The signature decorative element: dashed lines (`stroke-dasharray` like `9 6`, rounded caps) in waxed Ember/Dawn-Tan thread, used for section seams, for underlining the rare emphasized phrase (drawn on with a `path-draw` reveal as it enters view), and for "binding" the colophon. Occasionally a stitch line "tightens" — its dash gap animating smaller — when a leaf becomes active. - **The Celestial Probability Field.** Each leaf's central visual is a **constellation that is also a probability distribution.** Concretely: - **Hero:** a slow-drifting starfield (Canvas, ~140 stars, parallax in 3 depth layers, twinkling on long random sine cycles) over the Twilight-Slate radial. A few stars are very faintly connected by Faded-Ink lines into half-finished constellations. - **The Coin Leaf:** two stars, equally bright, joined by a single stitched line — the binomial of a fair flip. As you scroll past, the line "wobbles" then settles to exact center. - **The Die Leaf:** six stars arranged as the pips of a die face, each labeled in IBM Plex Mono with `1/6`. One star (the mode of attention) does the slow Ember pulse. - **The Bell-Curve Leaf:** a normal distribution drawn as a constellation — stars placed along the curve, denser at the peak, the peak star pulsing; the curve itself a faint Dawn-Tan path that draws itself left-to-right on scroll. - **The Long-Tail Leaf:** a skewed distribution; a long faint scatter of dim stars trailing off to the right edge — "the rare events live out here, in the dark." - **The Monte Carlo Leaf:** Canvas — points rain down one by one into a region (a quarter-circle inside a square), accumulating, the running ratio ×4 ticking up in Plex Mono toward π — chance *finding* a constant. Slow, hypnotic, ~600 points over ~12 seconds. - **Marginalia.** Tiny hand-drawn-feeling SVG glyphs in the deep margins: a single die, a coin on edge, a feather quill, an hourglass with sand mid-fall, a small compass-rose — all in Faded Ink, single-weight strokes, slightly imperfect. Two leaves carry vertical Japanese kanji (偶然 / 必然) set in Zen Kaku Gothic New down the right margin in Worn Cowhide. - **Dawn shift.** A structural motif rather than an image: as the reader nears the bottom, the leather lightens (Saddle Black → a hair toward `#2C2018`), the Twilight Slate fades, and one by one the stars dim to Faded Ink — the night ending. The colophon leaf is the palest, then a final fade back to Saddle Black, as if the book closed. ## Prompts for Implementation Build kakuritsu.com as **one HTML file, one CSS file, one JS module** — a single vertical scroll, no routes, no nav menu, no buttons except an invisible "skip to colophon" for keyboard users. Treat the whole page as **a 90-second contemplative read through a leather notebook about chance, watched under stars.** There is **no CTA, no pricing, no stat-grid, no testimonial row, no signup form, no feature cards.** There is only: the hero sky, a sequence of leaves, and the colophon. **Storytelling structure (vertical scroll, slow scroll-triggered reveals):** 1. **Hero — The Cover.** 100vh leather sky. Wordmark "確率 / kakuritsu" stamped center, small, in Inter Tight + Zen Kaku Gothic New, faintly debossed (inset text-shadow). Starfield drifts. After ~8s, the Ember-Orange dotted scroll-cue breathes upward from the bottom. Nothing else. Let it be still. 2. **Leaf I — "Every coin remembers nothing."** Two equal stars, one stitched line. A single line of Source Sans 3 below. The line of text gets a stitched underline that *draws itself* (path-draw-svg) as the leaf centers. 3. **Leaf II — "The die is fair. You are not the die."** Six-pip star constellation, each pip labeled `1/6` in Plex Mono. One pip does the **pulse-attention** glow (4s cycle, Ember Orange, soft box-shadow bloom). Vertical 偶然 in the right margin. 4. **Leaf III — The Bell.** A normal-distribution constellation; the curve path draws left→right on scroll; the peak star pulses once it's centered. Caption in Plex Mono: "68% of everything lives near the middle. The middle is not where it gets interesting." 5. **Leaf IV — The Long Tail.** Skewed scatter trailing off the right edge into darkness. Text: "The rare lives in the dark. Most of history is the tail." Vertical 必然 in the right margin. A dim star far out on the tail does a very slow, very faint pulse — the second pulse-attention beat. 6. **Leaf V — Monte Carlo.** Canvas: points raining into a quarter-circle-in-a-square, running ratio ×4 climbing toward π in Plex Mono, the number doing the third and final pulse when it crosses 3.14. Text: "Throw enough darts in the dark and you will find the shape of things." 7. **Colophon — The Closing Page.** Leather lightens; stars dim; stitched border frames a short colophon set like a hand-press book's last page: "確率 — a small notebook on chance — bound in the dark." Then a slow fade to Saddle Black. **Animation & interaction guidance:** - **Everything slow.** Default transition `cubic-bezier(0.22, 1, 0.36, 1)`, durations 800–1400ms. Scroll-triggered reveals via IntersectionObserver: leaves fade up 24px and brighten as they cross 35% viewport. - **Parallax** the starfield in 3 depth layers (background stars barely move, foreground stars drift ~0.4× scroll). The leather ground itself has a tiny parallax too (~0.05×) so it feels like a vast surface. - **Cursor-follow, but barely:** a single faint Dawn-Tan radial "lamplight" glow (~280px) trails the cursor at ~0.08 lerp, lighting the leather it passes over — `mix-blend-mode: soft-light`, opacity ~0.10. On touch devices it sits gently at center. - **pulse-attention** is the *only* "loud" animation and appears exactly 3 times (Leaf II pip, Leaf IV tail-star, Leaf V π-readout): a 4s `box-shadow`/`filter: drop-shadow` bloom in Ember Orange, ease-in-out, infinite but *slow* — a heartbeat, not a strobe. - **Stitch-tighten micro-interaction:** when a leaf becomes active, its seam stitch animates its `stroke-dashoffset`/gap subtly — a small "the binding pulls taut" beat. - **Respect `prefers-reduced-motion`:** freeze the starfield (static), drop parallax, replace pulses with a static Ember glow, keep only opacity fades. - **Type animation:** the rare large pull-quotes use a gentle character-stagger fade-in (60ms apart), never a typewriter clatter. - **Performance posture:** Canvas starfield capped ~140 stars; Monte Carlo capped ~600 points; everything else CSS/SVG. (Per brief: do not over-optimize — favor the mood.) **Voice of copy:** aphoristic, lowercase-leaning, never salesy, never explaining "what this site is for." It is a notebook. It muses. It does not pitch. ## Uniqueness Notes Differentiators from the rest of the corpus (with frequency-analysis grounding): 1. **Warm leather darkness, not cold SaaS dark-mode.** "dark-mode" is only 14% of aesthetics, and the slice that exists overwhelmingly defaults to blue-grey/neon. kakuritsu renders darkness in *graded browns* — Saddle Black, Tooled Brown, Worn Cowhide — lit by ember-orange and brass. Pairing **dark-mode** with **warm-earthy** palette (4%) and **leather-texture** imagery (3%) is, per the corpus, a near-empty intersection. 2. **Probability-as-constellation.** Every distribution on the site *is also a star chart* — binomials as paired stars, normals as star-scatters along a curve, long tails literally trailing off into the dark. This fuses **star-celestial** motifs (2% — almost untouched) with the site's subject in a way no other design does; it is the central conceit, not decoration. 3. **Saddle-stitched bookbinding as the layout system.** Sections aren't divided by rules or color blocks but by *dashed waxed-thread stitch seams*, with a permanent inset "leather binding" frame. The page is built like a hand-bound notebook. Combined with a 9px "stitch" baseline grid, this is a structural metaphor absent from the corpus's full-bleed/card-grid/centered defaults. 4. **Anti-engagement, contemplative pacing.** No CTA, no cards, no stats, no forms — and a deliberately *slow* hero that owns the screen for ~8 seconds before inviting a scroll. **hero-dominant** (11%) layout paired with **zen-contemplative** tone (4%) and an explicit refusal of conversion patterns sets it against the energetic, warm-inviting, friendly mainstream. 5. **`pulse-attention` used with surgical restraint — exactly 3 times.** That pattern sits at just 4%; here it's not sprinkled everywhere but reserved as the "heartbeat" of the piece, a single 4-second Ember bloom at the three moments that carry the argument. 6. **frutiger-clean humanist type (Inter Tight + Source Sans 3) in a literary, not corporate, register** — the "eternally legible" Frutiger spirit (5% typography) repurposed for an essay-notebook rather than wayfinding or SaaS UI. Avoided per frequency analysis: hand-drawn/glassmorphism aesthetics (96%/71%), photography imagery (98%), gradient/warm generic palettes' default treatments, card-grid/centered/full-bleed-as-crutch layouts, cursor-follow/spring/magnetic as headline interactions (88%/86%/82% — present here only as a barely-there lamplight), parallax-as-spectacle (96% — used subtly), and any pricing/stat/testimonial blocks. Chosen seed: *aesthetic: dark-mode, layout: hero-dominant, typography: frutiger-clean, palette: warm-earthy, patterns: pulse-attention, imagery: leather-texture, motifs: star-celestial, tone: zen-contemplative*