# Design Language for gabs.cx ## Aesthetics and Tone gabs.cx is a maximalist honey-cabinet of curiosities -- a friendly, overstuffed parlor where classical marble busts share shelf space with hand-drawn margin doodles, where thick honeyed light pools in every corner, and where nothing is allowed to feel sterile. The `.cx` TLD reads here as an abbreviation of *curio cabinet*, and the entire site behaves like a Victorian-era *Wunderkammer* reinterpreted by a friend who learned typography from concert posters and CSS from museum kiosks. The two-character name `gabs` is treated as a nickname mumbled affectionately -- it is set in massive Bebas Neue capitals at every opportunity, looming over warm beige plaster like a chiseled inscription on a colonnade frieze, but always with a hand-drawn smiley or curlicue scribbled beside it to puncture the grandeur. The mood is **warm, abundant, talkative, and deliberately overfull**. Where most contemporary sites whisper through negative space, gabs.cx **murmurs constantly** -- there is always a hand-drawn arrow pointing at something, a marble cherub peeking around a column heading, a honey-amber gradient bleeding into the next layer. The aesthetic refuses the cold restraint of corporate grids while also refusing the chaos of pure anti-design; instead it cultivates the curated abundance of a beloved aunt's shelves, where every object is treasured and every surface labeled in a slightly different handwriting. The classical marble motifs supply the gravitas, the hand-drawn doodles supply the warmth, and the honeyed neutral palette glues them together with the slow, golden viscosity of literal honey poured over warm bread. The user should feel **welcomed into a friend's well-loved study**, never lectured at by a brand. Voice is conversational ("oh hi, come look at this"), captions run long and tangential like footnotes in a personal essay, and headers cheerfully break grammar rules to keep their rhythm. Nothing here apologizes for taking up space. ## Layout Motifs and Structure The structural backbone is **parallax-sections** -- the page is composed of seven discrete full-viewport "rooms," each a self-contained tableau, separated by parallax-driven depth shifts that make the entire site behave like a horizontal/vertical hybrid of a pop-up book and a museum diorama. As the user scrolls, foreground marble busts drift slowly past mid-ground hand-drawn frames, which drift past background plaster textures, producing a tangible sense of walking through layered theatrical sets. **The seven rooms (vertical sequence):** 1. **The Vestibule** -- A full-bleed honey-amber wash with the word "gabs" set in Bebas Neue at 28vw, filling the screen like carved frieze lettering. Three parallax layers behind it: a faint hand-drawn architectural floor plan, a marble Corinthian capital floating mid-depth, and at the back, a wash of beeswax-warm gradient. A tiny doodled hand points up at the type. 2. **The Long Hallway** -- Bebas-Bold section title pinned at left edge while content scrolls horizontally beside it; thumbnail "portraits" framed by hand-drawn ornate cartouches, each portrait zooming-focusing as it enters the central viewport zone (a dedicated **zoom-focus** band running through the horizontal middle). 3. **The Marble Court** -- A symmetrical classical layout: two parallax columns of plaster-textured background, a central plinth holding rotating marble fragments (3D perspective transforms tied to scroll), and floating hand-drawn callouts ("note the chip on her left shoulder -- she fell off a truck in '97") in casual scribbled handwriting. 4. **The Honey Pantry** -- Maximalist grid of irregularly-sized cells stuffed edge-to-edge with content; cells overlap by 10-20px so they appear taped onto a corkboard rather than aligned to a grid. Each cell tilts at a small random angle (-3deg to +3deg) and casts a soft amber drop shadow. Hand-drawn washi-tape crosses the corners. 5. **The Reading Nook** -- Single wide column of long-form prose set in elegant serif, with hand-drawn marginalia spilling into the side gutters (arrows, underlines, doodled stars), and a parallax marble bust watching from the upper-right corner whose eyes track the cursor via subtle SVG transforms. 6. **The Atrium** -- Symmetrical classical pediment composition: a triangular peak of Bebas-Bold type at the top, two columns of body content like pillars beneath, and a hand-drawn laurel wreath swelling from the floor. 7. **The Threshold (footer)** -- A doormat of tightly-set hand-drawn icons (links, social, contact) on a worn-honey background; Bebas type at giant scale spelling "BYE FOR NOW" with a smiley dotting the period. Between each room, a **parallax transition strip** of approximately 30vh holds a shifting marble-fragment foreground over a moving honey-gradient background, making each section change feel like turning a heavy page. The overall grid is a deliberately **broken classical 12-column** -- the columns exist as faint pencil guidelines visible on a `?grid` query parameter -- but content gleefully ignores them, with elements straddling guides, hand-drawn arrows reaching across columns, and marble decorations sitting atop the gutters. ## Typography and Palette **Typography (all Google Fonts):** - **Display / Headlines**: **"Bebas Neue"** -- the spine of the site. A condensed, all-caps sans-serif with the muscular density of Letraset rub-down lettering and the confident shout of a vintage circus poster. Used at extreme sizes (clamp(3rem, 18vw, 22rem)) for room titles, with `letter-spacing: 0.02em` for breathing room between strokes. Its uniform x-height and tight vertical rhythm let it stack into multi-line marble-frieze inscriptions without visual gaps. Always paired with a hand-drawn embellishment (an underline scribble, a marginal star, a tiny pointing-finger glyph) to soften its architectural severity. - **Sub-display / Pull quotes**: **"Cormorant Garamond"** (italic) -- a high-contrast classical serif whose Renaissance roots echo the marble motifs. Used for chapter titles, room subtitles, and pull quotes at 1.5-3rem with italic emphasis to evoke museum wall labels and old book chapter heads. - **Body text**: **"Lora"** -- a sturdy, bookish serif with calligraphic origins, optimized for long-form reading. Set at 1.0625rem with 1.65 line-height. Generous, warm, slightly asymmetrical -- it reads like a well-loved paperback. - **Marginalia / Captions / Hand-written labels**: **"Caveat"** -- a casual hand-drawn marker font with natural stroke variation. Used at 0.95-1.2rem for the doodled captions, arrow-labels, and "look at this!" annotations scattered throughout. Color always `#3a2818` (darkest brown) to feel like a fountain pen on aged paper. - **Numerals / accents**: **"Abril Fatface"** -- a high-contrast didone display serif used sparingly for room numbers (I, II, III...) and oversized initial caps in the Reading Nook room. Its hairline thin strokes shimmer like gold leaf against honey backgrounds. **Palette (the Honeyed Neutral spectrum):** - `#f5e8d0` -- **Beeswax** (primary background, the color of warm fresh honey poured on linen) - `#e8d3a8` -- **Honeycomb** (secondary surfaces, slightly deeper) - `#c9a96a` -- **Amber-gold** (accent, used for hand-drawn arrows and headings) - `#8b6f3a` -- **Burnt sienna honey** (mid-tone, marble veining shadows) - `#3a2818` -- **Espresso brown** (primary text, the color of dark coffee on cream) - `#fdfaf0` -- **Cream-white** (highlights, marble polished surfaces) - `#d4c4a0` -- **Plaster** (background texture, weathered classical wall) - `#a8341e` -- **Pomegranate** (the single hot accent, used only for the smiley dot, the underline scribble on hover, and the heart in the footer signature -- never more than three appearances per viewport) The palette is a **honeyed-neutral** family with one rebellious red note: warm cream through golden amber to deep espresso, with a single pomegranate-red as the exclamation mark. No cool tones anywhere. All gradients are radial, golden, and honey-viscous. ## Imagery and Motifs **Core motif: marble-classical sculpture intercut with hand-drawn marginalia.** Every section pairs a piece of classical statuary -- always rendered as cropped fragments rather than full figures -- with a hand-drawn doodle that comments on it, mocks it gently, or annotates it as if in a beloved schoolbook. **Specific recurring motifs:** - **Marble fragments**: Cropped close-ups of Greco-Roman sculpture (a Venus's chin and neck, a Discobolus's wrist, a fluted column capital, a draped knee) treated with a slight honey-tinted color grade so they look photographed in golden hour. Always presented as PNGs cut out against the honey background, with the cut edges ragged like torn sketchbook paper. - **Hand-drawn doodles** (SVG, all stroke-based, no fills): pointing fingers in the style of medieval manuscript manicules; spiral arrows; loose stars and asterisks; wavy underlines; marginalia hands holding quills; tiny laurel branches; little smiley faces with one closed eye; dotted "you-are-here" trails connecting elements across the layout. All drawn in `#3a2818` with `stroke-width: 1.5px` and `stroke-linecap: round` for that ballpoint-pen feel. - **Plaster texture overlay**: A subtle, large-scale grain (CSS `background-image` with a single SVG turbulence noise) at 8% opacity layered over every section, giving every surface the slightly mottled feel of an old plaster wall. - **Honey-drip dividers**: Section dividers rendered as SVG paths shaped like dripping honey -- a horizontal line that sags in three places into pendulous golden droplets. - **Washi-tape corners**: Hand-drawn rectangles at random rotations with semi-transparent amber-gold fill, decorating the corners of cards in the Honey Pantry room as if literal masking tape held the layout to the wall. - **Architectural fragments**: Faint hand-drawn floor plans, elevation drawings of Doric columns, and ornate cartouche frames used as background ornament behind major headings. - **Maximalist density**: At any scroll position, the viewport should contain at least one marble element, one hand-drawn doodle, one Bebas headline, one Caveat caption, and one honey-gradient surface. Empty space is forbidden in the maximalist principle of *horror vacui*. - **Friendly icon set**: Custom hand-drawn icons (search, menu, close, link) drawn in single-stroke style, all slightly imperfect, with visible corrections and ink-blot dots. ## Prompts for Implementation **Narrative structure:** The site is a guided tour through gabs's personal cabinet of curiosities. The user is a welcomed guest, not a customer. The seven rooms unfold sequentially, each room introducing a new theme through a parallax depth-shift that feels like physically stepping across a threshold. **Zoom-focus animation pattern (the signature interaction):** - Define a horizontal "focus band" running across the middle 30% of the viewport. - Any element entering this band scales from 0.85 to 1.08, sharpens (CSS `filter: blur(0)` from `filter: blur(2px)`), and gains a subtle warm glow (`box-shadow: 0 0 60px -10px #c9a96a`). - Elements outside the band sit at 0.85 scale and 0.7 opacity with a 2px blur, like out-of-focus museum exhibits. - This applies in both vertical scroll (Reading Nook, Atrium) and horizontal scroll (Long Hallway). - Tied to `IntersectionObserver` thresholds and `scroll`-driven CSS custom properties (`@property --focus-distance`). **Parallax-sections implementation:** - Each of the seven rooms is a `position: relative` container sized at 100vh. - Within each, three `position: absolute` layers sit at z-index -2 (background plaster + gradient), -1 (mid-depth marble fragments), and 0 (foreground content). - Each layer translates at a different rate via `translateY(calc(var(--scroll-y) * ))`, where factors are -0.15 (background), -0.4 (mid), and 0 (foreground). - The transition strips between rooms use a fixed-position layer with `clip-path` insets driven by scroll, producing a "page-turn" feel. **Storytelling beats:** 1. The Vestibule **announces** ("hi I'm gabs, come in") with a single Bebas word and a hand-drawn welcoming arrow. 2. The Long Hallway **introduces a cast** of portraits horizontally; the user pans through faces. 3. The Marble Court **slows time** -- the rotation of the central marble plinth happens at 0.1 turns per scroll-second, demanding lingering. 4. The Honey Pantry **overwhelms generously** with maximalist abundance. 5. The Reading Nook **invites reading** at human pace; cursor-tracking marble bust eyes create gentle accountability. 6. The Atrium **resolves** symmetrically with classical pediment composition. 7. The Threshold **says goodbye warmly** ("BYE FOR NOW :)"). **Interaction details:** - Hover on any heading: a hand-drawn underline scribbles itself into existence via SVG path-draw (over 380ms, ease-out) in pomegranate red. - Hover on marble fragments: a tiny doodled hand reaches in from the corner and "taps" the marble with a 6deg wobble. - Cursor leaves trail of three faint amber dots at 80ms decay -- tiny golden footprints. - Page load: rooms boot up sequentially with marble fragments fading in (ease-out 700ms, stagger 120ms) as if a curator turning on the gallery lights. - Scroll velocity: very fast scroll briefly increases the parallax depth offset (rooms feel "deeper") then settles back -- giving scroll a sense of inertia. **AVOID:** CTA-stacked hero sections, pricing tables, stat-grids of glowing numbers, "trusted by" logo bars, generic testimonial carousels, three-icon-feature rows, contact forms that demand work email, sticky persistent navbars (the parallax rooms ARE the navigation), aggressive popups. Voice should never use the word "solution" or "platform." **FAVOR:** wandering, layered, talkative, generous compositions where each surface invites the eye to keep finding new small details. Captions can be five sentences if they want to be. The page can take its time. ## Uniqueness Notes **Differentiators from other designs in the portfolio:** 1. **Maximalist + honeyed-neutral combination** -- maximalist scores 0% in the portfolio aesthetic frequency, and honeyed-neutral is at 1%. This site is one of the rare maximalist designs and likely the only one married specifically to a warm-honey palette rather than the more common pastel or neon maximalism. Where most maximalist work goes loud-bright, gabs.cx goes loud-warm-friendly. 2. **Marble-classical x hand-drawn collision** -- marble-classical motifs appear in only 1% of designs and almost never paired with hand-drawn imagery (which is itself only 22%). Most marble-classical sites lean luxury-cold; this one weds the gravitas of classical sculpture to the warmth of margin-doodles, producing a tone no other site in the portfolio strikes: *friendly Wunderkammer*. 3. **Bebas Neue as condensed-display anchor** -- condensed typography is at 7% and most condensed sites use thin or modern condensed faces. Bebas Neue at 28vw scale dominating beside hand-drawn Caveat captions creates a poster-meets-sketchbook tension found nowhere else. 4. **Zoom-focus as signature interaction band** -- zoom-focus is at 4% in the portfolio. Here it is not just an animation but a structural principle: a horizontal "in-focus zone" runs through every room, making scroll behave like a museum docent's flashlight illuminating exhibits one at a time. 5. **Friendly tone in maximalist context** -- friendly tone is at only 2%, and almost never combined with maximalist density. The default for maximalist is edgy, rebellious, or chaotic; gabs.cx is loud and abundant *and* warm, conversational, welcoming -- a rare combination. 6. **Seven-room parallax-sections architecture** -- treating the page as a sequence of named, themed rooms (Vestibule, Hallway, Court, Pantry, Nook, Atrium, Threshold) rather than as content blocks gives the site a spatial memory that pure card-grid (40%) and centered (38%) layouts cannot offer. 7. **Anti-trends adopted**: avoids photography (40%), avoids gradient palette (41% though uses radial honey gradients which are subtly different), avoids mono typography (39%), avoids mysterious-moody tone (23% -- this site is the opposite, sunlit-warm-friendly), avoids card-grid as primary structure. **Chosen seed (from assignment):** aesthetic: maximalist, layout: parallax-sections, typography: bebas-bold, palette: honeyed-neutral, patterns: zoom-focus, imagery: hand-drawn, motifs: marble-classical, tone: friendly. **Avoided patterns from frequency analysis:** corporate aesthetic (39%), photography imagery (40%), card-grid layout (40%), gradient palette in its cool/standard form (41%), warm palette generic (41%), scroll-triggered as sole pattern (39%), mono typography (39%), mysterious-moody tone (23%), centered layout (38%), full-bleed as default (24%). Where this design intersects with a popular pattern (parallax at 28%), it specifies a more particular variant (parallax-sections, room-based, with foreground/mid/background depth tied to themed tableaux) that is structurally different from generic single-image parallax hero treatments.