developer tools Color System
Lovable's website radiates warmth through restraint. The entire page sits on a creamy, parchment-ton...
Lovable's website radiates warmth through restraint. The entire page sits on a c...
Lovable uses #f7f4ed as the primary accent for interactive elements
Carefully selected 8 colors for developer-tools applications
Uses negative letter-spacing, gradient and more
#f7f4ed
Page background, card surfaces, button surfaces. The foundation — warm, paper-like, human.
#1c1c1c
Primary text, headings, dark button backgrounds. Not pure black — organic warmth.
#fcfbf8
Button text on dark backgrounds, subtle highlight. Barely distinguishable from pure white.
#1c1c1c
Primary text, headings, dark surfaces.
rgba(28,28,28,0.83)
Strong secondary text.
rgba(28,28,28,0.82)
Body copy.
#5f5f5d
Secondary text, descriptions, captions.
rgba(28,28,28,0.4)
Interactive borders, button outlines.
/* Lovable Color System */
:root {
--lovable-cream: #f7f4ed;
--lovable-charcoal: #1c1c1c;
--lovable-off-white: #fcfbf8;
--lovable-charcoal-100%: #1c1c1c;
--lovable-charcoal-83%: rgba(28,28,28,0.83);
--lovable-charcoal-82%: rgba(28,28,28,0.82);
--lovable-muted-gray: #5f5f5d;
--lovable-charcoal-40%: rgba(28,28,28,0.4);
}
/* Example usage */
.lovable-button-primary {
background-color: var(--lovable-cream);
color: #ffffff;
border: none;
border-radius: 8px;
padding: 8px 15px;
}Cursor's website is a study in warm minimalism meets code-editor elegance. The e...
Expo's interface is a luminous, confidence-radiating developer platform built on...
Linear's website is a masterclass in dark-mode-first product design — a near-bla...
Mintlify's website is a study in documentation-as-product design — a white, airy...