# Design Language for sustaining.quest ## Aesthetics and Tone **sustaining.quest** is conceived as a **living mycelial atlas** — a soft, breathing, half-underground organism that you scroll *through* rather than *down*. The governing metaphor is **sustenance as circulation**: the quest is not a checklist to conquer but a metabolism to keep alive. Picture the cross-section of a forest floor rendered as warm bioluminescent gel — root threads, sap channels, slow pulses of nutrient moving from chamber to chamber. The aesthetic is **blobitecture** in its truest sense: there are almost no straight lines, no hard rectangles, no card with four corners. Everything is a membrane, a vesicle, a lobe of soft matter that swells and contracts as the reader moves. The tone is **grounded-earthy** married to **dreamy-ethereal** — it should feel like lying in moss at dusk while something gentle and ancient hums beneath you. Not corporate-green "sustainability" with leaf icons and stat counters; not cottagecore nostalgia either. This is closer to speculative biology: tender, a little strange, deeply patient. Copy speaks in second person, in the cadence of a caretaker ("you tend the thread / it remembers your weight / nothing here is in a hurry"). Warmth dominates — the palette is honeyed and amber-lit even in its shadows, so the page never reads as cold-tech "eco." The reader should leave feeling *metabolized*, gently held by a slow organism rather than pitched to. ## Layout Motifs and Structure **Organic-flow, not card-grid.** The page is a vertical river of **soft chambers** — irregular blob-shaped regions defined by `border-radius` values that are never uniform (e.g. `border-radius: 47% 53% 38% 62% / 55% 41% 59% 45%`), each chamber a different morphology, connected by visible **flow-tubes** (curved SVG paths, 8–14px stroke, with a slow gradient "pulse" animating along them via `stroke-dashoffset`). Sections do not stack as blocks; they *bud* off one another, often offset left/right so the central tube meanders like an intestine or a creek. - **Mouth (hero):** a single enormous breathing blob occupying ~95vh, its outline morphing on a 9–14s loop (CSS `@keyframes` cycling 4–5 border-radius states, or an animated SVG `` with `d` morphing). Title sits *inside* the membrane, slightly displaced as if floating in fluid. - **Chambers (content nodes):** 5–7 lobes down the page — "what sustains," "the slow loop," "tending," "the field notes," "what you carry back." Each is a blob with its own internal micro-layout (text hugging an inner curve, an illustration nested in a sub-vesicle). Width varies 55–80vw, alternating anchor sides. - **Capillaries:** thin secondary tubes branch off main chambers toward small annotation bubbles in the margins — like alveoli. These hold pull-quotes and tiny field-note fragments. - **Sediment (footer):** the river settles into a wide flat pool of darker honey at the very bottom — the only place horizontality is allowed, like silt settling. No sidebar, no top nav bar. Navigation is a **floating soft pill** bottom-center that, on hover, sprouts 4–5 small satellite blobs (the section anchors) on elastic tethers. The whole composition reads as **immersive-scroll** through a single continuous body. ## Typography and Palette **Type stack (Google Fonts only, confirmed available):** - **Display & Headings:** `Fraunces` (variable — use the "soft" optical axis, weights 300–600, italics on). At 88–120px for the hero word, 40–52px for chamber titles. Generous negative letter-spacing (-0.02em) on the big sizes; lean on its wonky, almost-melting serifs to echo the blob forms. Slight `font-optical-sizing: auto`. - **Body & Editorial:** `Newsreader` (weights 400, 400 italic, 500) — warm low-contrast serif for the caretaker prose; 19–22px, line-height 1.75, measure ~58ch hugging curved edges. - **Field notes / annotations / UI labels:** `Spline Sans Mono` (weights 400, 500) at 13–14px, letter-spacing +0.06em, uppercase for the tiniest labels — the only "instrument" voice, like a quiet readout from soil sensors. **Palette — "honeyed humus / bioluminescent loam":** - `#1C1308` — deepest soil (background base, near-black warm brown) - `#2E2110` — buried layer (secondary background, chamber undersides) - `#7A4E1E` — wet bark (mid shadow, tube cores) - `#C8893C` — amber sap (primary warm accent, chamber fills/glows) - `#E8B96A` — honey light (text-on-dark for prose, soft highlights) - `#F4E6C8` — bloom cream (headings, the brightest membrane edges) - `#5C7A4A` — moss spark (the single restrained green — only used in glints, pulse highlights along tubes, never as a flat fill) - `#9CC78A` — pale chlorophyll (rare secondary green glint, hover states on satellite blobs) Gradients are radial and soft (vesicle interiors lit from one side, `radial-gradient(at 35% 30%, #C8893C, #2E2110)`), never linear stripes. Grain overlay at ~5% opacity over everything for organic tooth. ## Imagery and Motifs **Imagery is hand-drawn / generative organic line work + soft SVG matter — no photography, no 3D chrome renders, no neon.** - **The blob membranes themselves** are the primary imagery: layered SVG with subtle `feTurbulence` displacement on edges so outlines shimmer faintly like a cell wall under a microscope. - **Root-thread filigree:** hairline (0.6–1px) ink-style SVG drawings of mycelial networks, rhizome forks, capillary trees — overlaid faintly in chamber backgrounds at 8–15% opacity, in `#7A4E1E`. - **Nutrient motes:** tiny floating particles (6–14px soft-blurred dots in amber/moss) drifting upward slowly inside chambers — a `requestAnimationFrame` particle field, density low, never busy. - **The pulse:** a recurring gradient bead that travels along every flow-tube on a slow loop — the visual "heartbeat" of the site. Color shifts amber→moss→amber as it passes a chamber, as if metabolizing. - **Field-note glyphs:** small hand-drawn marks in the mono-font margins — a tilde for "flow," a spiral for "loop," a seed-shape for "store," a pair of curved brackets for "tend." Used as section bullets. - **Inner vesicles:** illustrations live nested inside smaller blobs *within* chambers — a drawing of cupped hands, a slow-dripping root, a coiled seed — always cropped by an organic mask, never a rectangle. Decorative pattern: **no grid lines, no geometric shapes ever.** The only repeating texture is the faint mycelial filigree and the grain. ## Prompts for Implementation **Macro narrative direction** — sustaining.quest is a **scroll-through-an-organism**, not a landing page. Build it as one continuous full-bleed body the reader enters at the "mouth" and travels through to the "sediment." NEVER include: pricing tiers, feature comparison grids, testimonial walls, statistic counters ("10,000 quests sustained!"), rectangular signup CTAs, "trusted by" logo strips, dashboard panels. If a call to action is genuinely needed, let it be a single soft phrase that lives *inside* the final pool — a line of italic Newsreader the reader can tap, that gently inflates a blob to reveal a one-field form. Conversion is a whisper, never a banner. **HTML/CSS:** - Compose chambers as nested `
`s with `clip-path` or generous asymmetric `border-radius`; flow-tubes as absolutely-positioned SVG ``s threading between them. - Use CSS `@keyframes` to morph hero blob border-radius across 4–5 keyframe states on a 10–14s `ease-in-out infinite alternate` loop; respect `prefers-reduced-motion` by freezing on the calmest state. - Background: layered radial gradients + a fixed faint mycelial SVG + a grain `::after` overlay (`mix-blend-mode: overlay`, ~5%). - Type: Fraunces variable for display with optical sizing; text columns may follow curved edges via `shape-outside` on floated blob pseudo-elements. **JS / motion (lean toward storytelling, away from "interactive marketing"):** - **The pulse engine:** a single rAF loop animating gradient beads along every tube path (`getPointAtLength`), color-lerping amber↔moss as they pass chamber midpoints — this is the site's living signature. - **Scroll-as-metabolism:** as the reader scrolls into each chamber, it gently *inflates* (scale 0.96→1, slight border-radius shift) and its inner filigree fades up — `IntersectionObserver`, eased, no harsh snap. - **Cursor-as-touch:** the nearest blob edge bulges very subtly toward the cursor (small SVG path deformation or a `radial-gradient` highlight following the pointer) — like pressing a fingertip into soft tissue. Keep it gentle, ~6–10px max deflection. - **Nutrient motes:** low-density upward particle drift inside chambers, paused off-screen. - **The nav pill:** elastic spring (stiffness low) when satellite anchor-blobs sprout on hover; clicking one eases the page to that chamber while the pulse momentarily quickens. - Everything eased, slow, breathing — nothing in this site moves at a "snappy app" speed. Default transition ~600–900ms `cubic-bezier(.22,1,.36,1)`. ## Uniqueness Notes **Differentiators against the corpus (604 designs analyzed):** 1. **True blobitecture at 3% representation** — and most of those few use it as a decorative blob *behind* an otherwise rectangular card layout. This site makes the blob the *structural skeleton*: there are no cards, no grid, no straight section edges anywhere. Layout = anatomy. 2. **Organic-flow layout (6%) + immersive-scroll (15%) with zero card-grid** — directly rejects the corpus defaults (card-grid 92%, full-bleed-rect, centered 80%). The page is a single connected body with visible "circulation," not stacked blocks. 3. **"Sustainability" theme rendered as speculative biology, not eco-corporate** — no leaf icons, no green flat fills, no carbon stat counters. The single green (`#5C7A4A`) appears only as a moving glint. Warm honeyed humus palette where 98% of the corpus is "warm" but almost none is *subterranean* warm. 4. **The pulse engine** — a continuous nutrient-bead animation along SVG tubes that color-metabolizes per chamber is a bespoke motion signature unlike the parallax (89%) / cursor-follow (89%) / spring (83%) staples; it's used here as ambient life, not interaction feedback. 5. **Fraunces "soft" optical axis as melting-serif display** pairs deliberately with the organic forms — corpus typography is 94% mono / 44% humanist; a wonky variable serif as the *display* voice is rare, and it's chosen for formal rhyme with the blobs. **Chosen seed/style:** `blobitecture fluid layout` (from seeds.json) — fused with grounded-earthy + dreamy-ethereal tone. **Avoided patterns from frequency analysis:** hand-drawn-as-aesthetic (94%), glassmorphism (84%), card-grid (92%), full-bleed-rect, centered (80%), photography imagery (98%), dashboard, bento-box, stat-grids, CTA-heavy layouts, mono-as-primary-typography. Parallax / tilt-3d / typewriter effects deliberately omitted in favor of slow organic morphing.