# Design Language for bable.pro ## Aesthetics and Tone `bable.pro` is **a 1958 probability salon for friendly speech** — a domain where the mathematics of *what is likely to be said* is rendered the way Charles and Ray Eames would have rendered it: as a **rounded, honey-lit dashboard built into the dashboard of a Studebaker Hawk**, with leather wrapped instruments, walnut bezels, and dials that tell you not the speed of the car but the **probability that the next word out of a stranger's mouth will be kind**. The wordmark "bable" is a deliberate elision — *babble* meets *probable* meets *Babel* — and the whole site is the **showroom-floor demonstration unit for a tabletop appliance that quantifies talkability**: a mid-century probability radio, a friendly speech-likelihood console, the analog twin of a modern LLM. It is *optimistic-bright* in the specific 1958 sense of the word — the optimism of postwar industrial design, of Russel Wright's American Modern dinnerware, of the *Saul Bass title sequence for Anatomy of a Murder*: cheerful but tooled, friendly but precision-machined, naïve but engineered to last forty years on a kitchen counter without yellowing. The tone is the tone of a **young Eero Saarinen explaining the TWA Flight Center to a child**: confident, curious, a little in love with its own roundness. There is no irony. There is no edge. The cursor leaves small soft footprints. The dials *bounce* into position when you arrive — they don't slide, they don't fade, they *bounce* the way a tiny weighted needle bounces on a ribbon mic when somebody laughs into it. Every interaction confirms a hypothesis the visitor didn't know they were testing: *that the future, when it arrives, will be rounded at the corners and warm to the touch*. The aesthetic anchor is **mid-century-modern industrial-optimism**, but specifically the Herman-Miller-meets-Bell-Labs slice of it — *not* Don Draper's office, *not* Mad Men ad copy, *not* Eichler real-estate. Closer to: the Bell Labs' 1959 brochure for the Picturephone, Alexander Girard's textile swatches at the Vitra Design Museum, the side-panel of an Olivetti Lettera 32, and the **inside cover of a Charles Mingus LP from 1959 that has been left in a sun-warmed honey-jar**. The whole page should feel like it was *injection-molded out of caramel and tooled with chrome*. ## Layout Motifs and Structure The page is a **single full-viewport dashboard** — one console, presented like a museum specimen — with a **rounded-corner bezel** that occupies the entire viewport (`border-radius: clamp(24px, 4vw, 64px)` on a fixed-position `
` inset by `clamp(12px, 2vw, 36px)`). Inside the bezel, the dashboard divides into **seven instrument-bays** arranged in a deliberately *non-grid* mid-century composition that nods to the 1958 General Electric "Talaria" console: one large dominant bay top-left (the **probability dial**), three medium bays tiled in an L along the right edge (**transcripts**, **glossary**, **probability of agreement**), one wide horizontal strip across the bottom (**the talk-tape**), and two small circular bays floating asymmetrically over the seam (a **VU-meter** and a **kindness-lamp**). The bays are **not boxes**. They are **routered walnut-veneer panels with brushed-honey aluminum trim**, each one a soft rectangle with a 12–18px inner shadow on the top edge and a 1px highlight on the bottom — the classic mid-century "pressed-veneer" inset. They are *separated by hairline brass rules at exactly 0.5px* (`box-shadow: 0 1px 0 #C9A24C` on a 0.5px line). The layout never reflows on scroll, because **the page does not scroll** — the dashboard is a fixed instrument and the visitor *operates* it rather than *reading* it. (Frequency note: 17% of prior designs use `dashboard`, 92% use `centered`. This design is **dashboard, *not* centered** — there is no central column, the composition is offset Bauhaus-asymmetric, and `
` does not collapse to a content-column at any breakpoint.) There is **one and only one navigation gesture**: rotating the **big chrome knob** in the lower-left corner. The knob has six detents, each labeled with a single Futura-rounded glyph: `?`, `~`, `→`, `≈`, `★`, `∞`. Clicking a detent swaps the contents of every bay simultaneously — like changing the band on a transistor radio — using a **bounce-enter** animation that staggers each bay by 70ms with a `cubic-bezier(0.34, 1.56, 0.64, 1)` overshoot of about 8% before settling. There is no scrolling, no parallax, no full-bleed hero, no asymmetric-but-still-vertical layout. **The page is the appliance and the appliance has no scroll-bar**, because in 1958 nothing scrolled. At <720px the dashboard does not collapse to a stack. It **rotates 90° and becomes a kitchen-counter unit** — the bays rearrange into a horizontal seven-instrument row, the visitor scrolls *horizontally* (not vertically, ever) to pan along the console, and the chrome knob anchors to the bottom-right thumb-zone of the phone. This is not a concession to mobile, it is a **second appliance**: the *portable* version of the salon console, the way the original Olivetti Lettera was the portable version of the Underwood. ## Typography and Palette **Typography — three Google Fonts, used like the dial-faces, knob-labels, and ribbon of a 1958 console radio:** - **Display & headings — [`Fraunces`](https://fonts.google.com/specimen/Fraunces)** at SOFT axis 100, WONK axis 1, opsz 144, wght 600. Fraunces' SOFT/WONK axes are the rare modern variable controls that produce a **playful-rounded serif** without becoming a cartoon. Set the wordmark "bable.pro" at `clamp(72px, 14vw, 220px)` with `letter-spacing: -0.04em`, `font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144`, and `font-feature-settings: "ss01", "ss03"` to access the *ball-terminal* `a` and the *spurless* `b`. The big serif is the salon's masthead — it should feel like a *honey-glazed display cut* on a 1958 LP cover, the way Reid Miles cut Blue Note titles but warmer, less razored, more *Mingus Ah Um* than *Blue Train*. - **Instrument labels & body — [`Quicksand`](https://fonts.google.com/specimen/Quicksand)** wght 400 / 500 / 600. Quicksand is the **playful-rounded sans** of the assignment seed, and at small sizes it is *exactly* the lettering of mid-century instrument decals — round circular bowls, geometric `o`/`d`/`g`, no terminals, no italic. Use for every dial label, every bay title, every body sentence. Body at 17–18px, line-height 1.55, tracked at `+0.005em`. Set `font-feature-settings: "ss01"` to switch to the more geometric single-storey `a`. Frequency note: `playful-rounded` typography is at 2% in the registry — this design owns it. - **Numerals & probability tickers — [`DM Mono`](https://fonts.google.com/specimen/DM+Mono)** wght 400, italic for predicted values, regular for measured. The mono is the only place mathematical precision lives on this page, and it lives there in a *warm* mono — DM Mono has a slight calligraphic spur that prevents it from feeling like terminal text. Used at 13–15px, tracked `+0.04em`, all-figures-tabular, and *every numeral is animated as a counter that bounces past its target by 4% before settling*. No fourth family. No system fallback that looks different. No italic on the body. The two sans/serif weights are the **two voices of the appliance**: Fraunces is the *brand*, Quicksand is the *operator*, DM Mono is the *measurement*. **Palette — honeyed-neutral, eight tones, named like Russel Wright dinnerware:** - `#F5E6C8` — **Honeycomb Cream** — the base of every bay-face and the page background. Warm, slightly yellow, slightly waxy. Like the inside of a Heath Ceramics mug at golden hour. - `#E8C887` — **Glazed Honey** — the bezel-fill of the bays, the dominant mid-tone, the thing the eye reads as *the color of the site*. - `#C9A24C` — **Brushed Brass** — every hairline rule, every dial-needle, every knob-trim, every active state. The chrome of 1958, but warmer. - `#8C6A2E` — **Walnut Veneer** — the routered panel-edges and the deeper instrument bezels. Used at `mix-blend-mode: multiply` over Honeycomb to imitate routered wood. - `#3F2A18` — **Saddle Leather** — the body-text color and the dial-face on the probability dial. The leather of a 1958 club chair after twenty Octobers of sun. - `#FAF6EC` — **Ribbon Ivory** — the highlight color, used for the 1px highlights on the bottom edges of bays and for the `` ribbons running across the talk-tape. - `#D85A3C` — **Tomato Lacquer** — the *single* accent color, used **only** on the kindness-lamp when it is lit and on the probability-dial needle. It is the Russel Wright American Modern "Seafoam" inverted — a tomato-orange that means *this is the value*. Restricted to less than 1.5% of the painted surface, by careful design. - `#5E7A52` — **Avocado Felt** — the *secondary* accent, used only inside the VU-meter and the kindness-lamp's halo. The avocado-green of a 1958 Hotpoint stove, muted, never neon. Frequency note: `honeyed-neutral` palette is at 2% in the registry. Combined with the Tomato Lacquer + Avocado Felt accents, this palette is **unique in the registry** to two decimal places of color hex. ## Imagery and Motifs **The page does not use photography.** Frequency analysis shows photography at 92% — `bable.pro` is a deliberate refusal. There are no photographs of people, no stock images of "talking" or "communication," no abstract illustrations of speech bubbles, no avatars. Every image element is *materials*, not *pictures*. - **Leather-texture is the foundational surface** of the probability-dial bay, the talk-tape, and the chrome-knob's grip-ring. Implemented as a **procedurally generated SVG filter**: a base hue of `#3F2A18` (Saddle Leather), with three layered `feTurbulence` filters at `baseFrequency` 0.62 / 0.08 / 0.018 composited via `feComposite operator="arithmetic"` to produce the *grain*, the *crease*, and the *patina* of full-grain saddle leather. A second pass with `feSpecularLighting` and a `` adds the soft golden-hour highlight that makes the leather look *warmed by the lamp on the side-table*. The leather is rendered once at 1024×1024, then tiled with `background-size: 256px 256px` and `background-blend-mode: multiply` so it never repeats visibly. Frequency note: leather-texture is at 5%. - **Vintage motifs everywhere — but vintage *as engineering*, not as nostalgia.** The bays carry tiny **decals** etched into their walnut: a *jet-age boomerang* in the bottom-left, a *Saarinen tulip-base* on the talk-tape, a *Sputnik starburst* (six points, not eight) on the VU-meter, a *Russel Wright leaf-cutout* near the glossary, and a *Charley Harper-style minimalist songbird* perched on the seam between bay 3 and bay 4. All decals are SVG, all are stroked at 1px in Brushed Brass, all sit at `opacity: 0.42` so they read as *embossed into the panel* rather than *printed on it*. Frequency note: `vintage` motifs are at 87% — common, but executed here as **engineering decals**, not as filtered photography or as paper-aged collage. This is the difference between *aged vintage* and *brand-new-1958 vintage*; bable.pro is the latter, the showroom-floor specimen, never been touched, plastic still on the seat. - **The dial-faces are the imagery.** The big probability dial in the upper-left bay is a **half-circle gauge** in saddle leather, with brass tick-marks at every 5° and a tomato-lacquer needle. The dial reads `0%` at the left, `50% — PROBABLE` at the apex, and `100%` at the right, with the word **PROBABLE** set in Fraunces SOFT-100 SmCp at the apex like the word *FEDERAL* on a 1958 Federal Reserve Note. The needle is *physically simulated* — a small spring-mass system in JS with light damping (k=0.18, c=0.07) so it **bounces past its measured value by 6–8% and oscillates twice before settling**, exactly like a real D'Arsonval movement. This is the heart of the bounce-enter motif (registry frequency 2%): every bay has a needle, every needle bounces, every bounce is the same spring constant — the appliance has *one resonant frequency* and everything on it tunes to that frequency. - **The kindness-lamp** is a tiny circular bay in the top-right, containing a single inset SVG of a **mid-century lamp shade** (the cone-on-a-tripod kind, after Greta Grossman) which **lights up in Tomato Lacquer** when the cursor enters the dashboard. The lamp's halo is a radial Avocado-Felt gradient at 8% opacity. When lit, the lamp casts a `box-shadow: 0 0 64px 8px #D85A3C30` onto the surrounding bays — a real lamp casts real light, even on an appliance. - **The talk-tape** running across the bottom is a **paper-tape ticker** (the kind a 1958 stock-ticker spits out) printed with the **last twelve probabilities** — `bable.pro: 0.92`, `weather.pro: 0.71`, `lunch.pro: 0.88` — scrolling horizontally at 18px/s on a Honeycomb Cream paper background with subtle paper-fiber noise (a `feTurbulence` at `baseFrequency=2.4`). Each new tape-entry **bounces** into the leftmost slot. **Custom illustration vocabulary, drawn at 1px stroke in Brushed Brass:** the tulip-base, the boomerang, the Sputnik (6-point), the Charley-Harper bird (5 polygons total, no curves), the lamp-on-tripod, the ribbon-microphone (because what good is a probability salon without one), and a small *amoeboid* shape that appears once, on the seam between bay 5 and bay 6, as a single Alexander Girard tile-motif. Total illustration budget: **~7 SVGs, none larger than 96×96px.** ## Prompts for Implementation Build this as **one fixed-position dashboard** that occupies the viewport like a museum specimen behind glass. The visitor never scrolls. The visitor *operates*. **Vow 1 — The bezel is the viewport.** Set `
` to `position: fixed; inset: clamp(12px, 2vw, 36px); border-radius: clamp(24px, 4vw, 64px); background: #F5E6C8; box-shadow: inset 0 0 0 1px #C9A24C, 0 8px 24px rgba(63, 42, 24, 0.15)`. The body background outside the bezel is a slightly darker honey (`#EFD9A8`) with a faint paper-fiber `feTurbulence` overlay so the bezel reads as *resting on a kitchen counter*. There is no header. There is no footer. There is no `