# Design Language for bability.pro ## Aesthetics and Tone bability.pro (a truncation of "probability") inhabits the world of hand-drawn mathematical notebooks -- the kind a brilliant but restless probability theorist fills with sprawling diagrams, margin doodles, crossed-out equations, and sudden leaps of intuition marked with aggressive underlining. The visual identity channels the raw energy of a working mathematician's desk: graph paper backgrounds, hand-sketched distribution curves, dice scattered mid-roll, and branching decision trees drawn with the confident imprecision of someone thinking faster than they can write. Think of John Nash's office windows in "A Beautiful Mind" crossed with the playful instructional diagrams of "The Cartoon Guide to Statistics." The domain "bability" has a punchy, almost slang quality -- this isn't a dusty textbook but an edgy, rebellious take on probability that makes the subject feel dangerous and alive. The tone challenges the reader: "Do you really understand chance, or are you just gambling?" ## Layout Motifs and Structure The layout uses a **bento-box** grid that references the structured compartments of a Japanese lunch box -- but here, each compartment contains a different probability concept or interactive element, sized variably like a well-composed bento. **Primary structure:** - **Opening viewport (100vh):** A graph-paper textured background (#F5F2EB with thin #C8B8A0 grid lines at 20px intervals) fills the screen. The "bability" logotype is rendered as if hand-written in thick marker strokes, slightly askew (-1.5deg rotation). Below it, a hand-drawn probability distribution curve (SVG path with deliberately wobbly control points) animates its drawing from left to right. - **Bento grid (below fold):** A CSS Grid layout with `grid-template-columns: repeat(4, 1fr)` and variable row heights. Compartments span 1-2 columns and 1-2 rows, creating the asymmetric bento pattern. Each compartment has a 2px solid #3D3229 border with slightly rounded corners (4px) and contains one concept: "Bayes' Theorem" in a 2x1 cell, "The Gambler's Fallacy" in a 1x1 cell, "Monte Carlo Simulation" in a 1x2 tall cell, etc. - **Magnetic interaction:** Compartment borders respond to cursor proximity -- when the cursor moves within 80px of a cell edge, that edge subtly bows toward the cursor (achieved via SVG path deformation or border-radius manipulation on pseudo-elements), as if the grid lines are magnetically attracted to the pointer. - **Margin annotations:** Outside the main bento grid (in the viewport margins on desktop), small hand-drawn annotations appear on scroll -- tiny doodles of dice, coin flips, card hands -- that fade in with a pencil-sketch drawing animation (SVG stroke-dashoffset). - **Bottom section:** A single wide panel breaking out of the bento grid, showing a hand-drawn timeline of probability theory history, rendered as a horizontal SVG illustration with key figures (Pascal, Bernoulli, Bayes, Kolmogorov) as simple stick-figure caricatures. No generic card grids. No centered hero patterns. The bento layout creates intentional visual tension through asymmetry. ## Typography and Palette **Fonts:** - **Headlines/Logotype:** "Gaegu" (Google Fonts) -- a Korean handwriting-style font that captures the spontaneous energy of notebook scrawls. Weight 700 for the logotype and section titles. Size: clamp(28px, 5vw, 64px). The slightly rough, hand-drawn quality reinforces the notebook aesthetic while remaining legible. - **Body text:** "Nunito" (Google Fonts) -- a rounded sans-serif with friendly, approachable letterforms that contrast the raw headline treatment with clarity. Weight 400 for body, 600 for emphasis. Line-height: 1.7. Size: clamp(15px, 1.1vw, 17px). - **Mathematical notation/labels:** "Caveat" (Google Fonts) -- a handwritten font used for equation labels, axis annotations, and margin notes. Weight 400, size: 14px. Gives mathematical content the look of being scribbled in the margin. **Color Palette:** - **Notebook Cream** #F5F2EB -- primary background, the warm off-white of quality paper - **Ink Black** #3D3229 -- primary text and borders, a warm near-black like fountain pen ink - **Pencil Gray** #8B7D6B -- secondary text, grid lines, and muted annotations - **Marker Red** #C4463A -- accent for emphasis, crossed-out text, important callouts, and the logotype's underline stroke - **Highlighter Yellow** #F0D85E -- used sparingly for hover states and active bento cells, mimicking a fluorescent highlighter swipe - **Graph Blue** #4A7FA5 -- used for probability curves, distribution graphs, and mathematical diagrams - **Eraser Pink** #E8C4BE -- subtle background tint for "debunked fallacy" sections An analogous warm palette grounded in paper/ink tones with calculated pops of pedagogical color (the red of a teacher's corrections, the yellow of a student's highlights, the blue of graph ink). ## Imagery and Motifs **Core visual motifs:** - **Hand-drawn probability curves:** SVG paths with intentionally imperfect bezier control points, giving bell curves, uniform distributions, and Poisson distributions the appearance of being sketched freehand. Line-width: 2.5px, stroke: #4A7FA5, fill: none. Each curve animates its drawing via stroke-dasharray/dashoffset on scroll-enter. - **Dice and coins:** Small SVG illustrations of dice faces and coin sides, rendered in the hand-drawn style (wobbly rectangles, imperfect circles). These appear as decorative elements in margins and as interactive elements within bento cells. On hover, dice "roll" (rapid cycling through faces via CSS animation) and coins "flip" (rotateY 0 to 180deg, showing heads/tails). - **Geometric-abstract backgrounds:** Within certain bento cells, backgrounds use geometric patterns -- Penrose tilings, Voronoi diagrams, fractal subdivisions -- rendered as thin SVG lines in #C8B8A0 at 0.15 opacity. These reference the mathematical underpinnings of probability without being literal. - **Scratch-out marks:** Decorative "corrections" appear over certain text -- a hand-drawn zigzag line (SVG) in #C4463A crossing out a common misconception, with the correct statement written "beside" it. This editorial device reinforces the rebellious, myth-busting tone. - **Book-scholarly motifs:** Footnote markers (hand-drawn asterisks and daggers), margin references ("see also: Bernoulli, 1713"), and a running "page number" in the bottom corner that increments as you scroll -- all reinforcing the academic notebook metaphor. ## Prompts for Implementation **Full-screen narrative experience:** The page loads on the graph-paper background (grid lines draw themselves over 800ms via SVG animation). The "bability" logotype appears as if being written -- each letter's SVG path draws with stroke-dashoffset animation, 150ms per letter, followed by a dramatic underline stroke in #C4463A that sweeps left-to-right over 400ms. Below, the bell curve draws itself in #4A7FA5 over 1.2s. **Bento grid behavior:** Use CSS Grid with named areas that rearrange responsively. On desktop (>1024px), the full 4-column bento. On tablet (768-1024px), 2-column with adjusted spans. On mobile (<768px), single-column stacked layout. Cell borders draw themselves on scroll-enter (border-image or pseudo-element animation from corner to corner). **Magnetic cursor interaction:** Track cursor position with `mousemove` event. For each bento cell, calculate distance from cursor to each edge. When distance < 80px, apply a subtle `border-radius` shift on the nearest corner (from 4px to 12px on the approaching side) with a 150ms transition, creating the magnetic "attraction" illusion. This is lightweight and performant. **Margin annotations:** Use `position: absolute` elements in the page margins (left/right gutters on desktop). Triggered by Intersection Observer as nearby bento cells enter view. Each annotation uses a different SVG path-draw animation, staggered by 200ms. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, corporate gradient backgrounds, testimonial sections. No photography. No generic hero-with-button. No parallax. **Storytelling emphasis:** The narrative progresses from intuition ("What feels random?") through mathematical framework (the bento concepts) to application ("How probability shapes your daily decisions"). The hand-drawn aesthetic ensures this never feels like a corporate explainer -- it's a personal, passionate argument for understanding chance. ## Uniqueness Notes **Differentiators from other designs:** 1. **Magnetic border deformation on cursor proximity:** No other design in this collection uses cursor-distance-based border deformation. The bento cell edges subtly bowing toward the pointer creates an organic, paper-like responsiveness unique to this site. 2. **Hand-drawn mathematical visualization system:** While other designs may use hand-drawn aesthetics, this one specifically applies the style to mathematical graphs and probability distributions -- the wobbly bell curves and freehand axes create a distinctive "math notebook" visual language. 3. **Myth-busting scratch-out editorial device:** The hand-drawn strikethrough marks over misconceptions, with corrections written alongside, is a unique interactive/editorial pattern not found elsewhere in the collection. It turns error-correction into a visual motif. 4. **Bento-box grid with scholarly margin annotations:** The combination of structured bento compartments with free-flowing margin doodles and footnotes creates a tension between order and spontaneity that is architecturally distinct. **Chosen seed/style:** hand-drawn aesthetic, bento-box layout, rounded-sans typography (Nunito), analogous palette, magnetic patterns, geometric-abstract imagery, book-scholarly motifs, edgy-rebellious tone **Avoided overused patterns:** Avoided centered layout (93%), card-grid layout (80%), photography imagery (73%), gradient palette (96%), parallax pattern (90%), scroll-triggered as sole interaction (83%), mono typography (90%), mysterious-moody tone (73%). Instead used bento-box (0% -- never used), magnetic (23%), geometric-abstract (6%), book-scholarly (3%), analogous (3%), edgy-rebellious (10%).