# Design Language for gabs.feedback ## Aesthetics and Tone gabs.feedback lives in the visual world of an 18th-century botanical field journal that has been left open on a sunlit wooden table in a greenhouse -- its pages curling slightly from humidity, its pressed flower specimens bleeding faint pigment halos into the cream-laid paper, its handwritten annotations fading at the margins where fingertips have worn the ink thin. The aesthetic is **botanical** in the tradition of Maria Sibylla Merian and Ernst Haeckel: rigorously observed natural forms rendered with scientific precision but suffused with an unmistakable warmth and wonder. This is not the sterile botanical illustration of a textbook but the intimate, slightly messy record of someone who genuinely loves plants and cannot stop drawing them. The tone is **approachable-casual** -- the voice of a knowledgeable friend who happens to be a master gardener, someone who uses Latin binomials and slang in the same sentence, who will explain the phyllotaxis of a sunflower head with the same enthusiasm they'd use to recommend a good potting soil. There is no pretension, no gatekeeping. The site feels like receiving a letter from someone who pressed a leaf inside the envelope just because they thought you'd like it. The mood oscillates between the contemplative stillness of a conservatory at dawn (soft light through frosted glass, condensation on leaves, the smell of damp earth) and the vibrant chaos of a summer garden in full bloom (color everywhere, bees circling, vines climbing over everything). The experience should feel alive, growing, slightly uncontainable -- as though the botanical illustrations might creep off their designated areas and colonize the margins of the interface. ## Layout Motifs and Structure The layout follows a **hero-dominant** structure -- the viewport opens with a massive, immersive botanical illustration that fills the entire screen, functioning as the frontispiece of the field journal. Unlike centered or grid-based layouts that distribute visual weight evenly, the hero-dominant approach creates an immediate emotional impact: the user is plunged into a dense thicket of illustrated flora before any text, navigation, or interface chrome appears. The hero is not a photograph with overlay text; it is a living composition of layered SVG botanical line drawings that animate into existence as though being sketched in real-time by an invisible hand. **Primary Composition:** - **Hero Frontispiece (100vh):** A full-viewport botanical illustration composed of 6-8 individual plant specimens arranged in a naturalistic but asymmetric composition. Each specimen is an SVG with stroke-dasharray animation, so the illustration appears to draw itself over 3-4 seconds as the page loads. The background is a warm parchment tone (#F5ECD7). The domain name "gabs.feedback" is integrated into the illustration as though hand-lettered in sepia ink, positioned off-center at approximately the golden ratio point (61.8% from left, 38.2% from top). - **Specimen Pages (sections below the hero):** Each content section is framed as a "specimen page" from the field journal. These are stacked vertically but each has its own internal layout logic. Specimen Page 1 uses a left-weighted composition (illustration left, text right, 60/40 split). Specimen Page 2 inverts this. Specimen Page 3 uses a centered layout with the illustration behind the text at 15% opacity. Specimen Page 4 returns to asymmetry with a diagonal composition where the illustration bleeds from top-right to bottom-left. - **Marginalia System:** A persistent but subtle column on the right side of the viewport (approximately 80px wide on desktop, hidden on mobile) contains small decorative botanical sketches -- tendrils, leaf fragments, seed pods, small insects -- that scroll at a different parallax rate than the main content. These marginalia are purely decorative CSS background images that shift position as the user scrolls, creating the impression of flipping through a journal where someone has doodled in the margins. - **Page Edges:** The right edge of the viewport has a subtle layered paper-edge effect created with overlapping CSS box-shadows in slightly different warm tones (#F0E6D0, #EBE0C8, #E5D9BF), giving the impression of multiple stacked pages. This effect is 6-8px wide and creates the tactile illusion of a physical book. **Spatial Rhythm:** Vertical spacing follows a botanical growth pattern -- sections are separated by increasing amounts of whitespace as the user scrolls deeper (40px, 64px, 96px, 144px), mimicking the way a plant grows taller with wider internodal distances as it matures. ## Typography and Palette **Typography:** - **Headlines / Display:** "Bebas Neue" (Google Fonts) -- a tall, condensed, all-caps sans-serif with strong vertical presence and zero-width stroke terminals. Used at 5rem-10rem for specimen page titles and section headers. The condensed letterforms evoke the hand-lettered labels on Victorian herbarium sheets. All caps is mandatory. Letter-spacing is set to `0.08em` to open up the naturally tight tracking, and `line-height: 0.92` keeps multi-line headlines dramatically compressed. Headlines are rendered in Deep Umber (#3C2415) with a subtle `text-shadow: 1px 1px 0px rgba(245, 236, 215, 0.6)` to create the effect of embossed lettering on parchment. - **Body / Running Text:** "Lora" (Google Fonts) -- a well-balanced serif with moderate contrast and gentle curves that read as warm and literary without being stuffy. Weight 400 for body text, 600 for emphasis. Set at 1.125rem with `line-height: 1.72` and `letter-spacing: 0.01em` for generous, breathable paragraphs. Color: Walnut Ink (#4A3728). Lora's calligraphic roots (visible in its slightly brushed terminals) harmonize with the botanical illustration aesthetic while remaining highly legible at text sizes. - **Annotations / Captions:** "Caveat" (Google Fonts) -- a handwritten script that mimics the quick, slightly slanted notations a field botanist would scribble in the margins. Used at 0.875rem-1rem for image captions, footnotes, and decorative labels on botanical illustrations. Weight 400. Color: Faded Sienna (#8B6F47). This font is used sparingly -- only where the "handwritten" effect reinforces the field-journal conceit. Set with `transform: rotate(-1.5deg)` on individual annotation elements to create a naturalistic tilt. **Palette:** The palette is **warm** but specifically calibrated to the color range found in antique botanical watercolors -- the warm ivory of aged paper, the rich browns of walnut ink, the muted greens of preserved plant specimens, and the unexpected vivacity of flower pigments that have faded but not vanished. | Role | Name | Hex | Usage | |------|------|-----|-------| | Background (primary) | Aged Parchment | #F5ECD7 | Page background, hero backdrop | | Background (alt) | Warm Linen | #EDE3CC | Alternate section backgrounds, card surfaces | | Text (primary) | Walnut Ink | #4A3728 | Body text, primary headings | | Text (display) | Deep Umber | #3C2415 | Bebas Neue headlines, logotype | | Accent (botanical green) | Pressed Fern | #5B7A3D | Links, botanical illustration strokes, active states | | Accent (warm) | Foxglove Pink | #C4647A | Hover states, floral accents, decorative details | | Accent (golden) | Saffron Stigma | #D4943A | Highlight backgrounds, annotation underlines, focus rings | | Utility (dark) | Bark Brown | #2A1D12 | Footer background, dropdown menus | | Utility (border) | Dried Stem | #C4B494 | Dividers, specimen page borders, hairlines | **Color Relationships:** The palette operates on a warm analogous axis (yellow-orange-brown-green) with Foxglove Pink (#C4647A) serving as the sole complementary note -- a restrained flash of floral color that draws the eye exactly the way a single bloom draws attention in a green garden. The green (#5B7A3D) is deliberately muted and olive-leaning, referencing the way chlorophyll darkens in pressed specimens. The golden saffron (#D4943A) functions as the "living" accent -- it appears only on interactive elements and annotations, evoking the fresh ink of a recently added note. ## Imagery and Motifs **Botanical Illustration as Primary Visual Language:** Every visual element on the site is derived from the tradition of **botanical-illustration** -- not photographic images of plants, but hand-drawn, scientifically inflected renderings created as SVG line art. The illustration style references the copper-engraving aesthetic of Curtis's Botanical Magazine (1787-present): precise contour lines of uniform weight, cross-hatching for shadow and volume, and delicate stippling for texture. All illustrations are monochromatic line drawings in Walnut Ink (#4A3728) on Aged Parchment (#F5ECD7), with selective areas of wash color applied as semi-transparent SVG fills (Pressed Fern green at 20% opacity for leaves, Foxglove Pink at 15% opacity for petals, Saffron Stigma at 10% opacity for stamens and seed structures). **Floral-Botanical Motifs:** The decorative motif system is exclusively **floral-botanical**. Every ornamental element -- dividers, borders, loading indicators, empty states -- is constructed from botanical components: - **Section Dividers:** Instead of horizontal rules, sections are separated by a slender botanical garland -- a horizontal arrangement of small leaves, seed pods, and flower buds rendered as a single SVG that spans 60% of the viewport width, centered. Each garland is unique (5-6 variations used throughout the site). - **Corner Ornaments:** Specimen pages feature delicate botanical corner pieces -- curling tendrils and small leaves that frame the content area. These are positioned absolutely in CSS and rendered at 30% opacity in Dried Stem (#C4B494) to avoid competing with the content. - **Loading / Transition State:** When new content appears (via scroll reveal), a small seed-germination animation plays: a tiny seed shape splits open and a curling sprout emerges, unfurling a single leaf. This micro-animation is 0.6 seconds, built from SVG path morphing using CSS `@keyframes`. - **Cursor Trail (desktop only):** As the user moves their cursor across the hero section, a faint trail of tiny floating seeds and pollen particles follows -- rendered as 3-5 small CSS dots (4px diameter, Saffron Stigma at 40% opacity) with staggered `transition-delay` values that create a trailing swarm effect. The particles fade out over 1.2 seconds. - **Scroll Progress Indicator:** Rather than a standard progress bar, a vine grows along the left edge of the viewport as the user scrolls. The vine is an SVG `` element whose `stroke-dashoffset` is animated in proportion to `scrollY / documentHeight`. Small leaves branch off the vine at 25%, 50%, and 75% scroll positions. The vine stroke is Pressed Fern (#5B7A3D) at 60% opacity, 2px width. **Texture Layers:** The parchment background is not a flat color but a multi-layered texture: 1. Base color: Aged Parchment (#F5ECD7) as `background-color` 2. Paper grain: CSS `background-image` using `radial-gradient` noise (50+ tiny radial gradients at random positions, 1px radius, Warm Linen at 30% opacity) to simulate paper fiber 3. Age spots: 3-4 large, extremely subtle radial gradients (150-300px diameter, Dried Stem at 3-5% opacity) positioned asymmetrically to simulate the foxing and discoloration of old paper 4. Vignette: An `::after` pseudo-element with a radial gradient from transparent center to Bark Brown (#2A1D12) at 4% opacity at the edges ## Prompts for Implementation **Full-Screen Narrative Experience:** The entire site must feel like opening a centuries-old botanical field journal and discovering that its illustrations are still alive -- still growing, still unfurling, still responding to touch. The experience is a single, continuous scroll through a living herbarium. There is no traditional navigation bar, no hamburger menu, no footer links grid. Instead, the journal simply begins (hero frontispiece) and unfolds (specimen pages), and the user reads it as they would read a physical book: top to bottom, page by page, illustration by illustration. **SVG Path-Drawing Animation (Hero):** The hero frontispiece illustration must animate in using SVG `stroke-dasharray` and `stroke-dashoffset`. Each botanical specimen in the hero is a separate SVG `` group with its own animation delay. The first specimen begins drawing at 0.3s after page load, each subsequent specimen starts 0.4s after the previous one began, creating a staggered reveal where the entire composition assembles itself over approximately 3-4 seconds. The drawing animation uses `cubic-bezier(0.25, 0.1, 0.25, 1)` easing for a natural, hand-drawn feel. After stroke animation completes for each specimen, the fill colors fade in over 0.8s at low opacity (as described in Imagery section). **Parallax Depth in Specimen Pages:** Each specimen page implements a two-layer parallax: the botanical illustration background scrolls at 0.6x the rate of the foreground text content. This creates a subtle depth separation that makes the illustrations feel like they exist on a different sheet of paper beneath the text -- reinforcing the layered-pages metaphor. The parallax is achieved with `transform: translateY(calc(var(--scroll-offset) * 0.4))` updated via `requestAnimationFrame` and IntersectionObserver for performance. On mobile, parallax is disabled and illustrations are placed inline. **Scroll-Triggered Specimen Reveals:** As each specimen page enters the viewport (50% visibility threshold via IntersectionObserver), three things happen simultaneously: 1. The botanical illustration begins its path-draw animation (stroke-dashoffset from 100% to 0 over 2s) 2. The text content fades in and slides up 20px (`opacity: 0 -> 1`, `translateY: 20px -> 0` over 0.8s with 0.3s delay after illustration starts) 3. The botanical garland divider above the section performs a brief scale animation (`scaleX: 0 -> 1` over 0.6s, centered origin) **Vine Scroll Progress Implementation:** The left-edge vine scroll indicator requires a pre-defined SVG path that traces a winding vertical line with organic curves and branch points. Use JavaScript to calculate `(window.scrollY / (document.documentElement.scrollHeight - window.innerHeight))` and map this value to the vine's `stroke-dashoffset`. The vine SVG should be `position: fixed; left: 12px; top: 0; height: 100vh;` with `pointer-events: none` and `z-index: 100`. Leaves at branch points fade in (opacity 0 to 1 over 0.4s) when the scroll progress passes their respective thresholds. **Hover Microinteractions on Botanical Elements:** When the user hovers over any botanical illustration, the illustration responds with a gentle "growth" pulse -- a CSS scale from `1.0` to `1.02` over 0.3s with `ease-out`, accompanied by a 10% increase in fill opacity. This makes the pressed specimens feel as though they're remembering what it was like to be alive. On cursor exit, the scale returns to 1.0 over 0.5s with a slightly slower `ease-in-out`. **Typography Animation:** Bebas Neue headlines in specimen pages animate in character-by-character using staggered `animation-delay` (0.03s per character). Each character begins at `opacity: 0; translateY: 8px` and resolves to `opacity: 1; translateY: 0` over 0.4s. This creates a typewriter-adjacent effect but with vertical motion, as though each letter is being pressed into the page by a letterpress. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, cookie banners, generic hero banners with stock photography, gradient mesh backgrounds, neon color accents, dark mode, any UI pattern that disrupts the field-journal metaphor. ## Uniqueness Notes **Differentiators from other designs:** 1. **Living Botanical SVG System:** No other design in the portfolio uses SVG path-drawing animation as its foundational visual language across the entire site. While other designs may include SVG icons or decorative elements, gabs.feedback constructs its entire visual identity from animated botanical line drawings that sketch themselves into existence. Every illustration, divider, ornament, and progress indicator is a hand-drawn SVG that reveals through stroke animation -- creating a unified visual system where the medium (line drawing) and the content (botanical subjects) are inseparable. 2. **Vine Scroll Progress Indicator:** The growing-vine scroll indicator is a completely novel navigation metaphor not present in any other design. Instead of a generic progress bar or dot navigation, a botanical vine physically grows along the viewport edge as the user scrolls, with leaves unfurling at section boundaries. This transforms a utilitarian UI element into a living organism that reinforces the site's core botanical identity. 3. **Field Journal Spatial Logic:** The layout uses a "specimen page" system where each content section has its own unique internal composition (left-weighted, right-weighted, centered, diagonal), mimicking the way a real field journal contains pages with different layouts depending on the specimen being documented. This contrasts with the portfolio's dominant pattern of uniform section layouts that repeat the same grid throughout the page. 4. **Marginalia Parallax Layer:** The decorative right-edge marginalia column -- small botanical doodles scrolling at a different rate than the content -- is a unique spatial device not found in other designs. It creates a third depth layer (behind illustration, behind text) that evokes the physical experience of a journal page where someone has annotated the margins over many years. 5. **Seed-Germination Micro-Animation:** The loading/transition state uses a biologically accurate seed-germination sequence (seed splits, radicle emerges, hypocotyl extends, cotyledon unfurls) as a 0.6-second SVG morph animation. No other design uses biological growth processes as UI state transitions. **Chosen seed/style:** aesthetic: botanical, layout: hero-dominant, typography: bebas-bold, palette: warm, patterns: parallax, imagery: botanical-illustration, motifs: floral-botanical, tone: approachable-casual **Avoided patterns from frequency analysis:** - Avoided centered layout (99% usage) in favor of hero-dominant (3% usage) - Avoided mono typography (99% usage) in favor of bebas-bold (2% usage) - Avoided minimal imagery (95% usage) in favor of botanical-illustration (2% usage) - Avoided vintage motifs (76% usage) in favor of floral-botanical (0% usage) - Avoided friendly tone (97% usage) in favor of approachable-casual (3% usage) - Combined parallax (79% usage -- required by seed) with path-draw-svg (3% usage) and cursor-follow (4% usage) to add underused interaction patterns - Warm palette (100% usage) was required by seed; differentiated through the specific antique-botanical color story (parchment, walnut ink, foxglove, saffron) rather than generic warm tones