# Design Language for footprint.moe ## Aesthetics and Tone Footprint.moe is a blobitecture trail-log - an interactive ramble through soft architectural landscape forms, where every navigational moment is a literal pawprint left on amorphous mossy terrain. The aesthetic borrows from Greg Lynn's blob architecture, Studio Ghibli's roly-poly creature studies, and contemporary 3D-rendered confectionery: nothing rectangular, everything melted, swollen, and rounded. Tone is conversational - the page chats with the visitor in second-person ("you walk past three round hills shaped like sleeping seals"), like a friend narrating their afternoon hike. Pure rectangles are forbidden; every container is an organic blob with a wobbly border. Analogous greens, mosses, and meadows reinforce the rambling-outdoors feel. ## Layout Motifs and Structure Composition is organic-flow: an asymmetric path drawn vertically down the page, with content nodes ("waypoints") arranged on alternating sides of an undulating SVG trail line. Each waypoint is a soft amoeboid blob containing a single observation, photograph, or interactive moment. The trail line meanders left to right across the viewport as the visitor scrolls, with content blobs anchored at curve-peaks. There is no grid. Footprints (small paw-shaped SVGs) follow the cursor, then settle along the trail line as scroll progresses. The page opens with a 100vh blob landscape hero showing the trail's starting point, then unspools through 8-12 waypoint blobs, ending in a soft horizon-blob footer. ## Typography and Palette Headlines use Space Mono Bold at clamp(2.2rem, 5vw, 4.2rem), warm and slightly geometric, paired with -2% tracking for headline weight. Subheads use Space Mono Regular at 1.2rem with letter-spacing 0.04em. Body copy is set in DM Mono Regular at 0.98rem with 1.7 line-height for conversational rambling. The analogous palette flows through greens: meadow #C4D8A4, deeper-moss #8FAE6B, forest-shade #4D6438, sun-leaf #E3EBC2, sage-mist #B8C8A0, and warm-bark #6B5841 (the only non-green, used as ink and footprint color). Backgrounds are gradient washes between meadow and sun-leaf. No grays, no pure white, no blacks. ## Imagery and Motifs Imagery is geometric-abstract: smooth amorphous SVG blobs with gradient fills in the green palette, no photographs or illustrations, treated as the topographic features of the imagined landscape. Each waypoint blob has 2-3 internal smaller blobs floating inside (clouds inside hills inside valleys). Motifs reference nature: footprint glyphs (small four-toed pad shapes) as the page's signature dingbat, leaf clusters at blob edges, small fern fronds as paragraph terminals, and gentle wind-line indicators (3 horizontal squiggles) marking breezy waypoints. A recurring constellation of 5 footprints anchors each waypoint header. ## Prompts for Implementation Build footprint.moe as a meandering trail experience. The trail SVG path-draws as the visitor scrolls, with the line growing from the previous waypoint to the next over a 600ms ease-out as each new waypoint enters viewport. Implement card-flip on each waypoint blob: clicking a blob flips it 3D (rotateY 180deg) over 700ms to reveal additional notes on the back, with the front and back having different blob shapes via clip-path interpolation. Cursor trails 4-6 fading footprint SVGs that settle along the trail line as scroll progresses. Blob shapes morph continuously: each waypoint blob's clip-path interpolates between 3 polygon variants on a 14-second loop. Hovering a blob causes its border to wobble (animated SVG filter feTurbulence). Avoid CTA banks - the only "next" gesture is to continue scrolling along the trail, with a soft "you arrive at waypoint 03/12" indicator updating in the corner. The narrative reads like a friend's casual hike report: "You meet a fat clover here. It bobs hello. We rest a moment." ## Uniqueness Notes - Builds a literal trail-line SVG that path-draws as the visitor scrolls, with content blobs anchored at curve-peaks along the meandering path. - Treats card-flip as a 3D blob-to-blob transformation where front and back have different clip-path silhouettes, not just different content. - Drops cursor-trailing footprint SVGs that progressively settle along the trail line as scroll advances, producing a visible record of the visit. - Chosen seed/style: blobitecture aesthetic, organic-flow layout, mono typography, analogous palette, card-flip pattern, geometric-abstract imagery, nature motifs, conversational tone. - Frequency analysis avoidance: sidesteps overused centered/card-grid layouts (96%/93%), mysterious-moody tone (71%), warm-gradient palettes (95%/78%), photography imagery (90%), parallax pattern (96%). Leans into underused blobitecture (1%), organic-flow (4%), analogous palette (2%), card-flip (4%), geometric-abstract imagery (3%), and conversational tone (4%).