# Lovable · Design system migration spec

> Source: https://lovable.dev  ·  Curated by OpenDesign  ·  en

> This site effectively combines a clean, professional interface with a bold, expressive gradient to create a sense of both power and approachability for its AI-driven builder tool.

## 1. Identity DNA

The Lovable design system is built on an analogy: a colorful, open invitation to create software without friction. It treats the interface not as a finished product, but as a welcoming space—a clean, high-contrast canvas where the primary visual event is a vibrant, multi-hued gradient. This identity is both modern and intentionally accessible, using a bold palette to signal creative possibility.

**One-liner:** Create apps and websites by chatting with AI.
**Keywords:** Builder · AI · Creation · No-Code · Empowering
**Analogy:** A friendly, colorful portal that turns natural language into functional software.

## 2. Color

The color system is defined by a clean white canvas dramatically contrasted by a vibrant, multi-hued gradient of pink, orange, and blue. This anchor provides visual interest and energy without relying on dark backgrounds.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F7F4ED` | main background |
| `--bg-soft` | `#FCFBF8` | card background |
| `--bg-quiet` | `#FDFCFC` | quiet area |
| `--ink` | `#1C1C1C` | body text |
| `--ink-soft` | `#5F5F5D` | secondary text |
| `--muted` | `#ECEAE4` | placeholder |
| `--accent` | `#FE7B02` | single accent |
| `--line` | `rgba(236, 234, 228, 1)` | divider |

**Color principle:** Warm neutral foundation with a vibrant, expressive multi-color gradient.

The principle is clarity and high contrast, using saturation sparingly to draw focus rather than decorate.

## 3. Typography

The typographic voice is modern and clean, exclusively using a geometric sans-serif category to ensure readability and a contemporary feel. Headlines use tight tracking for impact, while body text employs generous line-height to prioritize readability across navigation and general content.

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 60px | 1.0 | 480 | -1.5px | Primary hero text |
| heading | 48px | 1.1 | 480 | -1.2px | Section headings |
| body | 16px | 1.5 | 400 | 0px | General paragraph text |
| small | 14px | 1.5 | 400 | 0px | Secondary text and labels |

## 4. Spacing

A consistent 4px base grid establishes a reliable spatial rhythm for all component alignment.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 144 px
- **Rhythm:** Generous whitespace with large vertical gaps between sections.

## 5. Surfaces

Surfaces are kept minimal, with subtle, light gray borders used sparingly for input fields and cards. A single elevation shadow token creates gentle depth without overwhelming the clean layout.

- **Radius:** sm 8px · md 12px · lg 16px · pill 99999999px
- **Shadows:**
  - oklch(0.2 0 0 / 0.12) 0px 2px 2px -1px
  - oklch(0.2 0 0 / 0.12) 0px 4px 4px -2px
  - rgba(0, 0, 0, 0.1) 0px 20px 25px -5px
- **Borders:** 1px solid rgb(236, 234, 228)

## 6. Layout

The layout skeleton is a centered, single-column structure anchored by a full-bleed gradient hero section. This framework provides generous white space, ensuring the interface remains uncluttered and focused.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered single-column layout with a prominent hero section.

## 7. Motion & Interaction

Motion philosophy favors subtlety and speed, using fade-ins for content loading and smooth color transitions on hover. Transitions are kept fast, between 150-300ms, to maintain a responsive, snappy feel throughout the interaction model.

- **Durations:** micro 150ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth opacity and transform transitions for UI elements.
  - Gradient shifts on hover.

- **Hover:** Subtle color shifts and opacity changes.
- **Click:** Immediate feedback with scale or opacity adjustments.
- **Transition:** 0.15s to 0.2s durations for most UI state changes.
- **Keyboard:** Focus states likely follow standard accessibility patterns.

## 8. Voice & Don'ts

The editorial voice is encouraging, straightforward, and modern, using short, action-oriented headlines with strong verbs. Copy avoids overly technical jargon and passive language, favoring direct calls to action like 'Get started'.

- **Tone:** Encouraging, clear, and empowering.
- **Headline style:** Short, punchy, and action-oriented.
- **CTA style:** Direct and focused on the benefit of using the tool.
- **Avoid:** Jargon-heavy technical descriptions / Dense paragraphs of text / Passive or overly formal language

### Don'ts
- ❌ Don't use a pure white background — the screenshot shows a warm, slightly off-white background.
- ❌ Don't use sharp, rectangular corners — the screenshot shows rounded corners on cards and inputs.
- ❌ Don't use a cold, monochromatic color scheme — the screenshot shows a vibrant, multi-colored gradient.
- ❌ Don't use a dense, cluttered layout — the screenshot shows generous whitespace and clear hierarchy.
- ❌ Don't use complex, ornate typography — the screenshot shows a clean, geometric sans-serif style.
- ❌ Don't use harsh, dark borders — the screenshot shows subtle, light borders.

They deliberately avoid dark backgrounds, serif typography, cluttered interfaces, sharp corners, muted earthy tones, and complex iconography.

## System Prompt (paste into AI tool)

```
Lovable is an AI-powered tool for building apps and websites through conversational interfaces. Its visual identity is defined by a warm off-white background, dark neutral ink (#1C1C1C), and a vibrant, expressive multi-color gradient (blues, pinks, oranges). Typography utilizes a clean geometric sans-serif category. The design prioritizes simplicity, generous whitespace, and a friendly, approachable feel, suitable for a product that aims to make software creation accessible to everyone. Critical constraints include using rounded corners consistently, avoiding pure white backgrounds, and maintaining a high-contrast, clear visual hierarchy without unnecessary clutter.
```
