# Design Language for bable.pro ## Aesthetics and Tone bable.pro (a truncation of "probable") lives in the neon-soaked retro world of 1980s arcade cabinets, VHS rental stores, and early personal computing -- a time when the future felt limitless and every screen glowed with possibility. The visual identity fuses the saturated candy-colored palette of Memphis Design with the scanline haze of CRT monitors and the blocky confidence of early bitmap graphics. Think of the opening credits of an 80s sci-fi film (Tron, WarGames) remixed with the pop energy of Keith Haring's subway drawings and the tactile click of a Commodore 64 keyboard. The domain "bable" has a playful, almost nonsensical quality -- like "babble" with a letter dropped, or a new word a child might invent. The tone is approachable-casual: this is a site that explains probabilistic thinking through games, puzzles, and interactive thought experiments, never taking itself too seriously while delivering genuinely useful mental models. ## Layout Motifs and Structure The layout uses a **split-screen** composition that divides the viewport into two distinct zones, referencing the dual-screen setups of old arcade cabinets (one screen for game, one for scores/info). **Primary structure:** - **Opening viewport (100vh):** The screen splits vertically -- left half has a dark background (#1B1640) with CRT scanline overlay (repeating linear-gradient in thin 2px strips at 0.08 opacity), right half has a bright candy-pink (#FF6BA8) background. The "bable" logotype spans both halves, each letter alternating which side it "belongs to" -- B on dark, A on pink, B on dark, L on pink, E on dark -- creating a visual stutter effect. A glitch animation periodically displaces the logotype horizontally by 3-4px for 100ms, with a color-channel split (red shifted left, cyan shifted right). - **Content split (below fold):** As users scroll, the split-screen metaphor continues but the division point shifts. Some sections are 60/40, others 30/70, and occasionally the "split line" itself becomes diagonal (clip-path: polygon). The left panel generally carries explanatory text; the right panel carries interactive visualizations or retro-styled illustrations. - **Glitch transitions:** Between sections, a brief full-screen glitch burst plays -- 200ms of rapid alternating between the two halves' colors, with horizontal displacement bars (like VHS tracking errors), before resolving into the next section layout. - **Bottom zone:** The split merges into a single full-width "game over / continue?" section with a blinking cursor prompt, styled like an arcade continue screen. High-contrast text on a dark field. No card grids. The persistent split creates a built-in tension and visual rhythm. ## Typography and Palette **Fonts:** - **Headlines/Logotype:** "Press Start 2P" (Google Fonts) -- the quintessential pixel/bitmap font that instantly evokes retro gaming. Used for the logotype, section titles, and any "system message" styled text. Size: clamp(18px, 3.5vw, 40px) for headings (this font reads large due to its pixel grid). Letter-spacing: 0.06em. - **Body text:** "Quicksand" (Google Fonts) -- a rounded geometric sans that provides modern readability while harmonizing with the playful retro aesthetic. Weight 400 for body, 600 for emphasis. Line-height: 1.75. Size: clamp(15px, 1.2vw, 18px). Its soft curves counterbalance the hard pixel edges of the headlines. - **Accent/labels:** "VT323" (Google Fonts) -- a monospaced terminal font used for labels, counters, probability percentages, and any "machine output" text. Size: 16px fixed, weight 400. Gives UI elements (probability meters, score displays) an authentic CRT terminal feel. **Color Palette:** - **Void Indigo** #1B1640 -- primary dark background, the deep blue-purple of a powered-off CRT screen - **Arcade Pink** #FF6BA8 -- primary bright accent, the hot pink of neon signage and bubblegum - **Laser Cyan** #00E5FF -- secondary accent for highlights, glitch artifacts, and interactive elements - **Pac Yellow** #FFE14D -- warm accent for scores, counters, active states, and the blinking cursor - **Cartridge Gray** #8A8D93 -- muted text, borders, and inactive UI elements - **Pixel White** #F8F4FF -- text on dark backgrounds, a slightly cool white with a hint of the screen's phosphor glow - **Glitch Red** #FF3860 -- used only in glitch effects (the red color-channel displacement) and error states A candy-bright palette that captures the high-saturation, high-energy world of 80s pop culture. Every color is bold and unapologetic. ## Imagery and Motifs **Core visual motifs:** - **CRT scanlines:** A persistent repeating-linear-gradient overlay (2px transparent, 2px rgba(0,0,0,0.06)) across the entire page, giving everything the subtle horizontal striping of an old television. This never disables -- it's part of the site's visual DNA. - **VHS glitch artifacts:** CSS-animated horizontal displacement bars that periodically sweep across sections. Implemented via pseudo-elements with background: linear-gradient (sharp color bands in #FF6BA8, #00E5FF, #FFE14D) that translate horizontally with random-seeming timing (multiple animation-duration values creating apparent randomness). - **Pixel-art icons:** Small 16x16 and 32x32 pixel-art illustrations (rendered as CSS box-shadow pixel art or inline SVG with sharp-edged rectangles) depicting probability objects: dice, coins, cards, slot machine reels, roulette wheels, crystal balls. Each rendered in the candy-bright palette. - **Mixed-media collage elements:** Sections combine the pixel aesthetic with "real" elements -- probability formulas rendered in smooth modern type (Quicksand) alongside pixel-art decorations, creating a deliberate mixed-media tension between retro and contemporary. - **Abstract-tech motifs:** Background patterns of binary digits (0s and 1s) in very low opacity (#8A8D93 at 0.05) scrolling slowly upward, referencing the computational nature of probability calculations. Circuit-board-like line patterns connect interactive elements. - **Score counter UI:** A persistent "probability score" display in the top-right corner (position: fixed), styled like an arcade high-score counter in VT323 font, that increments as users interact with elements on the page. ## Prompts for Implementation **Full-screen narrative experience:** The site opens with a "boot sequence" -- the screen is black for 500ms, then scanlines appear, then the Void Indigo background fades in from a CRT "power on" point (a bright horizontal line at center that expands vertically, implemented via clip-path: inset() animation). The split-screen division line draws itself top-to-bottom (400ms), then the "bable" logotype bitmaps onto the screen letter-by-letter (200ms each, with each letter accompanied by a small "blip" visual -- a 4px white square that flashes at the letter's position). **Split-screen scroll mechanic:** Implement with CSS clip-path on two stacked full-width divs. The left panel has `clip-path: polygon(0 0, X% 0, X% 100%, 0 100%)` and the right panel has the complementary clip. As users scroll, adjust X% via Intersection Observer to create the shifting split ratio. Diagonal splits use angled polygon points. **Glitch effect system:** Create a reusable `.glitch` CSS class that applies: (1) a `@keyframes glitch-shift` that randomly translateX's the element by -3px to +4px, (2) pseudo-elements ::before and ::after that duplicate the content with color: #FF3860 and color: #00E5FF respectively, each with their own slight offset animation, creating the RGB split effect. Trigger on hover and on timed intervals (every 8-12 seconds via JS). **Responsive approach:** On mobile (<768px), the split-screen converts to a stacked layout (top/bottom instead of left/right), with the split-line becoming horizontal. The glitch effects reduce in frequency (every 20s instead of 8-12s) for performance. Pixel-art scales cleanly due to its grid-aligned nature. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, corporate gradients, minimal/zen aesthetics. No photography. No parallax scrolling. No card-grid layouts. **Storytelling emphasis:** The narrative arc is: power-on (boot sequence) -> tutorial mode (basic probability concepts in the first few sections) -> advanced levels (more complex topics as the split becomes more dynamic) -> boss level (a culminating interactive probability challenge) -> game over/continue (final reflection and links). Each section should feel like advancing through levels of a game. ## Uniqueness Notes **Differentiators from other designs:** 1. **Shifting split-screen as primary composition:** No other design uses a persistent split-screen where the division ratio and angle change per section. This creates a dynamic, cinematic composition that evolves as you scroll, unlike static layouts. 2. **CRT boot sequence as page load:** The power-on animation (horizontal line expanding to full screen with scanline overlay) is a distinctive load experience that immediately establishes the retro world. No other design in the collection simulates hardware startup. 3. **Arcade score counter as persistent UI element:** The fixed-position probability score that increments with interaction gamifies the educational experience in a way no other design attempts. It turns passive reading into active engagement. 4. **RGB color-channel split glitch as recurring motif:** While glitch effects appear elsewhere, the specific technique of duplicating content in offset red/cyan channels (chromatic aberration) as a periodic ambient animation is unique to this design. **Chosen seed/style:** retro aesthetic, split-screen layout, retro-display typography (Press Start 2P), candy-bright palette, glitch patterns, mixed-media imagery, abstract-tech motifs, approachable-casual tone **Avoided overused patterns:** Avoided centered layout (93%), card-grid layout (80%), photography imagery (73%), gradient palette (96%), parallax pattern (90%), scroll-triggered as primary (83%), mono as primary typography (90%), mysterious-moody tone (73%). Instead used split-screen (13%), glitch (not in top patterns), retro-display (3%), candy-bright (3%), approachable-casual (3%).