# Design Language for bada.casa ## Aesthetics and Tone bada.casa is a dark-academia research laboratory that has been infiltrated by a playful poltergeist. Imagine a wood-paneled Oxford library -- leather armchairs, brass desk lamps, towering bookshelves -- but every book has been reorganized by a mischievous algorithm, and the marginalia in the volumes has come alive as animated circuit diagrams that crawl across the pages like luminous ivy. The aesthetic is scholarly decadence meets computational whimsy: the heavy textures of aged walnut, cracked leather spines, and foxed parchment are punctured by glowing triadic color accents that pulse like the indicators on an antique switchboard that has gained sentience. The tone is whimsical-creative -- not precious or childlike, but the specific whimsy of a brilliant eccentric who annotates dense academic papers with tiny doodles of circuit boards and charts data about the migratory patterns of library dust motes. There is intellectual weight here, but it refuses to take itself too seriously. The darkness of the academia is literal (deep backgrounds, moody lighting) but the spirit is warm, curious, and slightly conspiratorial, as if the site is sharing a private joke with the visitor about the absurdity of categorizing knowledge. The name "bada.casa" (roughly "house of bada") suggests a dwelling, a home -- so the site should feel like entering someone's private study, a place where the chaos of research has become its own form of interior design. Stacks of data visualizations lean against walls. Circuit-trace decorations have been hung like garlands. It is a house haunted by information. ## Layout Motifs and Structure The layout follows an asymmetric composition built on an intentionally lopsided 7-column grid (columns: 1fr 1fr 2fr 1fr 1fr 1.5fr 0.5fr). Content clusters gather toward the left two-thirds of the viewport in most sections, leaving the right third as a "margin" area where secondary information -- annotations, small data-viz sparklines, circuit-motif decorations -- accumulates like handwritten notes in the gutter of a textbook. This margin is not dead space; it is an active commentary track running alongside the main narrative. **The Slide-Reveal Spine:** The primary navigation metaphor is a vertical spine that runs at approximately the 65% horizontal mark of the viewport. As the user scrolls, content panels slide-reveal from alternating sides of this spine: main content blocks emerge from the left, annotation/data blocks emerge from the right. Each reveal is a horizontal slide (translateX) with a slight rotation (1-2 degrees) that straightens as the element settles, mimicking the motion of pulling a book from a shelf and laying it flat on a desk. **Section Architecture:** - **The Vestibule (Hero):** 100vh. The domain name "bada.casa" is positioned at the lower-left quadrant (not centered -- the asymmetry begins immediately). A single animated circuit-trace line draws itself from the top-right corner diagonally down to meet the text, as if physically connecting the visitor's entry point to the site's identity. - **The Stacks:** The main content area. 3-5 sections, each built as a two-part slide-reveal: a large content panel (60% width) slides in from the left, followed 200ms later by a smaller annotation panel (30% width) sliding in from the right. The panels are visually distinct but thematically paired -- like a recto/verso spread in a codex. - **The Cartography Room:** A full-width data visualization section that breaks the asymmetric pattern temporarily, asserting itself as the centerpiece. This section uses the full viewport width for a single large generative data-viz composition. - **The Colophon (Footer):** Returns to the asymmetric left-weighted layout. Minimal text, a small repeating circuit-motif border along the top edge. ## Typography and Palette **Typography:** - **Display / Headlines:** "Barlow Condensed" (Google Fonts) -- a condensed neo-grotesque that carries the density of academic titling without the stuffiness of a traditional serif. Used at 3.5rem-7rem, weight 700, letter-spacing: -0.02em, text-transform: uppercase. The condensed proportions allow long scholarly phrases to occupy single lines, reinforcing the feeling of catalog entries and index headings. Color: always the primary triadic accent. - **Body / Running Text:** "Libre Baskerville" (Google Fonts) -- the digital heir to the typeface that defined English-language academic publishing for centuries. Weight 400 for body, 700 for emphasis, italic for asides and annotations. Size: 1.05rem, line-height: 1.72. The generous line-height creates visible space between lines, echoing the wide leading of fine-press books. Color: parchment cream (#E8D5B7) against dark backgrounds. - **Data / Annotations / Captions:** "IBM Plex Mono" (Google Fonts) -- a monospace face with humanist proportions that bridges the scholarly and the technical. Weight 400, size: 0.82rem, letter-spacing: 0.03em. Used for all data labels, axis legends in visualizations, timestamps, and the margin annotations. Color: muted gold (#B89B5E) at 70% opacity, brightening to 100% on hover. - **Accent / Pull Quotes:** "Libre Baskerville" italic at 1.8rem, weight 400. Rendered in the secondary triadic color (#4A7B9D). Used sparingly -- no more than once per section -- for single-sentence provocations that break the analytical tone with something poetic. **Palette (Triadic):** The triadic palette is built from three equidistant points on the color wheel, then darkened and muted to fit the dark-academia register: - **Primary Accent -- Burnt Sienna:** #C2703E -- a warm, earthy orange-brown that evokes aged leather bindings, tarnished copper fittings on library furniture, and the warm glow of a desk lamp through an amber shade. Used for headlines, active states, the hero circuit-trace animation, and primary interactive elements. - **Secondary Accent -- Prussian Teal:** #4A7B9D -- a deep blue-green that suggests the patinated copper of old scientific instruments, the spine color of a prestigious journal series, or the tint of old glass. Used for pull quotes, secondary data-viz elements, link hover states, and the annotation panel borders. - **Tertiary Accent -- Aged Chartreuse:** #8B9B42 -- a muted yellow-green that reads as the color of old paper under certain light, or lichen growing on stone. Used sparingly for highlights in data visualizations, circuit-trace junction points, and subtle background accents in the margin column. - **Background Dark -- Library Midnight:** #1A1714 -- not pure black but a very dark warm brown, the color of a room lit only by a single green-shaded banker's lamp. The dominant background color. - **Background Mid -- Walnut Shadow:** #2D2620 -- a slightly lighter warm brown for card surfaces, panel backgrounds, and the annotation margin area. Creates depth against the primary background. - **Text Primary -- Parchment Cream:** #E8D5B7 -- warm off-white with a distinctly yellow undertone, mimicking aged high-quality paper. - **Text Secondary -- Foxed Gold:** #B89B5E -- a muted gold for secondary text, captions, and data labels. Evokes the foxing (age spots) on old book pages. - **Circuit Glow -- Copper Trace:** #D4844A -- a brighter, more saturated variant of the primary accent, used exclusively for the glowing circuit-trace animations at 60% opacity with a 4px blur, creating a warm neon effect that contrasts with the matte surfaces surrounding it. ## Imagery and Motifs **Circuit-Trace Marginalia:** The primary decorative motif is circuit board traces rendered in the style of 18th-century marginalia illustrations. These are not clean, industrial PCB traces -- they are drawn with slight organic irregularities, as if hand-inked by a scholar who happened to be designing circuits. The traces use rounded corners (border-radius on path segments), vary in thickness (1px to 3px), and terminate in small circular pads (6px diameter) that pulse with a subtle glow animation (the Copper Trace color at varying opacity, 0.4 to 0.8, cycling over 3 seconds). These traces appear in the margin column, framing section transitions, and as connective tissue between the main content and annotation panels. Implementation: SVG paths with stroke-dasharray animation for the drawing effect. Each trace is a unique hand-plotted SVG path (not generated from a library). The paths should follow organic curves with occasional right-angle segments -- a hybrid of botanical illustration vine-work and PCB routing. **Data Visualization as Art:** The Cartography Room section contains a large generative data visualization that serves as both content and decoration. This is an abstract network graph: nodes positioned in a roughly circular arrangement, connected by curved edges of varying thickness. The nodes are sized to suggest hierarchy (some large, some tiny). Colors use all three triadic accents. The visualization is not interactive but animates slowly -- nodes drift by 1-2px in gentle random walks, edge opacity pulses subtly. The overall effect should resemble a constellation map crossed with a medieval cartographic diagram. Additional smaller data-viz elements appear as sparklines in the margin column: tiny inline charts (40px tall, 120px wide) rendered as SVG paths with the Prussian Teal stroke. These sparklines have no axes or labels -- they are pure visual rhythm, suggesting data without specifying it. **Scholarly Textures:** - A subtle paper grain texture overlays the entire site as a full-viewport fixed-position element. This is a CSS-generated noise layer: an SVG feTurbulence filter (baseFrequency: 0.9, numOctaves: 3, type: fractalNoise) rendered at 3% opacity in #E8D5B7. The effect is barely perceptible but adds a tactile quality that prevents the dark backgrounds from feeling flat or digital. - Section dividers are not horizontal rules but hand-drawn-style wavy lines, implemented as SVG paths with a 1px stroke in Foxed Gold at 30% opacity. Each divider is slightly different (3-4 unique SVG paths cycled). **The House Icon:** A small recurring motif: a minimalist house outline (the "casa") drawn in circuit-trace style -- the roof peak is a triangle, the walls are vertical lines, but all rendered as PCB traces with junction pads at the corners. This icon appears in the hero section, the colophon, and as a favicon. It is always rendered in the Copper Trace glow color. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must unfold as a vertical journey through the rooms of an imaginary scholarly house. The hero (Vestibule) establishes atmosphere before any content appears -- 100vh of dark background with only the domain name and the diagonal circuit-trace animation. The trace should take 2.5 seconds to draw itself (SVG stroke-dashoffset animation from full length to 0), and the domain name fades in (opacity 0 to 1 over 800ms) only after the trace reaches it, as if the electrical signal has activated the text. **Slide-Reveal Animation System:** Every content panel enters the viewport via a slide-reveal animation triggered by Intersection Observer at a 20% threshold. Left-side panels: translateX(-80px) to translateX(0), opacity 0 to 1, with a 2-degree counter-clockwise rotation easing to 0 degrees. Right-side annotation panels: translateX(60px) to translateX(0), same opacity transition, 1.5-degree clockwise rotation easing to 0. Duration: 600ms for main panels, 450ms for annotations. Easing: cubic-bezier(0.23, 1, 0.32, 1) -- a dramatic ease-out that starts fast and settles slowly, like a heavy book being placed on a desk. The 200ms stagger between paired panels (main then annotation) is critical -- it creates the impression of a two-step gesture: place the book, then open the notebook beside it. **Circuit-Trace Drawing Animations:** Each circuit-trace SVG in the margin column should animate its stroke-dashoffset when it enters the viewport, drawing itself over 1.5-2 seconds. The junction pads (circle elements) should fade in at the moment the trace reaches them. After the drawing completes, the pads begin their perpetual soft pulse (opacity keyframes: 0.4 -> 0.8 -> 0.4, duration 3s, infinite). Use Intersection Observer with a 30% threshold to trigger these animations. **Data Visualization Implementation:** The network graph in the Cartography Room should be built as a single large SVG (viewBox: 0 0 1200 800). Nodes are circles with radii between 4px and 24px. Edges are quadratic Bezier curves (SVG Q commands) with stroke-width between 0.5px and 2px. All elements use the triadic palette. The slow drift animation uses requestAnimationFrame to update node positions by random increments of +/- 0.3px per frame, clamped to prevent drift exceeding 8px from origin. Edge endpoints update to follow their connected nodes. **Scroll-Linked Margin Density:** As the user scrolls deeper into the site, the margin column (right third) should accumulate more decorative elements -- more circuit traces, more sparklines, denser annotation text. In the hero section, the margin is completely empty. By the Cartography Room, it should be richly populated. This creates a narrative arc of increasing intellectual density, as if the visitor is moving deeper into the stacks of the library where annotation and cross-reference become overwhelming. **AVOID:** CTA buttons, pricing tables, feature comparison grids, testimonial carousels, stat counters, team member cards, newsletter signup forms. This is not a product page. It is an atmospheric experience -- a place, not a pitch. **CSS Custom Properties for Theming:** Define all palette colors, font stacks, and key measurements as CSS custom properties on :root to enable easy adjustment: ``` --color-burnt-sienna: #C2703E; --color-prussian-teal: #4A7B9D; --color-aged-chartreuse: #8B9B42; --color-library-midnight: #1A1714; --color-walnut-shadow: #2D2620; --color-parchment-cream: #E8D5B7; --color-foxed-gold: #B89B5E; --color-copper-trace: #D4844A; --font-display: 'Barlow Condensed', sans-serif; --font-body: 'Libre Baskerville', serif; --font-data: 'IBM Plex Mono', monospace; ``` ## Uniqueness Notes **Differentiators from other designs in this collection:** 1. **Dark-academia aesthetic with whimsical subversion (4% frequency for dark-academia, 4% for whimsical-creative):** While dark-academia exists in 2 other designs, none of them combine it with a deliberately playful, conspiratorial tone. The standard dark-academia treatment is solemn and reverent; bada.casa treats scholarship as a source of delight rather than gravity. The "poltergeist in the library" concept has no parallel in the collection. 2. **Slide-reveal as primary animation pattern (2% frequency):** Only one other design in the collection uses slide-reveal, and none use it as the structural organizing principle. The alternating left/right slide-reveal paired with the vertical spine creates a unique page-turning rhythm that is fundamentally different from the dominant parallax (97%) and stagger (95%) patterns used elsewhere. The 200ms stagger between paired panels adds a distinctive two-beat cadence. 3. **Data-viz as atmospheric imagery rather than informational content (2% frequency):** Data visualization appears in only one other design, and there it serves a functional purpose. In bada.casa, the data visualizations are purely decorative -- abstract network graphs and contextless sparklines that suggest the presence of research and analysis without conveying specific information. This "data as wallpaper" approach is unique in the collection. 4. **Circuit-trace motifs rendered as scholarly marginalia (11% frequency for circuit, but unique treatment):** Circuit motifs appear in a handful of other designs, but always in a clean, technical, industrial style. bada.casa renders circuit traces as if they were hand-drawn botanical illustrations in a Renaissance manuscript -- organic curves, irregular line weights, decorative pads. The fusion of PCB routing and marginalia illustration is a wholly original visual language. 5. **Triadic palette at 4% frequency with a dark-academia warmth:** The triadic color scheme (Burnt Sienna / Prussian Teal / Aged Chartreuse) is almost unused in the collection, and the specific application -- muted, warm, aged versions of the triadic primaries -- has no precedent. Most triadic implementations trend toward high-saturation vibrancy; this one deliberately suppresses saturation to fit the library atmosphere. 6. **Asymmetric layout via active margin column:** While asymmetric layout is extremely common (93%), the specific implementation here -- a live, accumulating margin column that grows denser as the user scrolls -- is structurally unique. The margin is not just "narrower right column"; it is a parallel narrative track that evolves independently of the main content flow. **Seed:** aesthetic: dark-academia, layout: asymmetric, typography: condensed, palette: triadic, patterns: slide-reveal, imagery: data-viz, motifs: circuit, tone: whimsical-creative **Avoided overused patterns:** parallax (97% -- not used as primary pattern), stagger (95% -- not used), centered layout (86% -- deliberately avoided in favor of left-weighted asymmetry), corporate aesthetic (54% -- antithetical to this design), friendly tone (61% -- replaced with whimsical-creative), mono typography as primary (97% -- relegated to data/annotation role only).