lovable.dev

Lovable

Lovable pairs a bold gradient hero with clean neutral surfaces, custom variable typography, and generous centered spacing.

---
source: https://lovable.dev/
brand: Lovable
style: Gradient AI Minimalism
themes: [light]
default_theme: light
extracted: 2026-04-12T22:09:48.062Z
generator: design-extractor
---

# DESIGN.md

## Colors
- background: #fcfbf8
- text: #1c1c1c
- text-muted: #5f5f5d
- primary: #1f55f1
- secondary: #4e92ff
- accent: #486eff
- border: #d8d8d6

## Typography
- heading-1: Camera Plain Variable, ui-sans-serif, system-ui, sans-serif 20px/30px w400
- heading-2: Camera Plain Variable, ui-sans-serif, system-ui, sans-serif 48px/48px w600
- heading-3: Camera Plain Variable, ui-sans-serif, system-ui, sans-serif 36px/39.6px w600
- body: Camera Plain Variable, ui-sans-serif, system-ui, sans-serif 16px/24px w400
- button: Camera Plain Variable, ui-sans-serif, system-ui, sans-serif 14px/21px w400

## Spacing
- 3xs: 1px
- 2xs: 2.25rem
- xs: 68px
- sm: 6rem
- md: 7rem
- lg: 8rem

## Border Radius
- none: 0
- sm: 2px
- md: .3125rem
- lg: 10px
- xl: 18px
- full: 36px

{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "brand": "Lovable",
  "style": "Gradient AI Minimalism",
  "colors": {
    "background": { "value": "#fcfbf8", "role": "background" },
    "text": { "value": "#1c1c1c", "role": "text" },
    "primary": { "value": "#1f55f1", "role": "primary" },
    "secondary": { "value": "#4e92ff", "role": "secondary" },
    "accent": { "value": "#486eff", "role": "accent" }
  },
  "typography": {
    "heading-2": { "fontFamily": "Camera Plain Variable", "fontSize": "48px", "fontWeight": "600", "lineHeight": "48px" },
    "body": { "fontFamily": "Camera Plain Variable", "fontSize": "16px", "fontWeight": "400", "lineHeight": "24px" }
  }
}