Lovable — design system & UI screens

AI · 1 screen · 8 sections · lovable.dev

The hero is a centered, ultra-saturated blue-to-magenta-to-orange aurora gradient that bleeds from a near-white top into a vivid rainbow wash, with the dark serif-weight wordmark "Build something Lovable" floating above a large rounded white prompt-input card ("Ask Lovable to create a landing page for my…") complete with attach, Build dropdown, mic and a circular send button — the signature element is this chat-style generation box dropped onto the loud gradient. Below, the page returns to a calm warm-white canvas: a grayscale logo wall, a three-step "Meet Lovable" how-it-works list paired with a tall image panel, a two-row template thumbnail gallery, oversized "50M / 1M / 720M" stat blocks in bordered cards, and a second gradient CTA repeating the prompt box before a wide multi-column footer. A small cookie-consent dialog sits in the hero's lower-right but does not obscure the main content.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/lovable.

Decoded design system

Lovable's decoded design system: background #FAFAFA, text #030303, accent #1E1E1E, link #000000, primary #000000; type scale h1 20px / h2 48px / body 20px; 4px spacing base; 7px base radius. The single interactive/action color is #1E1E1E — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#FAFAFA`
surface	`#EBEBEB`
border	`#D4D4D4`
text	`#030303`
text_muted	`#606060`
primary	`#000000`
accent	`#1E1E1E`
link	`#000000`
button_bg	`#1E1E1E`
button_text	`#FAFAFA`

Using these colors

Action color #1E1E1E — the single interactive color; only on things you click or must notice, never large fills.
primary, link are all #000000 — one role, not several (the action color).
accent, button_bg are all #1E1E1E — one role, not several (the action color).
accent #1E1E1E — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.

Typography

h1: 20px
h2: 48px
body: 20px

Spacing

base unit: 4px
scale: 2px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 56px

Radii

base: 7px
button: 8px

Shadows (elevation)

subtle: oklch(0.2 0 0 / 0.12) 0px 2px 2px -1px, oklch(0.2 0 0 / 0.12) 0px 4px 4px -2px
card: oklch(0 0 0 / 0.04) 0px 2px 2px -1px, oklch(0 0 0 / 0.02) 0px 4px 4px -2px

Motion

Micro-interactions run at 150ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).

durations: 150ms · 200ms · 500ms
easings: cubic-bezier(0.4, 0, 0.2, 1) · ease
animated properties: opacity, color, background-color, border-color

Native design tokens

Token	Value
`--bg-depth`	`lab(94.7684% 0 0)`
`--bg-base`	`lab(96.5084% -.0000596046 0)`
`--bg-primary`	`lab(98.2716% 0 0)`
`--bg-secondary`	`lab(99.9884% -.0000298023 0)`
`--bg-tertiary`	`lab(99.9884% -.0000298023 0)`
`--bg-quaternary`	`lab(99.9884% -.0000298023 0)`
`--bg-accent`	`lab(41.4547% 30.9431 -84.4155)`
`--bg-accent-translucent`	`lab(41.4547% 30.9431 -84.4155/.16)`
`--bg-destructive`	`lab(49.6786% 69.526 48.442)`
`--bg-destructive-translucent`	`lab(49.6786% 69.526 48.442/.16)`

…and 109 more measured on the page.

Button states (measured)

primary focus: outline 2px solid lab(52.8042 18.2982 -74.3349 / 0.4)

Layout (measured)

container max-width: 740px
nav: 32px relative
common grid: 2 columns

Motion choreography (measured)

Load order: form.group×4 → div.background-enter → span.text-tertiary-pulse×2 → span.text-tertiary-pulse×2

Scroll reveal: 2 elements rest at opacity 0, animate in over 1600ms.

Themes

dark counterpart: background #1F1F1E, text #FFFFFF.

Responsive (measured)

breakpoints: 640px · 1024px · 1280px · 1536px
mobile (390px): hero 20px · nav hamburger

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

AI app-builder landing with prompt-box hero on rainbow gradient and template gallery