Lovable. Warm parchment canvas behind a single prismatic horizon.
- AI
- Light theme
- 9 colors
- 1 typeface
Lovable wraps an AI builder tool in a warm parchment world where the only spectacle is a single gradient horizon in the hero — everywhere else, the interface retreats into cream surfaces, near-black text, and one custom variable-weight sans-serif. The palette is almost entirely achromatic: warm off-whites and charcoal, with color appearing only as the hero's ambient rainbow gradient and never in UI controls. Components are pill-shaped or softly rounded, borders are warm beige rather than cool gray, and shadows are barely-there inset strokes rather than drop shadows. The overall rhythm is compact vertically but generously padded horizontally, creating a feeling of quiet space inside small containers.
Lovable design system
Brand1
Full-width hero background gradient — decorative brand moment, never used on individual UI elements
Accent1
Reserved accent from CSS tokens (--bg-accent). Inline text links, focus rings, accent highlights when needed
Neutrals7
Highest-emphasis text (hero headline, button labels in chat input), icon fills
Primary text, nav labels, icon fills, inverse button background. Near-black rather than pure black keeps the warm tone consistent
Secondary text, placeholder text, muted nav labels, subheadings
Subtle box-shadow tints, disabled borders, secondary dividers
All borders — nav dividers, card outlines, input strokes, section separators. Warm beige rather than cool gray gives the entire UI its distinctive non-tech softness
Card backgrounds, elevated surface panels, secondary containers
Page canvas, primary background, card surfaces when on darker parents
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Parchment on Indigo Accent
6.84 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictFails AAA 7
