{
  "schemaVersion": 1,
  "source": {
    "sourceName": "getdesign.md",
    "originalDetailUrl": "https://getdesign.md/lovable/design-md",
    "fallbackRawUrl": "https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/lovable/DESIGN.md",
    "mirrorSource": "github:VoltAgent/awesome-design-md",
    "websiteUrl": "https://lovable.dev/"
  },
  "identity": {
    "id": "P0-83",
    "slug": "lovable",
    "brand": "Lovable",
    "titleZh": "Lovable 主题",
    "titleEn": "Lovable",
    "descriptionZh": "Lovable 的 Design.md 主题展示，围绕AI、媒体内容、趣味互动、SaaS 产品组织页面。",
    "descriptionEn": "AI full-stack builder. Playful gradients, friendly dev aesthetic."
  },
  "tags": {
    "sourceTags": [],
    "generatedTags": [
      "ai",
      "request-flow",
      "media",
      "playful"
    ],
    "designTags": [],
    "distributionTags": [
      "AI",
      "媒体内容",
      "趣味互动",
      "SaaS 产品",
      "开发工具",
      "浅色界面",
      "B2B 产品",
      "效率工具",
      "专业工具"
    ]
  },
  "assets": {
    "designMd": {
      "path": "DESIGN.md",
      "sourcePath": ".local/design-md-batch-regression/getdesign/lovable/DESIGN.md"
    },
    "tailwind": {
      "path": "tw.css",
      "sourcePath": ".local/design-md-batch-regression/getdesign/lovable/tw.css"
    },
    "tokens": {
      "path": "assets/tokens.json",
      "method": "derived_from_design_md_and_metadata"
    },
    "cover": null,
    "previewHtml": {
      "type": "local-preview",
      "path": "assets/official-homepage.webp",
      "publicPath": "assets/official-homepage.webp",
      "importPath": "./assets/official-homepage.webp?url",
      "sourcePath": "assets/official-homepage.webp"
    }
  },
  "tokens": {
    "palette": [
      "#f7f4ed",
      "#a0a0a0",
      "#000000",
      "#fbbf24",
      "#8a8a8a",
      "#0a0a0a",
      "#e0e0e0",
      "#ffffff"
    ],
    "typography": {
      "display": "Inter",
      "body": "Inter",
      "mono": "ui-monospace",
      "hints": [
        "Inter",
        "ui-monospace"
      ]
    },
    "radius": {
      "control": "7px",
      "card": "7px",
      "preview": "7px",
      "pill": "9999px",
      "source": "design-md"
    },
    "spacing": {
      "xxs": "48px",
      "xs": "60px",
      "sm": "0.9px",
      "md": "1.5px",
      "lg": "3.00rem",
      "xl": "1.2px",
      "xxl": "8px",
      "xxxl": "16px",
      "section": "80px",
      "section-lg": "208px",
      "hero": "96px",
      "band": "24px",
      "space-13": "1px",
      "space-14": "600px",
      "space-15": "36px",
      "space-16": "128px",
      "source": "design-md"
    }
  },
  "previewImages": [
    {
      "type": "local-preview",
      "path": "assets/official-homepage.webp"
    }
  ],
  "display": {
    "brand": "Lovable 主题",
    "brandAlias": "Lovable",
    "description": "Lovable 的 Design.md 主题展示，围绕AI、媒体内容、趣味互动、SaaS 产品组织页面。",
    "descriptionEn": "AI full-stack builder. Playful gradients, friendly dev aesthetic.",
    "variant": "saas-devtool",
    "distributionTags": [
      "AI",
      "媒体内容",
      "趣味互动",
      "SaaS 产品",
      "开发工具",
      "浅色界面",
      "B2B 产品",
      "效率工具",
      "专业工具"
    ],
    "fontStylesheets": [
      "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
    ],
    "palette": [
      {
        "color": "#f7f4ed",
        "labelZh": "主色",
        "labelEn": "Primary",
        "textColor": "#171717"
      },
      {
        "color": "#a0a0a0",
        "labelZh": "主色悬停",
        "labelEn": "Primary Hover",
        "textColor": "#171717"
      },
      {
        "color": "#000000",
        "labelZh": "辅助色",
        "labelEn": "Secondary",
        "textColor": "#ffffff"
      },
      {
        "color": "#fbbf24",
        "labelZh": "强调色",
        "labelEn": "Accent",
        "textColor": "#171717"
      },
      {
        "color": "#8a8a8a",
        "labelZh": "背景色",
        "labelEn": "Background",
        "textColor": "#ffffff"
      },
      {
        "color": "#0a0a0a",
        "labelZh": "表面色",
        "labelEn": "Surface",
        "textColor": "#ffffff"
      },
      {
        "color": "#e0e0e0",
        "labelZh": "文本色",
        "labelEn": "Text",
        "textColor": "#171717"
      },
      {
        "color": "#ffffff",
        "labelZh": "边框色",
        "labelEn": "Border",
        "textColor": "#171717"
      }
    ],
    "shadows": [
      {
        "label": "阴影 1 - Shadow 1",
        "value": "rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset",
        "cssValue": "rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset",
        "description": "Inset shadow technique on buttons: `rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset`"
      },
      {
        "label": "阴影 2 - Shadow 2",
        "value": "rgba(0,0,0,0.1) 0px 4px 12px",
        "cssValue": "rgba(0,0,0,0.1) 0px 4px 12px",
        "description": "Focus state uses `rgba(0,0,0,0.1) 0px 4px 12px` shadow for soft, warm emphasis"
      },
      {
        "label": "阴影 3 - Shadow 3",
        "value": "rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px",
        "cssValue": "rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px",
        "description": "Button Inset (`rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px`): The signature multi-layer inset shadow on dark buttons."
      },
      {
        "label": "阴影 4 - Shadow 4",
        "value": "rgba(0,0,0,0) 0px 0px 0px 0px, rgba(0,0,0,0) 0px 0px 0px 0px, rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px",
        "cssValue": "rgba(0,0,0,0) 0px 0px 0px 0px, rgba(0,0,0,0) 0px 0px 0px 0px, rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px",
        "description": "Shadow: `rgba(0,0,0,0) 0px 0px 0px 0px, rgba(0,0,0,0) 0px 0px 0px 0px, rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px`"
      },
      {
        "label": "阴影 5 - Shadow 5",
        "value": "rgba(59,130,246,0.5)",
        "cssValue": "rgba(59,130,246,0.5)",
        "description": "Focus: ring blue (`rgba(59,130,246,0.5)`) outline"
      }
    ],
    "borders": [
      {
        "label": "边框 1 - Border 1",
        "value": "#eceae4",
        "cssValue": "#eceae4",
        "description": "What makes Lovable's visual system distinctive is its opacity-driven depth model. Rather than using a traditional gray scale, the system modulates `#1c1c1c` at varying opacities (0.03, 0.04, 0.4, 0.82–0.83) to create a unified tonal range. Every shade of gray on the page is technically the same hue — just more or less transparent. This creates a visual coherence that's nearly impossible to achieve with arbitrary hex values. The border system follows suit: `1px solid #eceae4` for light divisions and `1px solid rgba(28, 28, 28, 0.4)` for stronger interactive boundaries."
      },
      {
        "label": "边框 2 - Border 2",
        "value": "rgba(28,28,28,0.4)",
        "cssValue": "rgba(28,28,28,0.4)",
        "description": "Warm neutral border palette: `#eceae4` for subtle, `rgba(28,28,28,0.4)` for interactive elements"
      },
      {
        "label": "边框 3 - Border 3",
        "value": "#f7f4ed",
        "cssValue": "#f7f4ed",
        "description": "Lovable's website radiates warmth through restraint. The entire page sits on a creamy, parchment-toned background (`#f7f4ed`) that immediately separates it from the cold-white conventions of most developer tool sites. This isn't minimalism for minimalism's sake — it's a deliberate choice to feel approachable, almost analog, like a well-crafted notebook. The near-black text (`#1c1c1c`) against this warm cream creates a contrast ratio that's easy on the eyes while maintaining sharp readability."
      }
    ],
    "typography": [
      "Inter",
      "ui-monospace"
    ],
    "previewImages": [
      {
        "type": "local-preview",
        "path": "assets/official-homepage.webp"
      }
    ],
    "panels": [
      {
        "eyebrow": "产品",
        "title": "开发工具界面",
        "body": "适合工作台、文档、控制台和开发者产品。"
      },
      {
        "eyebrow": "Token",
        "title": "颜色与字体可复用",
        "body": "页面从本地 metadata 与 Design.md 提取 palette、typography 和标签，用于快速预览主题质感。"
      },
      {
        "eyebrow": "组件",
        "title": "面向真实界面片段",
        "body": "按钮、输入、卡片和间距样例保持克制，便于比较不同主题的系统性差异。"
      }
    ],
    "usageGuidance": {
      "do": [
        "建议：Use the warm cream background ({#f7f4ed}) as the page foundation — it's the brand's signature warmth。",
        "建议：Use Camera Plain Variable at display sizes with negative letter-spacing (-0.9px to -1.5px)。",
        "建议：Derive all grays from {#1c1c1c} at varying opacity levels for tonal unity。",
        "建议：Use the inset shadow technique on dark buttons for tactile depth。",
        "建议：Use {#eceae4} borders instead of shadows for card containment。"
      ],
      "dont": [
        "避免：use pure white ({#ffffff}) as a page background — the cream is intentional。",
        "避免：use heavy box-shadows for cards — borders are the containment mechanism。",
        "避免：introduce saturated accent colors — the palette is intentionally warm-neutral。",
        "避免：use weight 700 (bold) — 600 is the maximum weight in the system。",
        "避免：apply 9999px radius on rectangular buttons — pills are for icon/action toggles。"
      ]
    },
    "radius": {
      "control": "7px",
      "card": "7px",
      "preview": "7px",
      "pill": "9999px",
      "source": "design-md"
    },
    "spacing": {
      "xxs": "48px",
      "xs": "60px",
      "sm": "0.9px",
      "md": "1.5px",
      "lg": "3.00rem",
      "xl": "1.2px",
      "xxl": "8px",
      "xxxl": "16px",
      "section": "80px",
      "section-lg": "208px",
      "hero": "96px",
      "band": "24px",
      "space-13": "1px",
      "space-14": "600px",
      "space-15": "36px",
      "space-16": "128px",
      "source": "design-md"
    }
  },
  "status": {
    "displayPage": "done",
    "collectionErrors": []
  }
}
