# Design Language for diplomacy.boo ## Aesthetics and Tone diplomacy.boo lives in the visual world of a sun-bleached sketchbook left open on a driftwood table at a seaside ambassador's retreat -- the kind of place where diplomats shed their suits for linen, where negotiations happen over handwritten notes passed across tide pools, and where every agreement is sealed not with a stamp but with a hand-drawn map of shared coastline. The aesthetic is **hand-drawn coastal diplomacy**: loose ink strokes meeting watercolor washes of sea glass and wet sand, where every element feels like it was sketched by a cartographer who is also a poet. The tone is **friendly** but in a deeply specific way -- not the saccharine friendliness of a corporate chatbot, but the weathered warmth of a lighthouse keeper who has mediated disputes between fishermen for forty years. There is a gentleness to every interaction, but also a quiet authority that comes from understanding tides and territory. The mood evokes the hour just after a coastal storm clears: everything is fresh, slightly disheveled, glowing with that particular gold-gray light where sun breaks through retreating clouds over the ocean. It feels like the visual language of handwritten treaties between island nations, drawn up on heavy cotton paper with fountain pen ink that has not quite dried. Every surface carries the quality of hand-made marks -- not the perfected vector smoothness of digital illustration, but the visible wobble of a pen held by a human hand. Borders are imperfect. Lines breathe. Shapes have the organic inconsistency of things drawn from observation rather than computation. This is intentional: diplomacy is a human endeavor, and the site's visual language insists on that humanity at every level. ## Layout Motifs and Structure The layout follows an **organic-flow** paradigm -- content does not snap to rigid grids or symmetrical columns but instead arranges itself the way objects settle on a shoreline: naturally, with apparent randomness that reveals underlying patterns upon closer inspection. Sections are not rectangular blocks stacked vertically; they are irregular shapes that overlap, nestle, and flow into one another like tidal formations. **Flow Architecture:** - **Section 1 (Shoreline Entry):** A full-viewport opening where content appears to wash in from the right edge. The domain name "diplomacy.boo" is rendered in a large hand-drawn script that sits along an irregular, gently curving baseline -- mimicking the contour of a coastline viewed from above. Below, a single sentence of introductory text follows a different curve, as if written along the next wave line down the beach. No horizontal rules, no boxes: just text following the natural paths of illustrated shoreline contours. - **Section 2 (Tide Pool Clusters):** Content clusters into 3-5 irregularly shaped groups, positioned using CSS `shape-outside` with hand-drawn SVG clip paths. Each cluster is a "tide pool" -- a rounded, organic shape (not circles, not rectangles, but the kind of amoebic forms you find in actual rock pools) containing a short piece of content. These clusters are scattered across the viewport at natural-feeling positions: not centered, not on a grid, but placed according to visual balance the way stones arrange themselves in shallow water. On mobile, these stack vertically but maintain their organic outlines. - **Section 3 (Driftwood Bridge):** A horizontal band that feels like a piece of driftwood lying across the page. Content (a key message or quote) is typeset along the slightly curved, slightly angled axis of this illustrated piece of wood. The band itself is not a CSS rectangle but an SVG shape with the irregular edges and tapering ends of actual driftwood, filled with a subtle wood-grain texture generated via CSS `background-image` using repeating linear gradients in sandy tones. - **Section 4 (Cartographic Spread):** The final section is laid out like an unfolded hand-drawn map. Content areas are delineated by dotted ink lines (animated with a `stroke-dashoffset` drawing effect). Compass rose decorations (hand-drawn SVG) mark navigational anchor points. Text is placed at slight angles (2-5 degrees of rotation) as if annotations written directly onto the map surface. The background carries a faint grid of latitude/longitude lines in very low opacity (#C2D4D6 at 12%). **Spatial Philosophy:** No element is perfectly aligned to another. Everything has 1-3 degrees of rotation, 2-8px of offset from where a grid would place it. This controlled imperfection creates the feeling of hand-placement. CSS `transform: rotate()` values between -3deg and 3deg are applied to nearly every content block, with each block having a unique rotation value. ## Typography and Palette **Typography:** - **Headlines / Display:** "Caveat" (Google Fonts) -- a connected, semi-cursive handwriting font with natural stroke variation and a distinctly personal, letter-writing quality. Used at 3rem-6rem for section headings and the site title. Its connected letterforms evoke fountain pen writing on thick paper. Applied with `letter-spacing: 0.01em` and `line-height: 1.1` to keep the handwritten intimacy. Headlines are rendered in Driftwood Charcoal (#3B3A36) for warm, ink-like contrast against the coastal backgrounds. - **Body Text:** "Nunito Sans" (Google Fonts) -- a humanist sans-serif with rounded terminals and generous x-height that reads as warm, approachable, and modern without being clinical. Weight 400 for body, 600 for emphasis. Set at `font-size: 1.125rem`, `line-height: 1.7`, `letter-spacing: 0.005em`. The rounded terminals of Nunito Sans echo the organic blob shapes used throughout the design, creating typographic-spatial harmony. Body text is rendered in Deep Tideline (#2C3E50). - **Annotations / Captions:** "Kalam" (Google Fonts) -- a handwriting font with a more casual, note-scribbling quality than Caveat. Used for small annotations, labels, and the map-style captions in Section 4. Set at 0.875rem-1rem, weight 400, in Weathered Ink (#5D6B7A). This creates a clear hierarchy: Caveat for formal handwriting (treaties), Kalam for informal marginalia (notes), Nunito Sans for readable body content. **Palette -- Coastal Blend:** - **Sea Glass Green** `#6AACB8` -- The primary accent color. The blue-green of frosted sea glass held up to morning light. Used for interactive elements, links, hover states, and the fills of tide pool shapes. This is the color that says "this is clickable, this is alive." - **Driftwood Charcoal** `#3B3A36` -- Near-black with warm brown undertones, like charcoal made from driftwood. Primary text color for headlines and strong content. Never pure black -- always this warm, organic dark. - **Wet Sand** `#D4C5A9` -- The warm beige of sand at the waterline, darker than dry sand. Used for large background areas, section fills, and the base tone of the entire site. The foundation color that everything else sits on. - **Tide Foam** `#F0EDE4` -- The pale cream-white of sea foam drying on sand. Used for card backgrounds, text containers, and high-contrast reading surfaces. Not pure white (#fff) -- always this warm, slightly yellowed tone. - **Deep Tideline** `#2C3E50` -- A deep blue-gray like the wet line left by the highest tide. Body text color and dark accents. Cooler than Driftwood Charcoal, creating depth when the two are used in proximity. - **Coral Accent** `#E07A5F` -- A warm terracotta-coral, like sun-bleached coral fragments. Used sparingly for emphasis, highlights, and the compass rose decorations. This is the "surprise" color -- it appears in small doses to draw attention. - **Horizon Mist** `#C2D4D6` -- A pale blue-gray like the horizon line where ocean meets overcast sky. Used for subtle backgrounds, divider lines, the latitude/longitude grid, and secondary UI elements. - **Kelp Dark** `#2D4A3E` -- A deep, cool green-black like wet kelp on rocks. Used for footer areas, dark section variants, and as an alternative dark tone to Driftwood Charcoal when a cooler mood is needed. **Color Usage Rule:** The site never uses pure black (#000000) or pure white (#ffffff). Every dark is warm or cool-shifted; every light is cream or mist-shifted. This maintains the organic, coastal atmosphere across all elements. ## Imagery and Motifs **Custom Illustration as Primary Visual Mode:** All imagery is hand-drawn custom illustration -- not photography, not vector clip art, not AI-generated stock. The illustration style is loose ink line work with selective watercolor wash fills: outlines are drawn with visible pen wobble (achieved via SVG paths with slight randomization in control points), and fills are applied as semi-transparent washes that deliberately do not perfectly align with their outlines, as in real watercolor painting where pigment bleeds past the pen line. **Illustration Subjects:** - Coastal diplomatic metaphors: two ships meeting in a harbor, a bridge drawn between two cliffs, hands shaking across a map, message bottles with sealed scrolls, lighthouses sending overlapping light beams, birds carrying letters between shores - Cartographic elements: compass roses (hand-drawn, slightly asymmetric), dotted travel lines connecting points, topographic contour lines of imaginary coastlines, wind direction indicators - Marine life as decorative accents: small sketches of shells, starfish, coral fragments, kelp strands -- placed as margin decorations, bullet point replacements, and section dividers **Organic Blob Shapes:** The defining motif of the entire design is the organic blob -- irregular, amoebic, rounded shapes that serve as containers, backgrounds, and decorative elements throughout the site. These blobs are generated as SVG `` elements with smooth cubic bezier curves, where no two blobs share the same outline. They reference the shapes of tide pools, sea-smoothed stones, and watercolor wash boundaries. Implementation: Each blob is an SVG with 6-10 control points arranged roughly in a circle but with randomized radial distances (varying between 70% and 130% of the base radius). The curves between points use `C` (cubic bezier) commands with control points offset to create smooth, organic transitions. Blobs are filled with semi-transparent coastal palette colors (Sea Glass Green at 15%, Wet Sand at 25%, Horizon Mist at 20%) and outlined with a thin (1-1.5px) Driftwood Charcoal stroke that has `stroke-dasharray: none` but a slightly rough appearance achieved via SVG filter `` applied to the stroke. **Section Dividers:** Instead of horizontal rules or whitespace gaps, sections are divided by hand-drawn wave lines -- a single, continuous, slightly irregular sine-wave SVG path that spans the full width of the viewport. Each divider wave has a different amplitude and frequency, so no two section breaks look identical. The wave line is stroked in Horizon Mist (#C2D4D6) at 2px width with rounded line caps. **Decorative Margin Notes:** Small hand-drawn illustrations (shells, compass arrows, small waves, tiny fish) are placed in the margins of content, positioned with CSS `position: absolute` relative to their parent content blocks. These appear at seemingly random positions but are actually placed at golden-ratio intervals along the vertical axis of each section. They use the Coral Accent color at 60% opacity for a subtle, discovered-detail quality. ## Prompts for Implementation **Full-Screen Narrative Experience:** The entire site must feel like unrolling a hand-drawn coastal map. The experience opens with the viewport filled with Wet Sand (#D4C5A9), then a hand-drawn coastline contour animates in from left to right using SVG `stroke-dashoffset` animation over 2.5 seconds -- the pen appears to draw the shoreline in real time. As the coastline completes, the domain "diplomacy.boo" fades up (opacity 0 to 1 over 1.2 seconds) in Caveat font, positioned along the curve of the coastline as if written by the same hand that drew the shore. This is not a loading screen -- it IS the content. The coastline remains as a persistent decorative element throughout the rest of the scroll experience. **Bounce-Enter Animation System:** All content elements enter the viewport with a **bounce-enter** animation -- a physics-based spring effect where elements arrive from slightly below their final position, overshoot upward by 8-12px, then settle back with a damped oscillation (2-3 bounces, decreasing in amplitude). This is implemented via CSS `@keyframes` with carefully tuned timing: ``` 0% { transform: translateY(30px); opacity: 0; } 40% { transform: translateY(-10px); opacity: 1; } 65% { transform: translateY(4px); } 82% { transform: translateY(-2px); } 100% { transform: translateY(0); } ``` Duration: 0.8s with `cubic-bezier(0.34, 1.56, 0.64, 1)` easing. Each element in a group is staggered by 120ms using CSS custom properties (`--delay: calc(var(--index) * 120ms)`). The bounce effect reinforces the friendly, approachable tone -- elements arrive with a playful, physical weight, as if they are small objects being gently placed on a table. **Scroll-Driven Ink Drawing:** As the user scrolls, hand-drawn decorative elements (margin illustrations, wave dividers, the cartographic grid lines) progressively draw themselves using `IntersectionObserver` to trigger SVG `stroke-dashoffset` animations. Each illustration begins as an invisible SVG path and "draws" itself over 1.5-2 seconds when its container enters the viewport at 30% visibility. The drawing animation uses `ease-in-out` timing to mimic the acceleration and deceleration of a real pen: starting slowly, moving fastest through straight segments, and slowing at curves and corners. **Tide Pool Hover Interactions:** When the user hovers over a tide pool content cluster, the organic blob outline subtly shifts shape -- the SVG path control points animate to new randomized positions over 0.6 seconds with `ease-in-out` timing, creating the effect of the blob gently breathing or morphing like a living organism. Simultaneously, the fill opacity increases from 15% to 30%, and a very subtle box-shadow appears (using `filter: drop-shadow(0 4px 12px rgba(106, 172, 184, 0.2))`), creating the illusion of the tide pool catching light. **Compass Rose Navigation:** The cartographic section includes a hand-drawn compass rose SVG that functions as subtle navigation. Each cardinal direction (N, S, E, W) is an anchor link to different site sections. On hover, the compass needle (a separate SVG element) rotates smoothly to point toward the hovered direction. The rotation uses `transform: rotate()` with a `transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)`. The compass rose is fixed-positioned in the bottom-right corner on desktop (hidden on mobile), providing persistent navigation without a traditional navbar. **No Traditional Navigation:** There is no hamburger menu, no sticky header, no conventional nav bar. Navigation is handled entirely through the compass rose (desktop) and through natural scroll progression. The site is designed as a single continuous scroll narrative, like unrolling a map from top to bottom. Internal anchors are marked by small hand-drawn waypoint symbols (a tiny flag, an anchor, a lighthouse) rather than text links. **AVOID:** CTA buttons with gradient fills, pricing comparison tables, testimonial carousels, stat-counter blocks, standard hero-image-plus-headline patterns, parallax scrolling (the organic flow replaces this), cookie-cutter card grids, footer link walls. The site has no "above the fold" anxiety -- it trusts the user to scroll, to explore, to discover. **Mobile Adaptation:** On mobile, the organic-flow layout simplifies to a single column but retains all hand-drawn qualities. Blob containers become full-width but keep their irregular outlines. The compass rose navigation is replaced by small waypoint illustrations that serve as section markers. The driftwood bridge section becomes a full-width band. Touch interactions replace hover states: a tap-and-hold on a tide pool triggers the blob morph animation. The bounce-enter animations retain their physics but with reduced overshoot (6px instead of 12px) for smaller screens. ## Uniqueness Notes **Differentiators from other designs:** 1. **Coastline-as-Baseline Typography:** No other design in the portfolio uses a hand-drawn geographic contour as the typographic baseline for its site title. The domain name follows the curve of an illustrated shoreline, merging cartography with lettering in a way that is specific to this site's coastal-diplomacy metaphor. This is not decorative text-on-a-path -- the path IS the content (a coastline), and the text follows it as annotations follow terrain on a real map. 2. **Organic-Flow Layout Without Grid Fallback:** While other designs may use asymmetric or broken-grid layouts, they still ultimately resolve to grid logic. diplomacy.boo abandons CSS Grid entirely for its primary content areas, using instead `shape-outside` with SVG clip paths, absolute positioning with golden-ratio spacing, and CSS `transform: rotate()` on every block. Content is placed the way objects settle on a shoreline -- by visual balance, not mathematical structure. This is the only design in the portfolio that is genuinely non-grid. 3. **Bounce-Enter as Sole Animation Pattern:** Instead of the dominant scroll-triggered and parallax patterns (used in 97% and 81% of existing designs respectively), diplomacy.boo uses bounce-enter (currently at 1% frequency in the portfolio) as its primary and nearly exclusive animation. Every entering element bounces. No parallax layers, no fade-reveals, no slide-ins. This single-animation-vocabulary approach creates a distinctive rhythm -- the entire site has a consistent, friendly, physical character because everything arrives the same way, just with different timing. 4. **Hand-Drawn SVG Section Dividers:** No other design uses wave-line illustrations as section dividers where each divider is a unique hand-drawn SVG path. The portfolio heavily uses whitespace, horizontal rules, or geometric shapes for section breaks. These organic wave lines reinforce the coastal theme at the structural level. 5. **Compass Rose as Primary Navigation:** Navigation via an illustrated, interactive compass rose rather than any conventional nav pattern (hamburger, sticky header, sidebar). This is both a functional UI element and a decorative illustration, collapsing the boundary between navigation and visual storytelling. **Documented 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:** - Avoided `playful` aesthetic (97% frequency) -- used `hand-drawn` instead - Avoided `centered` layout (98% frequency) -- used `organic-flow` (4% frequency) - Avoided `mono` typography (98% frequency) -- used `humanist` as the typographic axis - Avoided `warm` palette as primary descriptor (100% frequency) -- used `coastal-blend` (3% frequency) - Avoided `scroll-triggered` as primary animation (97% frequency) -- used `bounce-enter` (1% frequency) - Avoided `parallax` animation (81% frequency) entirely - Avoided `minimal` imagery (96% frequency) -- used `custom-illustration` (7% frequency) - Avoided `vintage` motifs (69% frequency) -- used `organic-blobs` (6% frequency) - No pricing blocks, stat grids, or CTA-heavy layouts present in the design