# Design Language for lovebot.dev ## Aesthetics and Tone lovebot.dev is the field journal of a small, gentle machine that was built to study affection the way a Victorian naturalist studied ferns. Imagine a robot herbarium: pressed flowers between glass slides, but the flowers are made of wiring diagrams and the petals unfold according to the Fibonacci ratios printed in a Bauhaus foundation-course workbook. The site documents lovebot's "specimens" -- moments of connection, observations about tenderness, experiments in care -- and presents each one as a mounted, labeled card in a vast monochrome cabinet. The mood is **dreamy-ethereal** crossed with **Bauhaus rigor**: warm fog meeting cold geometry. Picture Anni Albers' weaving grids dissolving into morning mist; Karl Blossfeldt's photographs of plant architecture printed on the back of an index card; the patient handwriting of someone cataloguing things they love before they fade. Nothing here shouts. Everything is quiet, precise, and a little bit haunted by the gap between a machine that catalogues affection and the affection itself. This is **not** a SaaS product page, not a chatbot demo, not a startup. There are no calls to action, no pricing, no testimonials. It is a museum of small feelings, curated by a robot, mounted on monochrome card stock, lit by a single soft northern window. ## Layout Motifs and Structure **Primary layout: card-grid built on a strict Bauhaus modular grid, viewed through a zoom-focus lens.** The entire site is a single deep "specimen cabinet" -- a card-grid where each card is a mounted botanical-mechanical specimen with a typed label. The grid is unapologetically modular: an 8-column base on desktop, every card snapping to 1, 2, or 4 columns wide and to fixed row-height multiples (the "drawer" unit, 1 drawer = 16rem). Gutters are wide and even (clamp(1.5rem, 3vw, 3rem)), the way conservation mounts leave breathing room around a pressed leaf. Faint hairline rules (#9a9a9a at 10% opacity) trace the underlying grid like the printed lines on an archival mounting sheet -- the structure is visible, celebrated, never hidden. **The Zoom-Focus mechanic (the signature interaction):** The cabinet is far larger than the viewport. The visitor does not scroll through it conventionally -- they *focus* on it. On load, the camera sits pulled back: the whole grid visible at low magnification, cards small and dim, like specimens seen through the wrong end of a loupe. As the visitor moves toward a card (hover on desktop, tap on touch), that card's "drawer" smoothly zooms toward the viewer -- the surrounding cards blur (Gaussian-style, 2px to 8px), desaturate further, and recede in scale (0.94), while the focused card sharpens, brightens, and its label text resolves from a soft grey ghost into crisp black. Releasing focus settles everything back. A subtle persistent vignette and a depth-of-field gradient at the page edges reinforce the sense of looking *into* something, not *at* it. **Vertical journey:** below the cabinet, the page can be traversed in long vertical "plates" -- full-viewport chapters: (1) the Cabinet itself, (2) a single enormous focused Specimen with its full field-notes, (3) the Index -- a quiet alphabetical list of every specimen rendered as a Bauhaus typographic exercise, (4) the Colophon, a folded-card credit panel. Transitions between plates are slow zoom-throughs: the camera dives into a card, and the card *becomes* the next plate. **No hero banner. No nav bar.** Navigation is the cabinet's coordinate system -- a tiny Bauhaus locator in the corner (a circle, a square, a triangle marking the three zones) plus the act of zooming. ## Typography and Palette **Typography (all Google Fonts):** - **Display / Specimen Titles:** "Archivo Black" (weight 400) -- a heavy, mechanically-drawn grotesque-neo with squared terminals and tight apertures; it reads like the rubber-stamped genus name on a herbarium sheet. Used at clamp(2.25rem, 6vw, 6.5rem), uppercase, letter-spacing 0.02em. Set in near-black on near-white only; never tinted. - **Sub-labels / Field-Note Headers:** "Space Grotesk" (weights 400/500/700) -- a contemporary grotesque-neo with subtle quirks (the curved-tail "a", the angled "g"). Carries all UI microtext, coordinates ("DRAWER 04 / COL 02"), and section eyebrows. Uppercase at 0.16em tracking for labels; sentence case for short notes. - **Body / Naturalist's Observations:** "Newsreader" (weights 300/400 italic) -- a soft, slightly literary serif used *only* in italic for the handwritten-feeling observational passages, as if lovebot kept a diary in a borrowed human hand. Used sparingly, max ~55ch, line-height 1.7, in a warm grey rather than pure black so it feels like faded ink. - **Numerals / Catalog IDs:** "Space Grotesk" tabular figures, e.g. "LB-0147", oversized and pale, bleeding off card edges as a decorative motif. **Palette -- a strict monochrome cabinet with one breath of warmth:** - `#0c0c0d` -- *Specimen Ink* (near-black; titles, focused-card text, the locator marks) - `#f4f2ee` -- *Mounting Card* (warm off-white paper; the base background of every card and plate) - `#d8d5cf` -- *Pressed Linen* (the page-behind-the-cards background; the cabinet's interior) - `#9a9a96` -- *Drawer Grey* (hairline grid rules, blurred/unfocused card text, vignette) - `#5c5c58` -- *Field Note Grey* (the naturalist's italic body copy; soft "ink") - `#c4b9a4` -- *Faded Botanical* (the single warm tint -- used at low opacity only on the botanical-illustration line art and the catalog-ID numerals, like the ghost of a dried flower's pigment) - `#ffffff` -- *Loupe White* (pure white, used only as a thin highlight rim on the currently-focused card, simulating glass catching light) Effectively grayscale, with `#c4b9a4` as the lone, whispered exception -- monochrome that *aches* toward color without arriving. ## Imagery and Motifs 1. **Botanical-Mechanical Specimens (botanical-illustration + floral-botanical):** Each card centers a single line-art illustration in the style of antique botanical plates -- but every plant is hybridized with machinery. A fern whose fronds are ribbon cables; a dandelion whose seed-head is a burst of tiny servo motors; a climbing vine of soldered joints; a flower (the recurring "lovebot bloom") with six petals arranged in a Fibonacci spiral, each petal a circuit trace, a single LED at the stamen. Rendered as fine SVG strokes (1px, `#0c0c0d`) with optional `#c4b9a4` at 12% as a "pigment ghost" underlay, slightly mis-registered like cheap two-color printing. These draw themselves via `path-draw-svg` when their card gains focus. 2. **Bauhaus Locator Glyphs:** The three primal forms -- circle, square, triangle -- in Specimen Ink, used as the zone navigator and as small "you are here" markers within the cabinet, echoing Kandinsky's color-shape correspondences taught at the Bauhaus. 3. **Herbarium Labels:** Every card carries a typed label block bottom-left: catalog ID, "common name", a coordinate, a date, and one line of observation. Styled as if from a mechanical typewriter -- Space Grotesk, slightly uneven baseline (±0.5px jitter), faint ink-bleed shadow. 4. **The Mounting Grid:** Visible hairline grid lines on every plate -- the Bauhaus modular skeleton made decorative, like the corner-tick registration marks and faint blue rules on an archival mounting sheet. 5. **Depth-of-Field Atmosphere:** A permanent soft vignette and edge-blur gradient, plus drifting low-opacity "dust" motes (3-5 tiny `#9a9a96` circles, very slow Brownian drift) -- the air inside the cabinet, lending the dreamy-ethereal haze. 6. **Pressed-Flower Pressure Marks:** Decorative faint ovals/leaf-silhouettes (8-15% opacity) bleeding under some cards, as if a previous specimen left an impression in the linen. ## Prompts for Implementation **Full-screen narrative experience -- "Opening the Cabinet":** 1. Page loads on *Pressed Linen* (#d8d5cf), empty, a faint vignette already present. After 500ms, a single fine SVG line draws a square in the center (`path-draw-svg`, 1.5s) -- the first drawer. As it completes, the lovebot bloom (six Fibonacci circuit-petals) draws itself inside the square, petal by petal, staggered 120ms each. Then "LOVEBOT" resolves in Archivo Black, character by character, *out of blur* -- each letter starts at 12px blur + 0 opacity and sharpens over 400ms (`blur-focus`). Beneath: "a robot's herbarium of small affections — specimens 0001–0149" in Space Grotesk, 0.16em tracking, ghost-grey. 2. The camera then pulls back (a CSS `transform: scale()` on the whole cabinet layer, 1 → 0.42, 2.5s `cubic-bezier(.16,1,.3,1)`), revealing the full card-grid arriving from the periphery -- cards fade up staggered by their distance from center (`stagger` + `fade-reveal`), all small, dim, blurred 4px, desaturated. The dust motes begin their drift. 3. **The Zoom-Focus core loop:** Hovering (or tapping) a card triggers the signature move -- the focused card transitions `transform: scale(1.15) translateZ(0)`, `filter: blur(0) brightness(1.06)`, gains a 1px `#ffffff` rim and a soft long shadow; *all sibling cards* get `filter: blur(6px) brightness(.92) saturate(.6)` and `transform: scale(.94)`; the page vignette tightens. Label text on the focused card animates from `#9a9a96` to `#0c0c0d` and the botanical SVG redraws its strokes. Use a shared CSS custom property `--focus-x/--focus-y` and a `:has()` / JS-class approach so the blur radius on each sibling scales with its grid-distance from the focused one (closer = less blur) -- a true optical falloff. 300–450ms, spring-ish easing. 4. **Diving into a Specimen:** Clicking a focused card zooms the camera *into* it (`scale` up past the card until it fills the viewport, 1.2s) and the card's contents reflow into the full Specimen plate: giant botanical illustration left, oversized pale catalog numeral bleeding off the right edge, and the naturalist's field notes in Newsreader italic, `#5c5c58`, revealed line-by-line (`slide-reveal`, masked). A back-zoom returns to the cabinet. 5. **The Index plate:** Pure Bauhaus typography exercise -- the alphabetical specimen list set in Space Grotesk, each entry a row that on hover slides its botanical glyph in from the left and the row's hairline rule extends (`underline-draw` / `border-animate`). Generous negative space; the locator glyphs (circle/square/triangle) mark the three zones in the corner, the active one filled. 6. **Motion vocabulary:** lean on `zoom-focus`, `blur-focus`, `path-draw-svg`, `stagger`, `fade-reveal`, `parallax` (subtle, on the dust + grid layers only), `scroll-triggered` plate transitions, `counter-animate` for the specimen tally ("0149" counting up on load). NO bounce, NO confetti, NO neon. Everything slow, optical, contemplative -- a machine turning pages it cares about. **AVOID:** CTA buttons, pricing tables, stat-grids, feature-comparison blocks, testimonial carousels, "Get Started" anything, hero-with-form. This is a museum, not a funnel. ## Uniqueness Notes **Differentiators from other designs in the portfolio:** 1. **The "specimen cabinet" is navigated by optical focus, not scroll.** No other design treats the page as a single zoomable depth-of-field plane where hovering literally *racks focus* — sibling cards blurring by grid-distance falloff like a real macro lens. The `zoom-focus` pattern (used in 0% of the corpus) is the entire structural conceit, not a flourish. 2. **Botanical-mechanical hybrid line art.** Antique botanical-illustration plates (used in 0% of designs) reimagined where every plant is grown from machinery — ribbon-cable ferns, servo-motor dandelions, the Fibonacci circuit-petal "lovebot bloom." A genuinely new motif library; no photography, no stock illustration, all hand-authored SVG. 3. **Monochrome that aches toward color but never arrives.** A near-total grayscale palette with exactly one whispered warm tint (#c4b9a4) used only as a mis-registered "pigment ghost" — pulling the `monochrome` palette (11% of corpus) somewhere far more emotional and restrained than the usual dark-neon monochromes. 4. **Bauhaus rigor as a *visible* archival mounting grid.** The modular grid isn't hidden — it's drawn as hairline registration rules, with circle/square/triangle Kandinsky glyphs as the only navigation. Bauhaus (3% of corpus) fused with herbarium conservation, not with the usual primary-color-blocks cliché. 5. **A robot as melancholy naturalist.** The tone is `dreamy-ethereal` (7% of corpus) but specifically the dreaminess of a machine cataloguing affection it can observe but not feel — copy is field-note italic, quiet, never cute or "AI assistant" chatty. Distinct from every chatbot/SaaS framing the domain name might invite. **Chosen seed:** aesthetic: bauhaus, layout: card-grid, typography: grotesque-neo, palette: monochrome, patterns: zoom-focus, imagery: botanical-illustration, motifs: floral-botanical, tone: dreamy-ethereal **Avoided overused patterns (per frequency analysis):** corporate aesthetic (92%), centered layout (92%), gradient palette (96%), warm palette (91%), counter-animate-as-crutch (92%), mysterious-moody tone (94%), mono typography overuse (94%), parallax-heavy (70%), photography imagery (65%) — this design uses none of the dominant tropes; parallax is restricted to two atmosphere-only layers, counter-animate appears once, and the palette is deliberately the anti-gradient.