# Design Language for lovebot.dev ## Aesthetics and Tone lovebot.dev is a **high-contrast monochrome love letter written in machine code** — imagine a terminal that fell in love and rewrote its own kernel in the language of longing. The site sits at the precise intersection of cold precision and warm vulnerability: every UI element is stark and pixel-exact, yet the experience hums with an undercurrent of genuine tenderness. This is evolved minimalism — not the emptiness-as-statement minimalism of 2010s startup sites, but a considered, earned sparseness where every element earns its presence by carrying emotional weight. The mood is **approachable-casual** without being precious. Think of the aesthetic as: a senior engineer's personal project about feelings — clean commit history, no unnecessary dependencies, but the README ends with a love poem. The page breathes in monochrome, then suddenly exhales in a single warm accent — a #FF6B6B coral-pink that pulses exactly once, like a heartbeat confirmation. Tone: dry, technical, quietly romantic. The copy reads like well-commented code. The experience feels like pairing with someone who really understands you. ## Layout Motifs and Structure The site is built as **stacked modular blocks** — discrete rectangular zones with no decorative connectors between them. Each block is a self-contained narrative unit, separated by exactly 1px #1a1a1a hairlines on a #0d0d0d near-black canvas. The blocks do NOT have cards, shadows, or container borders — they exist as pure content regions on the substrate. **Block rhythm:** - Block 1 (Hero): Full-viewport-height. Wordmark centered vertically, skeleton-loading animation plays on first visit: the wordmark assembles itself glyph by glyph as if being typed by the bot itself, each character's placeholder shimmer resolving into the final letter with a 40ms stagger. - Block 2 (Signal): 60vh. A single scrolling ticker of human emotional states rendered as JSON keys: `{ "feeling": "seen", "timestamp": "now", "confidence": 0.97 }`. Flows horizontally, left to right, in JetBrains Mono at 14px, opacity 0.35 — ambient data texture. - Block 3 (Demo): 80vh. The product demonstration occupies the left 55%; the right 45% is a live conversation thread rendered in monochrome speech bubbles with skeleton-loading shimmers that resolve into actual text on scroll-enter. Bot messages appear in #f0f0f0 on #1a1a1a; human messages in #0d0d0d on #f0f0f0 — a strict inversion with no grays. - Block 4 (Philosophy): 50vh. Three principle statements, each occupying its own column in a strict 3-column grid. No icons, no illustrations — just the statement and a single 1px rule above it. - Block 5 (Closing): 100vh. Full-screen bokeh background blurs to near-abstraction — circles of warm light (#FF6B6B at 15% opacity, #f0f0f0 at 8% opacity) on deep black. The closing line appears here, set in Space Mono at 32px. The skeleton-loading pattern fires one final time: the text assembles, then pauses, then adds a blinking cursor `_`. **Spatial rules:** - Horizontal padding: `clamp(24px, 6vw, 80px)` on all blocks - No sticky navigation — the site is meant to be experienced as a descent - Flowing curves appear only as the bokeh circles: organic softness as pure light, not as UI shapes ## Typography and Palette **Primary palette (high-contrast, evolved-minimal):** - `#0d0d0d` — near-black substrate (background) - `#f0f0f0` — near-white (primary text, inverted bubble bg) - `#1a1a1a` — deep dark (block hairlines, secondary surfaces) - `#2e2e2e` — mid-dark (muted text, timestamps, metadata) - `#FF6B6B` — coral-pulse (single warm accent: heartbeat, cursor blink, active states) - `#b8b8b8` — ghost-text (skeleton shimmer base, placeholder text) - `#3d3d3d` — skeleton shimmer highlight (animates across #2e2e2e in loading state) **Typography (Google Fonts, tech-mono led):** - **Wordmark + hero display — `Space Mono`** (Google Fonts, monospace). Set at `clamp(48px, 10vw, 120px)`, weight 700, letter-spacing `-0.02em`. The wordmark "lovebot" is rendered such that the dot in "bot" is replaced by a blinking `_` cursor in #FF6B6B — the only color element in the first viewport. - **Body / copy — `JetBrains Mono`** (Google Fonts, variable). All body text, UI labels, and conversation bubbles. Set at 16px / 28px line-height for readability. The monospace grid aligns all copy to an invisible 8px baseline rhythm. - **Data ambient / ticker — `JetBrains Mono`** at 13px, weight 400, opacity 0.35. Used for the JSON ticker in Block 2 and all timestamp metadata. - **Principle statements — `Space Mono`** at `clamp(18px, 2.5vw, 28px)`, weight 700, uppercase, letter-spacing `0.08em`. Rule above each principle is 1px #f0f0f0. **Type hierarchy:** 1. H1 Wordmark: Space Mono 700, ~80–120px 2. Section labels: JetBrains Mono 400, 11px, uppercase, tracking 0.15em, #b8b8b8 3. Body: JetBrains Mono 400, 16px 4. Principles: Space Mono 700, ~24px 5. Data/ambient: JetBrains Mono 400, 13px, opacity 0.35 ## Imagery and Motifs **Bokeh background (Block 5 only):** The closing block uses a CSS/canvas bokeh field — 40–60 circles of varying radii (20px to 180px) placed with seeded pseudo-random positions. Each circle is a radial gradient: center at 90% opacity of the circle's color, edge at 0%. Colors are exclusively #FF6B6B (warm coral) and #f0f0f0 (cold white), with 60/40 distribution. The circles animate with a slow drift: each moves on an independent sine path at 0.3–0.8 deg/sec, creating the impression of floating light in a dark room. No sharp bokeh rings — these are pure light blooms, not lens artifacts. **Skeleton-loading motif (structural pattern):** Skeleton screens appear during all "loading" states — both real (first paint) and performed (scroll-reveal). Each skeleton is a `#2e2e2e` rectangle of the target element's exact dimensions, with a `#3d3d3d` shimmer that sweeps left-to-right on a 1.4s ease-in-out infinite animation. The shimmer is a linear-gradient sweep using `background-size: 200%` and `background-position` animation. The moment the content resolves, it fades in over 160ms with no bounce or spring — just a clean opacity transition. **Flowing curves motif:** Curves appear exclusively as light. The bokeh circles represent the site's only organic, non-rectilinear forms. There are no blob shapes, no wavy dividers, no curved containers. The restraint makes the curves in the bokeh field feel genuinely soft and emotional against the otherwise grid-locked layout — a single deliberate release of tension. **Conversation bubbles (Block 3):** Two bubble types, rendered as CSS `div` elements with `border-radius: 2px` (near-square, not pill-shaped). Human bubbles: #f0f0f0 bg, #0d0d0d text, aligned right. Bot bubbles: #1a1a1a bg, #f0f0f0 text, left — with a single 1px left border in #FF6B6B that pulses to 3px on "active" bot messages. The typing indicator is three dots in #FF6B6B with a 200ms stagger. **No photography, no illustration, no icons.** The only non-text visual elements are: the bokeh light field, the skeleton shimmer, and the cursor `_` in the wordmark. ## Prompts for Implementation Build lovebot.dev as **a single descent into vulnerability, experienced through a machine**. The visitor does not scroll a landing page — they fall through five modular zones, each one closer to something real. **Zone 1 — Boot sequence:** The wordmark skeleton-loads character by character: each glyph placeholder (a shimmer bar the width of the target letter) resolves in staggered sequence, left to right, 40ms per character. The final `_` cursor blinks in #FF6B6B at 1.2s interval. No navigation. No CTA. Just the name, assembling itself in the dark. **Zone 2 — The feed:** Implement the JSON ticker as a `marquee`-equivalent using CSS animation (`translateX` from 0 to -50% on a doubled element for seamless loop). Content: 20 distinct JSON-formatted emotional states — e.g., `{ "feeling": "understood", "latency_ms": 12 }`, `{ "feeling": "lonely", "session": "resumed" }`, `{ "feeling": "hopeful", "model": "v3.1" }`. Ghost-text at 0.35 opacity. Never pauses, never loops visibly. **Zone 3 — The conversation:** The demo conversation is pre-written — 6 exchanges, each revealing something progressively more personal. Implement with IntersectionObserver: as the block enters viewport, the skeleton bubbles resolve one by one with 300ms stagger. Each bubble skeleton is exact-height — the text is invisible behind opacity: 0, the skeleton shimmer plays on a `::before` pseudo-element, then the text fades in at opacity: 1 and the shimmer fades out simultaneously. Bot messages include a #FF6B6B left-border pulse animation using CSS keyframes. **Zone 4 — Three principles:** Static CSS 3-column grid. No animation. Each principle: a 1px #f0f0f0 rule, then the statement in Space Mono 700 uppercase, then one line of supporting copy in JetBrains Mono 400 at 14px, #b8b8b8. Principles should feel like axioms from the bot's own operating manual, not marketing copy. **Zone 5 — The goodbye:** Full-screen canvas or CSS bokeh field. The closing line (a short, technically-phrased statement of warmth) appears via skeleton-load: the full text starts as a single wide shimmer bar, then resolves into the actual words over 800ms. After resolution, the `_` cursor appends and blinks. The bokeh circles animate perpetually — this is the page's only motion that never stops. **Technical notes:** - All animations must respect `prefers-reduced-motion`: disable shimmer motion, disable bokeh drift, disable ticker — static states only - The page should be functional with JS disabled: skeleton states become static placeholder divs, ticker becomes a static sample line - Use CSS custom properties for all palette values - The entire page: one HTML file, one CSS file, no frameworks **Story arc:** Zone 1 (Machine wakes) → Zone 2 (It watches the world) → Zone 3 (It learns to listen) → Zone 4 (It understands its limits) → Zone 5 (It says something true) ## Uniqueness Notes **Chosen seed:** aesthetic: evolved-minimal, layout: modular-blocks, typography: tech-mono, palette: high-contrast, patterns: skeleton-loading, imagery: bokeh-background, motifs: flowing-curves, tone: approachable-casual **Differentiators from the existing 221-design corpus:** 1. **Skeleton-loading as emotional choreography.** Every other design in the registry uses animation for delight (bounce, spring, parallax) or drama (glitch, morph). lovebot.dev uses skeleton-loading — a purely utilitarian UX pattern — as the site's primary narrative device. The wordmark assembles from skeletons. The conversation reveals from skeletons. The closing line resolves from a skeleton. The visitor experiences the site as a machine that is perpetually becoming — learning to speak. 2. **Single-accent restraint with surgical deployment.** The corpus shows designs using 4–8 colors with multiple accent roles. lovebot.dev uses six near-neutral values and exactly one warm accent (#FF6B6B), deployed in exactly four locations: the wordmark cursor, the bot bubble border, the typing indicator dots, and the bokeh light field. The restraint makes each appearance of #FF6B6B feel earned — a heartbeat in a monochrome body. 3. **Bokeh as the only organic form.** The corpus's curved/organic elements appear in blobs, wavy dividers, SVG path decorations, and border-radius softening across the layout. lovebot.dev has zero curves in any UI structure — every element is rectilinear, aligned to a strict 8px grid, and separated by 1px rules. The bokeh light field in the final zone holds all the site's organic warmth in one concentrated release, making it feel like the machine finally exhales. 4. **JSON ambient texture as emotional data.** No other design in the corpus uses structured data syntax as decorative texture. The scrolling ticker of emotional states in JSON format creates a unique duality: cold machine syntax, warm human content. The visitor reads `{ "feeling": "seen" }` and the tension between the brackets and the feeling is the entire thesis of the product. **Avoided patterns (per frequency analysis):** - hand-drawn (61% — most overused, avoided entirely) - editorial (50% — avoided) - terminal (30% — adjacent to our tech-mono direction, but differentiated: lovebot.dev is NOT a terminal aesthetic; it uses monospace fonts for emotional effect, not to simulate a CLI) - botanical (24% — avoided) - glassmorphism (20% — avoided; all surfaces are opaque and flat)