# Design Language for iggi.boo ## Aesthetics and Tone iggi.boo lives in the visual world of a hand-drawn sketchbook that washed ashore inside a waterproof satchel -- the pages still legible, the ink slightly feathered from salt air, the margins annotated with tide charts and seashell doodles. The aesthetic is **hand-drawn coastal narrative**: every element on the page looks as though it was sketched by a field naturalist sitting on a bleached driftwood log, fountain pen in hand, documenting the shifting moods of a rocky shoreline. Lines are imperfect and alive. Corners are rounded not by CSS border-radius but by the natural tremor of a human wrist. Fills bleed slightly past their outlines, the way watercolor ink bleeds on damp paper. Nothing is machine-perfect; everything breathes. The mood is the specific warmth of a late-afternoon tide pool tour -- unhurried, curious, slightly whimsical, with that particular coastal light where the sun sits low enough to turn everything amber and teal simultaneously. It is the feeling of finding a hermit crab in a perfectly spiraled shell and wanting to show someone. The tone is **friendly** in the most genuine sense: not the manufactured friendliness of a SaaS onboarding flow, but the easy warmth of a person who is genuinely delighted to explain how sea anemones work. The entire experience rejects the rigid, pixel-perfect precision that dominates the portfolio. Where other designs snap to grids and align to invisible baselines, iggi.boo wobbles. Where other designs use straight lines, iggi.boo uses the curved, organic, slightly unpredictable path of a hand drawing a wave. This is a site that feels like it was made by a person, not a system. ## Layout Motifs and Structure The layout follows an **organic-flow** composition -- content elements are positioned not on a rigid grid but along a meandering visual path that mimics the way a tide follows the contours of a shoreline. There is no global 12-column grid. Instead, each section establishes its own gravitational center, and content flows around that center the way water flows around rocks. **Flow Architecture:** - **Section 1 (Tide Pool):** Full-viewport. The domain name "iggi.boo" appears as a large hand-drawn lettering piece, centered but with each letter slightly rotated (between -3deg and +4deg) as if written by hand. Below it, a single hand-drawn wave line undulates across the viewport width using an SVG `` with cubic bezier curves. Content bleeds into view from below this wave line, as if emerging from water. - **Section 2 (Shoreline Walk):** Content blocks are arranged in an alternating left-right pattern that follows a hand-drawn S-curve path rendered as a faint pencil-sketch line running down the center of the viewport. Each content block is a "field note" -- a slightly rotated (1-3deg) card with rough, hand-drawn borders (SVG filter-based sketch effect) that sits beside the path like a naturalist's observation pinned to a corkboard. The cards alternate sides: left, right, left, right -- creating a gentle zigzag reading rhythm. - **Section 3 (Rock Pool):** A cluster composition. Multiple small content elements (factoids, quotes, tiny illustrations) are arranged in an organic cluster at approximately 60% viewport width, positioned as if someone scattered index cards across a table. Each card has a slight rotation (random between -5deg and +5deg). The cluster is not centered but positioned at roughly 55% from the left edge, creating an intentional off-center balance. - **Section 4 (Horizon):** Full-viewport again. A single large illustration fills the space -- a hand-drawn panoramic coastline rendered entirely in CSS/SVG. Text content is minimal: a single sentence in large humanist type, positioned above the illustrated horizon line. **Spacing Philosophy:** Margins and padding use values that feel "almost right but not quite" -- 47px instead of 48px, 23px instead of 24px. This subtle irregularity reinforces the hand-drawn feel at a subconscious level. The overall vertical rhythm is generous (minimum 80px between sections) to create the unhurried pacing of a coastal walk. **No Traditional Navigation:** Instead of a fixed navbar, a small hand-drawn compass icon (SVG, animated to wobble slightly on hover) sits in the top-right corner. Tapping it reveals section labels that slide in from the right like tabs in a sketchbook. ## Typography and Palette **Typography:** - **Headlines / Domain Logotype:** "Architects Daughter" (Google Fonts) -- a hand-printed typeface with the specific character of someone writing carefully but not formally, the way you might label a diagram in a field notebook. Used at 3.5rem-7rem for the domain name and section titles. The letterforms have natural inconsistencies in baseline and stroke width that prevent them from ever looking mechanical. Applied with `letter-spacing: 0.03em` and `line-height: 1.1`. All headlines use `text-rendering: geometricPrecision` to preserve the handwritten character at large sizes. - **Body Text:** "Nunito" (Google Fonts) -- a well-balanced humanist sans-serif with rounded terminals that feel approachable without being childish. The rounded terminals echo the organic, no-sharp-corners philosophy of the entire design. Used at 1.125rem/1.7 line-height for comfortable reading. Weight 400 for body, 700 for emphasis. The generous x-height ensures readability against textured backgrounds. - **Annotations / Captions:** "Kalam" (Google Fonts) -- a handwriting font based on actual handwriting by a calligrapher, with natural stroke variation and a casual, dashed-off quality. Used at 0.875rem for image captions, margin notes, and small labels. Applied with `font-style: italic` and `letter-spacing: 0.01em`. This font appears in the margin annotations and field-note labels throughout the design, reinforcing the sketchbook metaphor. **Palette -- Coastal Blend:** | Role | Color | Hex | Description | |------|-------|-----|-------------| | Deep Water | Abyssal Teal | #1A535C | The darkest value in the system -- deep coastal water at depth. Used for primary text and high-contrast elements. | | Shoreline | Driftwood Warm | #C4A77D | The golden-tan of sun-bleached driftwood. Used for card backgrounds, borders, and warm accent surfaces. | | Foam | Sea Foam Pale | #E8F1F2 | The near-white of ocean foam on sand. Primary page background. Slightly blue-shifted to prevent the sterile feel of pure white. | | Tide Pool | Tide Pool Aqua | #4ECDC4 | Vivid aquamarine of a sunlit tide pool. Primary accent color for interactive elements, links, and highlighted illustrations. | | Kelp | Kelp Forest | #2C6E49 | Deep green of submerged kelp forests. Secondary accent for nature-related sections and hover states. | | Sunset | Coastal Sunset | #FF6B6B | The warm coral-pink of a coastal sunset reflected on wet sand. Used sparingly for attention moments and animated highlights. | | Sand | Warm Sand | #F7E1C6 | Soft, warm sand tone. Used for secondary backgrounds and the "paper" surface of field-note cards. | | Ink | Sketch Ink | #2B2D42 | Near-black with a cool blue undertone -- the color of fountain pen ink on slightly damp paper. Used for hand-drawn SVG line art. | **Color Interaction Rules:** - Text is always Sketch Ink (#2B2D42) or Abyssal Teal (#1A535C) on light backgrounds - Tide Pool Aqua (#4ECDC4) is never used for text; only for borders, icons, and animated accents - Coastal Sunset (#FF6B6B) appears in no more than 3 places on the entire page -- it is the rare, precious color - Card backgrounds alternate between Warm Sand (#F7E1C6) and Sea Foam Pale (#E8F1F2) to create visual variety without introducing new colors ## Imagery and Motifs **Hand-Drawn Custom Illustrations as Primary Imagery:** The site uses NO photographs. Every visual element is a custom illustration rendered in the style of a coastal naturalist's field sketches -- loose, confident ink lines with selective watercolor-style fills. These illustrations are implemented as inline SVGs with hand-drawn path data (irregular, non-perfect curves achieved by using many short cubic bezier segments rather than mathematically smooth arcs). **Illustration Subjects:** - **Tide Pool Creatures:** Sea anemones, hermit crabs, starfish, sea urchins -- drawn in a loose naturalist style with annotating labels in Kalam font - **Coastal Flora:** Sea grass, kelp fronds, dune flowers -- used as section dividers and margin decorations - **Seashells:** Various spiral and bivalve shells used as bullet points and list markers (replacing standard dots/dashes with tiny inline shell SVGs) - **Waves and Water:** Stylized wave patterns used as section transitions -- each wave is a unique SVG path, never repeated, reinforcing the hand-drawn authenticity - **Compass Rose:** A detailed hand-drawn compass appears as the navigation icon, with North pointing toward the top of the page **Organic Blob Motifs:** Background decoration uses organic blob shapes -- amorphous, amoeba-like forms rendered as SVG paths with smooth curves. These blobs are filled with semi-transparent versions of the coastal palette (Tide Pool Aqua at 8% opacity, Kelp Forest at 5% opacity) and positioned behind content sections. They drift slowly (CSS animation, 20-second cycle, translateX 10px + translateY 6px) to create a sense of gentle underwater current. Each blob has a unique shape; no blob is duplicated. **Sketch-Effect Borders:** All rectangular elements (cards, images, containers) have borders that look hand-drawn. This is achieved using SVG filters: a `` filter (baseFrequency 0.04, numOctaves 4, type "turbulence") piped through `` (scale 3) applied to the border path. The result is a line that wobbles slightly, as if drawn freehand with a ruler that kept slipping. **Doodle Margins:** The left and right margins of the page (the "gutters" beyond the content area) contain faint, low-opacity (8-12%) decorative doodles -- tiny seashells, wave squiggles, star shapes, dotted lines -- that scroll at a slightly different rate than the main content (parallax offset of 0.15). These create the impression of a sketchbook where someone has been idly drawing in the margins. ## Prompts for Implementation **Full-Screen Narrative Experience:** The entire site must feel like leafing through a coastal naturalist's personal sketchbook. The experience opens with the Sea Foam Pale (#E8F1F2) background already visible, then the domain name "iggi.boo" draws itself onto the screen using SVG path animation (`stroke-dasharray` / `stroke-dashoffset` technique) over 2.5 seconds. Each letter appears to be drawn by an invisible pen -- the stroke progresses from start to end of each letterform path. Once complete, the hand-drawn wave line below the title undulates into view (0.8 second CSS animation, easing: cubic-bezier(0.34, 1.56, 0.64, 1) for a slight overshoot bounce). **Bounce-Enter Animation System:** All content elements use a **bounce-enter** animation pattern triggered by IntersectionObserver (threshold 0.2). When an element enters the viewport: 1. It begins at `opacity: 0; transform: translateY(40px) scale(0.95) rotate(-2deg)` 2. It animates to `opacity: 1; transform: translateY(0) scale(1) rotate(0deg)` over 0.6 seconds 3. The easing is `cubic-bezier(0.34, 1.56, 0.64, 1)` -- this creates the characteristic bounce overshoot where the element slightly overshoots its final position and springs back 4. Stagger delay: each subsequent element in a group adds 0.12 seconds delay 5. The slight initial rotation (-2deg) combined with the bounce gives every element the feeling of being playfully tossed onto the page **No Traditional Scroll-Triggered Parallax:** Instead of the overused parallax pattern, iggi.boo uses **differential drift** -- background blob elements move at 85% of scroll speed (not the dramatic 50% of parallax) creating an extremely subtle depth separation that feels more like underwater current than theatrical depth. **Interactive Tide Pool:** One section contains an interactive illustration: an SVG tide pool scene where hovering over creatures triggers hand-drawn annotation labels to bounce in (using the bounce-enter pattern). Hovering over a starfish makes its arms wiggle slightly (CSS `transform: rotate()` animation on individual SVG path groups, alternating between -3deg and +3deg over 0.4 seconds). Hovering over a sea anemone makes its tentacles sway (translateX oscillation on tentacle paths). This is implemented purely in CSS with `:hover` selectors on SVG group elements -- no JavaScript required for the hover effects themselves. **Hand-Drawn Line Animations:** Section dividers are not horizontal rules but hand-drawn wave lines. When they enter the viewport, they animate using the SVG stroke-dashoffset technique: the wave appears to be drawn from left to right over 1.5 seconds. Each wave line has a unique path (no two are identical) and a slightly different animation duration (between 1.2 and 1.8 seconds) to prevent mechanical repetition. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hero images with stock photography, cookie-cutter SaaS landing page sections, fixed sticky headers, hamburger menus, gradient mesh backgrounds, dark mode themes. **Wobble Micro-Interactions:** Hovering over any interactive element (links, buttons, navigation compass) triggers a subtle wobble: `transform: rotate(-1deg)` then `rotate(1deg)` then `rotate(0deg)` over 0.3 seconds. This wobble reinforces that nothing in this design is rigid or mechanical. Buttons have hand-drawn borders (same SVG filter as cards) and fill with Tide Pool Aqua (#4ECDC4) on hover, with the fill appearing to "spread" from center outward using a radial gradient transition. **Performance Note for Implementation:** The SVG filter effects (feTurbulence + feDisplacementMap for sketch borders) should be applied using a single shared `` block in the page's main SVG, referenced via `filter="url(#sketch-border)"`. This prevents the browser from recalculating the turbulence pattern for each element individually. Background blob drift animations should use `will-change: transform` and composite-only properties to stay on the GPU compositor thread. ## Uniqueness Notes **Differentiators from other designs:** 1. **Zero Photography -- Pure Illustration:** No other design in the portfolio commits to a fully illustrated visual language with zero photographic imagery. While some designs use illustrations as accents, iggi.boo makes hand-drawn custom illustrations the ONLY imagery mode. Every visual -- from hero imagery to bullet points to section dividers -- is a hand-drawn SVG. This creates a cohesive visual world that no photograph could achieve. 2. **Organic-Flow Layout (Non-Grid):** At only 4% frequency in the portfolio, organic-flow layouts are severely underrepresented. iggi.boo fully commits to this approach: no 12-column grid, no symmetrical alignment, no rigid structure. Content flows along a meandering S-curve path like a tide following the contour of a beach. This is fundamentally different from the centered (99%) and asymmetric (52%) layouts that dominate. 3. **Bounce-Enter as Primary Animation Pattern:** Instead of the ubiquitous scroll-triggered (96%) and parallax (81%) patterns, iggi.boo uses bounce-enter (3%) as its core animation language. Every element that appears on screen bounces into place with a springy overshoot, creating a playful physicality that the smooth-fade-in approach of other designs lacks entirely. 4. **Coastal-Blend Palette with Strict Scarcity Rules:** The coastal-blend palette (3% frequency) is rare in the portfolio, and iggi.boo enforces a unique constraint: the warmest color (Coastal Sunset #FF6B6B) is rationed to exactly 3 instances on the entire page. This scarcity principle -- inspired by how rare a perfect sunset is -- gives those coral-pink moments genuine visual impact. 5. **Sketchbook Materiality Over Digital Perfection:** While the portfolio trends toward pixel-perfect precision, iggi.boo deliberately introduces imperfection at every level: slightly rotated cards, wobbling borders via SVG turbulence filters, irregular margins (47px not 48px), doodled gutters, and letterforms that tremble. The site feels like a physical artifact that has been digitized, not a digital product designed to look physical. **Chosen Seed/Style:** - aesthetic: hand-drawn - layout: organic-flow - typography: humanist - palette: coastal-blend - patterns: bounce-enter - imagery: custom-illustration - motifs: organic-blobs - tone: friendly **Avoided Overused Patterns (from frequency analysis):** - Avoided centered layout (99%) -- used organic-flow instead - Avoided scroll-triggered animation (96%) as primary pattern -- used bounce-enter instead - Avoided parallax (81%) -- used subtle differential drift at 85% scroll speed instead - Avoided mono typography (99%) -- used humanist (Nunito) and handwritten (Architects Daughter, Kalam) instead - Avoided photography imagery (72%) -- used custom-illustration exclusively - Avoided vintage motifs (78%) -- used organic-blobs instead - Avoided warm palette as sole direction (100%) -- used coastal-blend which balances cool teals with warm sands - Avoided gradient palette treatment (90%) -- used flat, distinct color stops with no gradients