Community cards · surface tiles, radius 20, soft warm ring
Controls · every button variant, state, and input
Name your project…
sales-team-crm
Primary is a white button (near-black #1a1a18 text) that brightens to pure white on hover; ghost fills to surface #272725; chips lift from #272725 to #2e2e2c. Disabled drops to 45% opacity. Inputs sit on surface #1c1c1a with a .5px border; focus blooms a soft warm ring rgba(119,119,113,.4), never a hard accent line.
Typography · Camera Plain, geometric humanist · display caps at 600
Hero h1 · 48 · 600 · -1.2pxBuild something Lovable
Section h2 · 36 · 600 · -0.9pxStart with an idea
Eyebrow · 20/30 · 400 · #c5c1baAI App Builder
Body · 16 · 400 · #fcfbf8Describe your app and Lovable builds it, cozy by default.
UI / button · 14/21 · 400Nav · buttons · chips
Caption · 13 · 400 · #a5a19aRemixed 1.2k times
Palette · warm charcoal neutrals + white; the heart gradient is the only accent
Surfaces & borders
canvas#1f1f1e
surface-1#1c1c1a
surface-2#272725
surface-3#2e2e2c
border255,255,255,.08
warm ring119,119,113,.4
Text
text#ffffff
cream#fcfbf8
text-2#c5c1ba
muted#a5a19a
on-light#1a1a18
Brand accent · the Lovable heart gradient
orange#fe7b02
red-pink#ff0105
heart gradient#fe7b02 → #ff0105
Depth & motion · soft warm rings over shadows
warm ring .5px
composer lift
gradient sweep
Elevation: soft warm rings 0 0 0 .5px rgba(119,119,113,.4) plus a faint drop, never hard borders or heavy shadows. Motion: uniform 150ms micro-transitions on cubic-bezier(.4,0,.2,1); the one piece of atmosphere is the heart-gradient sweep easing in slowly over 1.6s, plus a gentle heartbeat on the brand mark. Nothing abrupt.