# Design Language for bability.pro ## Aesthetics and Tone **bability.pro** is a malformed word pretending it has always existed — a **chipped Latin suffix** glued onto a soft Korean-sounding stem. *Ba-* is a baby-talk syllable, the first phoneme a mouth can make; *-bility* is the most senatorial ending in English, the suffix of *capability, durability, nobility, possibility*. Welded together they produce a word that is half toddler, half Senate floor — and the **`.pro`** TLD gestures at a professional credential the word itself cannot quite earn. The site has to live in that gap. It must be **monumental and embarrassed**, **stately and approachable**, the way a Roman bust looks when somebody has put a knit beanie on its head. The aesthetic is **cinematic** (corpus: 2%, near-empty category — deliberately chosen). Not "cinematic" in the lazy sense of "dark gradient + slow fade," but cinematic in the literal grammar of cinema: **letterboxed black bars, anamorphic horizontal flares, slow lateral dolly camera moves, depth-of-field racks, title cards in condensed type, an aspect ratio of 2.39:1 imposed on a vertical scroll.** The page is a single 70mm reel that the visitor cranks through by scrolling. Every section is a **shot** — establishing, medium, close, insert, cutaway — composed and timed as if a director of photography had storyboarded it before any HTML was written. The motif overlay is **marble-classical** (corpus: 2%, near-empty). The cinema is shooting a **museum after closing** — a long tracking shot down a hall of antiquities lit by a single key light at 4000 K. Plinths, pedestals, drapery folds, fluted columns, a busted nose on a Caryatid, the soft shoulder of a kouros. Marble is the texture, but the relationship is irreverent: the camera lingers on a chipped earlobe, a fingerprint in the dust on a pedestal, a fire-exit sign reflected in the glass of a vitrine. Antiquity meets the building inspector. The tone is **approachable-casual** (corpus: 2%, near-empty). Despite the marble, the cinema, and the pseudo-Latin suffix, the *voice* is a friend whispering in the gallery — half-amused, slightly winded from running up the museum steps, willing to admit they don't know which dynasty this kouros is from but they like his face. Body copy uses contractions, sentence fragments, and the occasional parenthetical aside. No exclamation points. No marketing verbs. No "unlock your potential." Just somebody pointing at a 2,400-year-old shoulder and going *huh*. The mood, distilled: **a Sofia Coppola museum-after-hours short, narrated by your most likeable friend, scored by a single sustained Erik Satie chord, projected at 24 fps onto a sheet of Carrara that someone is gently rippling with a fingertip from the back.** ## Layout Motifs and Structure The compositional skeleton is **stacked-sections** — six full-viewport "shots" stacked vertically, each one a single 100vh letterboxed cinema frame. This is a deliberate departure from the corpus's 92% centered / 87% full-bleed / 46% asymmetric consensus. Stacked-sections is rare in the registry (single-column sits at 17%, immersive-scroll at 2%) — the page reads as a **reel**, not as a website. There is no sidebar, no sticky header, no navigation chrome. Just six shots, in order, like the six reels of a feature. **The 2.39:1 letterbox.** Every shot has a **fixed black bar at top and bottom** — `12vh` of solid `#0A0B0D` above and below a central `76vh` "frame." The bars are not decoration; they are the load-bearing horizon line of the page. Body copy can break out of the frame and overlap the lower black bar (subtitle convention). Headlines stay locked inside the frame. Scrolling the page visibly shifts the frame contents but the bars remain perfectly still — they are the proscenium, not the show. **The six shots, in order:** 1. **SHOT 01 — ESTABLISHING.** A wide marble hall, photographed from the entrance. The wordmark `bability.pro` is set in `Bebas Neue` at 22vw, **set in white inside the lower black bar**, like a film's main title card. Above, a slow Ken Burns push on a marble texture. Subtitle in the upper bar: *A Short Film, in Six Reels, About Capability And Other Words That End Wrong.* 2. **SHOT 02 — MEDIUM.** A drapery fold, close. Copy block sits in the right third of the frame, breathing room on the left. The heading is a single fragment: *"the suffix is doing all the work."* Body copy as 2–3 sentence paragraph. The marble drapery has a single visible **ripple** that travels across it once every 9 seconds — the page's signature motion. 3. **SHOT 03 — INSERT.** A single object on a black plinth, centered. Could be a kouros's earlobe, a chipped earring, a fingerprint in dust. The accompanying text is one sentence, set in italic, in the lower bar like a museum wall label. 4. **SHOT 04 — CUTAWAY.** A horizontal dolly across three plinths. Implemented as a **horizontal scroll-jacked panel** inside the vertical scroll: the visitor scrolls down, but the camera moves **left-to-right** for ~3 viewport-widths of marble before resuming vertical. Like a long lateral master shot in *Barry Lyndon*. 5. **SHOT 05 — CLOSE.** A single typographic slab — a piece of body text large enough to fill the frame, set in `Cormorant Garamond` italic, 9vw, with one word swapped out mid-sentence so the visitor sees the substitution happen on a slow `morph` transition. The line is the thesis statement of the page. 6. **SHOT 06 — END CARD.** Black frame. Three lines of credits typed out at 24 cps in monospace, like a `typewriter-effect` end-roll: *Directed by no one. Photographed in marble. The dust is real.* Followed by 8vh of black, then the page ends. No CTA. No newsletter. No footer links. The film is over. **Spatial discipline.** The frame uses a **6-column rule-of-thirds grid** — three vertical thirds, three horizontal thirds, with all hero subjects landed on grid intersections, the way a DP composes through the viewfinder. Inter-section padding is **zero**: shots butt directly against each other, separated only by their black bars touching. This produces a **continuous strip of cinema** with no white-space breathers, the way film reels are spliced. **The lateral dolly (Shot 04).** When the visitor reaches Shot 04, vertical scroll is captured for ~3 viewport-widths and translated into horizontal `transform: translateX()`. The marble panel slides past the letterboxed window from left to right, with three plinths drifting through the frame at slightly different parallax depths (foreground plinth at 1×, mid-plinth at 0.7×, background marble at 0.3×). The effect is a **single long take**. When the visitor scrolls back up, the dolly reverses cleanly — no snap, no jump-cut. ## Typography and Palette **Typography is condensed** (corpus: 5%, underused). The system is built around three Google Fonts, each doing one specific cinematic job: - **Title cards & wordmark:** [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue), 400 regular. The single most cinematic condensed sans on Google Fonts — uppercase-only, tight tracking, the typeface of *Mad Men* main titles and roughly 40% of all film-trailer typography since 2010. Set the wordmark `BABILITY.PRO` at `clamp(8rem, 22vw, 22rem)`, letter-spaced at `0.04em`, all caps, color `#F2EFEA` (warm bone white, not pure white — pure white reads as PowerPoint, bone reads as projected light). - **Body & subtitle copy:** [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond), 300 light, 300 italic, 500 medium. Cormorant carries the marble — it is a serif drawn from Garamond but with the wider counters and sharper bracketed serifs of a museum wall label. Body at `clamp(1.05rem, 1.2vw, 1.25rem)` / `1.55` line-height. Italic is used liberally — every museum wall label, every wry aside, every sentence the *narrator* would whisper rather than say out loud. - **Credits & numerals:** [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono), 400 regular. The end-card credit roll, the shot numbers ("SHOT 04 / 06"), the timecode in the corner. Tabular figures, fixed width, tracked at `0.02em`. This is the only place mono shows up — corpus mono usage is 94% so we deliberately rationed it to a single supporting role. **The shot-number gimmick.** The lower black bar of every shot displays a **timecode** in JetBrains Mono — `00:01:24:08` in Shot 01, advancing realistically as the visitor scrolls. The timecode is a real timer that ticks SMPTE-style (24 frames/second), counting from `00:00:00:00` at page load. It does not loop. By the end-card it reads roughly `00:04:30:00` — a four-and-a-half-minute short film, exactly the length of an experimental reel. **Palette is cool-grays** (corpus: 2%, near-empty — deliberately chosen). The corpus is 97% warm; this design refuses warmth entirely. Every color leans blue-of-the-mortuary-fluorescent or gray-of-the-marble-slab. No browns. No creams. No vellum. The Carrara that ships from Tuscany is in fact slightly *cool* under daylight — the warm tones photographers add are projection. | Token | Hex | Role | |---|---|---| | `--reel-black` | `#0A0B0D` | The letterbox bars. Almost-but-not-quite black, with a 2-point bias toward blue. | | `--marble-base` | `#D8DCE0` | Carrara base — a cool dove-gray, the color of a freshly cut block under north light. | | `--marble-vein` | `#9AA1A8` | The gray-blue veins running through the slab. | | `--bone-white` | `#F2EFEA` | Title-card type and highlights — projected light, not paper. | | `--shadow-blue` | `#2B313A` | The deep cool shadow under the plinth, in the gallery's recessed corners. | | `--patina-teal` | `#5C7378` | The single accent — the blue-green of oxidized bronze on a kouros's eyelash, used at <2% surface area for hyperlink color and the timecode dot. | | `--ripple-edge` | `#B6BCC2` | The lighter highlight that travels across marble during a ripple animation. | The palette is **eight tokens**, of which seven are gray. The teal is the only chromatic note in the entire site, deployed sparingly — a single saved-up moment of color, the way a Wes Anderson film holds back its brightest hue for one specific cut. ## Imagery and Motifs **Imagery is exclusively `marble-texture`** (corpus: 0% — wholly empty category, deliberately chosen). No photography of real objects, no 3D renders, no illustrations, no icons except the `›` end-card pointer. The entire visual surface of the site is **marble** — generated, photographed, animated, rippled. **The marble itself.** Procedurally generated using a layered SVG noise filter: - A base gradient from `--marble-base` to a 4% darker tone, oriented at 8° from horizontal. - Three octaves of `feTurbulence` (`baseFrequency=0.012, 0.04, 0.18`) composited via `feDisplacementMap` to produce **veining**. - Fine-grain `feTurbulence` (`baseFrequency=0.9`) at 6% opacity for the **slab grain**. - A single hand-traced SVG path of a **major vein** in `--marble-vein`, drawn diagonally across the slab, animated with `path-draw-svg` at page-load (corpus 33% — used here for one specific revelation moment). The marble is regenerated at three different "cuts" — Shot 01 uses a wide-veined Calacatta, Shot 02 a fine-grained Carrara, Shot 04 a stormy gray Bardiglio. Same algorithm, different turbulence seeds. The marble *changes type* between shots like a film changing locations. **The ripple motif** (corpus pattern: 17% — chosen deliberately to keep on the underused side of common). The page's signature gesture is a **single circular ripple traveling across a marble surface every 9 seconds.** Implemented as an SVG `` whose displacement map is itself a small radial gradient that translates across the slab over 1.6 seconds, distorting the marble veining in its path the way a fingertip in a still pool would. Shot 02 carries the strongest ripple; Shot 03 has a smaller, quieter one — concentric on the kouros's earlobe, as if listening had set the marble vibrating. Shot 06 has none. The film has ended; the surface is still. **Marble-classical motif inventory:** 1. **Plinths.** Three plinths appear over the course of the film, each a black-painted wooden block with a soft drop-shadow at 8% opacity, fading down-left to suggest a single 4000 K key light from camera-right. The plinths are pure CSS — no images. A single 2px hairline along the top bevel in `--patina-teal`. 2. **Drapery folds.** Shot 02's marble has been displaced into a single soft drape — a `clip-path: polygon()` with five anchor points, animated to "breathe" once every 14 seconds (a slow inhale-exhale). The fold is just CSS-drawn marble; there is no cloth. 3. **The kouros earlobe (Shot 03).** A close-up SVG silhouette of an ear in `--marble-base` against `--reel-black`, with a single chip of negative space at the lobe's tip — the artifact has been damaged. A small `--patina-teal` dot in the chipped area is the only color in the frame. A museum wall label below, set in italic Cormorant: *Kouros, Attica, c. 540 BCE. Earlobe, fragmentary. Dust, 2026.* 4. **The fluted column.** Used as the right-edge ornamental rule on Shot 05 — a single SVG of vertical flutes, drawn as 8 parallel `path-draw-svg` lines that draw themselves in over 1.2 seconds when the section enters the viewport. 5. **The Caryatid silhouette.** Shot 04's middle plinth carries a tiny silhouette (40px tall) — the unmistakable profile of a Caryatid with a basket on her head. Hand-drawn SVG. She is the lateral dolly's center subject. 6. **The fire-exit sign.** A single irreverent intrusion: in the upper-left of Shot 04, a tiny `EXIT →` glyph in `--patina-teal`, set in JetBrains Mono at 11px, lit as if the museum's emergency light is on. The whole inventory is **deliberately small** — six classical objects across a six-shot film, one per reel. Restraint is the joke: a "marble-classical" site that has only six pieces of marble in it, like an art-school thesis whose entire show is six small things on a wall. ## Prompts for Implementation **The story to tell.** A visitor presses the front door of an antiquities museum that has been closed for 90 years. The door swings open easily — too easily. Inside, the lights are still on at 4000 K, low and cool. A camera is already moving down the hall, slow as a dolly on rubber wheels. The visitor scrolls; the camera advances. Six shots happen, in cinema order — wide, medium, insert, lateral dolly, close, end card. Marble ripples gently when the visitor isn't looking, like water remembering it used to be a lake. The voice in the visitor's ear belongs to a friend, not a curator: *"Look at this earlobe. Somebody chipped it. We don't know who. We don't know when. Anyway."* At the end, three lines of credits roll. The reel ends. The page is over. The visitor has been told nothing. They have been *visited*. **The implementation must build that film.** Bias every choice toward cinematic grammar, not web convention. Treat the page as a six-reel short subject in a permanent letterbox. **Concrete implementation guidance:** - **The letterbox is non-negotiable.** Two fixed-position black bars, each `12vh`, at top and bottom of the viewport, `position: fixed`, `z-index: 9999`. They never move. They never fade. They are the proscenium. All page content lives in the central `76vh` slot between them. Headlines stay inside that slot; subtitle copy may spill into the lower bar (subtitle convention). The bars must be `--reel-black`, not `#000` — the 2-point blue bias is what makes them read as cinema rather than as iframe. - **The shot-numbering UI.** Lower-left corner of the lower bar: `JetBrains Mono` 12px, white at 60% opacity, format `SHOT 04 / 06`. Updates as the visitor scrolls past each section's halfway point. Lower-right corner: the SMPTE timecode `00:01:24:08`, advancing in real-time at 24 fps from page load. The timecode never resets. - **Scroll → camera mapping.** Every section is exactly `100vh` tall. Sections butt directly against each other (no margin, no gap). Within a section, parallax is *gentle* — `0.85` for backgrounds, `1.0` for foreground subjects. The camera does not jolt. The camera does not bounce. Easing on every scroll-driven transform must be a long cubic-bezier (`cubic-bezier(.22, 1, .36, 1)`) so motion ends as a settle, not a stop. Treat `prefers-reduced-motion` as a ban on the lateral dolly only — the ripples and the timecode keep ticking; cinema does not stop because someone is sitting still. - **The lateral dolly (Shot 04).** Implement as a scroll-jacked horizontal panel: when the section enters the viewport, capture vertical scroll for `300vh` of scroll distance and translate it to `translateX(-200vw)` on the inner panel. Three plinth layers parallax at 1.0×, 0.7×, 0.3×. Use `IntersectionObserver` and `requestAnimationFrame`, not scroll listeners with throttle. Release scroll cleanly on exit; no snap-back. On reverse scroll, the dolly reverses smoothly. On `prefers-reduced-motion: reduce`, replace with three vertically stacked frames showing the same plinths. - **The ripple gesture.** Define one `` SVG filter with a `feDisplacementMap` whose `in2` is a tiny `` of a radial gradient. Animate the ``'s `x` from `-20%` to `120%` over 1.6 seconds, on a 9-second interval, using `` rather than CSS so the SVG paint itself is doing the work. Apply the filter to the marble layer of Shots 02 and 03 only. - **The morph in Shot 05.** The Cormorant Garamond italic line reads, for instance, *"the suffix is doing all the heavy* **lifting**." After 4 seconds in the viewport, the word **lifting** morphs to **looking**, then to **listening**, then back to **lifting**, on an 8-second loop. Implement with a CSS `transition` on opacity + `transform: translateY(-4px)` per word swap, with the words stacked in absolute position. Each swap is a 0.6-second crossfade. This is the page's only typographic motion gimmick. - **The end card.** Three lines of credits, JetBrains Mono, white-at-60%, typed in at 24 cps via the `typewriter-effect` pattern (corpus 5%). The cursor (a single `▌`) blinks for 4 seconds after the last character lands, then disappears. After 6 seconds of held black, the page is genuinely *over* — no scroll-to-top button, no "watch again." If the visitor wants to rewatch, they reload. - **Voice and copy.** All body copy is the **friend in the gallery**. Contractions allowed. Sentence fragments allowed. One parenthetical per paragraph, max. No "we." No "our team." No "transform your." The narrator is one specific person — slightly winded, slightly amused, has read more about Greek sculpture than is dignified, will admit it. Wall labels are written in *italic Cormorant*, deadpan, with one specific factual claim and one specific date. **Hard prohibitions.** No CTAs. No pricing tables. No stat grids. No hero CTA. No "Get Started." No newsletter modal. No social proof rail. No testimonials. No cookie banner (this is a film, not a service). No floating action button. No hamburger menu — there is no menu, the film plays linearly. No logo wall. No FAQ. No "above the fold" — the whole page is the fold. No avatars. No emoji. No chatbot bubble. No live-chat widget. No `.fade-in-on-scroll` div. No counter that animates from 0 to 47. No "as seen in" rail. No "trusted by" row. No light/dark toggle — the cinema is dark by definition. The site has exactly **zero buttons**. ## Uniqueness Notes **Differentiators from every other design in the registry, with frequency-analysis context:** 1. **Cinematic at 2% × marble-classical at 2% × cool-grays at 2% × approachable-casual at 2%.** Four near-empty seed categories stacked on a single design. The frequency report shows each of these used by exactly one other design (5/240 = 2%). Crossing all four — the cinema of *Barry Lyndon* projected onto a museum after hours, narrated by a casual friend, lit in cool grays — is a combination present in **zero** other designs in the registry. Most sites in the corpus are warm (97%), photography-driven (92%), and centered (92%); this one is cool, marble-only, and stacked. 2. **Permanent 2.39:1 letterbox as load-bearing geometry.** No other design in the corpus uses fixed-position black bars as a structural element of every section. The bars are not a hero treatment, not a video treatment — they are the page's proscenium, present from byte 0 to the end card. This forces every typographic and compositional decision into a cinema frame and excludes the entire vocabulary of dashboard, sidebar, F-pattern, and Z-pattern layouts that dominate the corpus. 3. **A real-time SMPTE timecode advancing at 24 fps from page load.** Corpus has zero designs that surface a literal frame-counter as UI. The timecode reads `00:00:00:00` on first paint and ticks forward in tabular JetBrains Mono in the lower-right of the lower black bar for the entire session. By the end-card it reads roughly `00:04:30:00`. The page is durationally honest: it tells the visitor exactly how long they have been inside it. 4. **Marble-texture as exclusive imagery (0% in corpus).** Photography sits at 92%. This design uses no photographs at all — every visual surface is procedurally-generated SVG marble (Calacatta, Carrara, Bardiglio variants seeded per shot). The corpus has no other site whose imagery system is "marble, only marble, three different cuts." 5. **Stacked-sections + scroll-jacked lateral dolly.** Stacked-sections is a deliberate departure from the 92%-centered / 87%-full-bleed corpus consensus. Inside that vertical stack, Shot 04 inverts axis and runs a horizontal dolly — a single section that briefly turns the page into *Barry Lyndon's* lateral master shot. Two-axis storytelling inside a one-axis page; no other design in the corpus does this. 6. **Zero buttons, zero CTAs, zero conversion vocabulary.** The page exists only as a four-and-a-half-minute short film. There is no "get started," no email capture, no pricing, no social proof, no nav menu. The film plays once per page load, ends with three lines of credits, and stops. The rarest move in a 2026 web design corpus is to refuse the entire conversion-funnel grammar — this design refuses it completely. 7. **The kouros earlobe — restraint as the punchline.** A "marble-classical" theme could be a busy gallery; this one's entire decorative inventory is six small marble objects across six reels (one each: hall, drape, earlobe, plinth-row, column, end-card). Six pieces of marble, no more, the way an art-school thesis show is six small things on a wall. Restraint is the wit. **Documented chosen seed:** *aesthetic: cinematic, layout: stacked-sections, typography: condensed, palette: cool-grays, patterns: ripple, imagery: marble-texture, motifs: marble-classical, tone: approachable-casual.* **Avoided patterns from frequency analysis:** warm palettes (97%), gradient palettes (89%), photography imagery (92%), centered layout (92%), full-bleed layout (87%), vintage motifs (87%), hand-drawn aesthetic (84%), parallax pattern (89%), mono typography as primary (94%), professional tone (33%), friendly tone (28%). None of these are load-bearing in this design — mono appears only as supporting timecode role, parallax is gentle and confined to within-shot depth, and the dominant aesthetic/imagery/motif/palette/tone choices are all from the long tail of the distribution.