# Design Language for kakuritsu.com ## Aesthetics and Tone **kakuritsu** (確率) means *probability* in Japanese — the mathematics of chance, the calculus of what might happen. The site is a **tech tutorial experience** built as a textbook that has been left in a drawer for twenty years and then digitized: every page carries the warm, faintly foxed scent of aged paper, ink bleed at the edges of equations, tiny pencil marginalia. But this is not a quiet archival study — the *dopamine* engine fires on every interaction. Discovered variables glow a saturated electric-amber before settling back into the page. Code samples pulse with a neon-yellow highlight that fades to mellow gold. The emotional register is: **the specific joy of understanding something difficult** — the moment the probability chain clicks, the aha-flash that is simultaneously physical (goosebumps) and intellectual (peace). The tone is warm, encouraging, slightly playful — a beloved professor who draws jokes in the margins and also understands measure theory. No corporate voice, no aggressive CTAs, no "Start for free." This is a place to learn. Visual mood board references: - A vintage Japanese statistics textbook from the 1970s, with a coral spine and cream pages gone warm-ivory with age - Desmos graphing calculator: the clarity of a real function rendered on a clean grid, where the curve itself is beautiful - A neon arcade sign seen through frosted glass: vivid but soft-edged, the color bleeding into the halation haze around it - Flash cards on a corkboard: layered, slightly overlapping, each pinned at a slightly different angle ## Layout Motifs and Structure The page is structured as a **single immersive vertical scroll** — one continuous narrative descent through the mathematics of probability. There is no navigation menu and no sidebar. Sections transition via a **blur-focus reveal**: as the user scrolls, the upcoming section materializes from a soft Gaussian blur (8–12px) into sharp focus while the departing section re-blurs behind it, as if the camera is a macro lens slowly racking focus through a stack of field-of-depth layers. This blur-focus mechanic is the primary structural device. Spatial composition: - **Hero zone** (viewport height 100vh): Full-bleed aged-paper texture background. Title "確率" sits at typographic scale `clamp(120px, 22vw, 280px)` in deep charcoal, slightly off-center at 40% from left. Below it, a slim subtitle in playful rounded sans. Floating behind the title at -1 depth: a faint grayscale probability bell-curve SVG at 6% opacity, drawn as if sketched in pencil. A single dopamine-trigger element: a glowing amber die (SVG) that rolls to a new face every 3 seconds. - **Layer stack motif** (repeated across sections): Content cards are stacked at slight Z-depth offsets — later cards peek out from behind earlier ones by 8–12px of exposed edge with a soft `box-shadow`. This is the *layered-depth* motif: the visual language of a physical stack of index cards or lecture slides, never fully flat. - **Formula block zone**: Wide `min(920px, 94vw)` centered column. Math typeset with MathJax or KaTeX. Each formula is written on a `#FFF9F0` card with a 1px warm-amber left border, subtle paper grain, and a faint pencil-ruled grid as background-image SVG at 4% opacity. The formula renders first as blurred, then focuses in. - **Code sample zone**: Fixed-width code blocks on a `#1A1210` deep sepia-black, as if printed on an old terminal. Syntax highlighting in amber, coral, and sage — warm hues only, no cold blues. Each code block has a slightly rough torn-paper top edge (CSS clip-path or SVG mask). - **Marginalia system**: Floating annotation bubbles in the right margin (sticky-positioned relative to sections), styled as pencil-box yellow adhesive notes with a slightly rotated angle (`rotate(-1.2deg)` to `rotate(2.8deg)`). These carry asides, jokes, and "gotcha" warnings. On small viewports they collapse into inline asides. - **Section transitions**: Each section boundary is a horizontal rule that looks like a real pencil stroke — an SVG path that wobbles 2–3px above/below a centerline, as if drawn with a #2 pencil under a ruler, with visible grain. Drawn via `stroke-dasharray` animation on scroll entry. Grid behavior: single-column centered, `min(720px, 92vw)` for body text, expanding to `min(920px, 94vw)` for code and formula blocks. No grid complexity. The layered-depth comes from z-axis stacking and CSS `perspective`, not column multiplicity. ## Typography and Palette **Typography (Google Fonts only):** - **Display / Section headers / Kanji title**: [`Nunito`](https://fonts.google.com/specimen/Nunito) — ExtraBold 800, letter-spacing `-0.02em`. Nunito is the playful-rounded workhorse: its rounded terminals soften authority just enough to feel encouraging. Used for all section headers and the romanized subtitle. - **Body / Explanatory prose**: [`Noto Serif JP`](https://fonts.google.com/specimen/Noto+Serif+JP) — Regular 400, line-height 1.8, at `clamp(16px, 1.9vw, 18px)`. Noto Serif JP is warm, spacious, carries Japanese text naturally alongside Latin math notation without the awkward line-height fights of most web fonts. It also has the mild typographic antique quality the aged-paper aesthetic demands. - **Code / Terminals / Inline variables**: [`JetBrains Mono`](https://fonts.google.com/specimen/JetBrains+Mono) — Regular 400 and Medium 500, at 14px/1.6. Used for all code blocks, inline `code`, and numeric outputs. - **Annotations / Marginalia**: [`Caveat`](https://fonts.google.com/specimen/Caveat) — Regular 400, at 14–16px. Caveat is a handwriting font — used *only* for marginalia bubbles and inline asides. It reads as a genuine pencil annotation without fighting the body type. **Palette — Complementary warm-amber × deep-teal:** | Role | Hex | Description | |---|---|---| | Page base / paper | `#FBF5E8` | Aged parchment — warm ivory with slight golden cast | | Paper card surface | `#FFF9F0` | Formula and content cards, slightly brighter than base | | Deep text / headings | `#1C1612` | Near-black with warm brown undertone — ink, not pure black | | Body text | `#3D3028` | Dark warm brown — readable, aged-ink quality | | Primary accent — amber | `#E8890C` | Dopamine trigger: hover states, focus rings, active formula highlights | | Dopamine burst — neon amber | `#FFBA08` | Brighter variant for animation keyframe peaks: rolled die glow, aha-flash | | Complementary accent — teal | `#0B6E71` | Cool complementary to amber: section markers, link underlines, code left border | | Teal deep | `#074548` | Darker teal for hover states on teal elements | | Code surface | `#1A1210` | Near-black, slightly warm: code block backgrounds | | Code syntax — amber | `#FFBA08` | Keyword highlight in code | | Code syntax — coral | `#E8614D` | String literals | | Code syntax — sage | `#7DBF8A` | Comments / operators | | Blur haze overlay | `rgba(251,245,232,0.72)` | Semi-transparent paper tint used in blur-transition overlay layer | | Marginalia yellow | `#FFF3A3` | Adhesive-note annotation backgrounds | Amber (`#E8890C`) and teal (`#0B6E71`) are exact complementaries on the warm-shifted color wheel — the classic split-complementary of a warm textbook: coral-amber type on cream, with teal as the counter-voice. ## Imagery and Motifs **No stock photography.** All imagery is SVG-generated or CSS-constructed. 1. **Aged paper texture (CSS + SVG noise filter)**: Base background is `#FBF5E8` augmented by an SVG `feTurbulence` filter at baseFrequency `0.65` / numOctaves `4`, blended in multiply mode at 8% opacity. This creates genuine stochastic grain that reads as paper fiber without a texture image download. Additional: a subtle vignette via `radial-gradient` darkening edges 12% toward `#E8D9C0`. 2. **Probability motif SVGs**: Each section header zone contains a lightly rendered probability-related glyph at 5–8% opacity behind the content: - Section 1: A bell curve (Gaussian normal distribution) sketched in a single path, stroke `#3D3028` at 6% opacity - Section 2: A branching probability tree (Markov chain nodes), as if hand-drawn on graph paper - Section 3: A roulette wheel outline, only the sectors, no fill - Section 4: A deck of cards fan, line-art only - Section 5: A DNA helix made of probability nodes — for Bayesian inference These ghosts are purely decorative, never interactive, never distracting. 3. **Layered-depth card stacks**: Each major content block appears as a stack of 3 cards, the top card fully visible, the two below peeking from behind with 8px and 16px offsets at `rotate(1.2deg)` and `rotate(-0.8deg)` respectively. The exposed edges of the back cards are the teal accent `#0B6E71` as a stripe, suggesting color-coded lecture materials. 4. **Dopamine die (SVG interactive)**: A single 6-sided die rendered in SVG with rounded corners (border-radius analog via `rx`/`ry`), amber face `#FFBA08`, dark pip dots. On hover it animates via CSS `@keyframes` through all six faces in 0.4s. On idle, it rolls a new face every 3 seconds with a satisfying `bounce` easing. When a formula reveals (blur → focus transition), a tiny die rolls in the formula card corner as a probability "randomness badge." 5. **Pencil-rule dividers**: Section separators are SVG `` elements with 3–5 slightly irregular points around a horizontal centerline, stroke `#3D3028` at 40% opacity, 1px strokeWidth, with a CSS `stroke-dasharray` animation that draws the line left-to-right on scroll entry over 0.6s. 6. **Torn-paper edge on code blocks**: The top edge of each code block uses a `clip-path: polygon()` with 8–10 points arranged in a 2–4px sawtooth that is slightly irregular (not perfectly periodic), simulating torn paper. The bottom edge is straight. 7. **Blur-focus transition overlay**: Each section entry triggers a `backdrop-filter: blur(10px)` on a full-section overlay div that transitions from `opacity: 1` (blurred) to `opacity: 0` (clear) over 0.5s as the section enters the viewport via `IntersectionObserver`. The overlay carries the paper-tint color so the blur is warm, not gray. ## Prompts for Implementation Build kakuritsu.com as **a single-page interactive probability textbook chapter** — specifically "Introduction to Probability" — structured as one continuous scroll through five conceptual sections. The entire experience is designed for the **aha-moment loop**: each concept builds on the last, each section reveal delivers a micro-dopamine hit via animation, and the overall scroll feels like turning the pages of a textbook you love. **Story arc — five sections, one scroll:** 1. **Hero — "What is Probability?"** Full-viewport entry. Giant kanji 確率 at `clamp(120px, 22vw, 280px)` in `#1C1612`, `Nunito 800`. Sub-header: "The mathematics of what might happen." `Noto Serif JP`. Idle die animating in lower-right quadrant. Bell curve ghost at 6% behind the title. Blur-focus entry: the whole hero fades from blur into focus 0.8s after DOMContentLoaded. 2. **Section — "Sample Spaces"** Card stack entry. Three index cards stack-slide in from below on scroll. Top card: definition of sample space with a formula (KaTeX rendered). Back cards: a tree diagram example, a coin-flip enumeration. Pencil-rule divider above. 3. **Section — "The Probability Axioms"** Full-width formula block for Kolmogorov's axioms. Each axiom line reveals with a staggered blur-to-focus, 0.15s delay between lines. A marginalia Caveat annotation floats to the right: *"Kolmogorov crammed these on a napkin in 1933 — true story."* Teal left border `#0B6E71` on the formula card. 4. **Section — "Conditional Probability"** Interactive: two overlapping probability circles (Venn diagram, pure SVG). Hovering either circle highlights its amber region. The intersection highlights with a neon-amber burst (`#FFBA08`) and the Bayes formula for P(A|B) appears in the intersection zone via a smooth scale+fade. Code example in JetBrains Mono below. 5. **Coda — "The Joy of Uncertainty"** Closing meditation section. Body text only, `Noto Serif JP`. Faint DNA-helix probability node ghost behind. A single amber sentence at the end: *"Probability is not about doubt. It is about the shape of what is possible."* The die in the corner rolls one final time and settles on 1. **Implementation constraints:** - **No navigation bar, no sticky header, no CTA buttons.** The only interactive elements are: the die SVG, the Venn diagram hover, inline `
` expandable proofs. - **Blur-focus transitions via IntersectionObserver**: each section registers an observer. On entry, remove the `blurred` class (which applies `filter: blur(10px)` and `opacity: 0.3`) and add `focused` class (which transitions to `filter: blur(0)` and `opacity: 1` over 0.5s with `ease-out`). On exit going upward, do NOT re-blur — the section stays focused once revealed. - **KaTeX** for formula rendering (CDN), initialized after DOMContentLoaded. - **CSS custom properties** for the full palette — all color references via `var(--color-*)`. Light-mode only (no dark mode). - **No framework, no build step** — single `index.html` with one `style.css` and one `main.js`. Pure browser stack. - **Layered depth via CSS perspective**: the card-stack sections use `perspective: 800px` on the parent, with individual cards at `translateZ(-8px)` and `translateZ(-16px)` for the back cards. - **Paper grain filter**: declare an SVG `` in the HTML ``, reference it on the `` background via `filter: url(#paper-grain)` at 8% opacity via a pseudo-element. - **Fonts**: load all four via a single Google Fonts `` with `display=swap`. Preconnect to `fonts.googleapis.com` and `fonts.gstatic.com`. - **Avoid**: hero CTA buttons, pricing blocks, testimonials, nav hamburgers, sticky headers, footer link columns, stat-grids, logo bars, social proof, floating chatbots. This is a reading experience, not a marketing page. ## Uniqueness Notes 1. **First aged-paper × dopamine hybrid in the registry.** The frequency report shows `paper-aged` at 5% and `dopamine` at 3% — and they have never been combined. Every existing dopamine design is maximalist-bright (neon backgrounds, saturated gradients). kakuritsu.com inverts this: the dopamine triggers (rolling die, aha-flash, Venn hover) are small, physical, and warm, set against a muted parchment field. The contrast between the quiet base and the sudden amber burst is *louder* than a uniformly loud page. 2. **Blur-focus as the primary layout device rather than an overlay effect.** `blur-focus` appears in 3% of designs, but always as a secondary atmospheric treatment (blurred hero backgrounds, frosted glass cards). Here, blur-focus is the *structural grammar* of the scroll — every section transition is a rack-focus pull, and the site only ever shows one section in sharp focus at a time. This makes the typography-first reading experience feel like watching a documentary filmmaker adjusting a lens, not like browsing a webpage. 3. **Probability motifs as literal ghost-layer decoration.** No other design in the registry uses domain-specific mathematics (bell curves, Markov trees, Venn diagrams as SVG) as background texture rather than hero content. The equations and diagrams haunt the page at 5–8% opacity — present as atmosphere, not as information. This is the visual equivalent of reading a book whose margins are already filled with someone else's pencil notes. 4. **Complementary amber × teal on a warm-ivory ground — unprecedented palette.** The frequency data shows `complementary` at 3%. Existing complementary palettes in the corpus use blue/orange on white or red/green on gray. The specific combination of amber `#E8890C` + teal `#0B6E71` on aged parchment `#FBF5E8` has no precedent in the analyzed designs. The palette reads as scholarly and warm, not tech-startup and cold. 5. **Planned seed:** aesthetic: dopamine, layout: immersive-scroll, typography: playful-rounded, palette: complementary, patterns: blur-focus, imagery: paper-aged, motifs: layered-depth, tone: tech-tutorial. Avoided overused patterns from frequency analysis: `centered` (89% — used sparingly, text is centered within a column but sections are not centered-hero compositions), `full-bleed` (76% — avoided; this site uses contained column widths deliberately).