# Design Language for bada.news ## Aesthetics and Tone bada.news inhabits the space between an illuminated medieval manuscript and a glitched-out newsroom ticker -- a domain where scholarly reverence for the written word collides with the entropic interference of digital transmission. The aesthetic is **ethereal** in the truest sense: the site feels like reading dispatches from a drowned library, where pages of classical scholarship have been submerged in clear spring water and are now viewed through shifting layers of liquid refraction. Each section of the page carries the gravitas of a leather-bound codex, but the surface flickers with horizontal scan-line tears and chromatic aberration, as though the ancient text is being transmitted through unreliable channels. The mood is that of a late-afternoon reading room in an old university -- amber light filtering through tall windows onto heavy oak tables scattered with open books, reading glasses, and half-finished cups of tea -- but the room itself is slowly filling with luminous water from below, and the light refracts through rising bubbles that distort the text on the pages. There is no panic in this flooding; it is gentle, dreamy, almost welcoming. The tone is **friendly** but carries the quiet authority of a well-read host who invites you to sit and read awhile, even as the environment warps around you. Think: a librarian who smiles knowingly while the walls shimmer. Inspiration references: the underwater library scene in Andrei Tarkovsky's "Nostalgia"; the water-damaged marginalia of medieval palimpsests; the warm earth pigments of Giotto's frescoes glimpsed through aquarium glass; the gentle corruptions of a VHS tape left in a humid basement. ## Layout Motifs and Structure The layout follows a **modular-blocks** paradigm: the page is composed of discrete rectangular modules of varying sizes arranged in a structured but non-uniform grid, like the pages of a codex laid out on a scholar's desk. These blocks are not cards in the modern SaaS sense -- they are heavy, bounded regions with visible borders rendered as thin ruled lines in aged copper (#8B6914 at 30% opacity), suggesting the ruled margins of a printed page. **The Module Grid:** The viewport is divided into a 12-column grid with 16px gutters. Content blocks snap to this grid but occupy different column spans: a hero text block might span 8 columns while a decorative water-bubble element fills 4 columns beside it. Below, three equal 4-column blocks might contain related textual fragments. The rhythm is architectural -- like the proportional relationships in a Renaissance page layout (the Villard diagram) -- but the precise alignment is periodically disrupted by glitch offsets: a block shifts 3-8px off its grid position, its border stutters with a brief horizontal tear, then settles back. These micro-disruptions occur on scroll, never at rest. **Vertical Sections:** The page is organized into four full-viewport sections, each a self-contained "chapter": 1. **Folio I -- The Masthead:** A full-bleed opening with the domain name rendered as a book title page. The text shimmers behind a layer of animated water-bubble distortion. 2. **Folio II -- The Marginalia:** A dense grid of modular text blocks containing excerpts, annotations, and scholarly fragments -- the "news" of bada.news presented as marginalia in a living manuscript. 3. **Folio III -- The Submersion:** The modules begin to drift apart as the water-bubble effect intensifies. Blocks float slightly, their ruled borders dissolving into ripple patterns. This is the immersive, narrative middle of the experience. 4. **Folio IV -- The Colophon:** A single centered text block on a dark ground, styled like the colophon of a printed book, containing site information and a closing benediction. **No navigation menus, no headers, no footers.** The only navigational cue is a small folio number (I, II, III, IV) in the top-right corner, typeset in Cormorant Garamond italic at 14px, which updates as the user scrolls between sections. ## Typography and Palette **Typography:** - **Display / Headings:** "Cormorant Garamond" (Google Fonts) -- a refined, high-contrast serif with elegant hairlines and generous x-height that channels the spirit of Claude Garamond's original 16th-century punches while remaining highly legible on screen. Used at 56px-96px for section titles. Weight 600 (SemiBold), letter-spacing: 0.02em, line-height: 1.15. The italic variant is used for the folio numbering and decorative pull-quotes, lending a calligraphic fluidity to secondary text. This font is the soul of the scholarly identity. - **Body / Running Text:** "EB Garamond" (Google Fonts) -- a faithful revival of the Garamond typeface based on the Egenolff-Berner specimen, with true small caps and old-style figures. Used at 18px for body copy, weight 400, line-height: 1.75 (generous for readability in the "manuscript" context). Letter-spacing: 0.01em. The combination of EB Garamond body text and Cormorant Garamond display creates a layered Garamond ecosystem -- two interpretations of the same typographic lineage conversing across the page. - **Accent / Glitch Overlay Text:** "IBM Plex Mono" (Google Fonts) -- a sharp, technical monospace used sparingly for glitch-overlay text, timestamps, and metadata tags that appear as corrupted digital annotations atop the classical text. Weight 400, 12px, letter-spacing: 0.08em, text-transform: uppercase. Color: #A67B5B at 60% opacity. This typeface represents the "transmission layer" -- the digital medium through which the scholarly content passes and occasionally corrupts. **Palette -- Earth Tones:** The palette is drawn from the pigments of illuminated manuscripts and the ochres of aged paper, grounded in warm earth tones with cool aqueous accents that represent the water-bubble motif: | Role | Color | Hex | Description | |------|-------|-----|-------------| | Primary Background | Vellum Cream | #F5ECD7 | The warm, yellowish white of aged parchment -- the base surface for all text blocks | | Secondary Background | Deep Umber | #2C1E10 | A rich, near-black brown used for the colophon section and contrast blocks -- like the leather binding of an old book | | Primary Text | Sepia Ink | #3B2716 | A deep warm brown, the color of iron gall ink on 16th-century paper | | Accent / Ruled Lines | Aged Copper | #8B6914 | A muted golden brown for borders, ruled lines, and folio numbers -- the color of tarnished copper plate engraving | | Water Overlay | Spring Aqua | #7FBFB3 | A soft, desaturated teal-green for the water-bubble overlays and submersion effects -- the color of clear spring water over sandy riverbed | | Glitch Highlight | Interference Rose | #C4756E | A muted terracotta-rose that appears in chromatic aberration splits and glitch highlights -- the color of red-earth pigment degraded by moisture | | Deep Water | Abyssal Green | #1A3A32 | A dark, muted green-black used for deep overlay tints when the submersion effect reaches full depth | **Color Interactions:** The vellum cream (#F5ECD7) dominates as the reading surface. The spring aqua (#7FBFB3) appears only in motion -- as the color tint of water-bubble SVG elements that drift across text blocks. The interference rose (#C4756E) appears only during glitch events -- a momentary horizontal streak of terracotta that splits from heading text during chromatic aberration animations, then fades within 400ms. The palette at rest is entirely warm earth; the cool tones emerge only through interaction and animation. ## Imagery and Motifs **Water Bubbles as Primary Visual Element:** The signature visual motif is a system of SVG-rendered water bubbles -- translucent circular forms with refraction distortion -- that drift upward across the page at varying speeds. These are not cartoon bubbles; they are optically modeled with subtle internal caustic highlights, a faint shadow cast on the content behind them, and a slight magnification/distortion of underlying text visible through their centers. Each bubble is 20-80px in diameter, rendered as an SVG circle with a radial gradient from transparent center to #7FBFB3 at 15% opacity at the edge, plus a small white highlight ellipse offset at the 10 o'clock position. Approximately 15-25 bubbles are visible at any time, rising at 0.3-1.2px per frame, with gentle sinusoidal horizontal drift (amplitude: 5-15px, period: 3-7 seconds). **Book-Scholarly Motifs:** - **Ruled Margins:** Every modular text block is bordered on the left by a thin vertical rule (1px, #8B6914 at 40%) inset 24px from the block edge, mimicking the ruled margin lines of handwritten manuscripts. Body text is indented to begin at this rule. - **Drop Capitals:** The first letter of each section's opening paragraph is rendered as a large drop cap (4 lines tall, Cormorant Garamond 700 italic) in #8B6914, recalling the decorated initials of illuminated manuscripts but without figurative illustration -- pure typographic presence. - **Folio Marks:** Small Roman numerals (I-IV) in the upper right corner, set in Cormorant Garamond italic at 14px, #8B6914, with a thin horizontal rule extending left from the numeral toward the center of the viewport. - **Catch-Words:** At the bottom-right corner of each section, the first word of the next section appears in small italic text (EB Garamond italic, 14px, #A67B5B at 50% opacity) -- a direct reference to the "catch-word" system used in hand-set printed books to help binders order the pages correctly. - **Marginalia Annotations:** In Folio II, small text fragments appear in the margins of the content blocks, rotated 90 degrees, set in IBM Plex Mono at 10px -- these are the "glitch layer" annotations, appearing as corrupted metadata or transmission timestamps. **Glitch Interference:** The glitch motif is not decorative noise but a narrative element: it represents the unreliability of digital transmission applied to sacred textual tradition. Specific glitch behaviors: - **Chromatic Aberration Split:** On scroll events, heading text briefly splits into three offset copies (red-shifted at +2px, cyan-shifted at -2px, original), then reconverges over 300ms. Only triggered when a heading crosses the viewport's vertical center. - **Horizontal Tear Lines:** Thin (1-2px) horizontal stripes of displacement that briefly cut across a modular block's content, shifting the pixels in that stripe 4-12px to the right. These appear for 150-250ms, triggered randomly (3-8% chance) when a block enters the viewport during scroll. - **Text Corruption Flicker:** Occasionally (every 15-30 seconds at rest), a single word in the visible text briefly replaces itself with a monospace glyph sequence (IBM Plex Mono, same size) for 200ms before reverting. This is subtle and affects only one word at a time. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must be experienced as a vertical passage through a four-chapter manuscript that is slowly being submerged in luminous water. There are no navigation bars, no call-to-action buttons, no pricing grids, no stat counters, no testimonial carousels. The entire experience is text, ruled lines, bubbles, and glitch. The user scrolls through four folios, each occupying 100vh minimum. **Animation Priorities:** 1. **Water Bubble System (highest priority):** A persistent layer of 15-25 SVG bubbles drifting upward across the entire page. Each bubble has its own speed, size, and horizontal oscillation. Bubbles that exit the top of the viewport are recycled to the bottom with randomized properties. The bubble layer sits above the content (z-index: 10) but uses pointer-events: none so it does not block interaction. Bubble opacity increases from 0% in Folio I to 80% in Folio III (the Submersion), controlled by scroll position. 2. **Glitch Chromatic Split (second priority):** Applied to all heading elements. Uses CSS `text-shadow` with animated offsets or a pseudo-element overlay approach. Triggers on scroll when the heading crosses the viewport center. 3. **Module Drift in Folio III:** In the Submersion section, the modular blocks respond to scroll by translating slightly (up to 8px in random directions) and rotating (up to 0.5deg), as though floating in water. A CSS transition with `ease-in-out` timing (600ms) creates a gentle bobbing quality. 4. **Drop Cap Fade-In:** Each section's drop capital fades in from 0 opacity and scales from 1.5x to 1.0x over 800ms when the section enters the viewport. 5. **Catch-Word Fade:** The catch-word at the bottom of each section fades from 0% to 50% opacity as the user approaches the section boundary, creating a gentle "preview" of what comes next. **CSS Architecture:** - Use CSS custom properties for the full palette, enabling potential dark/submerged mode where #F5ECD7 swaps to #2C1E10 and text inverts. - The modular grid uses CSS Grid with `grid-template-columns: repeat(12, 1fr)` and explicit `grid-column` spans on each block. - Bubble animation uses `requestAnimationFrame` for smooth 60fps drift, not CSS keyframe animation (which cannot easily handle sinusoidal horizontal movement with per-bubble variation). - Glitch effects use a combination of CSS `clip-path` for horizontal tear lines and `text-shadow` for chromatic splits. **AVOID:** CTA buttons of any kind. Pricing blocks. Stat counters or number animations. Testimonial sections. "Hero + features + footer" SaaS templates. Card hover-lift effects. Gradient backgrounds. Hamburger menus. Sticky headers. Any layout pattern that suggests a product landing page. **BIAS TOWARD:** Immersive reading experience. Narrative pacing through scroll. Typographic hierarchy as the primary visual system. Animation that serves the water/manuscript metaphor. Silence and negative space punctuated by moments of glitch disruption. ## Uniqueness Notes **Differentiators from other designs in this collection:** 1. **Dual Garamond typography system (garamond-classic at 2% frequency):** No other design in the collection uses two Garamond-family fonts in dialogue with each other. The Cormorant Garamond + EB Garamond pairing creates a typographic conversation between display and text interpretations of the same historical typeface -- a uniquely scholarly approach that treats font selection as intellectual commentary rather than aesthetic convenience. 2. **Water-bubble imagery as structural element (water-bubbles at 0% frequency):** No other design uses water bubbles at all. Here they are not decorative -- they are a narrative device that transforms the reading experience across the four sections, increasing in density and opacity to create the "submersion" arc. The bubbles are optically modeled SVG elements with refraction properties, not clip-art circles. 3. **Modular-blocks layout with manuscript logic (modular-blocks at 4% frequency):** While two other designs use modular-blocks, none interpret them through the lens of Renaissance page proportion and manuscript layout. The grid here is governed by the Villard diagram ratios, with ruled margins, catch-words, and folio marks that are direct references to hand-set book typography. This is a typographic grid, not a UI grid. 4. **Glitch as narrative rather than decoration (glitch pattern at 11% frequency):** Other designs with glitch aesthetics use it for "cool tech" atmosphere. Here, glitch represents the conceptual friction between sacred textual tradition and digital transmission unreliability -- the interference pattern generated when a medieval manuscript is forced through a lossy digital channel. Each glitch behavior (chromatic split, horizontal tear, text corruption) maps to a specific metaphor. 5. **Earth-tone palette with aqueous cool accents (earth-tones palette, rarely used):** The collection heavily favors warm palettes (100%) and gradients (95%). This design uses a warm earth-tone base but introduces cool tones (#7FBFB3, #1A3A32) exclusively through animation and interaction -- the cool colors are the water, visible only in motion. At rest, the palette is pure manuscript warmth: vellum, sepia, copper. 6. **Book-scholarly motifs as functional design elements (book-scholarly at 4% frequency):** Drop capitals, catch-words, ruled margins, and folio marks are not decorative references to "bookishness" -- they are functional typographic devices drawn from 500 years of print convention, each serving a specific navigational or rhythmic purpose within the scrolling experience. **Seed:** aesthetic: ethereal, layout: modular-blocks, typography: garamond-classic, palette: earth-tones, patterns: glitch, imagery: water-bubbles, motifs: book-scholarly, tone: friendly **Avoided overused patterns:** parallax scrolling (97%), stagger animations (95%), mono typography (97%), asymmetric layout (93%), tech motifs (97%), corporate aesthetic (54%), minimal imagery (93%). This design uses none of these dominant patterns as its primary system.