# Lovable — Design Reference

> Warm paper, black ink, and a sunset rising under the prompt

**Theme:** light · **Measured from:** lovable.dev (English, 1440 px)

Lovable looks like a friendly notebook with a light show underneath. The canvas is a warm cream `#fcfbf8`, the text is near-black `#1c1c1c` with warm grays for body copy, and the only filled button is black. All the color lives in one place: a soft, blurry gradient that rises from the bottom of the hero — cream, then electric blue, then orchid pink, then a hot red at the edge — with a white prompt box floating in the middle of it. Below the hero the page goes quiet again: cream cards on cream, semibold headings with tight tracking, rounded corners everywhere and almost no shadow. A large rounded near-black band breaks the page halfway down to showcase the product.

## Colors

| Name | Hex | Role |
|------|-----|------|
| Ink | `#1c1c1c` | Headings, primary text, black button, dark showcase band |
| Graphite | `#616161` | Body copy, subheads, card descriptions |
| Stone | `#696661` | Warm gray captions and labels |
| Sand | `#a59781` | Muted warm text: placeholders, metadata |
| Cream | `#fcfbf8` | Page canvas — never pure white |
| Linen | `#f5f4f0` | Card and tile fills |
| Parchment | `#f9f8f5` | Subtle bands and inner panels |
| White | `#ffffff` | Hero prompt box, "Log in" button |
| Electric Blue | `#1e52f1` | Links and small in-product chips |
| Blue Wash | `#e9eefe` | Fill of small blue chips |
| Sky Glow | `#4f88ff` | Hero gradient — blue stop |
| Orchid | `#ff66f4` | Hero gradient — pink stop |
| Signal Red | `#fa1f41` | Hero gradient — red bottom edge |

**Hero gradient:** a vertical, heavily blurred wash: Cream at the top, Sky Glow `#4f88ff` through lavender `#ceaffb`, Orchid `#ff66f4`, and Signal Red `#fa1f41` at the bottom, with a pale blue halo directly under the prompt box. The heart logo uses the same palette from orange `#ff8f1b` to red. Use the gradient once, in the hero; never on buttons or text.

## Typography

**Camera Plain Variable** is the only family (proprietary). Substitute: **Inter** 400/500/600 from Google Fonts.

- Headings are **600** with tight tracking: exactly **-0.04em** (48px → -1.92px, 36px → -1.44px, 28px → -1.12px).
- Body is **400** in Graphite; subheads use the in-between weight **480** (use 500 in Inter).
- Card titles are 16px/600 in Ink, followed by 14px/400 Graphite descriptions.

| Role | Size | Weight | Line height | Letter spacing |
|------|------|--------|-------------|----------------|
| Display | 48px | 600 | 1.1 | -1.92px |
| Heading | 36px | 600 | 1.1 | -1.44px |
| Heading small | 28px | 600 | 1.1 | -1.12px |
| Subheading | 24px | 480 | 1.33 | -0.48px |
| Body large | 18px | 400 | 1.55 | 0 |
| Body | 16px | 400 | 1.5 | 0 |
| Card title | 16px | 600 | 1.5 | 0 |
| Caption | 14px | 400 | 1.7 | 0 |

## Shape and spacing

- **Buttons:** about 6px radius, small and compact (32px tall in the nav). Chips and tags are full pills.
- **Prompt box:** large 28px radius.
- **Cards:** 16px radius (12px on smaller tiles); the dark showcase band about 16px.
- **Base unit:** 8px. Scale: 4, 8, 16, 24, 32, 40, 64, 128.
- **Content width:** 1280px, centered.
- **Section gap:** about 128px.

## Components

### Primary button
Ink `#1c1c1c` fill, white text, about 6px radius, 32px tall, padding about `0 12px`, 14px weight 480–600. A faint stacked shadow `0 2px 2px -1px rgba(22,22,22,.12), 0 4px 4px -2px rgba(22,22,22,.12)`. Label: "Get started".

### Secondary button
White fill, Ink text, 1px light gray hairline (`inset 0 0 0 1px` at low opacity), same size and radius as the primary, sitting 8px to its left. Labels: "Log in", "Learn more".

### Navigation
Transparent over Cream, no border. Logo (gradient heart + "Lovable" wordmark) left, then links in Ink 15px/400 with small chevrons on dropdowns (Solutions, Resources, Community, Enterprise, Pricing, Security). "Log in" and "Get started" at the right.

### Hero prompt box
The signature element: a white box about 608px wide, 28px radius, soft shadow, centered over the gradient. Placeholder "Ask Lovable to create a landing page…" in Sand at 16px; bottom row with a round "+" button left and a "Build ⌄" selector plus a mic icon right.

### Feature card
Linen or White card, 16px radius, no border or a barely visible one. Top two-thirds is a live product fragment (an input, an editor, a settings list) with soft gradient tints; bottom has a 16px/600 Ink title and a 14px Graphite description. Three cards in a row under a left-aligned 36px heading.

### Logo grid
Customer logos in their own colors on Cream inside a thin-lined grid, next to a short "Trusted by top brands" block with a small outline "Learn more" button.

## Do

- Keep the canvas warm Cream and the cards Linen.
- Use black for the one filled button; pair it with a white outline button.
- Track every heading at -0.04em in weight 600.
- Put all the color in the single hero gradient behind the prompt.
- Make the prompt box the hero's focal point.
- Round generously: 16px cards, 28px prompt box, pill chips.

## Don't

- Don't use pure white for the page background.
- Don't make colored buttons; the gradient is never a fill for controls.
- Don't use cool grays; text grays are warm (`#616161`, `#696661`, `#a59781`).
- Don't add heavy shadows or visible borders to cards.
- Don't set headings in light or bold (700+) weights.
- Don't repeat the gradient across sections.

## Layout

Centered hero: nav on Cream, a 48px headline "Build something Lovable", an 18px Graphite subline, and the white prompt box floating on the rising blue-pink-red gradient that fills the bottom of the first screen. Below: a left-aligned section heading with three feature cards, then a full-width near-black rounded band with tall product visuals, then a logo grid with "Trusted by top brands", and a centered "The proof is in production" section. Section headings sit left-aligned except for the hero and proof sections.

## Agent prompt guide

- Text: `#1c1c1c` · Secondary text: `#616161` · Muted: `#a59781`
- Canvas: `#fcfbf8` · Cards: `#f5f4f0` · Dark band: `#1c1c1c`
- Action: `#1c1c1c` with white text · Link: `#1e52f1`

Example prompts:

1. "Primary button: background #1c1c1c, white text, 6px radius, 32px tall, padding 0 12px, Inter 500 14px, shadow 0 2px 2px -1px rgba(22,22,22,.12), 0 4px 4px -2px rgba(22,22,22,.12)."
2. "Hero: #fcfbf8 background with a blurred vertical gradient from #fcfbf8 through #4f88ff and #ff66f4 to #fa1f41 at the bottom; centered 48px Inter 600 headline with letter-spacing -1.92px in #1c1c1c; white prompt box 608px wide with 28px radius floating on top."
3. "Feature card: #f5f4f0 fill, 16px radius, no border, no shadow; product fragment fills the top; title 16px weight 600 #1c1c1c; description 14px weight 400 #616161."

## Quick start

### CSS variables

```css
:root {
  /* Colors */
  --color-ink: #1c1c1c;
  --color-graphite: #616161;
  --color-stone: #696661;
  --color-sand: #a59781;
  --color-cream: #fcfbf8;
  --color-linen: #f5f4f0;
  --color-parchment: #f9f8f5;
  --color-white: #ffffff;
  --color-electric-blue: #1e52f1;
  --color-blue-wash: #e9eefe;
  --color-sky-glow: #4f88ff;
  --color-orchid: #ff66f4;
  --color-signal-red: #fa1f41;

  /* Fonts */
  --font-sans: 'Camera Plain Variable', 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 48px;
  --text-display--line-height: 1.1;
  --text-display--letter-spacing: -1.92px;
  --text-display--font-weight: 600;
  --text-heading: 36px;
  --text-heading--line-height: 1.1;
  --text-heading--letter-spacing: -1.44px;
  --text-heading--font-weight: 600;
  --text-heading-sm: 28px;
  --text-heading-sm--line-height: 1.1;
  --text-heading-sm--letter-spacing: -1.12px;
  --text-heading-sm--font-weight: 600;
  --text-subheading: 24px;
  --text-subheading--line-height: 1.33;
  --text-subheading--letter-spacing: -0.48px;
  --text-subheading--font-weight: 480;
  --text-body-lg: 18px;
  --text-body-lg--line-height: 1.55;
  --text-body-lg--font-weight: 400;
  --text-body: 16px;
  --text-body--line-height: 1.5;
  --text-body--font-weight: 400;
  --text-card-title: 16px;
  --text-card-title--line-height: 1.5;
  --text-card-title--font-weight: 600;
  --text-caption: 14px;
  --text-caption--line-height: 1.7;
  --text-caption--font-weight: 400;

  /* Radius */
  --radius-buttons: 6px;
  --radius-inputs: 28px;
  --radius-cards: 16px;
  --radius-tags: 9999px;

  /* Spacing */
  --spacing: 8px;

  /* Shadows */
  --shadow-button: 0 2px 2px -1px rgba(22, 22, 22, 0.12), 0 4px 4px -2px rgba(22, 22, 22, 0.12);
  --shadow-hairline: inset 0 0 0 1px rgba(0, 0, 0, 0.25);

  /* Layout */
  --container-page: 1280px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-ink: #1c1c1c;
  --color-graphite: #616161;
  --color-stone: #696661;
  --color-sand: #a59781;
  --color-cream: #fcfbf8;
  --color-linen: #f5f4f0;
  --color-parchment: #f9f8f5;
  --color-white: #ffffff;
  --color-electric-blue: #1e52f1;
  --color-blue-wash: #e9eefe;
  --color-sky-glow: #4f88ff;
  --color-orchid: #ff66f4;
  --color-signal-red: #fa1f41;

  /* Fonts */
  --font-sans: 'Camera Plain Variable', 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 48px;
  --text-display--line-height: 1.1;
  --text-display--letter-spacing: -1.92px;
  --text-display--font-weight: 600;
  --text-heading: 36px;
  --text-heading--line-height: 1.1;
  --text-heading--letter-spacing: -1.44px;
  --text-heading--font-weight: 600;
  --text-heading-sm: 28px;
  --text-heading-sm--line-height: 1.1;
  --text-heading-sm--letter-spacing: -1.12px;
  --text-heading-sm--font-weight: 600;
  --text-subheading: 24px;
  --text-subheading--line-height: 1.33;
  --text-subheading--letter-spacing: -0.48px;
  --text-subheading--font-weight: 480;
  --text-body-lg: 18px;
  --text-body-lg--line-height: 1.55;
  --text-body-lg--font-weight: 400;
  --text-body: 16px;
  --text-body--line-height: 1.5;
  --text-body--font-weight: 400;
  --text-card-title: 16px;
  --text-card-title--line-height: 1.5;
  --text-card-title--font-weight: 600;
  --text-caption: 14px;
  --text-caption--line-height: 1.7;
  --text-caption--font-weight: 400;

  /* Radius */
  --radius-buttons: 6px;
  --radius-inputs: 28px;
  --radius-cards: 16px;
  --radius-tags: 9999px;

  /* Spacing */
  --spacing: 8px;

  /* Shadows */
  --shadow-button: 0 2px 2px -1px rgba(22, 22, 22, 0.12), 0 4px 4px -2px rgba(22, 22, 22, 0.12);
  --shadow-hairline: inset 0 0 0 1px rgba(0, 0, 0, 0.25);

  /* Layout */
  --container-page: 1280px;
}
```

---

*Measured from https://lovable.dev/ on 2026-10-28 by Faundr. Inspired by Lovable; not its official design system and not affiliated with Lovable.*