CURATED · OPEN · FREE

Lovable

Create apps and websites by chatting with AI.

AIGradientProductivityCleanTooling

↓ Download design system (12 MB)Open in OpenDesign

Visit: https://lovable.dev

📦 Browse pack contents →

Identity DNA

BuilderAICreationNo-CodeEmpowering

A friendly, colorful portal that turns natural language into functional software.

Color

#FE7B02Accent

#1C1C1CInk

#5F5F5DInk soft

#F7F4EDBG

#FCFBF8BG soft

#FDFCFCBG quiet

#ECEAE4Muted

rgba(236, 234, 228, 1)Line

Warm neutral foundation with a vibrant, expressive multi-color gradient.

Typography

geometric-sans · monospace

display60px · 480
heading48px · 480
body16px · 400
small14px · 400

Spacing

4px

8px

16px

24px

32px

48px

64px

80px

96px

144px

Generous whitespace with large vertical gaps between sections.

Surfaces

sm · 8px

md · 12px

lg · 16px

pill · 99999999px

1px solid rgb(236, 234, 228)

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

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Centered single-column layout with a prominent hero section.

Motion & Interaction

150msmicro

200mssmall

400msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth opacity and transform transitions for UI elements. · Gradient shifts on hover.

Subtle color shifts and opacity changes. · Immediate feedback with scale or opacity adjustments.

Components

button Pill-shaped primary button with high contrast and small radius.
card Softly rounded cards with subtle borders and warm backgrounds.
input Large, rounded input container acting as the primary interaction point.
hero Full-width gradient background with centered text and a floating input.

Voice & Don'ts

Tone Encouraging, clear, and empowering.
Headlines Short, punchy, and action-oriented.
CTAs Direct and focused on the benefit of using the tool.

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.
Avoid: Jargon-heavy technical descriptions
Avoid: Dense paragraphs of text
Avoid: Passive or overly formal language

Inside the pack — real screenshots

Lovable — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko