Lovable design.md
Warm paper, black ink, and a sunset rising under the prompt
A calm, warm-cream page with near-black type and black buttons, where all the color comes from one soft blue-to-pink-to-red gradient glowing behind the hero prompt box. Headings are semibold and tightly tracked; cards are cream on cream with rounded corners and almost no shadow.
What “Use in my project” copies
Download https://faundr.dev/resources/design-md/lovable/DESIGN.md and save it as design.md at the project root. It's a design guide inspired by Lovable, measured from their site: follow its colors, fonts, corners and components on every screen you create or change. Where it calls for a paid font, use the free alternative the file names.
The real page
Captured from lovable.dev in English, at 1440 px wide.
Colors
Click a color to copy it. Roles are in English, as in the file.
Type and shape
Camera Plain Variable
Free substitute: Inter 400/500/600 (Google Fonts)
| Role | Size | Weight | Tracking |
|---|---|---|---|
| display | 48px | 600 | -1.92px |
| heading | 36px | 600 | -1.44px |
| heading-sm | 28px | 600 | -1.12px |
| subheading | 24px | 480 | -0.48px |
| body-lg | 18px | 400 | 0 |
| body | 16px | 400 | 0 |
| card-title | 16px | 600 | 0 |
| caption | 14px | 400 | 0 |
- tags
- 9999px
- cards
- 16px
- inputs
- 28px
- buttons
- 6px
The files
Loading…
Screenshots and measurements taken by Faundr from lovable.dev for reference. Inspired by Lovable, not its official design system; Faundr isn’t affiliated with Lovable, and the name and marks belong to it.
Faundr
A design.md only works if someone checks it.
Faundr reads your design.md and checks every screen your AI touches: colors off the guide, rebuilt components, clipped menus, broken mobile.
