Home
DESIGN.mdStar on GitHub

Build something Lovable

Create apps and websites by chatting with AI.

Ask Lovable to create a prototype…
Landing pageDashboard
Colors
Brand · the heart gradient
Surfaces · warm cream (builder app is dark)
Text
Typography
Inter / 700
Display · 52px
Build something Lovable
Inter
Inter / 600
Section · 26px
Chat with AI, ship real apps
Inter
Inter / 400
UI · body · 15px
Describe what you want; Lovable builds it, section by section.
Inter
JetBrains Mono / 400
Generated code · 12px
✓ created src/components/Hero.tsx
JetBrains Mono
Signature · Prompt → app
Lovable
App ready — preview live
Previewlocalhost:5173
localhost:5173
Your generated app appears here.
Pick a prompt and press Build.
Pick a prompt and press Build — Lovable streams the build steps into the chat while the live preview assembles itself section by section. Deterministic.
Components
Buttons
Prompt chips
Landing page Dashboard Todo app
Prompt box
Radius
16 card
12 panel
pill btn
Guardrails
Do
Anchor on a warm cream canvas with the blurred heart gradient (blue→magenta→orange) as atmosphere.
Treat the heart as the logo & soul; the gradient carries AI/generating states and CTAs.
Keep type in Inter (code in JetBrains Mono) and copy plain-spoken & friendly.
Make the prompt → app flow the centerpiece — a calm box, then an app that assembles itself.
Use fully rounded pill buttons and soft floating cards.
Don't
Put the gradient on everything — it's a big soft bloom, not a fill for all buttons and text.
Introduce a competing hue; blue→magenta→orange is the whole palette (magenta is the flat accent).
Make the gradient harsh or banded — it's heavily blurred and dreamy.
Use sharp corners or a cold marketing canvas — Lovable is warm & rounded.
Replace the heart with a generic sparkle / bot icon.