# Design Language for bability.pro

## Aesthetics and Tone

bability.pro is a **luxurious 8-bit alpine observatory** — imagine a pre-IPO probability brokerage that keeps its nameplate in 24-karat gilt above a 24-pixel-tall doorframe. The domain is a portmanteau of *probability* + *ability*; the site treats that compound the way a Geneva watchmaker treats a complication, except the watch is rendered entirely in deliberate, hand-placed pixels. The result is **pixel-art** (5% in the corpus — claimed empty quarter) reframed as *high-luxury miniature*: not Game Boy nostalgia, not Animal Crossing whimsy, not the indie-game retro the corpus would expect. Pixels here are jewels. Each square is set, not stamped.

The mood is **luxurious** (2% in the tone frequency — also nearly empty) crossed with the cool stillness of a private alpine hotel at 4:42 a.m., the moment before the funicular wakes. There is a single oil-lit reception desk, a wall of varnished pine, and an enormous east-facing window framing a **mountain-landscape** (1% in motifs — the rarest motif claim possible) drawn as a 320-by-200 dithered panorama in waxed analogous golds. A **lens-flare** (2% in imagery — also rare-empty) drifts across that pixel mountain once, exactly when the user reaches the apex, and never again. Nothing is loud. Nothing is gradient-mesh-ed. Nothing photographed. The decadence is in *restraint of resolution* — the brand spent the budget not on more pixels but on better ones.

Tonally, the writing is the voice of a discreet maître-probabilité. It speaks in confirmed third-person, never imperatives. It says "the morning forecast has been laid out for you" rather than "Get started." It never offers a discount. It never has a CTA. It has a doorbell.

## Layout Motifs and Structure

The composition is a **centered** layout (81% in the corpus — overused, *but* this site claims the centeredness as material to the luxury-pixel concept rather than defaulting to it). Specifically: the entire experience lives inside a **fixed 480-pixel-wide vertical reception card**, hand-pixel-aligned, *centered* on every viewport regardless of breakpoint. The 480px figure is intentional — it is the precise width of a 1989 NEC PC-98 high-resolution monitor in landscape, halved. Outside the 480px card, the rest of the viewport is a continuous waxed-pine wall — solid #2A1F12, no content, no scroll-jacking, no gradient — pierced only by an east-facing pixel window that occupies the right margin on viewports ≥1280px and that *renders the mountain-landscape parallax independently of the card*. On viewports <1280px the window collapses behind the card and surfaces only as the dawn lens-flare.

The card itself is **eight stacked stanzas**, each exactly **128px tall** (a power-of-two height — non-negotiable; the entire layout is on a 16px subpixel grid that *forbids fractional pixels*). Total card height is 1024px; the page does not scroll past 1024px on desktop. Mobile stacks the 480-card to viewport-width but maintains the 16px subgrid by scaling at integer factors only (1×, 2×, 3×). **No fluid scaling. No fractional zoom. No clamp().** The page is either at one of three discrete sizes or it is wrong.

The eight stanzas, top to bottom:

1. **Doorbell** (the wordmark, gilt, 64px tall, single chime sound at first hover).
2. **Receptionist** (a single line of plate-italic copy describing what bability does — never longer than 11 words).
3. **East-Window Mortise** (a 480×128 pixel-art mountain panel, looping at dawn-speed of 0.04px/frame).
4. **Probability Ledger** (a hand-pixel-set ledger of three running probabilities — no charts, no graphs, only prose-numerals like *seventy-seven hundredths*).
5. **Cabinet of Talents** (three 96×96 pixel cameos, *not icons* — each a portrait-jewel of an "ability").
6. **Funicular Departures** (a small, hand-set table of upcoming forecast windows, three rows max).
7. **Concierge Bell** (a single contact line; no form, no email field, only a brass-pixel button).
8. **Watermark** (the bability monogram in 12px, at 22% opacity, gilt).

Each stanza is separated from the next by a **single-pixel gilt rule** at 30% opacity — never a divider component, never an `<hr>`. The rule is rendered as `box-shadow: 0 1px 0 0 #C9A24C44` on the stanza above. There are no cards. There are no shadows. There are no rounded corners. Border-radius is forbidden globally.

## Typography and Palette

**Fonts (Google Fonts only — three voices, ranked by privilege):**

- **Display & Wordmark — *Press Start 2P*** (Google Fonts, single weight 400). Used *only* for the wordmark "bability.pro" in stanza 1, the ledger numerals in stanza 4, and the funicular departure times in stanza 6. Set at 16px (the wordmark is at 32px = exactly 2× the base unit), letter-spacing 0, *never* anti-aliased. CSS: `font-smoothing: never; -webkit-font-smoothing: none; image-rendering: pixelated;`. Press Start 2P is the only true 8×8 pixel font on Google Fonts and is the canonical NES-era system face — using it here, gilded, is the load-bearing choice that makes "luxury pixel-art" legible as a category rather than a contradiction.
- **Concierge Italic — *VT323*** (Google Fonts, weight 400). Used for the Receptionist line in stanza 2, the cabinet cameo captions in stanza 5, and the concierge sign-off in stanza 7. VT323 is the Glass-TTY VT220 emulation face — a softer, reading-grade pixel face that pairs with Press Start 2P the way a Garamond italic pairs with Caslon roman. Set at 18px, line-height 24px, color always at 88% opacity to read as ink-on-vellum rather than CRT-on-glass.
- **Subtext & Watermark — *Silkscreen*** (Google Fonts, weights 400 & 700). Used *only* for the 12px watermark monogram and the 10px "seventy-seven hundredths"-style spelled-out probability annotations beneath the ledger numerals. Silkscreen at 8px is the smallest Google-Fonts pixel face that remains legible at 1× and is the only acceptable font below 12px.

**Mono is at 95% in the corpus.** This site uses mono in the form of *true bitmap pixel mono* — Press Start 2P, VT323, Silkscreen are all fixed-width bitmap revivals, *not* the modern Inter / Space / JetBrains stack the corpus has saturated. The "mono" claim is honored in spirit and inverted in form.

**Palette — analogous, gilt-on-pine, eight steps total (analogous is at 5% — claimed empty):**

- `#2A1F12` — **Waxed Pine.** The wall outside the card. The hold-the-room color. ~58% of pixel area.
- `#3D2E1B` — **Refectory Walnut.** The card background. The luxury-substrate. ~20% of pixel area.
- `#5C4126` — **Aged Tobacco.** Hover-states for the gilt button and the gilt rules. ~3% of pixel area.
- `#C9A24C` — **Florentine Gilt.** The ink. Wordmark, numerals, mountain peak rim-light, concierge bell. ~9% of pixel area.
- `#E8C977` — **Champagne Gilt.** The highlight pixel. *One* per cameo. The lens-flare apex. ~1% of pixel area — by design rare.
- `#F4E3B5` — **Vellum Cream.** Body copy in the Receptionist line and ledger annotations. ~6% of pixel area.
- `#7E5A2C` — **Saddle.** The mountain mid-tone, the funicular cable, ledger underlines. ~2% of pixel area.
- `#1A140A` — **Pre-Dawn Pine.** Used only inside the East-Window Mortise as the pre-flare sky. ~1% of pixel area.

The eight colors are strictly analogous on the brown-amber axis (HSL hue range 28°–43°, no excursions), saturation steps deliberately uneven to preserve the *gilt-against-walnut* hierarchy that makes the design read as luxury rather than retro-game. **No reds. No greens. No blues. No grays. No pure black. No pure white.** Anti-grays absolutism: every "gray" in the design is a desaturated walnut (`#3D2E1B` at α<1.0), never a true neutral.

## Imagery and Motifs

**Pixel-art only.** No photography. No SVG illustration that pretends to be vector-clean. No 3D renders. No gradient meshes. Every visual is a hand-set raster sprite at integer scale, served as PNG (with `image-rendering: pixelated`) or generated in-DOM via a `<canvas>` at 1× then CSS-scaled to 3× on desktop.

**The Mountain-Landscape East-Window** (motif at 1% — the rarest claim available):

- A **480×128 pixel panorama** of a four-peak alpine ridge, hand-dithered using the Florentine Gilt → Saddle → Walnut → Pre-Dawn Pine ramp. Bayer-ordered 4×4 dither, *never* Floyd-Steinberg (Bayer reads as deliberate, FS reads as photographic — wrong register).
- The panorama loops via a **2-layer parallax**: foreground ridge moves 0.04px/frame, background ridge moves 0.01px/frame. Total cycle: 24 minutes of real time per loop. The user almost certainly will never see a full cycle, which is the point — the mountain is a *room with a view*, not a feature.
- Once per session, exactly when the user crosses the **77th vertical pixel of the ledger numerals**, a **lens-flare** (imagery at 2% — also empty-claim) traverses the mountain panel from upper-left to lower-right over 1.4 seconds. The flare is a hand-pixeled hexagonal aperture-ghost in Champagne Gilt, six discrete frames, no blur, no gradient. After it traverses, it does not return for the rest of the session. (Flare frequency is gated by `localStorage` + `sessionStorage` — never twice.)

**The Cabinet of Talents Cameos** (stanza 5):

- Three 96×96 pixel jewel-portraits, each rendered as a pixel-art interpretation of a single *ability*: **Foresight** (a half-lidded eye with a Florentine Gilt iris), **Cadence** (a pendulum frozen at 14° off vertical), **Counsel** (an open hand holding a single Champagne Gilt pixel). Each cameo is exactly 64 colors at most, all drawn from the eight-step palette. Hover invokes the **magnetic** pattern (50% in corpus, but here *constrained*): the cameo translates ±2 pixels — never a fractional translate — toward the cursor, with a 120ms ease-out. Magnetic is throttled to integer-pixel snaps so the motion remains pixel-grid-honest.

**The Concierge Bell** (stanza 7):

- A 32×32 pixel-art brass bell, drawn in three frames (resting, struck, ringing). On hover, the bell snaps (no spring, no elastic) to its struck frame and the gilt rule beneath it draws *underline-style* from left to right over 240ms. On click, the page emits a single 432Hz triangle-wave chime, 200ms, played via WebAudio (no audio file). The chime is the *only* sound in the entire experience.

**The Funicular Departures** (stanza 6):

- Three rows of pixel-set departure times in Press Start 2P at 16px, with a 1×1 pixel "running" sprite that traverses the rightmost 64 pixels of the row at the rate of one pixel per real-world minute when the row's window is currently open. This is the only live data on the page, and it is rendered as a single moving pixel.

**No icons. No emojis. No flat illustrations. No avatars. No stock anything.**

## Prompts for Implementation

Build bability.pro as **one HTML document, one CSS file, one ES module, zero frameworks, zero npm dependencies**. The page is a single 1024-pixel-tall reception scene, centered in a waxed-pine room, with a window onto a slow alpine dawn. Total payload target: under 64KB. Total runtime image budget: one 480×128 PNG (the mountain), one 96×96 PNG sprite-sheet (three cameos × three frames), one 32×32 PNG sprite-sheet (the bell × three frames). All three PNGs combined: under 18KB.

**Storytelling structure (eight stanzas, no scrolling past 1024px, magnetic and dawn-flare as primary motion):**

1. **Doorbell.** On first paint, the room is dark. Waxed Pine fills the viewport. Over 800ms, an oil-lamp brightens *only the card region* via a single `box-shadow: inset 0 0 0 480px #2A1F12` → `inset 0 0 0 480px #3D2E1B00` transition. The wordmark `bability.pro` types in, character by character, in Press Start 2P at 32px, gilt — one character per 80ms, *no caret blink* (carets are too retro-game). After the wordmark settles, a single Champagne Gilt pixel appears at the dot of the `.pro`, glints once (one frame, 200ms), and stays.

2. **Receptionist.** A single VT323 line fades in at 88% opacity Vellum Cream. Copy: *"The morning forecast has been laid out for you."* Eleven words, never more. The line does not animate further; it is the room's tone of voice.

3. **East-Window Mortise.** The 480×128 pixel-mountain reveals via a vertical wipe from the centerline outward (top-and-bottom expanding shutter, 600ms). The dither pattern is Bayer 4×4. The two parallax layers begin moving immediately at 0.04px/frame and 0.01px/frame. *Note:* on prefers-reduced-motion, the parallax freezes at 50% phase but the lens-flare still triggers on cue — the flare is not motion, it is a moment.

4. **Probability Ledger.** Three rows of probabilities, each stated twice: once in numerals (`0.77`), once in spelled-out form (`seventy-seven hundredths`). The numerals are Press Start 2P 24px gilt; the spellings are Silkscreen 10px Vellum Cream. On hover of any row, the row's Saddle underline draws left-to-right (240ms) and the spelled-out form receives a 1-pixel-up nudge — the **magnetic** pattern (50% corpus), here pinned to integer pixels so it never blurs the bitmap.

5. **Cabinet of Talents.** The three 96×96 cameos fade in stagger at 80ms intervals — *no opacity tweens past 0→1*, instead a **dither-in** (the cameo materializes pixel-by-pixel via a Bayer reveal mask, 600ms per cameo). Each cameo is independently magnetic on cursor proximity within 64px, snapping to ±2px in integer steps. Cameo captions appear below in VT323 16px.

6. **Funicular Departures.** Three rows of departure times fade in. The "running" 1×1 pixel sprite begins moving in any row whose window is currently open. The sprite is pure CSS: `transform: translateX(<live>px); transition: transform 60s linear`. No JS animation loop for this — the pixel literally moves once per minute by the OS clock.

7. **Concierge Bell.** Centered 32×32 brass bell, hover snaps to struck-frame, click rings the 432Hz chime, gilt underline draws on hover. *No form. No email field. No "Schedule a call" CTA.* The bell is the contact surface; clicking it copies a single line of plate-italic to clipboard: `bell@bability.pro` (or whatever the canonical address is).

8. **Watermark.** Silkscreen 12px monogram `b·p` at 22% Florentine Gilt, dead-centered. Below it, in Silkscreen 8px at 14% opacity: a single hand-set probability that increments by 0.0001 every two minutes — the building's pulse.

**Lens-flare cue (session-singleton).** When the user's cursor first enters the ledger numerals' bounding box *and* dwells ≥800ms, the East-Window Mortise plays its six-frame lens-flare (Champagne Gilt aperture-ghost traversing UL→LR over 1.4s), then sets `localStorage['flare-served']` to true. The flare *never* serves twice.

**Magnetic pattern, pixel-honest.** Magnetic is at 50% in corpus — overused — *but* its corpus form is fluid sub-pixel translation. bability uses **integer-snap magnetic**: cameos and the concierge bell translate in whole-pixel jumps via `image-rendering: pixelated` and `transform: translate3d(<int>px, <int>px, 0)`. The motion reads as *jeweled magnetism* rather than springy UI — distinct from any other site in the corpus.

**Centered layout, claimed not defaulted.** Centered is at 81% — the most overused layout. bability *justifies* its centeredness by making the centered region a fixed 480×1024px brass-framed reception card and treating the off-card viewport as architectural negative space (the waxed-pine room, the east window). This is centered-as-architecture, not centered-as-fallback.

**No hero. No nav. No footer. No CTAs. No pricing tiers. No stat grid. No testimonials carousel. No features-bento. No FAQ accordion. No newsletter modal. No cookie banner that animates.** The page is a single room. It has a doorbell, a receptionist, a window, a ledger, a cabinet, a departures board, a bell, and a watermark. It does not need anything else.

**Performance and rendering.** Force `image-rendering: pixelated` on every raster element. Disable font anti-aliasing globally on Press Start 2P, VT323, and Silkscreen via `-webkit-font-smoothing: none; font-smooth: never;`. Set `transform: translateZ(0)` only on the cameos and the lens-flare layer. Everything else paints flat. Total JS: under 4KB minified — one module that handles type-on, cameo magnetic, ledger underline, mountain parallax tick, lens-flare cue, and bell chime. Zero dependencies. Zero analytics.

## Uniqueness Notes

This design's deliberate departures from the 70-design corpus and from the planned seed's defaults:

1. **Pixel-art reframed as luxury, not nostalgia.** Pixel-art sits at 5% in the aesthetic frequency analysis, and what little exists in the corpus reads as Game Boy-era playful or indie-game retro. bability.pro is, as far as the corpus shows, the **first** design to render pixel-art as Geneva-watchmaker luxury — gilt-on-walnut, silent, restrained, single-room. The chromatic move (Florentine Gilt + Refectory Walnut + Champagne Gilt) is what makes pixels read as set-jewels rather than 8-bit sprites. This is a category claim.

2. **Mountain-landscape as motif at 1% — the empty quarter.** Mountain-landscape is the rarest motif in the entire 70-design vocabulary (1%). bability does not merely use it — it makes the mountain the *eastward orientation* of the entire page, treating the East-Window Mortise as architectural rather than decorative. No other corpus design orients itself around a cardinal direction.

3. **Lens-flare as session-singleton, gated by dwell.** Lens-flare is at 2% in imagery. The corpus uses lens-flare as decorative bloom. bability uses it as a **once-per-session reward** keyed to a specific dwell on the ledger — closer to a music-box opening than a hero effect. Programmed as a `localStorage`-persisted singleton.

4. **Luxurious tone at 2% — claimed against pixel-art.** Luxurious is at 2% in tone, and the corpus's luxurious entries default to gold-on-black or marble-classical. bability.pro mounts the luxurious tone *on a pixel-art substrate*, which the corpus does not do anywhere. The contradiction is resolved by extreme palette discipline (eight steps, single hue axis, no neutrals).

5. **Mono honored as bitmap mono, not Inter/Space/JetBrains.** Mono sits at 95% — the most overused typography category in the corpus, and 90%+ of corpus mono is Inter/Space-Mono/JetBrains-Mono. bability uses **Press Start 2P + VT323 + Silkscreen**, the bitmap-revival branch of Google Fonts mono. This honors the seed's mono claim while taking a typographic stance no other site in the corpus has taken.

6. **Centered claimed as architecture, not default.** Centered is at 81% (overused), but bability's centered region is a fixed 480×1024 reception card with the off-card viewport doing architectural work (waxed-pine wall + east window). Most corpus centered layouts let the off-card viewport be empty negative space; bability fills it with a *room*.

7. **Magnetic snapped to integer pixels.** Magnetic is at 50% (overused), but every corpus magnetic implementation uses fluid sub-pixel translation. bability snaps magnetic to whole-pixel jumps to preserve the bitmap grid — visually distinct from every other magnetic implementation in the registry.

8. **Analogous palette on a single brown-amber hue axis (HSL 28°–43°), no neutrals.** Analogous is at 5%. The corpus's analogous palettes typically span 60°–90° of hue. bability constrains to a 15° arc, with deliberate saturation unevenness, and absolutely zero true grays/blacks/whites — every "gray" is a desaturated walnut. This is a stricter analogous discipline than anything else in the corpus.

9. **Forbidden patterns observed.** No hero. No CTAs. No pricing block. No stat grid. No testimonials. No features-bento. No FAQ. No newsletter modal. The page is a single 1024-pixel-tall room. The corpus's pattern of CTA-stat-pricing trios is structurally absent.

10. **Chosen seed (per assignment):** *aesthetic: pixel-art, layout: centered, typography: mono, palette: analogous, patterns: magnetic, imagery: lens-flare, motifs: mountain-landscape, tone: luxurious.* Every dimension honored; the overused dimensions (centered 81%, mono 95%, magnetic 50%) are claimed via inversion, not defaulted; the rare dimensions (pixel-art 5%, analogous 5%, lens-flare 2%, mountain-landscape 1%, luxurious 2%) are leaned into as the design's load-bearing claims.

11. **Avoided patterns from frequency analysis.** Glassmorphism (68%) — absent. Gradient (94%) — absent (no gradients anywhere; all color transitions are dithered or stepped). Photography (97%) — absent. Parallax (92%) — present *only* in the mountain panel and locked to integer-pixel speeds. Cursor-follow (62%) — absent (magnetic is the chosen interaction, snapped). Spring (67%) — absent (motion is either linear or stepped, never spring). Stagger (65%) — present only in the cameo dither-in, in 80ms integer increments. Warm palette (92%) — present *but* constrained to a 15° hue arc rather than the corpus's broad warm wash.
<!-- DESIGN STAMP
  timestamp: 2026-05-09T07:16:14
  seed: seed
  aesthetic: bability.pro is a **luxurious 8-bit alpine observatory** — imagine a pre-IPO pro...
  content_hash: 89efff175c89
-->