# Design Language for bada.casa ## Aesthetics and Tone bada.casa inhabits the visual universe of a graduate seminar's bulletin board that has been overtaken by a candy-addled collage artist -- think Susan Sontag's reading list illustrated by Haribo. The aesthetic is **scholarly maximalism filtered through sugar-rush color theory**: a space where dense footnotes share walls with fluorescent Post-it notes, where a Derrida citation is rendered in bubblegum pink, and where the gravity of intellectual discourse is cheerfully undermined by the sheer chromatic joy of its presentation. The domain name itself -- "bada.casa" -- evokes a house (casa) that goes "bada" (boom), a dwelling that explodes with ideas. The visual direction treats the entire page as the interior of this explosive house: walls covered in overlapping papers, diagrams, torn-out magazine pages, and hand-drawn annotations, all rendered in the candy-bright palette of a Japanese stationery shop. The tone is **scholarly-intellectual** but delivered with the mischievous energy of a zine that refuses to take its own seriousness seriously. Every section is a room in the casa -- you walk through corridors of layered knowledge, each wall a palimpsest of color and text. The inspiration draws from three distinct lineages: (1) the cut-and-paste collage work of Hannah Hoch and Romare Bearden, where disparate fragments coalesce into something greater than their parts; (2) the candy-colored information density of Wes Anderson's set design, particularly the cross-section diagrams in The Grand Budapest Hotel and The Life Aquatic; and (3) the layered, annotated margins of medieval illuminated manuscripts, where scholars would pile commentary upon commentary in increasingly cramped and beautiful marginalia. ## Layout Motifs and Structure The layout uses a **minimal-navigation** philosophy -- there is no traditional navbar, no hamburger menu, no sticky header consuming precious vertical space. Instead, navigation is embedded into the content itself through **layered-depth composition**: content panels overlap and stack like papers on a desk, and the user navigates by scrolling through these stacked layers, each one sliding to reveal the next beneath it. **Layered-Depth Architecture:** The page is constructed as a stack of five to seven "paper" layers, each one slightly smaller than the one beneath it, creating a visible depth effect where the edges of lower layers peek out from behind the current focal layer. This is achieved through a combination of `position: sticky`, progressive `width` reduction (each layer is ~4vw narrower than the one below), and subtle `box-shadow` on each layer's edges to simulate physical paper depth. - **Layer 0 (Background Canvas):** A full-bleed background in Lemon Chiffon (#FFF3B0) with a faint CSS dot-grid pattern (2px dots in #FFD6E0 at 24px intervals) simulating graph paper. This layer is always partially visible at the extreme edges as layers above it slide into view. - **Layer 1 (Title Card):** A 100vh panel in Carnation Pink (#FF7EB3) occupying 92vw centered, containing the domain logotype and a single provocative thesis statement. This layer has a 4px solid border in Deep Magenta (#C9184A) and a torn-edge top using an SVG clip-path that simulates ripped paper. - **Layers 2-5 (Content Rooms):** Each successive layer is a "room" in the casa, progressively narrowing (88vw, 84vw, 80vw, 76vw) and alternating between candy-bright background colors. Each layer uses `position: sticky; top: 0` so it pins at the top of the viewport while the next layer scrolls up over it, creating a card-stack peeling effect as the user scrolls. - **Layer 6 (Final Layer / Colophon):** The deepest layer, at 72vw, in Electric Violet (#8B5CF6) with white text, functioning as an end-card. It contains a circular SVG "wax seal" motif at center, using the site's monogram. **Navigation Through Content:** Instead of menu links, each layer contains a small "room number" in the top-right corner (styled as a circled numeral in Fraunces) and a brief phrase teasing the next layer's content at the bottom edge, creating a breadcrumb-free but intuitive sequential navigation. The user always knows where they are by the layer's unique background color and the visible edges of layers above and below. **Micro-Grid Within Layers:** Within each content layer, text and imagery follow an asymmetric 8-column grid (using CSS `grid-template-columns: repeat(8, 1fr)` with 12px gaps). Content blocks span 3-5 columns and are placed at varying vertical positions, never flush-left, never centered -- always offset to create the feel of items pinned to a board at casual angles. Some blocks carry a subtle `transform: rotate(-1.5deg)` or `rotate(2deg)` to reinforce the collage pinboard aesthetic. ## Typography and Palette **Typography:** - **Display / Headlines:** "Fraunces" (Google Fonts) -- an old-style, soft-serif variable font with optical size axis, designed by Undercase Type. Its "wonky" axis creates delightfully imperfect letterforms that oscillate between scholarly gravitas and playful irregularity. Used at `clamp(2.5rem, 5vw + 1rem, 5.5rem)` for layer titles, with the `WONK` axis set to 1 (maximum wonkiness) for headlines and 0 for body captions. Weight: 700 for headlines. The wonky serifs are the typographic equivalent of a professor who wears mismatched socks -- serious but never self-important. - **Body / Reading Text:** "Alegreya" (Google Fonts) -- a literature-inspired serif designed for long-form reading, with a calligraphic quality that evokes 16th-century Venetian typefaces. Used at 1.05rem/1.72 for body text, weight 400, with 500 for emphasis. Its humanist proportions and slightly narrow set width allow dense but readable paragraphs that feel like pages from a well-typeset academic journal. - **Accent / Annotations:** "Caveat" (Google Fonts) -- a handwritten font that mimics ballpoint pen marginalia. Used at 0.85rem-1.1rem for annotations, pull-quotes overlaid on content blocks, and "sticky note" elements. Color varies by context but defaults to Deep Magenta (#C9184A) to simulate red-pen corrections. Caveat text is always rotated 1-3 degrees and positioned to overlap content boundaries, as if someone scrawled notes after the page was "finished." - **Monospace / Citations:** "Fira Code" (Google Fonts) -- used exclusively for citation references, footnote numbers, and the room-number navigation indicators. Size: 0.8rem, weight 400, letter-spacing: 0.04em. Rendered in Midnight Navy (#1E1B4B) regardless of layer background color, providing a consistent scholarly anchor across all the chromatic chaos. **Palette:** The palette is **candy-bright** -- high saturation, high value, zero apology. Every color is the kind you would find in a bag of mixed sweets, but curated to maintain readability through careful contrast pairings. | Role | Color | Hex | Usage | |------|-------|-----|-------| | Lemon Chiffon | Background Canvas | #FFF3B0 | Layer 0 background, dot-grid base | | Carnation Pink | Layer 1 / Primary Accent | #FF7EB3 | Title card background, link hover states | | Tangerine Dream | Layer 2 / Secondary | #FF9F43 | Content room 2 background, button fills | | Electric Violet | Layer 5-6 / Tertiary | #8B5CF6 | Deep layers, colophon, icon fills | | Spearmint Fresh | Layer 3 / Highlight | #4ADE80 | Content room 3 background, success states | | Sky Pool | Layer 4 / Cool Accent | #38BDF8 | Content room 4 background, inline links | | Deep Magenta | Ink / Annotation | #C9184A | Borders, annotation text, emphasis | | Midnight Navy | Text Primary | #1E1B4B | Body text on light backgrounds | | Whipped Cream | Text on Dark | #FEF9EF | Body text on violet/magenta backgrounds | Contrast strategy: Body text is always Midnight Navy (#1E1B4B) on the lighter candy backgrounds (Lemon Chiffon, Carnation Pink, Tangerine Dream, Spearmint Fresh, Sky Pool), and Whipped Cream (#FEF9EF) on the darker backgrounds (Electric Violet, Deep Magenta). Headlines in Fraunces use Deep Magenta on light layers and Lemon Chiffon on dark layers for maximum punch. ## Imagery and Motifs **Collage as Primary Visual Language:** Every visual on the site is constructed as a CSS/HTML collage -- overlapping `
` elements with mixed blend modes, rotated containers, torn-edge clip-paths, and layered `box-shadow` to simulate cut paper. No photographs are used directly; instead, the collage elements are abstract geometric shapes (circles, rectangles, torn strips) in the candy palette, overlaid with typographic fragments and decorative tape strips. **Washi Tape Strips:** Horizontal and diagonal strips of "washi tape" -- CSS elements with `background: repeating-linear-gradient(45deg, ...)` patterns using candy palette colors at 60% opacity -- are placed across the boundaries between content blocks, as if physically taping elements to the board. Each tape strip is 18-28px tall, rotated 2-8 degrees, and extends slightly beyond the content container on each side. Three tape patterns are defined: 1. Diagonal stripes: alternating Carnation Pink and Lemon Chiffon at 8px intervals 2. Polka dots: Spearmint Fresh circles on Tangerine Dream field 3. Checkerboard: Sky Pool and Electric Violet at 6px squares **Sticky Notes:** Pull-quotes and annotations appear on "sticky note" elements -- 160px-200px square divs with a subtle `linear-gradient` simulating paper grain, a folded corner effect (using a pseudo-element triangle in a slightly darker shade), and a barely-there `box-shadow: 2px 4px 12px rgba(30,27,75,0.12)`. Each sticky note uses Caveat font and is rotated between -4deg and 5deg. Colors rotate through the candy palette: Lemon Chiffon, Carnation Pink, Spearmint Fresh, Sky Pool. **Layered-Depth Motifs:** Decorative depth indicators appear throughout: small SVG "shadow puppets" (geometric silhouettes of books, houses, lightbulbs, pencils) rendered in Deep Magenta at 20% opacity, positioned at the edges of layers to create the illusion that objects are casting shadows from one layer onto the next. These motifs reinforce the "casa" (house) metaphor -- each layer is a room, and the shadow puppets are the objects within those rooms. **Circular Scholarly Seals:** At the transition point between each layer, a circular SVG element (120px diameter) appears centered, styled as a wax-seal stamp in Deep Magenta with embossed Fraunces letterforms inside (the layer's room number). These seals use `filter: drop-shadow(0 2px 4px rgba(30,27,75,0.25))` and a subtle radial gradient to simulate dimensionality. **Spring-Physics Floating Elements:** Small decorative elements -- asterisks, section marks (ยง), pilcrows, daggers, and other scholarly punctuation marks -- float in the margins of each layer. These are rendered in candy palette colors and animated with CSS spring physics (using cubic-bezier approximations: `cubic-bezier(0.34, 1.56, 0.64, 1)`) so they gently bounce when the layer scrolls into view. Each punctuation mark is 1.2rem-2rem, set in Fraunces with WONK:1, and positioned using `position: absolute` within each layer container. ## Prompts for Implementation **Full-Screen Narrative Opening:** The site opens with Layer 1 at 100vh -- a full-viewport panel in Carnation Pink (#FF7EB3) with a torn-paper top edge (SVG clip-path). The domain name "bada.casa" is centered in Fraunces at `clamp(4rem, 8vw, 7rem)`, weight 900, WONK:1, in Deep Magenta (#C9184A). Below the logotype, a single sentence thesis in Alegreya at 1.3rem, Midnight Navy, italic: a provocative intellectual statement about the nature of home, knowledge, or dwelling. The sentence types itself in using a CSS `steps()` animation over 3 seconds. Around the edges of the title card, 4-5 floating scholarly punctuation marks (in various candy colors) spring into view with staggered delays (0s, 0.3s, 0.6s, 0.9s, 1.2s), each using `cubic-bezier(0.34, 1.56, 0.64, 1)` for their transform animation. **Layer-Stack Scroll Reveal:** As the user scrolls, Layer 1 sticks at the top while Layer 2 (Tangerine Dream, #FF9F43) scrolls up from below, overlapping Layer 1. The scroll behavior is handled entirely through `position: sticky` -- no JavaScript scroll listeners needed for the base effect. Each layer's content fades in with `opacity` transitioning from 0 to 1 via `@scroll-timeline` (or IntersectionObserver fallback). The progressive narrowing of each layer (92vw -> 88vw -> 84vw -> 80vw -> 76vw -> 72vw) creates a physical sense of depth, as if the user is looking down into a stack of increasingly small papers. **Collage Assembly Animations:** Within each content layer, the collage elements (text blocks, washi tape, sticky notes, geometric shapes) assemble as the layer scrolls into view. The assembly uses staggered spring animations: elements start at `opacity: 0; transform: translateY(30px) rotate(8deg)` and animate to their resting positions over 600ms with spring easing, each element delayed 80ms after the previous. This creates a "papers scattering onto a desk" effect -- elements tumble into place as if dropped from above. **Sticky Note Interaction:** Sticky notes (pull-quotes in Caveat) respond to hover with a `transform: scale(1.06) rotate(0deg)` transition (400ms, spring easing), straightening from their resting rotation as if the user is lifting and smoothing them. On hover, their box-shadow deepens slightly (from 12px blur to 20px blur) to enhance the lift illusion. This is the site's primary micro-interaction. **Washi Tape Parallax:** The decorative washi tape strips move at 60% of the scroll speed of their parent content layer, creating a subtle parallax that reinforces the layered-depth metaphor. This is achieved with `transform: translateY(calc(var(--scroll-progress) * -20px))` updated via a lightweight IntersectionObserver or CSS scroll-driven animations. **Scholarly Seal Stamp Animation:** When a transition seal scrolls into the viewport center, it plays a "stamp" animation: starting at `scale(2) opacity(0)`, it springs down to `scale(1) opacity(1)` over 500ms with heavy spring easing (`cubic-bezier(0.22, 1.6, 0.36, 1)`), simulating a wax seal being pressed onto paper. A brief radial pulse of Deep Magenta at 10% opacity expands outward from the seal at the moment of impact. **Spring-Physics Punctuation Dance:** The floating scholarly punctuation marks in each layer's margins are animated continuously with a gentle bobbing motion using CSS `@keyframes`: `translateY(-4px)` to `translateY(4px)` over 3-5 seconds (randomized per element via `animation-duration` variations), with `ease-in-out` timing. On layer entry, they spring in from random off-screen positions using the spring cubic-bezier curve. **Color Transitions Between Layers:** As the user scrolls from one layer to the next, a `::before` pseudo-element on the incoming layer creates a 20px gradient strip at the top edge that blends the exiting layer's color into the entering layer's color (e.g., Carnation Pink gradually becomes Tangerine Dream). This soft transition prevents jarring color shifts and reinforces the sense of moving through physical colored paper. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hero image sliders, cookie banners, newsletter popups, or any element that breaks the immersive collage narrative. The entire experience is a single uninterrupted vertical journey through layered rooms of a candy-colored intellectual casa. ## Uniqueness Notes **Differentiators from other designs:** 1. **Sticky Card-Stack Navigation via Layered Depth:** No other design in the portfolio uses a progressive-width sticky-stack layout where each layer is physically narrower than the one below it. This creates a unique depth metaphor where the user perceives themselves as digging deeper into a pile of papers. The combination of `position: sticky`, progressive width reduction, and torn-edge clip-paths is mechanically and visually distinct from standard parallax or scroll-triggered layouts. 2. **Candy-Bright Palette with Scholarly Tone -- Tonal Dissonance as Design Strategy:** The collision of an aggressively cheerful candy palette (Carnation Pink, Tangerine Dream, Spearmint Fresh, Electric Violet, Sky Pool) with a scholarly-intellectual tone (Alegreya body text, footnote-style citations in Fira Code, wax-seal motifs, marginalia in Caveat) creates a deliberate tonal friction that no other design attempts. Where most designs align their palette to their tone (warm earth tones for warmth, dark mode for mystery), bada.casa subverts this by wrapping academic gravity in bubblegum aesthetics. 3. **Collage-First Imagery Without Photography:** While several designs use organic-blobs or abstract-shapes as imagery modes, bada.casa is the only design that treats CSS-constructed collage as its primary visual language. Every visual element is built from overlapping divs, rotated containers, washi tape strips, and torn-edge clip-paths. There are no photographs, no SVG illustrations, no icon libraries -- just cut-paper geometry assembled through code. This is closer to a Dada assemblage than a web design. 4. **Scholarly Punctuation as Decorative Motif:** Using typographic marks (pilcrows, section marks, daggers, asterisks, double daggers) as animated decorative elements is entirely unique. These symbols carry academic connotation while functioning as abstract visual ornaments, bridging the scholarly-intellectual tone and the playful aesthetic in a single visual element. 5. **Minimal-Navigation Through Color Coding:** The absence of a traditional navigation bar, replaced by a room-number system and color-coded layers, is unique in the portfolio. The user navigates by color memory and sequential discovery rather than by clicking menu links. This creates an immersive, book-like reading experience that aligns with the scholarly tone. **Chosen seed/style:** aesthetic: playful, layout: minimal-navigation, typography: eclectic-hybrid, palette: candy-bright, patterns: spring, imagery: collage, motifs: layered-depth, tone: scholarly-intellectual **Avoided patterns from frequency analysis:** - Avoided centered layout (97% overuse) -- used layered-depth with asymmetric grids instead - Avoided mono typography (97% overuse) -- Fira Code is used only for citations, not as a primary type voice - Avoided warm palette (100% overuse) -- candy-bright is high-saturation rather than warm-toned - Avoided scroll-triggered as primary pattern (97% overuse) -- spring physics and collage assembly are the signature animations - Avoided vintage motifs (59% overuse) -- layered-depth with scholarly punctuation replaces nostalgia with intellectual playfulness - Avoided friendly tone (95% overuse) -- scholarly-intellectual provides gravitas despite the playful surface - Avoided minimal imagery (95% overuse) -- collage is dense, layered, and visually complex