# Design Language for lovable.dev ## Aesthetics and Tone lovable.dev is a love letter to the brief, bright moment — roughly 2007 to 2010 — when consumer software still believed it could make life *better*: cleaner, calmer, closer to the natural world. The site is built entirely in the **Frutiger Aero** idiom, the visual dialect of that era: high-gloss aqua surfaces, fat soap-bubble spheres catching window light, lens flares, blades of grass photographed at macro range, and skies so saturated they look freshly squeegeed. But where the original Frutiger Aero was corporate optimism rendered in stock photography, lovable.dev pulls the mood down to earth — a **grounded, earthy** counterweight. The glass is real glass that fogs at the edges; the grass has dew and dirt; the mountains in the distance are not a desktop wallpaper but a place you could actually hike. The result is *aspirational, not synthetic* — the feeling of opening a window on a cool spring morning and realizing the thing you built last night actually works. The emotional register is **warm, hopeful, slightly nostalgic, and unhurried**. This is not a hype landing page screaming "ship faster." It is a quiet hillside at golden hour where a tool sits waiting, glossy and dewy, inviting you to make something you'll genuinely like. The word "lovable" is taken at face value: the experience should be *fond*, almost tender. Think Aqua-era macOS Leopard meets a Patagonia field guide meets the inside of a soap bubble — a place where software and a spring meadow are the same substance. ## Layout Motifs and Structure **Primary layout: magazine-spread with full-bleed editorial panels and layered depth.** The site is composed as a series of full-viewport **two-page spreads**, the way a glossy print magazine falls open in your lap. Each spread has a visible *gutter* — a soft vertical crease of shadow down the center of the screen at scroll-snap stops — and the two halves of every spread are in deliberate, asymmetric editorial dialogue: a huge glossy headline bleeding off the left edge on one side, a single macro photograph of grass-and-dew bleeding off the right; or a tall translucent "pull-quote bubble" floating over a mountain ridge that spans both pages. Structure of the magazine, scroll-snapped spread by spread: 1. **Cover spread** — full-bleed Bliss-blue sky gradient with a single colossal glossy aqua water-droplet floating dead center, the word "lovable" refracted and inverted inside it. Masthead lockup in the top-left corner like a magazine logo. A faint dateline ("Field Notes on Building Things You Like — Issue 01"). 2. **The Spread of First Light** — left page: an oversized display headline about *the morning you finally liked what you built*; right page: a full-bleed macro photo of dew on grass blades, a soft lens flare in the upper corner. 3. **The Spread of the Workbench** — a long horizontal "table" of frosted-glass panels (the closest thing to a feature list, but rendered as objects sitting *on* a wooden-toned workbench surface, photographed slightly from above), each panel a glass tile you can tilt. 4. **The Mountain Spread** — a single panoramic ridge line spanning the full double-page width, layered in 4–5 parallax depth planes (foreground grass → mid hills → ridge → distant peaks → sky), with translucent text panels floating between the planes like clouds. 5. **The Spread of Small Joys** — a magazine-style "gallery" grid of bubble-framed circular vignettes, each a tiny moment (a cursor blinking, a screen lighting up, a hand on a trackpad), arranged with intentional editorial whitespace, not a uniform card grid. 6. **The Back Cover** — return to deep dusk-blue, the droplet now resting on a blade of grass in the lower third, a quiet closing line, a single understated link rendered as a glossy aqua lozenge. **Grid:** an 8-column editorial grid per *page* (16 across the full spread), with generous outer margins and a wide central gutter. Headlines and images are allowed — encouraged — to violate the grid and bleed past the trim edge. Negative space is treated as luxury, not waste. ## Typography and Palette **Typography:** - **Display / Headlines:** **"Fredoka"** (Google Fonts), weight 600–700 — a friendly, optimistically rounded geometric sans whose soft terminals echo bubble and droplet forms. Used enormous: clamp(3rem, 9vw, 7.5rem) for cover and spread headlines. Tight tracking (-0.01em), tight leading (0.95). This is the *display-bold* voice — confident, generous, unmistakably 2008-app-icon-rounded. Set against glossy backgrounds it gets a subtle white-to-transparent highlight overlay on its top third, the way Aqua buttons did. - **Subheads / Decks / Pull-quotes:** **"Nunito"** (Google Fonts), weight 300 italic and 600 — a humanist rounded sans that pairs with Fredoka but reads quieter and more bookish; used for magazine "decks" beneath headlines and for floating pull-quote bubbles. clamp(1.1rem, 2vw, 1.6rem), leading 1.6. - **Body / Field Notes:** **"Source Sans 3"** (Google Fonts), weight 400/600 — a clean, slightly warm humanist sans that holds long-form text legibly over light glassy panels. 17–18px, leading 1.75, measure ~62ch. - **Captions / Datelines / Masthead micro-type:** **"Source Sans 3"** at weight 600, uppercase, letter-spacing 0.18em, ~11px — the small all-caps "magazine furniture" (issue numbers, page folios, photo credits). **Palette** (Frutiger Aero core, earthed): - `#5BC8E8` — **Aqua Glass** — the signature glossy cyan; bubbles, lozenges, the droplet, button gloss. - `#0E7AA8` — **Deep Lagoon** — the dark cyan used for the *underside* of glass and droplets, and for headline shadows on light spreads. - `#7FB539` — **Spring Blade** — the dewy grass green; macro photo grading and accent strokes. - `#3E5C1F` — **Forest Floor** — the grounded, earthy dark green; deep foreground shadow, the workbench tone shifted cool. - `#EAF6FA` — **Morning Haze** — the near-white sky-fog used as the dominant page background on light spreads and the glass panel fill (at ~70% opacity over imagery). - `#0A2A38` — **Dusk Ridge** — the deep blue-black of the cover and back cover, the night side of the mountains. - `#F2C14E` — **Lens Flare Gold** — the warm spark; reserved strictly for lens-flare highlights, the sun's edge on a ridge, and the single most important interactive accent. Gradients: skies run **Aqua Glass → Morning Haze** (vertical, top to horizon); the cover runs **Dusk Ridge → Deep Lagoon → Aqua Glass** (deep blue night lifting into bright day). High-contrast pairings — Dusk Ridge headlines on Morning Haze, Morning Haze headlines on Dusk Ridge — anchor the *high-contrast* requirement. ## Imagery and Motifs - **The Water Droplet** — the site's mascot-object. A single photoreal-glossy aqua sphere with a bright window-shaped highlight, a faint refracted upside-down landscape inside it, and a soft contact shadow. It recurs at every scale: colossal on the cover, resting on a grass blade on the back cover, tiny as bullet markers in the workbench spread. - **Macro Grass & Dew** — full-bleed photographic-feel imagery (rendered via layered CSS gradients + SVG noise + a few real-feeling textures) of grass blades shot inches away, beads of dew clinging on, the background melting into bokeh. This is the *earthy* tether keeping the gloss honest. - **The Mountain Ridge** — a layered SVG silhouette panorama: rolling foreground hills, a serrated mid-ground, a hazy distant peak chain, atmospheric perspective lightening each plane toward Morning Haze. Used full-spread-width, parallaxed. - **Soap-Bubble Frames** — circular elements get a thin iridescent rim (a faint conic-gradient sheen cycling cyan→pink→green→cyan at low opacity) — the oil-slick sheen of a real bubble. Used for the "Small Joys" gallery vignettes and the cursor. - **Aqua Gloss Surfaces** — every "object" (buttons, glass tiles, the masthead plate) gets the full Aqua treatment: a tall white highlight on the top half, a faint reflection on the bottom edge, a soft inner glow, a 12–20px corner radius, and a delicate 1px Morning-Haze rim. Pillow-soft, never flat. - **Lens Flares** — sparse, deliberate: a six-spoke star plus a chain of faded translucent discs, placed where the sun would be on a ridge or in the upper corner of a sky spread. Animated to drift slightly with scroll. - **Magazine Furniture** — folio numbers, an "Issue 01" dateline, a thin masthead rule, faint registration-mark crops at the corners of full-bleed photos. These keep the print-spread metaphor legible. ## Prompts for Implementation - Build the page as a **vertical scroll of full-viewport spreads** with `scroll-snap-type: y mandatory`; each `
` is `100vh`, scroll-snap-aligned, and carries a `--spread-index` custom property used by the parallax layers. - **Crease/gutter:** absolutely-position a thin vertical element down the screen center per spread — a `linear-gradient` from transparent → `rgba(10,42,56,0.10)` → transparent, ~40px wide, with `mix-blend-mode: multiply`. It's the magazine fold. - **Glossy Aqua surfaces (the core CSS recipe):** layer `background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.05) 48%, rgba(14,122,168,0.18) 100%)` over the base color; add `box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -10px 24px rgba(14,122,168,0.25), 0 18px 40px rgba(10,42,56,0.18); border-radius: 18px; border: 1px solid rgba(234,246,250,0.6)`. A `::before` pseudo-element holds a tall white highlight blob with `filter: blur(8px)` clipped to the top half. Reuse this on the masthead, the bubble lozenge link, and workbench tiles. - **The droplet:** a `
` with `border-radius: 50%`, a `radial-gradient` (off-center bright white highlight → aqua → deep lagoon at the rim), an inner CSS-only "refracted landscape" (a small flipped gradient of green-over-blue, scaled and `border-radius`-clipped, low opacity inside), and a soft elliptical drop shadow below. On the cover, animate a slow `transform: translateY` float (±10px) on a 6s ease-in-out loop, plus a tiny periodic `scale` "breathe." - **Mountain parallax:** 5 stacked absolutely-positioned SVG `` ridge layers; on scroll, translate each by `scrollProgress * depthFactor` (foreground moves most, sky least). Lighten and slightly blur far layers. Float translucent Nunito-italic pull-quote panels *between* the layers using `z-index`. - **Bubble sheen:** for any circular vignette, a `::after` ring with `background: conic-gradient(from 0deg, rgba(91,200,232,0.5), rgba(255,150,200,0.35), rgba(127,181,57,0.4), rgba(91,200,232,0.5)); border-radius: 50%; opacity: 0.35; mix-blend-mode: screen;` and a slow `rotate` animation. - **Animation language — favor *spring* physics:** entrances on scroll should overshoot gently and settle (cubic-bezier ~`(.34,1.56,.64,1)` or a small JS spring) — droplets *bob* in, glass tiles *spring-tilt* on hover (`transform: perspective(800px) rotateX/rotateY` toward the cursor with a springy return), the gallery vignettes *bounce-pop* into place staggered ~80ms apart. Headlines fade-and-rise with a slight elastic settle. Lens flares drift with a lazy lerp tied to scroll velocity. Keep everything *soft* — no sharp snaps; this world is made of water and air. - **Cursor:** replace the default with a tiny iridescent soap bubble that wobbles slightly and leaves a 2–3 element fading bubble trail; on hover over interactive lozenges it swells. - **Type treatment:** giant Fredoka headlines get a faint white-to-transparent gloss overlay across their top third (a clipped pseudo-element) and a soft `text-shadow` in Deep Lagoon on light spreads / Morning Haze on dark spreads — Aqua-button lettering. - **Tone of copy (for placeholder text):** field-notes voice — gentle, first-person-ish, about *the feeling of building something you like*, mornings, hillsides, small wins. Magazine decklines, photo captions, an "Issue 01" dateline. Never urgency, never metrics. - **AVOID:** CTA-stacked hero sections, pricing tables, stat/number grids, logo-cloud "trusted by" strips, testimonial carousels, generic SaaS feature-card rows. If a "features" idea is needed, render it as *objects on a workbench in a magazine photo*, not as a card grid. Bias hard toward the immersive, full-screen, scroll-snapped narrative spread. ## Uniqueness Notes - **Differentiator 1 — Frutiger Aero, done sincerely and earthed:** `frutiger-aero` registers at **0%** across 251 designs. This site commits fully to glossy aqua / bubble / lens-flare / Bliss-sky language but tempers it with a genuinely *grounded-earthy* tone (real dew, dirt, hikeable mountains) — neither pure 2008 corporate stock-photo optimism nor a generic gradient SaaS page. - **Differentiator 2 — the literal print-magazine-spread structure:** rather than the common `centered` (92%) / `full-bleed` (47%) flow, the page is a *physical magazine* — scroll-snapped two-page spreads with a visible gutter crease, masthead, folios, datelines, and an "Issue 01" conceit. `magazine-spread` layout is only 12%, and almost none combine it with a fold/gutter device. - **Differentiator 3 — the mountain-ridge parallax centerpiece:** `mountain-landscape` motif is **0%** across the corpus. A 5-plane layered SVG ridge panorama spanning a full double-page spread, with text panels floating between depth planes like clouds, is unlike anything else in the set. - **Differentiator 4 — the recurring water-droplet mascot-object:** a single photoreal-glossy aqua sphere with a refracted landscape inside it, reappearing at wildly different scales as the site's signature object and as bullet markers — an object-as-narrator device, not an icon set. - **Differentiator 5 — spring-physics softness over the dominant moody-parallax default:** while `parallax` (70%) and `counter-animate` (92%) and `mysterious-moody` tone (94%) saturate the corpus, this site is bright, warm, optimistic, and animated almost entirely with gentle overshoot/`spring` settles — bobbing droplets, bouncing vignettes, lazy-drifting lens flares — a deliberately *fond* interaction language. - **Chosen seed / style:** `aesthetic: frutiger-aero, layout: magazine-spread, typography: display-bold, palette: high-contrast, patterns: spring, imagery: minimal, motifs: mountain-landscape, tone: grounded-earthy`. - **Avoided overused patterns (per frequency analysis):** no `corporate` aesthetic (92%), no generic `centered` hero (92%), no `mono` typography (94%), no `mysterious-moody` tone (94%), no `gradient`-as-crutch despite high-contrast skies (96% — used here purposefully, not by default), no `counter-animate` stat blocks (92%).