# Lovable — Marketing Site Design Spec

> Source: lovable.dev (live DOM, computed styles + color census), 2026-07-06; motion / backgrounds / breakpoints re-captured 2026-07-07.
> Coverage: marketing site + hero prompt composer. Full builder app: `needs-dashboard` (login required).

## 1. Visual Theme & Atmosphere

Warm-dark, cozy, and friendly-premium: a warm charcoal canvas layered with soft warm grays, carrying exactly one accent — the orange→pink Lovable heart gradient. Type is Camera Plain, a geometric humanist sans, kept deliberately un-shouty; the big 28px-rounded prompt composer is the focal point, not the typography. Elevation comes from soft warm rings rather than hard borders or heavy shadows, so surfaces separate gently. Everything is calm, centered, and generous, built to feel like "vibe coding" — an inviting place to start. Feels: approachable, calm, cozy, friendly-premium.

## 2. Color Palette & Roles

### Warm-dark neutrals
| Token | Hex | Role / usage |
|---|---|---|
| canvas | `#1f1f1e` | Page background (warm charcoal) |
| surface-1 | `#1c1c1a` | Prompt composer / inset surface |
| surface-2 | `#272725` | Cards, buttons, chips |
| surface-3 | `#2e2e2c` | Hover / raised |
| border | `rgba(255,255,255,.08)` | Hairline (soft warm) |
| ring | `rgba(119,119,113,.4)` | Soft 0.5px focus/elevation ring |

### Text (warm)
| Token | Hex | Role / usage |
|---|---|---|
| text | `#ffffff` | Primary text, headings |
| text-cream | `#fcfbf8` | Warm off-white |
| text-2 | `#c5c1ba` | Secondary (warm gray) |
| text-muted | `#a5a19a` | Tertiary / captions |
| on-light | `#1a1a18` | Text on the white button |

### Brand accent (the Lovable heart gradient)
| Token | Hex |
|---|---|
| orange | `#fe7b02` |
| red-pink | `#ff0105` |
| gradient | `linear-gradient(90deg, #fe7b02, #ff0105)` |

Rule: chrome is warm-dark monochrome + white; the orange→pink gradient appears only in the logo/heart, a hero glow, or a single highlighted word. Everything else is neutral warm.

## 3. Typography Rules

- Font stack: `"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif`. Camera Plain is a geometric humanist sans; the variable axis covers body→display.
- Body: 14–16px / 400 / white on charcoal.
- Display: weight 600 with modest negative tracking.

| Role | Size / Line | Weight | Tracking |
|---|---|---|---|
| Hero (h1) | 48 | 600 | -1.2px (-2.5%) |
| Section (h2) | 36 | 600 | -0.9px |
| Eyebrow | 20 / 30 | 400 | 0 (warm gray `#c5c1ba`) |
| Body | 16 | 400 | 0 |
| UI / button | 14 / 21 | 400 | 0 |
| Caption | 13 | 400 | 0 |

Pattern: friendly geometric letterforms; display tops out at 600 with gentle tracking; body is a comfortable 14–16/400. Not shouty — the composer is the focal point, not the type.

## 4. Component Stylings

### Prompt composer (the hero)
- Rounded `28px` FORM on surface `#1c1c1a`, 0.5px `rgba(255,255,255,.08)` border + soft warm ring, ~12px padding, ~768px wide. Holds a large placeholder ("Build something Lovable…"), a row of small ghost tool chips, and a submit affordance. This is the signature element — everything else supports it.

### Buttons
- **Primary**: bg white `rgba(255,255,255,.96)`, text near-black `#1a1a18`, radius 8, h32, 14px/400, padding `6px 10px`. Hover: slightly brighter.
- **Ghost**: transparent, white text, radius 8; hover surface `#272725`.
- **Chip / tool**: surface `#272725`, warm-gray text, radius 12, small.

### Inputs
- Surface `#1c1c1a`/`#272725`, 0.5px `rgba(255,255,255,.08)` border, radius 8–12, white text, muted `#a5a19a` placeholder. Focus: soft warm ring.

### Cards / panels
- Surface `#272725`, 0.5px soft border, radius 16–24, soft ring shadow. Used for feature tiles and app previews; often show a mini app screenshot.

### Nav
- Warm-dark, transparent; wordmark + heart-gradient mark left, center links (14px warm gray), right: ghost "Log in" + white "Get started".

## 5. Layout Principles

- Nav: ~60px, transparent over charcoal.
- Hero: centered eyebrow ("AI App Builder") → 48px/600 headline (a word may carry the orange→pink gradient) → the big 28px prompt composer → a row of example-prompt chips.
- Body: charcoal sections; grids of surface cards showing community apps; occasional heart-gradient glow. Calm, centered, generous.
- Spacing: 4px grid; generous, calm whitespace centered on the composer.

## 6. Depth & Elevation

- Radii: buttons/inputs `8px`, chips `12px`, cards `16–24px`, **prompt composer `28px`**, pills `999px`, avatars full.
- Control heights: button `32px`. Button padding: `6px 10px`.
- Elevation: soft warm **rings** over shadows — e.g. `0 0 0 0.5px rgba(119,119,113,.4)` plus a faint drop. Borders are 0.5–1px at 8% white.

## 7. Motion

- Micro-interactions are uniformly **150ms** Tailwind transitions: `opacity 0.15s cubic-bezier(0.4,…)` (67 els), `color/background/border/opacity 0.15s` (57), `opacity/transform 0.15s` (20).
- Load: `background-enter 1.6s ×1` — a slow atmospheric entrance of the background gradient — plus `enter 0.5s ×1` and 3 WAAPI animations.
- Named keyframes: **heartbeat** (the brand heart), gradient-sweep, gradient, shine, shimmer-gradient, loader-sweep, task-status-spin, message-highlight, animate-blink, shake, enter/exit, spin, pulse, bounce, cmdk-enter.
- Character: gentle and encouraging — composer focus ring blooms softly, app-preview cards fade/scale in, the heart gradient shimmers subtly. Nothing abrupt; motion invites you to type.
- Demo videos are click-to-play (400px), not background loops. No GSAP / Three.js / Lottie detected.

## 8. Backgrounds, Effects & WebGL

- No canvas, no WebGL, no backdrop-filter — the page is flat warm charcoal apart from one signature effect.
- Signature animated gradient sweep (the heart/brand sweep, used as both text and background sweep): linear cream `rgb(252,251,248)` → ice-blue `rgb(130,188,255)` → blue `rgb(36,131,255)` → pink `rgb(255,102,244)` → red-orange `rgb(255,48,41)`; also a white-based variant.
- It animates via the `background-enter 1.6s` entrance plus the `gradient-sweep` / `shimmer-gradient` keyframes — the sole atmospheric effect over the flat charcoal canvas.

## 9. Do's and Don'ts

### Do
- Keep all chrome warm-dark monochrome + white; reserve the orange→pink gradient for the logo/heart, a hero glow, or a single highlighted word.
- Separate surfaces with soft 0.5–1px borders at 8% white and warm rings `rgba(119,119,113,.4)` — elevation via rings, not shadows.
- Cap display type at weight 600 with gentle negative tracking; keep body a comfortable 14–16/400.
- Make the big 28px-rounded prompt composer the focal point; center everything else around it.
- Use the white primary button (near-black `#1a1a18` text) on the dark canvas.
- Space on a 4px grid with generous, calm whitespace.
- Keep motion gentle: uniform 150ms micro-transitions, soft ring blooms, subtle fades/scales; reserve the slow 1.6s background-enter for the atmospheric gradient.
- Treat the animated gradient sweep as the only decorative element — everything else is flat charcoal (no canvas, WebGL, or backdrop blurs).

### Don't
- Don't use the brand gradient anywhere beyond the logo/heart, hero glow, or one highlighted word.
- Don't use hard borders or heavy shadows for elevation.
- Don't push display weight above 600 or make the type shouty — the composer, not the type, is the hero.
- Don't use abrupt motion.

## 10. Responsive Behavior

- Breakpoints (Tailwind, rem-based): 640 / 768 / 1024 / 1280 / 1536px. Per-breakpoint adaptations (mobile nav pattern, type scale-down): not captured.

## 11. Agent Prompt Guide

- Canvas `#1f1f1e` · Text `#ffffff` · Muted `#a5a19a` · Border `rgba(255,255,255,.08)` · Accent `#fe7b02` → `#ff0105`
- Font: `"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif` · Body: 16px · Radius: 8 (controls) / 16–24 (cards) / 28 (composer) · Control height: 32px
- Focus: soft warm ring `0 0 0 0.5px rgba(119,119,113,.4)` · Hover fill: `#272725` (ghost) / `#2e2e2c` (raised)

<lovable_design_language>
Use the Lovable design language: warm charcoal canvas #1f1f1e with inset surfaces #1c1c1a / #272725, separated by soft 0.5px rgba(255,255,255,.08) borders and warm rings rgba(119,119,113,.4) rather than hard lines or heavy shadows. Text is white with warm grays #c5c1ba / #a5a19a; the sole accent is the Lovable heart gradient, orange #fe7b02 → red-pink #ff0105, used only in the logo, a hero glow, or one highlighted word. Type is Camera Plain (geometric humanist): display weight 600 with gentle negative tracking (48px hero, -2.5%), body 14-16/400 — friendly, not shouty. Buttons: primary is WHITE with near-black text #1a1a18, radius 8, 32px; ghost is transparent white text. Radii climb 8 (buttons) → 12 (chips) → 16-24 (cards) → 28 (the signature rounded prompt composer). Center everything on a big rounded prompt box on surface #1c1c1a with a soft warm ring. Motion: uniform 150ms micro-transitions; the only atmosphere is the animated heart-gradient sweep, easing in slowly (1.6s) over the flat charcoal. Feels: cozy, approachable, calm — an inviting place to start building. Avoid: the gradient outside the logo/glow/one word, hard borders or heavy shadows, display weights above 600 or shouty type, and abrupt motion.
</lovable_design_language>