Lovable — design system & UI screens

AI · 1 screen · 8 sections · lovable.dev

Create a website or app using AI assistance and drag-and-drop tools. The landing page features a vibrant gradient hero section with a centered search input ("Ask Lovable to create a landing page for my..."), social proof showing trusted companies, a "Meet Lovable" section describing the workflow (start with an idea → watch it come to life → refine and ship), template gallery, social proof statistics, and a footer with comprehensive navigation and links.

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

Landing page with AI-powered website builder