Lovable

lovable.dev7 colors6 componentsCamera Plain VariableMulti-page · 12 screens

Describe what you want in plain language and Lovable builds it: full-stack apps, websites and internal tools. Start free.

Remix Visit

Remix

Visit

12 screenshots captured· lovable.dev

1 / 12 · App & Website Builder | Build Software in Minutes | Lovable · Above the fold

Preview

the generated design system

Switch between the Visual preview, the rendered DESIGN.md and the Raw file.

Design tokens

Extracted from lovable.dev

Primary

#FCFBF8

Primary CTA, brand accent, active state

Neutral

#F5F4F0

Card / panel background

#1C1C1C

Alternating section band; Body copy

#0D0D0D

Headings / primary text

#5F5F5D

Captions, secondary text

#C5C1B9

Tertiary / placeholder text

#272725

1px borders and dividers

Typography · Camera Plain Variable

heading14px · 480 · 21px

body14px · 400 · 24px

link14px · 400 · 21px

body18px · 400 · 24px

body15px · 400 · 24px

body20px · 400 · 24px

body16px · 400 · 24px

h130px · 480 · 45px

body16px · 480 · 24px

link16px · 400 · 24px

button15px · 400 · 24px

body14px · 500 · 20px

body18px · 500 · 24px

h118px · 400 · 28px

h248px · 600 · 52.8px

h318px · 480 · 27px

button16px · 400 · 24px

quote24px · 480 · 32px

heading36px · 600 · 39.6px

display48px · 480 · 52.8px

heading16px · 600 · 24px

heading32px · 400 · 38px

heading28px · 600 · 30.8px

body24px · 600 · 28px

body14px · 600 · 22px

body13px · 480 · 21px

body13px · 600 · 21px

caption12px · 400 · 20px

caption12px · 600 · 20px

body14px · 480 · 4px

h236px · 480 · 45px

h320px · 450 · 25px

button20px · 480 · 30px

label16px · 700 · 24px

heading16px · 450 · 22.4px

heading18px · 600 · 27px

heading18px · 450 · 23.4px

heading36px · 450 · 39.6px

body14px · 450 · 19.6px

h148px · 480 · 60px

h230px · 480 · 45px

h324px · 480 · 30px

nav-link14px · 400 · 21px

h136px · 700 · 54px

h220px · 480 · 30px

h180px · 700 · 80px

h236px · 600 · 39.6px

body40px · 500 · 48px

list-item16px · 400 · 24px

body16px · 400 · 24px

heading30px · 600 · 36px

heading36px · 600 · 40px

body14px · 500 · 20px

Spacing

8px

12px

16px

80px

24px

32px

4px

20px

Elevation

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(39, 39, 37) 0px -1px 0px 0px inset

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(118, 118, 118, 0.1) 0px 0px 0px 1px, rgba(118, 118, 118, 0.07) 0px 1px 1px 0px, rgba(118, 118, 118, 0.05) 0px 2px 5px 0px, rgba(118, 118, 118, 0.1) 0px 4px 24px -8px, rgba(118, 118, 118, 0.08) 0px 4px 34px -5px

rgba(0, 0, 0, 0) 0px 0px 0px 1px, oklch(0.9999 0 107) 0px 0px 0px 1px, rgba(119, 119, 113, 0.16) 0px 0px 0px 2px, rgba(0, 0, 0, 0.04) 0px 0px 24px 6px, rgba(0, 0, 0, 0.04) 0px 2px 1px 0px, rgba(0, 0, 0, 0.04) 0px 2px 1px -0.5px, rgba(0, 0, 0, 0.04) 0px 4px 3px -1.5px, rgba(0, 0, 0, 0.04) 0px 7px 6px -3px, rgba(0, 0, 0, 0.04) 0px 13px 12px -6px, rgba(0, 0, 0, 0.04) 0px 25px 24px -12px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(247, 244, 237, 0) 0px -5.43568e-06px 0px 0px inset

Components · 6

Remixes of Lovable

Latest remixes

No public remixes yet. Be the first to make one.

Remix it