# Design Language for bability.pro ## Aesthetics and Tone bability.pro is a **living probability laboratory** rendered as an infinite, scrollable Galton board. The domain's name -- a clipped, stuttering "probability" with the "pro" suffix doubling as a professional mark -- becomes the governing metaphor: words, shapes, and ideas that fall, bounce, and settle into distributions. The aesthetic is **generative-art maximalism fused with mathematical formalism**: the rigor of a 1960s statistics textbook crossed with the kinetic chaos of a physics simulation on the verge of collapse. The mood is **playfully rigorous and quietly unnerving** -- the viewer is invited to enjoy the dance of particles, but the site never lets them forget that every pixel is governed by cold stochastic law. Nothing here is placed; everything is *sampled*. Buttons don't hover, they *regress to the mean*. Text doesn't animate, it *realizes* as if drawn from a bag of letters. Inspirations: - Oskar Schlemmer's Bauhaus costume studies (geometric humans in probabilistic formation) - Manfred Mohr's early plotter art (algorithmic constraint producing surprise) - Edward Tufte's dense information tapestries (every inch earns its place) - Casino floors at 4 AM seen through frosted glass (candy-bright chips scattered on felt-black tables) - Japanese *sugoroku* board-game scrolls (probability as narrative progression) - The precise, almost cruel elegance of a chi-square distribution curve The tone is **whimsical-creative crossed with scholarly-intellectual** -- a rare pairing. The site speaks like a tenured professor who has just realized their entire field is a particularly elegant game of dice, and finds this uproariously funny. ## Layout Motifs and Structure The organizing principle is the **hexagonal probability cell** -- a tessellated honeycomb of possibility where each cell is a sampled outcome. This is the rarest layout in the corpus (only 5% usage) and it is load-bearing here: hexagons nest naturally into probability space because they are the densest packing of uncertainty into form. **Macro structure (top to bottom, each full-bleed 100vh):** 1. **The Drop Chamber** -- A full-viewport Galton board. Pegs are arranged in a triangular lattice. As the visitor lands, a single white marble is dropped from the top center, bouncing left or right at each peg based on a live Math.random() call. Where it lands determines which of 16 hero phrases renders below it. The board never clears -- every visitor's marble joins the accumulating histogram at the base, building a slow, communal normal distribution over the site's lifetime (stored in localStorage for the solo user, with a seeded server-side curve for the initial shape). 2. **Hexagonal Sample Gallery** -- A magazine-spread layout (2% usage -- extremely rare) of irregular hexagonal cells tiled in offset rows. Each hexagon contains one "sample" -- a probability concept, a quote, a micro-illustration of a stochastic process (random walk, Poisson process, Brownian motion). The cells are sized by importance-weighted sampling: larger hexagons for higher-probability topics. Cells shimmer in place with subtle border-animate effects (only 2% of designs use border-animate). 3. **The Density Strip** -- A horizontal, full-width probability density function rendered as a living curve that extends off-screen in both directions. The curve's peak aligns with the viewer's cursor on hover, dragging the distribution's mode laterally. Beneath it, vertical bars sample values from the curve in real time, forming a live histogram that rebuilds every 800ms. 4. **Isometric Dice Theater** -- An isometric 3D stage (2% usage) where oversized d6, d20, and custom polyhedral dice tumble endlessly across a tilted plane. Each die is a clickable gateway to a "law" of probability (Law of Large Numbers, Central Limit Theorem, Bayes' Rule, Gambler's Fallacy, etc.). Click a die and it freezes mid-tumble, expanding a side panel with the law written in plain, slightly-too-casual prose. 5. **The Ergodic Corridor** -- A vertical tunnel of scroll-driven content where the background is a single long Markov chain visualization. As the visitor scrolls, the viewport moves along the chain, each state transition triggering a micro-animation and a text block that explains one facet of randomness. Scroll slower and the chain runs slower; scroll fast and transitions blur into statistical smoke. 6. **The Confidence Footer** -- A margin of error. Literally: a footer that shifts its position by +/- 12px every page load, labeled "(95% CI)". Contains minimal text, a single email (rendered as a probability puzzle), and the site's generative signature -- a unique seeded snowflake produced from the visitor's first click coordinates. **Grid logic:** No 12-column grid. The entire site is laid out on an **axial hexagonal coordinate system** (q, r coordinates) rendered via CSS Grid + transform: translate for offset rows. Text blocks snap to hex centers; illustrations occupy hex clusters of 3, 7, or 19 cells (hex numbers). **Negative space:** Unlike typical "ma-negative-space" designs, negative space here is *active* -- it is the sample space from which content is drawn. Empty hexagons are rendered with a faint 1px outline and occasionally flicker with candidate content (ghostly gray text at 12% opacity) before vanishing. The empty cells are not empty; they are *unrealized*. ## Typography and Palette **Display Face:** **"Fraunces"** (Google Fonts) -- a modern serif with optical sizing and a wide range of weights and slants. Used oversized (clamp(4rem, 12vw, 14rem)) for the hero word "probability" which renders one letter per hexagonal cell, each letter at a slightly different weight (sampled uniformly from 300-900) and optical size. Letters occasionally "resample" themselves -- rerolling weight every 7 seconds with a smooth tween. This uses **elegant-serif** typography (only 2% usage) combined with **kinetic-animated** behavior. **Secondary Display:** **"Bebas Neue"** (Google Fonts) -- condensed, uppercase, used for section numbering and statistical labels ("SAMPLE 003", "n = 1,024", "p < 0.05"). Its extreme condensation evokes old lottery tickets and probability tables. Uses **display-bold + condensed** (together rare). **Body:** **"Cormorant Garamond"** (Google Fonts) -- a high-contrast serif revival with delicate hairlines. Its almost calligraphic grace contrasts sharply with the geometric chaos of the hexagonal layout, creating productive tension. Weight 400, generous line-height (1.7), optically narrow measure (52ch max). **Mathematical Expressions:** **"STIX Two Math"** / **"STIX Two Text"** (Google Fonts) -- designed for mathematical typesetting. Used wherever probability notation appears (P(A|B), E[X], integrals, summations). Renders equations inline with the body text as first-class citizens, not as images. **Micro Face:** **"DM Mono"** (Google Fonts) -- used only for coordinate labels, seed values, and the visitor's unique-session hash displayed in the corner. Used minimally, under 1% of on-page characters. This keeps mono usage below the 87% saturation point -- mono is present but not dominant. **Palette:** A rare combination of **candy-bright** (2% usage) + **monochrome** (5% usage) + single **deep-burgundy** accent. Core palette: - `#faf7f2` -- *cream base* -- the "felt" of the probability table; warm off-white, slightly uneven tone - `#0a0a0a` -- *near-black* -- for ink, pegs, hexagon outlines, primary text - `#1c1c1e` -- *soft ink* -- for secondary text, subtler linework - `#ff3b6f` -- *marble pink* -- the color of the falling marble; used sparingly for interactive state - `#ffd60a` -- *dice yellow* -- the face of the d20; used for accents, selected state, the current sample - `#4cd964` -- *distribution green* -- the curve color; used only for the density function and active chain states - `#5856d6` -- *bayes violet* -- used exclusively in the Ergodic Corridor; signals posterior regions - `#6b0f2a` -- *deep burgundy* -- the color of the "house"; used for statistical labels, chi-square regions, error bars **Palette discipline:** Each color has a *meaning*. Pink is always the marble. Yellow is always the current sample. Green is always the density. Violet is always Bayesian. Burgundy is always the "edge of the distribution" (tails, outliers, errors). Colors never mingle arbitrarily -- each cell respects color semantics. This makes the site function as a self-consistent notation system. **Contrast:** WCAG-indifferent (per instructions), but the cream + near-black base provides strong readability. Accent colors appear only on small elements against cream or against each other in data visualization. ## Imagery and Motifs **The Peg Lattice:** The primary background motif across all sections is a subtle triangular peg lattice rendered as tiny filled circles (#0a0a0a at 18% opacity, 4px diameter, 48px spacing). This lattice establishes a "probability field" that pervades every section, even where it's not actively used. Scrolling slightly shifts the lattice (parallax) to suggest the field is vast and the page a viewport onto it. **Marble Trails:** Every marble that drops in the hero leaves behind a fading path trace -- a soft pink line (#ff3b6f at 30% opacity) that records its exact trajectory. Trails persist for 4 seconds then evaporate. Over time, as multiple marbles drop, a ghostly web of trajectories accumulates, physically rendering the *set of possible paths*. **Hexagon Borders:** Each hexagonal cell has a 1px outline. Active/hovered cells thicken their outline via **border-animate** (2% usage) -- the border draws itself from one vertex around to meet itself, taking 1.2s, as if measuring the cell's perimeter. On leave, the border reverses. **Polyhedral Dice (3D):** The isometric dice theater uses CSS-only 3D polyhedra (d4, d6, d8, d12, d20). Each die is constructed with `transform-style: preserve-3d` and individual face planes. Faces are textured with subtle grain-overlay. Dice tumble on a long, complex animation path sampled from a physics pre-computation (stored as a keyframes string). **Probability Density Curves:** Line art renderings of classic distributions (Normal, Poisson, Exponential, Beta, Chi-Square) appear as decorative margin elements throughout. They are rendered in **distribution green** at stroke-width 1.5px, with y-axis labels in DM Mono. Occasionally a curve will "animate in" via **path-draw-svg** (30% usage, common but used here with purpose) as the visitor scrolls to its section. **The Markov Chain Tapestry:** The background of the Ergodic Corridor is a long, unbroken SVG Markov chain diagram. Nodes are hexagons. Edges are curved arrows with probability labels (0.23, 0.41, etc.). The chain is procedurally generated per page load from a fixed seed + visitor-session-id, ensuring every visitor sees a "personal" chain while the overall structure stays coherent. **The Seed Snowflake:** At page exit / footer, the visitor's "signature" is a unique hexagonally-symmetric snowflake generated from their first click coordinates and session timestamp. Rendered in SVG, it's offered as a downloadable artifact -- a unique probabilistic artwork per visit. **Histograms as Architecture:** Several section dividers are not divider lines but live histograms -- vertical bars whose heights sample from a probability distribution in real time. They serve as load-bearing transitions; the "divider" *is* data. **No photography.** No stock images. No icon sets. Everything is drawn algorithmically from the probabilistic vocabulary. This explicitly avoids the 92% photography saturation. **Anti-motifs:** No circuit patterns. No crystals. No flowing curves in the organic sense. No floating UI elements. No particle effects (which, ironically, are exactly what everyone else does for "probability" -- we resist this instinct entirely). ## Prompts for Implementation **The Galton Board is Real:** Build the hero as an actual working Galton board in HTML5 Canvas or SVG. Use a triangular lattice of pegs. Implement real collision physics via a simple bounce heuristic (`direction = Math.random() < 0.5 ? 'left' : 'right'`) at each peg. The marble must *look* like it's bouncing, not teleporting. Accumulate outcomes at the base into visible stacked markers. The marble's final column determines which of 16 pre-written hero taglines is revealed below. **Story over CTAs:** There is no "Get Started" button. There is no pricing block. There are no stat-grids (though the histograms may superficially resemble them, they are living simulations, not static counts). Every section is a *demonstration*, not a pitch. The visitor leaves understanding what probability *feels like* to interact with, which is the entire point. **Narrative-driven scroll:** The sequence from Drop Chamber -> Hexagonal Gallery -> Density Strip -> Dice Theater -> Ergodic Corridor -> Confidence Footer tells a six-act story: 1. Probability enters the world (a marble falls) 2. Probability discretizes (hexagonal samples) 3. Probability becomes continuous (density curves) 4. Probability becomes game (dice as artifacts) 5. Probability becomes history (Markov chain of states) 6. Probability admits uncertainty (the confidence-interval footer) **Animation discipline:** - **Use `prefers-reduced-motion` only at the system level -- this is a visually-focused project and reduced-motion users simply see a static, still-beautiful snapshot where all sampled values hold their initial random state.** - **Primary animation technique: requestAnimationFrame-driven continuous simulation.** Many elements (the density curve, the dice, the marble drops) are never "done" -- they run for as long as the site is open. - **Scroll-triggered animations should be minimal and purposeful** (only where sections reveal). The frequency analysis shows 95% of designs use scroll-triggered; here, continuous simulation takes precedence. This differentiates dramatically. - Use **elastic** easing for dice settling (cubic-bezier(0.34, 1.56, 0.64, 1)). - Use **spring** physics for the density-curve interaction (via a simple Hookean simulation, damping = 0.7, stiffness = 0.2). **JavaScript architecture:** - A single `Probability` module exposes utility functions: `sample(distribution, params)`, `drop()`, `markov(states, transitionMatrix)`, `hexCoord(q, r)`, etc. - Every visible random element calls into this module, so the site is philosophically coherent -- randomness is not scattered, it is *centralized* and *audited*. - The seed for the visitor's session is derivable: `seed = hash(document.referrer + Date.now() + screen.width)`. This enables reproducibility in theory but unpredictability in practice. **CSS priorities:** - `clip-path: polygon(...)` for hexagons (six-vertex polygons calculated as `points = [cos(60 k), sin(60 k) for k in 0..5]`). - CSS custom properties for the seven core palette colors, referenced everywhere. - `transform-style: preserve-3d` for the dice theater. - No frameworks. Vanilla HTML/CSS/JS. No jQuery, no React, no Tailwind, no build step. - No external SVG assets; all SVG inlined or generated by JS on load. **Typography animation:** The hero word "probability" has each letter's font-weight animated via CSS custom properties (`--w-p`, `--w-r`, etc.) that are JS-resampled every 7 seconds. Use `font-variation-settings: "wght" var(--w-p)` on each letter span. This creates a breathing, resampling title that never settles. **Cursor as sampler:** A custom cursor is a small crosshair. When hovering the density strip, the crosshair drags the distribution's mode. When hovering a die, the crosshair becomes a tiny "roll" hand. When hovering a hexagon, the crosshair becomes a nested mini-hexagon. This replaces the **cursor-follow** (22% usage) pattern with something more semantically aligned to the site's themes. **Sound (optional, off by default):** A toggle in the footer enables ambient audio -- a soft low-frequency hum (the "background probability field") with intermittent wooden *tocks* whenever a marble hits a peg. If enabled, the site becomes audibly probabilistic. **Mobile:** On narrow screens, the hexagonal layout transposes into a vertical stack where each hex occupies full width. The Galton board scales down but remains functional. The isometric dice theater becomes a 2D tumbling dice strip. The Ergodic Corridor remains intact -- it is already vertical. **Text tone guidance:** - Hero taglines should be aphoristic, slightly unsettling: "Every outcome was always possible. This one happened." / "You just sampled from a space of infinite yous." / "The marble doesn't remember. You do." - Body text should be precise, declarative, with occasional dry wit. - Never "You'll love our service." Always "The law of large numbers demands repetition; so do we." - Numbers should be specific: "n = 1024 samples", not "lots of data". ## Uniqueness Notes 1. **Load-bearing hexagonal layout:** Only 5% of the corpus uses hexagonal-honeycomb. Here, it is not decoration but the fundamental coordinate system. Every content block respects hex geometry. This is structural, not stylistic. 2. **Live Galton board as hero:** No other design in the corpus uses a working physics simulation as the primary hero element. The hero literally *runs* on every visit and accumulates state. This is radically different from the 92% photography-dominant hero pattern. 3. **Centralized randomness as philosophy:** The site's entire visual state derives from a single `Probability` module. This is not just implementation -- it's a design statement. Randomness is treated as a first-class citizen of the design language itself, not a decorative noise texture. 4. **Seven-color semantic palette:** Each of the seven palette colors has a fixed semantic meaning (marble, sample, density, Bayesian, error-tail, ink, table-felt). This makes the site legible as a *notation system*. Most corpus designs treat color as mood; here it is grammar. 5. **Anti-photographic, anti-icon:** Zero photographs, zero icon fonts, zero stock illustrations. Everything is generated algorithmically. Directly resists the 92% photography saturation and the common icon-heavy trend. 6. **Continuous simulation over scroll-triggered:** While 95% of designs rely on scroll-triggered reveals, this site foregrounds *continuous, always-running* simulations. Elements move whether or not the visitor scrolls. This is a deliberate inversion of the dominant animation paradigm. 7. **Magazine-spread + isometric + hexagonal:** Combines three of the least-used layout patterns (2%, 2%, 5% respectively). None of the other 40 designs combine even two of these. This is the rarest layout combination in the corpus. 8. **candy-bright + monochrome + deep-burgundy:** This palette combination does not appear elsewhere. Candy-bright (2%) is almost unused; combining it with monochrome (5%) creates the rare effect of a mostly-black-and-white world punctuated by deliberate, semantic bursts of vivid color -- like colored pencils on a textbook page. 9. **border-animate as primary interaction:** Only 2% of designs use border-animate; here it is the *signature* hover effect (replacing the far more common scale-hover or magnetic). Every hexagon hover triggers a perimeter-drawing animation that measures the cell. This is haptic in feel but purely visual. 10. **elegant-serif display typography:** Only 2% of the corpus uses elegant-serif. Fraunces + Cormorant Garamond + STIX Two Math is a typographic combination unseen elsewhere -- academic, slightly ornate, mathematically serious. **Chosen seed:** `generative art background` -- adapted from "decorative background pattern" into "the entire site is a generative art piece". Rather than generative art *behind* content, the content *is* the generative art. **Avoided patterns from frequency analysis:** - Avoided: `corporate` (87%), `photography` (92%), `card-grid` (92%), `centered` (85%), `mono` typography (87%), `gradient` palette (97%), `warm` palette (95%), `scroll-triggered` (95% -- minimized, not eliminated). - Preferred: `hexagonal-honeycomb` (5%), `magazine-spread` (2%), `isometric` (2%), `elegant-serif` (2%), `candy-bright` (2%), `monochrome` (5%), `border-animate` (2%), `generative-art` (10%), `whimsical-creative` (12%), `scholarly-intellectual` (12%). **Tone pairing:** whimsical-creative + scholarly-intellectual -- a combination not found elsewhere in the corpus. Most designs pick one register; this one lives in the productive tension between them.