Warm-dark, cozy: charcoal canvas, geometric Camera Plain type, a big rounded prompt composer, and an orange→pink heart gradient as the sole accent.
Browse Lovable in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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).
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.
| 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 |
| 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 |
| 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.
"Camera Plain Variable", ui-sans-serif, system-ui, sans-serif. Camera Plain is a geometric humanist sans; the variable axis covers body→display.| 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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.