Lovable — Steps / How-it-works
Left tall placeholder image panel beside a three-step stacked list — 'Start with an idea', 'Watch it come to life', 'Refine and ship' — each with a bold dark heading and gray supporting copy under the section title 'Meet Lovable'.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/inspiration/lovable-meet-lovable-three-step-flow-with-image-panel.
Measured spec
| Scheme | light |
| Background | #FDFBF9 |
| Text | #6F6E6D |
| Contrast | 4.93 |
| Columns | 1 |
| Alignment | left |
| Whitespace | airy |
| Density | 0.11 |
| Measured size | 1129×798 px |
Palette
#FBF9F6#EFEBE5#1A1A1A#9A9A9A
Page types
Detail
UI elements
Card
Context
- Parent page: AI app-builder landing with prompt-box hero on rainbow gradient and template gallery
- All of Lovable
Other sections on this page
- Hero — Prompt-box hero on rainbow aurora gradient
- Banner — Cookie consent dialog (hero overlay, lower band)
- Logo Wall — 'Teams from top companies' grayscale logos
- Gallery / Showcase — 'Discover templates' two-row thumbnail grid
- Stats / Metrics — 'Lovable in numbers' three giant stat cards
- CTA / Sign-up — 'Ready to build?' repeat prompt box on gradient
- Footer — Five-column footer card over gradient base