设计系统 —— 灵感源自 Lovable

1. 视觉主题与氛围

Lovable 的网站通过克制散发温暖。整个页面坐落在一块奶油色、羊皮纸色调的背景（#f7f4ed）之上，这让它立即与多数开发者工具网站的冷白惯例区别开来。这不是为极简而极简——这是一个刻意的选择，让人感到平易近人、近乎手工，像一本精心制作的笔记本。近黑文字（#1c1c1c）与这种温暖奶色形成的对比度让眼睛舒适，同时保持锐利的可读性。

定制 Camera Plain Variable 字体是系统的秘密武器。不像几何无衬线那样散发"科技公司"信号，Camera Plain 具有人文主义的温暖——略圆润的端点、有机的曲线、舒适的阅读节奏。在展示型尺寸（48px–60px）下，600 字重配激进的负字距（-0.9px 到 -1.5px）将标题压缩为自信、编辑感十足的陈述。字体使用 ui-sans-serif, system-ui 作为回退，承认定制字体承载品牌个性。

让 Lovable 视觉系统与众不同的是其透明度驱动的深度模型。系统不是用传统灰阶，而是调节 #1c1c1c 在不同透明度（0.03、0.04、0.4、0.82–0.83）上来创建统一色调范围。页面上的每一种灰色技术上都是同一种色相——只是更透明或更不透明。这创造出几乎不可能用任意十六进制值实现的视觉一致性。边框系统遵循同样的逻辑：1px solid #eceae4 用于浅分隔，1px solid rgba(28, 28, 28, 0.4) 用于更强的交互边界。

关键特征：

• 温暖羊皮纸背景（#f7f4ed）——不是白，不是米色，是经过精心挑选的奶色，手感定制
• Camera Plain Variable 字体带人文主义温暖与展示型编辑感字距
• 透明度驱动的配色系统：所有灰度都来自 #1c1c1c 的不同透明度
• 按钮上的内嵌阴影技巧：rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset
• 温暖中性边框调色板：#eceae4 用于细微，rgba(28,28,28,0.4) 用于交互元素
• 全胶囊圆角（9999px）广泛用于操作按钮与图标容器
• 聚焦状态使用 rgba(0,0,0,0.1) 0px 4px 12px 阴影，营造柔和、温暖的强调
• shadcn/ui + Radix UI 组件原语，配合 Tailwind CSS 工具样式

2. 配色与角色

主色

• 奶色（#f7f4ed）：页面背景、卡片表面、按钮表面。基础——温暖、纸感、人文。
• 炭灰（#1c1c1c）：主文字、标题、深色按钮背景。不是纯黑——有机的温暖。
• 米白（#fcfbf8）：深色背景上的按钮文字、微妙高亮。几乎与纯白不可区分。

中性刻度（基于透明度）

• 炭灰 100%（#1c1c1c）：主文字、标题、深色表面。
• 炭灰 83%（rgba(28,28,28,0.83)）：强次级文字。
• 炭灰 82%（rgba(28,28,28,0.82)）：正文副本。
• 弱化灰（#5f5f5d）：次级文字、描述、说明。
• 炭灰 40%（rgba(28,28,28,0.4)）：交互边框、按钮描边。
• 炭灰 4%（rgba(28,28,28,0.04)）：柔和悬浮背景、微染色。
• 炭灰 3%（rgba(28,28,28,0.03)）：几乎不可见的覆盖层、背景深度。

表面与边框

• 浅奶（#eceae4）：卡片边框、分隔线、图片描边。温暖的分隔线条。
• 奶色表面（#f7f4ed）：卡片背景、段落填充——与页面背景相同，无缝融合。

交互

• 环蓝（#3b82f6 50% 透明度）：--tw-ring-color，Tailwind 聚焦环。
• 聚焦阴影（rgba(0,0,0,0.1) 0px 4px 12px）：聚焦与激活状态阴影——柔和、温暖、扩散。

内嵌阴影

• 按钮内嵌（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）：深色按钮上标志性的多层内嵌阴影。

3. 字体排版规则

字体族

• 主字体：Camera Plain Variable，回退：ui-sans-serif, system-ui
• 字重范围：400（正文/阅读）、480（特殊展示）、600（标题/强调）
• 特性：具有连续字重轴的可变字体——允许像 480 这样细调的中间字重。

层级

原则

• 温暖人文主义声音：Camera Plain Variable 赋予 Lovable 平易近人的个性。略圆润的端点与有机曲线与多数开发者工具使用的锐利几何无衬线形成对比。
• 可变字重作为设计工具：字体支持连续字重值（如 480），实现超越标准字重档位的细致层级。60px 下的 480 字重营造出比 semibold 轻、比常规重的展示风格。
• 大尺度压缩：标题使用负字距（-0.9px 到 -1.5px）实现编辑感冲击。正文保持正常字距以舒适阅读。
• 两种字重，角色清晰：400（正文/UI/链接/按钮）与 600（标题/强调）。狭窄的字重范围通过字号与间距而非字重变化建立层级。

4. 组件样式

按钮

主深色（内嵌阴影）

• 背景：#1c1c1c
• 文字：#fcfbf8
• 内边距：8px 16px
• 圆角：6px
• 阴影：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
• 激活：透明度 0.8
• 聚焦：rgba(0,0,0,0.1) 0px 4px 12px 阴影
• 用于：主 CTA（"Start Building"、"Get Started"）

幽灵 / 描边

• 背景：透明
• 文字：#1c1c1c
• 内边距：8px 16px
• 圆角：6px
• 边框：1px solid rgba(28,28,28,0.4)
• 激活：透明度 0.8
• 聚焦：rgba(0,0,0,0.1) 0px 4px 12px 阴影
• 用于：次级操作（"Log In"、"Documentation"）

奶色表面

• 背景：#f7f4ed
• 文字：#1c1c1c
• 内边距：8px 16px
• 圆角：6px
• 无边框
• 激活：透明度 0.8
• 用于：三级操作、工具栏按钮

胶囊 / 图标按钮

• 背景：#f7f4ed
• 文字：#1c1c1c
• 圆角：9999px（全胶囊）
• 阴影：与主深色相同的内嵌模式
• 透明度：0.5（默认），0.8（激活）
• 用于：附加操作、计划模式切换、语音录制

卡片与容器

• 背景：#f7f4ed（与页面一致）
• 边框：1px solid #eceae4
• 圆角：12px（标准），16px（精选），8px（紧凑）
• 默认无盒阴影——边框定义边界
• 图像卡：1px solid #eceae4 配 12px 圆角

输入与表单

• 背景：#f7f4ed
• 文字：#1c1c1c
• 边框：1px solid #eceae4
• 圆角：6px
• 聚焦：环蓝（rgba(59,130,246,0.5)）描边
• 占位符：#5f5f5d

导航

• 奶色背景上的简洁水平导航，固定
• Logo/字标左对齐（128.75 × 22px）
• 链接：Camera Plain 14–16px 字重 400，#1c1c1c 文字
• CTA：内嵌阴影的深色按钮，6px 圆角
• 移动：6px 圆角按钮的汉堡菜单
• 滚动时微妙边框或无边框

链接

• 颜色：#1c1c1c
• 装饰：下划线（默认）
• 悬浮：主点缀（通过 CSS 变量 hsl(var(--primary))）
• 悬浮时不变色——装饰承载交互信号

图像处理

• 展示/作品集图配 1px solid #eceae4 边框
• 所有图像容器一致 12px 圆角
• 英雄区背后的柔和渐变背景（温暖多色水洗）
• 模板/项目展示的画廊式呈现

特色组件

AI 聊天输入

• 带柔和边框的大型提示输入区
• 带 #eceae4 边框的建议胶囊
• 语音录制 / 计划模式切换按钮为胶囊形（9999px）
• 温暖、邀请式的输入区——非临床感

模板画廊

• 展示项目模板的卡片网格
• 每张卡：图像 + 标题，1px solid #eceae4 边框，12px 圆角
• 悬浮：微妙阴影或边框变暗
• 类别标签作为文字链接

数据条

• 大型指标："0M+" 模式 48px+ 字重 600
• 下方弱化灰描述文字
• 慷慨间距的水平布局

5. 布局原则

间距体系

• 基础单位：8px
• 刻度：8px、10px、12px、16px、24px、32px、40px、56px、80px、96px、128px、176px、192px、208px
• 刻度在高端慷慨扩展——段落使用 80px–208px 垂直间距，营造编辑感呼吸

网格与容器

• 最大内容宽度：约 1200px（居中）
• 英雄：居中单列，配巨大垂直内边距（96px+）
• 特性段：2–3 列网格
• 全宽页脚配多列链接布局
• 居中卡片网格的展示段

留白哲学

• 编辑感慷慨：Lovable 在段落边界的间距是奢华的（80px–208px）。温暖奶色背景让这些扩张显得舒适而非空洞。
• 内容驱动节奏：卡内紧凑间距（12–24px）与宽段落间距形成对比，营造聚焦内容与视觉休息交替的阅读节奏。
• 段落分隔：页脚使用 1px solid #eceae4 边框与 16px 圆角容器。段落由慷慨间距而非边框线定义。

圆角体系

• 微型（4px）：小按钮、交互元素
• 标准（6px）：按钮、输入框、导航菜单
• 舒适（8px）：紧凑卡片、div
• 卡片（12px）：标准卡片、图像容器、模板
• 容器（16px）：大型容器、页脚段
• 全胶囊（9999px）：操作胶囊、图标按钮、开关

6. 深度与层次

阴影哲学：Lovable 的深度系统刻意浅。系统不是用戏剧化投影的浮动卡片，而是依赖温暖边框（#eceae4）与奶色表面来形成柔和的容纳。值得注意的唯一阴影模式是深色按钮上的内嵌阴影——一种微妙的多层技巧：白色高光线位于顶部边缘，深色环与柔投影处理底部。这营造出触感的"压入表面"感而非"悬浮于表面"感。温暖聚焦阴影（rgba(0,0,0,0.1) 0px 4px 12px）刻意扩散且大，形成柔光而非锐利描边。

装饰性深度

• 英雄区：英雄区背后的柔和、温暖多色渐变水洗（粉、橙、蓝）——氛围化，几乎不可见
• 页脚：带温暖色调向底部过渡的渐变背景
• 无生硬段落分隔——间距与背景温暖处理过渡

7. 推荐与避免

推荐

• 使用温暖奶色背景（#f7f4ed）作为页面基础——这是品牌的标志性温暖
• Camera Plain Variable 在展示型尺寸下使用负字距（-0.9px 到 -1.5px）
• 所有灰度都从 #1c1c1c 在不同透明度下派生，以实现色调统一
• 深色按钮使用内嵌阴影技巧制造触感深度
• 用 #eceae4 边框代替阴影来实现卡片容纳
• 保持字重系统狭窄：正文/UI 用 400，标题用 600
• 仅在操作胶囊与图标按钮上使用全胶囊圆角（9999px）
• 激活状态应用透明度 0.8 以获得响应式触感反馈

避免

• 不要把纯白（#ffffff）用作页面背景——奶色是有意为之
• 不要用厚重的盒阴影做卡片——边框才是容纳机制
• 不要引入饱和点缀色——调色板刻意保持温暖中性
• 不要使用 700 字重（粗体）——600 是系统最大字重
• 不要在矩形按钮上用 9999px 圆角——胶囊留给图标/操作开关
• 不要使用锐利聚焦描边——系统使用基于柔和阴影的聚焦指示
• 不要混用边框样式——#eceae4 用于静态，rgba(28,28,28,0.4) 用于交互
• 不要加大标题字距——Camera Plain 在大尺度下设计为紧致

8. 响应式行为

断点

触摸目标

• 按钮：8px 16px 内边距（舒适的触摸）
• 导航：项间足够间距
• 胶囊按钮：9999px 圆角创造大且触摸友好的目标
• 菜单切换：6px 圆角按钮配足够尺寸

折叠策略

• 英雄：60px → 48px → 36px 标题缩放配比例字距
• 导航：水平链接 → 768px 下汉堡菜单
• 特性卡：3 列 → 2 列 → 单列竖向堆叠
• 模板画廊：网格 → 竖向堆叠卡片
• 数据条：水平 → 竖向堆叠
• 页脚：多列 → 单列竖向堆叠
• 段落间距：128px+ → 移动端 64px

图片行为

• 模板截图在各尺寸下保持 1px solid #eceae4 边框
• 12px 圆角在各断点保留
• 画廊图像响应式，保持一致宽高比
• 英雄渐变在移动端柔化/简化

9. 智能体提示指南

快速配色参考

• 主 CTA：炭灰（#1c1c1c）
• 背景：奶色（#f7f4ed）
• 标题文字：炭灰（#1c1c1c）
• 正文：弱化灰（#5f5f5d）
• 边框：#eceae4（静态），rgba(28,28,28,0.4)（交互）
• 聚焦：rgba(0,0,0,0.1) 0px 4px 12px
• 深色按钮上的按钮文字：#fcfbf8

示例组件提示

• "在奶色背景（#f7f4ed）上创建英雄区。标题 60px Camera Plain Variable 字重 600，行高 1.10，字距 -1.5px，颜色 #1c1c1c。副标题 18px 字重 400，行高 1.38，颜色 #5f5f5d。深色 CTA 按钮（#1c1c1c 背景，#fcfbf8 文字，6px 圆角，8px 16px 内边距，内嵌阴影）和幽灵按钮（透明背景，1px solid rgba(28,28,28,0.4) 边框，6px 圆角）。"
• "在奶色（#f7f4ed）背景上设计卡片。边框：1px solid #eceae4。圆角 12px。无盒阴影。标题 20px Camera Plain Variable 字重 400，行高 1.25，颜色 #1c1c1c。正文 14px 字重 400，颜色 #5f5f5d。"
• "构建模板画廊：12px 圆角的卡片网格，1px solid #eceae4 边框，奶色背景。每张卡：图像顶部 12px 圆角，下方标题。悬浮：微妙边框变暗。"
• "创建导航：奶色（#f7f4ed）上黏性。链接 Camera Plain 16px 字重 400，#1c1c1c 文字。深色 CTA 按钮右对齐配内嵌阴影。移动端：6px 圆角的汉堡菜单。"
• "设计数据段：48px Camera Plain 字重 600 大数字，字距 -1.2px，#1c1c1c。下方 16px 字重 400 标签，#5f5f5d。32px 间距的水平布局。"

迭代指南

1. 始终用奶色（#f7f4ed）作为基础——永不用纯白
2. 从 #1c1c1c 在不同透明度下派生灰度，而非使用不同十六进制值
3. 用 #eceae4 边框实现容纳，不用阴影
4. 字距随字号缩放：60px 时 -1.5px，48px 时 -1.2px，36px 时 -0.9px，16px 时正常
5. 两种字重：400（除标题外的一切）与 600（标题）
6. 深色按钮上的内嵌阴影是标志性细节——不要跳过
7. Camera Plain Variable 在 480 字重仅用于特殊展示瞬间