# Design Language for lovable.dev ## Aesthetics and Tone lovable.dev is a **visual-first AI platform landing page** dressed in the aesthetic language of a high-altitude aurora-sky executive conference — imagine a Copenhagen design agency merged with a playful Northern Lights installation: everything gleams with translucent frost, sweeps of polar aurora (`#4ADE80` → `#22D3EE` → `#818CF8` → `#C084FC`), and the deliberate corporate confidence of a brand that knows it is rewriting software development. The tone is **playful-yet-boardroom-ready**: witty in copy, flamboyant in color, immaculate in spacing. The page should feel like a Figma prototype someone built during the Northern Lights — not a sales funnel, but a living showcase of generative delight. The primary emotion is **optimistic electricity** — the moment before a product demo lands perfectly. Background is near-black polar night (`#0A0A1A`) with glass-pane card surfaces (`rgba(255,255,255,0.06)`) that reveal swirling aurora layered behind them. Foreground type reads on that dark field with confident clarity. Aurora streaks are the site's nervous system: they pulse, breathe, and respond to scroll — they are not decorative, they are structural. **Mood references:** MoMa Design Store meets Vercel meets CERN visualization team at 2 AM. ## Layout Motifs and Structure The page is built as a **hero-dominant single-page narrative** — one full-screen opening act consumes the full viewport with zero secondary content competing for attention. Below it, content flows in distinct layered panels rather than a traditional section grid. **Hero (100vh, full-bleed):** A single centered wordmark stack — the lovable.dev logotype in Commissioner at `clamp(72px, 12vw, 160px)` weight 700 — floats above a real-time aurora simulation (canvas WebGL). Below the wordmark, a one-line manifesto in Commissioner 300 at `24px`. A single floating CTA button (`Start Building`) in glass-morphic style sits alone with 48px margin above the fold bottom. No competing elements. No navigation bar visible — it fades in on scroll. The hero is unapologetically vertical and declarative. **Below-the-fold structure (no horizontal nav tabs, no sidebar):** - **Panel 2 — The Builder Experience:** Full-width widescreen panel, dark background, three horizontally-floating glass cards each demonstrating a build step. Cards hover on a `magnetic` spring physics attachment to the cursor — they lean toward the pointer like iron filings near a magnet. - **Panel 3 — Feature Mosaic:** Asymmetric 2-column layout — left column is a typographic block (Commissioner Bold, oversized label + paragraph), right column is a living water-bubble animation field where feature labels float inside translucent bubbles that drift upward at varying speeds. - **Panel 4 — Immersive Testimonials:** Single testimonial at a time, full-width, quote in Commissioner Italic at `clamp(28px, 4vw, 52px)`, attribution below in Commissioner 300. Auto-advances with a morphing aurora wipe transition. - **Panel 5 — The Invitation:** Final CTA panel occupies a full viewport-height block. Centered. Single sentence. Single button. Aurora curtain behind it pulses to a heartbeat rhythm. **No sticky navbars in hero. No pricing grids. No feature comparison tables. No stat counters.** Spatial rhythm: generous 120px between panels on desktop, 64px on mobile. Internal padding within panels is always at least `clamp(32px, 6vw, 96px)`. ## Typography and Palette **Typography — Commissioner-led, single family:** - **Wordmark, Hero Display, Section Labels:** [Commissioner](https://fonts.google.com/specimen/Commissioner) variable, `wght 700–800`, `slnt 0`, `FLAR 0–100`, `VOLM 0–100`. Used at large scale — hero at `clamp(72px, 12vw, 160px)`, section labels at `clamp(36px, 5vw, 72px)`. - **Body and Subheadings:** Commissioner `wght 300–400`, `20px/1.7` for body, `28px/1.4` for subheads. - **CTA and Button Labels:** Commissioner `wght 600`, `letter-spacing: 0.08em`, all-caps for primary buttons. - **Code Snippets (accent only):** [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono) `wght 400`, 15px, used sparingly for inline code fragments. Single-family discipline: Commissioner does every job. Its variable axes (`FLAR` flare serifs, `VOLM` volume) are used to create expressive macro-level contrast without introducing a second face. **Palette — Aurora Gradient on Polar Night:** - `--polar-night`: `#0A0A1A` — background base, near-black with blue undertone - `--aurora-green`: `#4ADE80` — primary aurora strand, electric lime-green - `--aurora-cyan`: `#22D3EE` — secondary aurora strand, ice blue - `--aurora-violet`: `#818CF8` — tertiary aurora strand, soft indigo - `--aurora-rose`: `#C084FC` — accent aurora strand, warm violet - `--glass-surface`: `rgba(255,255,255,0.06)` — card fills - `--glass-border`: `rgba(255,255,255,0.12)` — card outlines - `--text-primary`: `#F1F5F9` — near-white body text - `--text-secondary`: `#94A3B8` — muted subtext - `--cta-gradient`: `linear-gradient(135deg, #4ADE80 0%, #22D3EE 50%, #818CF8 100%)` — primary button fill The aurora gradient is applied as a live canvas animation — NOT a static CSS gradient. The stripes shift hue across time (a slow 8-second sine wave per channel). ## Imagery and Motifs **Water Bubbles (primary decorative element):** The feature panel's right column renders 30–50 spherical bubbles in canvas 2D. Each bubble is: a radial gradient from `rgba(130,240,255,0.3)` center to `rgba(130,240,255,0)` at edge, with a small specular highlight crescent at 20%/20% in `rgba(255,255,255,0.6)`. Bubbles drift upward at 0.3–1.2px/frame with slight horizontal sine wobble (amplitude 0.8px, period 180 frames, per-bubble phase offset). When a bubble reaches top-of-container it fades out and re-spawns at the bottom. Bubbles are interactive: cursor proximity within 60px causes subtle radial expansion (scale 1.0 → 1.15 over 300ms) then return. Feature label text is centered inside each bubble using `fillText`, Commissioner 400, `11–14px`, `rgba(255,255,255,0.85)`. **Aurora Lights (background motif, hero and final CTA):** WebGL canvas behind hero renders three aurora bands as layered sine-wave-modulated vertical gradients: each band has a horizontal gaussian spread of ~20% viewport width, drifts laterally at different speeds (0.15, 0.22, 0.31 viewport-widths per 10 seconds), and oscillates vertically (amplitude ±8% viewport height, period 6–11 seconds per band). Bands are additive-blended (`THREE.AdditiveBlending` or canvas `globalCompositeOperation: 'screen'`). Color sequence from bottom to top of each band fades from fully transparent through the aurora color to transparent again. **Glassmorphic Cards:** The three builder-step cards use backdrop-filter blur (12px), `--glass-surface` fill, `--glass-border` border at 1px, and `border-radius: 20px`. Each card has a subtle inner aurora shimmer: a pseudo-element `::before` with a `conic-gradient` rotating at 1.5°/frame through the four aurora colors, clipped to the card shape, at 8% opacity. **No photography. No stock imagery. No icons from icon libraries.** Visual vocabulary is entirely generative — aurora, bubbles, glass, and Commissioner type. ## Prompts for Implementation **Narrative arc for the single-page scroll:** The experience opens mid-aurora — no loading screen, canvas is already painting by the time fonts are ready. The wordmark manifests via a Commissioner `FLAR` axis animation: serifs flare out from 0 to 100 over 800ms on load. Then the manifesto line fades in from below. Then the CTA materializes. The hero section tells the user: _this tool was made with care that extends to the weather_. **Magnetic interaction (the site's primary gesture vocabulary):** Every glass card, every bubble cluster, and the CTA button responds to cursor proximity with spring physics. On desktop: when the cursor is within 120px of a card edge, the card translates toward the cursor at 20% of the displacement vector, with a `spring(stiffness: 180, damping: 24)` restoring force. On touch devices: cards respond to device tilt via `DeviceOrientationEvent` (fallback: no tilt, static cards). **Water bubble panel implementation:** Canvas 2D, 60fps rAF loop. Bubbles are sorted by size (smallest first) to simulate depth. Larger bubbles drift faster. The panel has a vertical gradient mask (`linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%)`) composited via CSS mask-image to create soft edges at top and bottom. Each bubble's label text uses a shadow `rgba(0,0,0,0.4)` for legibility on the translucent surface. **Section reveal strategy:** Use `IntersectionObserver` with `threshold: 0.15`. Panels entering viewport: Commissioner section labels animate via `FLAR` axis `0 → 100` over 600ms. Glass cards stagger-translate from `translateY(40px) opacity(0)` to rest at 80ms intervals. The testimonial panel auto-advances every 7 seconds with a 1.2-second aurora-wipe cross-dissolve. **Avoid:** hero carousels, stat grids (`10M+ developers`, `99.9% uptime`), pricing comparison tables, social proof icon clusters, any sticky navigation in the hero viewport, modal pop-ups, cookie banners dominating the experience. **Bias toward:** full-screen immersion, typographic restraint, motions that are slow enough to feel deliberate (no elements that snap or jerk), aurora as a living breathing organism rather than a decorative stripe. ## Uniqueness Notes 1. **hero-dominant at 1% corpus frequency — claimed aggressively.** The frequency report shows hero-dominant is nearly absent from the corpus (1%). lovable.dev makes the hero-dominant layout its entire structural thesis: no competing chrome, no nav bar in the first viewport, the hero consumes all visual attention. This is the rarest layout choice available and the most justified for an AI product that leads with a visual promise. 2. **commissioner-versatile as a variable-axis instrument, not just a font choice.** Commissioner's `FLAR` (flare serifs) and `VOLM` (volume/weight spread) axes are animated on-scroll and on-load — the wordmark literally transforms its letterform character in real time. No other design in the corpus uses a variable font's non-standard axes as an animation primitive. 3. **Water bubbles as a functional information display, not decoration.** The bubble field in Panel 3 makes each bubble a labeled data node — feature names live inside the spheres. This is not a background texture; it is the content itself delivered through the imagery vocabulary. The corpus shows water-bubbles at 4% and never used as a content-delivery container. 4. **Aurora WebGL as structural nervous system, not a background gradient.** aurora-lights (2% in corpus) and aurora-gradient (3%) are typically static CSS gradients in other designs. lovable.dev implements aurora as a real-time WebGL simulation with per-band drift physics and additive blending — the aurora is part of the motion grammar, not decoration. 5. **Corporate-playful synthesis without irony.** The frequency analysis shows corporate at 16% and playful at 17% but never combined in the same design. lovable.dev occupies that intersection directly: boardroom confidence in spacing and typography, but a Northern Lights aurora as the hero canvas and bubbles as the feature navigation layer. The tone is playful because the product is delightful; corporate because it is serious software infrastructure. Seed: aesthetic: corporate, layout: hero-dominant, typography: commissioner-versatile, palette: aurora-gradient, patterns: magnetic, imagery: water-bubbles, motifs: aurora-lights, tone: playful