# Design Language for gabs.boo ## Aesthetics and Tone gabs.boo is a forest cottage library where pressed flowers mark the pages of leather-bound ledgers about the true cost of things -- a cottagecore accounting firm where every price tag is handwritten in elegant serif calligraphy and pinned to a sprig of dried lavender. The cottagecore aesthetic here is not performative pastoral fantasy but a genuine argument that understanding value (gabs = price in Korean) requires slowing down to the rhythm of seasons, of growing things, of handmade objects that carry the weight of labor in their surfaces. The tone is grounded-earthy -- rooted, tactile, real. The site speaks in the unhurried cadence of someone explaining generations of family wisdom about worth and cost. There is no digital urgency, no FOMO, no algorithm. Content reveals itself at the pace of a typewriter, letter by letter, as if each word costs something to produce. The combination of cottagecore warmth and typewriter deliberation creates an experience that feels analog, even as the pixels deliver it. Visual inspiration: the potting shed office of a rural bookkeeper in 1940s England; William Morris wallpaper patterns rendered in forest green on cream; the specimen labels in a Victorian herbarium; a farmhouse kitchen table covered in receipts, pressed flowers, and a steaming cup. ## Layout Motifs and Structure The layout uses a **sidebar** architecture -- a fixed left panel (280px) that functions as a bookshelf or cabinet, containing navigation organized as "volumes" and "chapters," with the main content area serving as the open book being read. **Sidebar (The Bookshelf):** - Fixed left, full viewport height, 280px wide - Background: deep forest green (#1a3a2a) - Contains the wordmark "gabs.boo" in elegant serif, positioned at top - Navigation items styled as book spines: each link is a horizontal bar with text sideways, separated by thin cream lines - A small botanical illustration (pressed flower SVG) at the bottom of the sidebar **Main Content (The Open Book):** - Background: warm cream (#faf6f0) with a subtle paper texture - Max-width: 680px, centered within the available space - Generous margins and padding -- the text never feels crowded - Single column, flowing vertically like the pages of a book **Section Flow:** 1. **The Cover (Hero):** The main content area displays the domain name "gabs.boo" in large elegant serif, centered, with a pressed-flower botanical border SVG framing it. Below: a subtitle in the same serif, italic. 2. **The Ledger:** Body content sections, each beginning with a small floral-botanical motif (a different pressed flower for each section). Text flows continuously, section breaks marked by botanical dividers rather than headings. 3. **The Almanac:** A reference section with terms and definitions about value/price concepts, each entry preceded by a small leaf icon. 4. **The Garden Gate:** Closing section. A single botanical wreath SVG containing the site's final thought, centered on cream. ## Typography and Palette **Typography:** - **Display / Headlines:** "Cormorant Garamond" (Google Fonts) -- a high-contrast, elegant serif with Garamond DNA, sharp details, and a literary authority. Used at 3rem-5rem for the hero and section titles. Weight: 600. The elegant-serif presence of Cormorant Garamond establishes the cottagecore-literary atmosphere immediately. Letter-spacing: 0.01em. - **Body / Content:** "Lora" (Google Fonts) -- a well-balanced serif optimized for body text with calligraphic roots. Used at 17px/1.8 for body paragraphs. Weight: 400 for body, 700 for emphasis. The generous line-height (1.8) creates a reading experience that never feels cramped -- like a well-typeset book with wide leading. - **Accent / Navigation:** "Cormorant SC" (Google Fonts) -- small-caps variant of Cormorant, used at 12px with letter-spacing: 0.15em for sidebar navigation labels and section markers. The small-caps create a scholarly, archival quality. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Forest Canopy | Deep green | #1a3a2a | Sidebar background, accent surfaces | | Forest Shadow | Dark green | #0f2a1a | Sidebar shadow, deepest green | | Parchment | Warm cream | #faf6f0 | Main content background | | Paper Aged | Slightly darker cream | #f0e8dc | Paper texture highlights, content panel tint | | Botanical Sage | Muted green | #6a8a6a | Botanical illustration strokes, leaf icons | | Dried Flower | Dusty rose | #b08080 | Pressed-flower SVG elements, rare accents | | Text Primary | Dark walnut | #2a2018 | All body text | | Text Secondary | Warm grey | #7a7060 | Metadata, navigation text | | Cream Gold | Soft gold | #c8a870 | Section divider lines, book-spine borders in sidebar | The palette is forest-green -- a woodland color world anchored by deep green and warm cream, with botanical sage and dried-flower accents providing life. The overall impression is of sunlight filtering through a canopy onto cream-colored pages. ## Imagery and Motifs **Botanical Illustration as Structural Grammar:** Every structural element uses botanical illustration: - Section dividers: a thin horizontal line with a small pressed-flower SVG centered on it (different flower per section: lavender, chamomile, rose hip, forget-me-not) - The hero border: a rectangular botanical frame made of intertwining vine SVGs in sage green - The closing wreath: a circular SVG composition of leaves and small flowers - All illustrations use sage green (#6a8a6a) strokes with occasional dried-flower (#b08080) fills for petals. Stroke-width: 1.5px. Hand-drawn quality with organic curves. **Floral-Botanical Motifs Throughout:** Small botanical elements are scattered through the content as punctuation: - Leaf sprigs (3-4 leaves on a stem) used as list item markers instead of bullets - Small flower buds used as footnote indicators - A trailing ivy SVG that descends along the right margin of the main content, growing longer as the user scrolls **Typewriter-Effect for Key Revelations:** At specific moments in the content, a sentence appears character by character, simulating a typewriter. Each character appears with a 50ms delay, accompanied by a subtle opacity transition from 0 to 1. This effect is used sparingly -- maximum 3 times across the entire site -- for sentences that deserve the weight of deliberate, letter-by-letter revelation. The typewriter-effect reinforces the analog, cottagecore atmosphere. ## Prompts for Implementation **Full-Screen Narrative Experience:** The sidebar is always present, anchoring the experience like a bookshelf wall in a cottage. The main content scrolls like turning pages. The reading pace is set by generous line-height, ample section spacing (80px between sections), and the occasional typewriter-effect pause that forces the reader to slow down. **Typewriter-Effect Implementation:** Target elements (marked with a data attribute) are processed by JavaScript on viewport entry. Text content is split into individual characters, each wrapped in a span with opacity: 0 and transition: opacity 200ms. Characters are revealed sequentially via setTimeout with a 50ms interval. The cursor is simulated by a blinking | character at the end (CSS @keyframes, opacity toggle, 530ms period). **Sidebar Book-Spine Navigation:** Each navigation link is styled as a horizontal bar (full sidebar width, 40px height, 1px bottom border in cream gold #c8a870). Text is set in Cormorant SC, centered vertically, left-padded 20px. On hover, the background brightens subtly (from #1a3a2a to #1f4030) and the text color shifts from cream to soft gold over 250ms. **Paper Texture Background:** The main content area uses a CSS paper texture: base #faf6f0 overlaid with a repeating SVG noise pattern (feTurbulence, baseFrequency: 1.5, numOctaves: 3) at 3% opacity, giving the surface a subtle fiber quality without being distracting. **Responsive Behavior:** On mobile (below 768px), the sidebar collapses to a top bar (60px height) with the wordmark horizontal and a simple dropdown navigation. Main content becomes full-width with 20px padding. Botanical illustrations scale down. The typewriter effect still fires but at reduced frequency. **AVOID:** CTA buttons, pricing calculators, comparison charts, corporate photography, gradient mesh, neon colors, card grids, dark mode, anything that feels digital-first. ## Uniqueness Notes **Differentiators from other designs:** 1. **Cottagecore aesthetic is nearly unique (1% frequency):** This is one of the rarest aesthetics in the collection, and the only design that applies it to a value/pricing concept site, creating the paradox of a pastoral accounting ledger. 2. **Sidebar as cottage bookshelf (7% frequency):** The sidebar layout is rare, and its treatment as a literal bookshelf with book-spine navigation links is unique -- it transforms structural navigation into environmental storytelling. 3. **Typewriter-effect for selective emphasis (7% frequency):** While typewriter-effect exists in the collection, using it sparingly (only 3 instances) for key revelations creates a dramatic punctuation system unique to this design. 4. **Forest-green palette (1% frequency):** One of the rarest palettes in the collection, creating a woodland color environment that no other design inhabits. 5. **Botanical illustration as structural grammar rather than decoration:** Every structural element (dividers, borders, list markers, the closing wreath) is a botanical element, creating a complete organic design language rather than decorative sprinkles. **Documented Seed/Style:** aesthetic: cottagecore, layout: sidebar, typography: elegant-serif, palette: forest-green, patterns: typewriter-effect, imagery: botanical-illustration, motifs: floral-botanical, tone: grounded-earthy **Avoided Overused Patterns:** - corporate aesthetic (62%) -- cottagecore (1%) instead - asymmetric layout (94%) -- sidebar (7%) instead - warm palette (100%) -- forest-green (1%) instead - parallax patterns (98%) -- typewriter-effect (7%) instead - mono typography (98%) -- elegant-serif (3%) instead - tech motifs (96%) -- floral-botanical (5%) instead - friendly tone (64%) -- grounded-earthy instead - minimal imagery (94%) -- botanical-illustration instead