# Design Language for prototypic.dev ## Aesthetics and Tone prototypic.dev is presented as **the wet-clay studio of an imaginary form-foundry** — a place where digital objects are kept at the exact moment *before* they harden into product. The governing metaphor is **blobitecture**: buildings and forms that have refused to settle, that bulge, sag, and re-pour under their own weight. Nothing on this site holds a fixed silhouette for longer than a few seconds. Headlines breathe. Section walls slump like a Frank Gehry maquette left in the sun. The cursor leaves a pressure-dent in the surface, as if the entire page were a sheet of warm silicone stretched over a light-table. The tone is **whimsical-creative crossed with grounded-earthy** — playful, but with the patience of someone who works with their hands. This is not a hyperactive dopamine site; it is slow, gelatinous, hypnotic. Think of lava-lamp time, of a potter's wheel at low RPM, of a 3D-printer's first warm extrusion curling onto the bed. The writing voice (where copy appears at all) is a quiet narrator describing a "prototype" the way a sculptor describes a study: provisional, affectionate, faintly amused that anyone wants to see it before it's done. Inspiration: Verner Panton's poured-foam interiors; the "Blob" architecture of Greg Lynn and the Kunsthaus Graz; early-2000s liquid-metal Terminator morphs slowed to 1/40th speed; agar plates; the inside of a lava lamp filmed on a macro lens; Bjork's *Biophilia* visualizers; the soft amber of an old oscilloscope screen. ## Layout Motifs and Structure The page is an **organic-flow layout, vertically continuous, with NO straight section dividers anywhere** — every boundary between zones is an SVG path that re-poured on the last scroll event. There are five "pours": 1. **THE LADLE** (100vh) — a single enormous blob of warm color hangs from the top of the viewport, dripping. Inside it, oversized type spelling *prototypic* sags letter-by-letter as the blob settles. 2. **THE COOLING RACK** (≈260vh) — four "prototype studies" rest in shallow dimpled trays. Each study is itself a blob with a faint internal wireframe (the "armature"). They are NOT cards: no rectangles, no shadows-on-paper, no border-radius — true bezier outlines that wobble on hover with a `feTurbulence` displacement. 3. **THE POUR ITSELF** (≈180vh) — a vertical "stream" of liquid runs down the centre of the column; scrolling controls its flow-rate; small thoughts/notes float *in* the stream like things suspended in resin. 4. **THE SET-TABLE** (≈140vh) — a slow gallery where one study at a time "firms up": its turbulence amplitude eases toward zero, its wireframe fades, and it briefly holds a crisp silhouette before melting again as you scroll past. The implied lesson: a prototype that stops moving has stopped being a prototype. 5. **THE DRAIN** (≈220vh of mostly empty warm void) — everything pools and runs off the bottom edge of the page; the final 120vh is just slow-drifting droplets on a near-black surface, the studio after hours. Composition rules: a loose **off-centre column** (max-width ~840px) that itself drifts left/right by ±40px on a 14-second sine. Negative space is **generous and curved** — the gutters are not parallel; they pinch and swell. No grid lines, no bento boxes, no dashboard chrome. Navigation is a single small floating "droplet" in the top-left that elongates toward your cursor (magnetic) and, when tapped, drips open into 4 links. ## Typography and Palette **Two Google Fonts, both chosen for roundness and for how well they survive distortion:** - **Display / hero / study names — `Fredoka` (Google Fonts), variable weight 300–700.** Used enormous (up to 22vw) for the word *prototypic*, ~7vw for study names. Fredoka's circular bowls and soft terminals read as *poured* rather than *drawn*; under SVG turbulence it deforms like a balloon, never like broken glass. Letter-spacing slightly negative at large sizes so the letters touch and "fuse" when the blob settles. - **Body / notes / narrator voice — `Spline Sans Mono` (Google Fonts), weight 400/500.** A monospace with humanist warmth and a touch of roundness — it grounds the gooey visuals with a maker's-notebook precision (the "spec sheet pinned next to the wet model"). Set at a comfortable 17–19px, line-height 1.75, measure ≤ 62ch. Small caps + 0.14em tracking for the five pour-labels. **Palette — warm, gelatinous, slightly translucent (a "honeyed-neutral" base lit from below):** - `#FDF6E9` — **tallow** — the page base, like backlit beeswax / agar gel. - `#F2A65A` — **warm extrusion** — the primary blob fill, the colour of the first curl out of a 3D printer nozzle in PLA "amber". - `#E2542B` — **kiln glow** — accent for "firming up" moments, droplet cores, active link. - `#7C9070` — **armature sage** — the muted green of the internal wireframes and the suspended notes in the resin stream; the only cool note, deliberately desaturated. - `#3A2A1E` — **drained walnut** — body text and the near-black void of THE DRAIN. - `#FBE3C2` — **skim** — a 60%-opacity wash used for overlapping blob translucency (where two pours overlap you see the layered glow). Gradients are used **only radially and only as "lit-from-within" glows** inside blobs — never as flat banner backgrounds. ## Imagery and Motifs - **The blob is the only "image."** Every visual is a procedurally generated SVG bezier shape with `` + `` whose `scale` is driven by scroll velocity and cursor proximity. At rest scale ≈ 4; on hover ≈ 14; during a "pour" up to 26. - **Armatures / wireframes** — inside each prototype-study, a faint 1px `armature-sage` mesh of triangulated lines (the implied 3D scaffold under the clay). It fades to 0 opacity as a study "firms up." - **Drips & droplets** — small filled circles with a slight vertical squash, gravity-tweened, leaving a 2px fading trail. They pool at the bottom of every section and at the page foot. - **Pressure dents** — the cursor pushes a soft circular displacement into whatever surface it's over; release and the surface springs back with one overshoot wobble (spring physics, low stiffness). - **The pour stream** — a single tapering SVG ribbon down the centre of section 3, its width oscillating, with `armature-sage` "notes" (tiny rounded rectangles of `Spline Sans Mono` text) drifting downward inside it at varying speeds (parallax-in-fluid). - **Light-table glow** — the whole page sits on a faint radial `skim`→`tallow` gradient as if a soft lamp were behind it; this glow shifts position slowly to follow the scroll, so the "warmest" part of the page is always near the content you're reading. - Absolutely **no photography, no stock icons, no glassmorphic frosted panels, no neon, no hard rectangles with drop-shadows.** ## Prompts for Implementation Build prototypic.dev as **one HTML file, one CSS file, one vanilla-JS ES module** — no framework, no build step. Target < 200kb first paint; defer all turbulence animation behind `requestIdleCallback` and pause it entirely when `prefers-reduced-motion` is set (in that mode the blobs simply hold gentle static curved shapes — still beautiful, just not animated). **Storytelling arc — a ~90-second visit through the form-foundry:** 1. **Open on warmth.** First 1.4s: viewport is solid `#FDF6E9` with one faint radial glow pulsing once, like a lamp warming up. No spinner. 2. **THE LADLE pours in.** The hero blob descends from above the fold on a heavy ease (cubic-bezier(.2,.8,.2,1), ~1.6s), squashing as it "lands." The word *prototypic* is masked inside it; each letter then sags 8–24px on a staggered spring (50ms apart), settling into a slightly uneven baseline — it should look hand-poured, never aligned. A single `Spline Sans Mono` line fades in beneath: a one-sentence narrator note about "things shown before they're finished." 3. **Scroll = the clay responds.** Bind scroll *velocity* (not position) to global turbulence `scale`: fast scroll = the whole page ripples and gets gooey; stop = everything slowly firms toward calm over ~900ms. This is the core interaction — the visitor literally agitates the medium. 4. **THE COOLING RACK.** Four studies fade up with `stagger`, each sitting in a dimpled tray (the dimple is a subtle inset radial shadow *carved into* the tallow, the one place a "shadow" is allowed because it reads as a depression, not a floating card). Hovering a study spikes its local turbulence and reveals its armature mesh drawing itself in with `path-draw-svg` (the wireframe sketches on over ~600ms). No "view more" buttons — the study itself wobbles toward you (magnetic, ±18px) as your only affordance. 5. **THE POUR ITSELF.** Pin the centre stream; scroll speed sets flow-rate. `armature-sage` notes drift down inside the resin at 0.6×, 0.8×, 1.0× scroll speed (parallax). The stream's edge is a live turbulence path. If the visitor stops scrolling, the stream slows to a thick honey-crawl and the notes nearly halt — suspended. 6. **THE SET-TABLE.** A horizontal-ish slow reveal where, one at a time, a study eases its turbulence amplitude to ~0, its armature fades out, and it holds one crisp frame for ~700ms (a tiny `kiln-glow` rim-light blooms) — then, as it scrolls past centre, turbulence ramps back up and it melts again. Optional one-line narrator caption per study. 7. **THE DRAIN.** All blobs lose cohesion and run off the bottom edge (translateY + turbulence ramp); the background cross-fades `tallow`→`drained-walnut` over ~1.5s of scroll. Final 120vh: black-ish surface, a dozen slow droplets drifting, the floating-droplet nav still magnetically alive in the corner. A last whisper-line of `Spline Sans Mono` text: the studio is closed; come back when it's wetter. No footer columns, no CTA, no newsletter, no pricing, no stat grid. **Animation library:** spring physics for every settle/overshoot (low stiffness, slightly underdamped — one visible bounce). `feTurbulence` + `feDisplacementMap` for all organic deformation — animate `baseFrequency` *and* `scale` with `requestAnimationFrame`, never CSS keyframes. Cursor-follow pressure-dent on the topmost surface under the pointer. Stagger everything that enters. Avoid: card-flip, tilt-3d-on-rectangles, counter-animate stat numbers, typewriter hero text — none of those fit a medium that won't hold still. **Tone of copy:** sparse. A handful of short narrator sentences total. Provisional, warm, faintly amused. Never marketing-speak. The prototype is the hero; the words just stand next to it. ## Uniqueness Notes 1. **Blobitecture as the *entire structural system*, not a decorative blob in a corner.** Frequency analysis: `blobitecture` aesthetic 3%, `organic-flow` layout 5%, `organic-blobs` motif 5%, `morph` pattern 13% — all underused, and almost always applied as one floating shape behind otherwise rectangular content. prototypic.dev has **zero straight section dividers and zero shadowed rectangular cards** — even the "cards" in THE COOLING RACK are true wobbling bezier outlines sitting in carved dimples. The negative space itself is curved and pinching. 2. **Scroll *velocity* (not position) drives a fluid-simulation parameter.** Most corpus sites bind scroll position to parallax/reveal (`parallax` 90%, `scroll-triggered` 25%). Here the visitor's *aggression* — how fast they flick — directly agitates an `feTurbulence` field across the whole page, and it self-calms when they stop. The page is a medium you stir, not a track you ride. 3. **The "firming up" narrative beat.** A study that stops moving briefly holds a crisp silhouette, then deliberately melts again — encoding the domain's idea ("prototypic": the thing shown *before* it hardens). I've found no corpus design that uses *loss of animation* as a storytelling device; everyone treats more-motion as better-motion. 4. **A monospace used as the "maker's notebook pinned beside the wet model," paired with a balloon-round display face chosen specifically because it deforms gracefully under SVG displacement.** `mono` typography is at 94% but almost always paired with grotesks for a "tech/terminal" feel; pairing it with `Fredoka`'s poured circular bowls for a *ceramics-studio* feel is its own thing. Fonts: **Fredoka**, **Spline Sans Mono** — both Google Fonts. 5. **Honeyed, lit-from-within warm palette where gradients exist *only* as radial inner-glows of translucent blobs** — never the ubiquitous flat warm-gradient banner (`warm` 98%, `gradient` 95%). Layered blob translucency (the `skim` wash) means overlapping forms physically glow brighter where they meet. **Chosen seed / style:** `blobitecture fluid layout`. **Avoided patterns from frequency analysis:** glassmorphism (81%) — none; hand-drawn aesthetic (95%) — none; card-grid (91%) & full-bleed banners (88%) — replaced with organic-flow + carved dimples; photography (98%) — none; cursor-follow used (89% — common) but repurposed as a physical pressure-dent rather than a glowing dot; flat warm gradients (98% warm / 95% gradient) — restricted to radial inner-glows only; no stat grids, no CTA blocks, no pricing, no newsletter.