---
name: Lovable
description: "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."
version: alpha

colors:
  background: "#F7F4ED"
  primary: "#1C1C1C"
  secondary: "#5F5F5D"
  tertiary: "#FE7B02"
  neutral: "#ECEAE4"
  bg-soft: "#FCFBF8"
  bg-quiet: "#FDFCFC"
  line: "rgba(236, 234, 228, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 60px
    lineHeight: 1.0
    fontWeight: 480
    letterSpacing: "-1.5px"
  heading:
    fontFamily: geometric-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 480
    letterSpacing: "-1.2px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 8px
  md: 12px
  lg: 16px
  pill: 99999999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Create apps and websites by chatting with AI.

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

## Colors

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

- **Background (`#F7F4ED`)** — uses `bg` token
- **Primary text (`#1C1C1C`)** — uses `ink` token
- **Secondary text (`#5F5F5D`)** — uses `ink-soft` token
- **Accent (`#FE7B02`)** — uses `accent` token
- **Muted (`#ECEAE4`)** — uses `muted` token
- **Borders (`rgba(236, 234, 228, 1)`)** — uses `line` token

## Typography

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

## Layout

Centered single-column layout with a prominent hero section.

*Rhythm:* Generous whitespace with large vertical gaps between sections.

## Elevation & Depth

- 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)

## Shapes

- `sm`: 8px
- `md`: 12px
- `lg`: 16px
- `pill`: 99999999px

## 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.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```