Lovable

Difficulty:
Company
Lovable Effect Preview

Effect Preview

Design Tokens

Key tokens derived from official brand references and this style's prompt. Copy them or pair with the DESIGN.md below.

Colors

  • primaryCurated

    Primary actions & highlights

  • on-primaryDerived

    Text on primary

  • secondaryDerived

    Chips, badges & soft emphasis

  • on-secondaryDerived

    Text on secondary

  • neutralCurated

    Page canvas

  • on-neutralDerived

    Text on canvas

  • surfaceDerived

    Cards, panels & elevated containers

  • on-surfaceDerived

    Text on surface

  • borderDerived

    Borders & dividers

Radius & Shapes

Derived
sm · 4px
md · 8px
lg · 12px
full

Spacing

Derived
  • sm8px
  • md12px
  • lg24px

Elevation

Prompt

Depth is expressed through soft, low-contrast shadows.

Typography

Derived
  • Ag

    Headings 32px · bold

    Inter

  • Ag

    Body 16px · regular

    Inter

  • Ag

    Labels 13px · medium

    Inter

Lovable is the AI full-stack builder where you ship apps by chatting with an agent. Its style is deliberately warm: a parchment cream (#f7f4ed) instead of white, every gray derived from #1c1c1c at varying opacity, the humanist Camera Plain Variable with editorial display tracking, and buttons given physicality by inset shadows (0.5px white highlight, 0.5px black ring) over warm borders (#eceae4).

DeveloperMinimal

Prompt Template

Base Template
Design a Lovable-inspired interface. - Warm parchment background (#f7f4ed) — not white, not beige, a deliberate cream that feels hand-selected; - Camera Plain Variable typeface with humanist warmth and editorial letter-spacing at display sizes; - Opacity-driven color system: all grays derived from #1c1c1c at varying transparency levels; - Inset shadow technique on buttons: rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset; - Warm neutral border palette: #eceae4 for subtle, rgba(28,28,28,0.4) for interactive elements. Colors: #f7f4ed, #1c1c1c, #fcfbf8, #5f5f5d with #3b82f6 accent. Typography: Camera Plain Variable.

Variant Prompts

📱 Mobile
Design a mobile app with Lovable aesthetics. Use Lovable color identity with #3b82f6 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Lovable style. Use Lovable color identity with #3b82f6 accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Lovable design language. Use Lovable color identity with #3b82f6 accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Lovable visual identity. Use Lovable color identity with #3b82f6 accents. Compelling, conversion-focused.

Usage Examples

Lovable App

Web
Build a web app with Lovable design language and #3b82f6 color system.

Lovable Dashboard

Dashboard
Create a dashboard using Lovable style with data visualization and Camera Plain Variable typography.

✅ Best For

  • Developer
  • AI builder product sites
  • Indie maker launch pages

❌ Avoid For

  • Serious enterprise compliance pages
  • Monochrome minimal doc sites

DESIGN.md File

A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.

Download