lovart clean blue saas

# Style Pack: Lovart Clean Blue SaaS
# 来源: clone-lovart.ai
# 适用: AI 创意工具、SaaS 产品、B2B 平台、设计工具、作品集、代理商网站
# 情绪: 干净、专业、现代、信赖、清爽
# 主题: 浅色 (Light)

---
## 配色 Token (Colors)
---

--bg: #f7f8fa
--bg-raised: #ffffff
--bg-elevated: #e5e6ec
--bg-hover: #f5f5f5
--fg: #141414
--fg-primary: #100f09
--fg-secondary: #2f3640
--fg-muted: #919191
--fg-light: #86909c
--fg-placeholder: #c1c5cc
--border: rgba(0,0,0,0.06)
--border-strong: rgba(0,0,0,0.1)
--border-input: #c4c4c4
--border-accent: #e5e5e5
--accent: #3b82f6
--accent-hover: #147dff
--accent-fg: #ffffff
--accent-soft: rgba(59,130,246,0.08)
--accent-strong: rgba(59,130,246,0.15)
--success: #22c55e
--success-soft: rgba(34,197,94,0.1)
--warning: #f59e0b
--warning-soft: rgba(245,158,11,0.1)
--danger: #ef4444
--danger-soft: rgba(239,68,68,0.1)
--shadow-color: rgba(0,0,0,0.06)
--overlay: rgba(0,0,0,0.5)

---
## 字体 (Typography)
---

# Display / 超大品牌标题
--font-display: "featureDisplay", "Poppins", "Inter", sans-serif
--font-size-display: clamp(2.75rem, 5.5vw, 4.5rem)
--font-weight-display: 700
--line-height-display: 0.93
--letter-spacing-display: -0.04em

# H1
--font-size-h1: clamp(2.25rem, 4vw, 3.25rem)
--font-weight-h1: 700
--line-height-h1: 0.98
--letter-spacing-h1: -0.035em

# H2
--font-size-h2: clamp(1.75rem, 3vw, 2.25rem)
--font-weight-h2: 650
--line-height-h2: 1.05
--letter-spacing-h2: -0.025em

# H3
--font-size-h3: clamp(1.25rem, 2vw, 1.5rem)
--font-weight-h3: 600
--line-height-h3: 1.12

# Deck / 导读文字 (特殊摘要段落)
--font-deck: "featureDeck", "Poppins", sans-serif
--font-size-deck: 1.125rem
--font-weight-deck: 500
--line-height-deck: 1.45

# Body / 正文
--font-sans: "Inter", "Poppins", ui-sans-serif, system-ui, sans-serif
--font-size-body: 1rem
--font-weight-body: 400
--line-height-body: 1.6
--letter-spacing-body: -0.008em

# Body 小号
--font-size-body-sm: 0.875rem
--font-weight-body-sm: 400
--line-height-body-sm: 1.55

# Condensed / 压缩字体 (数据/标签用)
--font-condensed: "Barlow Condensed", "gtStandard", sans-serif
--font-size-condensed: 1rem
--font-weight-condensed: 600
--line-height-condensed: 1
--letter-spacing-condensed: 0.06em
--text-transform-condensed: uppercase

# Label / 标签
--font-size-label: 0.75rem
--font-weight-label: 600
--line-height-label: 1
--letter-spacing-label: 0.04em

# Small / 小字
--font-size-xs: 0.625rem
--font-weight-xs: 500
--line-height-xs: 1.3

# Mono / 代码
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace
--font-size-mono: 0.875rem
--font-weight-mono: 500
--line-height-mono: 1.5

---
## 圆角 (Border Radius)
---

--radius-none: 0px
--radius-xs: 2px
--radius-sm: 3px
--radius-md: 8px
--radius-lg: 10px
--radius-xl: 16px
--radius-full: 999px
--radius-pill: 100px

---
## 间距 (Spacing)
---

--space-0: 0px
--space-1: 2px
--space-2: 4px
--space-3: 6px
--space-4: 8px
--space-5: 12px
--space-6: 16px
--space-8: 20px
--space-10: 24px
--space-12: 32px
--space-14: 40px
--space-16: 48px
--space-18: 56px
--space-20: 60px
--space-24: 72px
--space-32: 96px

---
## 阴影 (Shadows) — 干净轻薄系统
---

--shadow-sm: 0 1px 3px rgba(0,0,0,0.04)
--shadow-md: 0 4px 12px rgba(0,0,0,0.06)
--shadow-lg: 0 8px 24px rgba(0,0,0,0.08)
--shadow-xl: 0 12px 36px rgba(0,0,0,0.1)
--shadow-input: inset 0 0 0 1000px #dce4ef
--shadow-focus: 0 0 0 2px rgba(59,130,246,0.25)
--shadow-card-hover: 0 4px 12px rgba(0,0,0,0.1), 0 0 0 2px rgba(0,0,0,0.2)

---
## 布局 (Layout)
---

# 桌面端 (>1024px)
--max-width: 1280px
--content-padding-desktop: 40px
--nav-height: 64px
--section-gap-desktop: 60px
--grid-columns-desktop: 12

# 平板端 (768px-1024px)
--content-padding-tablet: 28px
--nav-height-tablet: 56px
--section-gap-tablet: 44px
--grid-columns-tablet: 6

# 移动端 (<768px)
--content-padding-mobile: 20px
--nav-height-mobile: 52px
--section-gap-mobile: 32px
--grid-columns-mobile: 4

---
## 组件规格 (Component Tokens)
---

# 主按钮 (Primary Button) — 蓝色填充
--btn-primary-bg: var(--accent)
--btn-primary-fg: var(--accent-fg)
--btn-primary-hover-bg: var(--accent-hover)
--btn-primary-radius: var(--radius-md)
--btn-primary-padding-x: 20px
--btn-primary-padding-y: 10px
--btn-primary-font-size: 0.938rem
--btn-primary-font-weight: 600
--btn-primary-shadow: var(--shadow-sm)
--btn-primary-hover-shadow: var(--shadow-md)

# 次按钮 (Secondary Button)
--btn-secondary-bg: var(--bg-raised)
--btn-secondary-fg: var(--fg)
--btn-secondary-border: var(--border-strong)
--btn-secondary-hover-bg: var(--bg-hover)
--btn-secondary-radius: var(--radius-md)
--btn-secondary-padding-x: 20px
--btn-secondary-padding-y: 10px

# 大按钮 (Large Button / Hero CTA)
--btn-lg-padding-x: 28px
--btn-lg-padding-y: 14px
--btn-lg-font-size: 1rem
--btn-lg-radius: var(--radius-lg)

# 卡片 (Card) — 白底清爽
--card-bg: var(--bg-raised)
--card-fg: var(--fg)
--card-border: var(--border)
--card-radius: var(--radius-lg)
--card-padding: 24px
--card-shadow: var(--shadow-sm)
--card-hover-shadow: var(--shadow-md)
--card-hover-transform: translateY(-1px)

# 输入框 (Input)
--input-bg: var(--bg-raised)
--input-fg: var(--fg)
--input-placeholder: var(--fg-placeholder)
--input-border: var(--border-input)
--input-radius: var(--radius-md)
--input-padding-x: 14px
--input-padding-y: 10px
--input-focus-border: var(--accent)
--input-focus-ring: var(--shadow-focus)
--input-height: 42px

# 徽章 (Badge)
--badge-bg: var(--accent-soft)
--badge-fg: var(--accent)
--badge-radius: var(--radius-full)
--badge-padding-x: 10px
--badge-padding-y: 3px
--badge-font-size: 0.75rem
--badge-font-weight: 600

# 导航 (Navigation)
--nav-bg: rgba(247,248,250,0.85)
--nav-backdrop: blur(10px)
--nav-border: var(--border)
--nav-link-fg: var(--fg-secondary)
--nav-link-hover-fg: var(--fg)
--nav-link-active-fg: var(--accent)

# 分割线 (Divider)
--divider-color: var(--border)
--divider-width: 1px

# 表格 (Table)
--table-header-bg: var(--bg)
--table-header-fg: var(--fg-muted)
--table-row-hover-bg: rgba(59,130,246,0.03)
--table-border: var(--border)
--table-cell-padding: 10px 16px

# 模态框 (Modal)
--modal-bg: var(--bg-raised)
--modal-backdrop: rgba(0,0,0,0.4)
--modal-backdrop-blur: blur(3px)
--modal-radius: var(--radius-xl)
--modal-padding: 28px
--modal-shadow: var(--shadow-lg)

# 提示条 (Alert/Notification)
--alert-success-bg: var(--success-soft)
--alert-success-fg: #166534
--alert-warning-bg: var(--warning-soft)
--alert-warning-fg: #92400e
--alert-danger-bg: var(--danger-soft)
--alert-danger-fg: #991b1b
--alert-radius: var(--radius-md)
--alert-padding: 12px 16px

# 工具提示 (Tooltip)
--tooltip-bg: var(--fg)
--tooltip-fg: var(--bg-raised)
--tooltip-radius: var(--radius-sm)
--tooltip-padding: 6px 12px
--tooltip-shadow: var(--shadow-md)

---
## 动效 (Motion)
---

--duration-instant: 100ms
--duration-fast: 150ms
--duration-normal: 220ms
--duration-slow: 350ms
--duration-reveal: 500ms
--easing-default: cubic-bezier(0.4, 0, 0.2, 1)
--easing-smooth: cubic-bezier(0.25, 0.1, 0.25, 1)
--easing-decelerate: cubic-bezier(0, 0, 0.2, 1)

# 滚动渐显 (Scroll Reveal)
--reveal-duration: 600ms
--reveal-delay-step: 100ms
--reveal-offset: 40px

---
## 设计铁律 (Design Locks)
---

1. 颜色锁定：唯一主强调色蓝色 #3b82f6，hover 变深 #147dff，状态色仅用于语义
2. 形状锁定：中等圆角体系，按钮 8px，卡片 10-16px，pill 100px
3. 阴影锁定：极轻阴影 (透明度 <0.06-0.1)，清爽无笨重感
4. 主题锁定：浅色画布 #f7f8fa，白色卡片
5. 字体锁定：Display 用 featureDisplay/Poppins，Body 用 Inter，Condensed 用于数据标签
6. 间距锁定：中等密度 (2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 56, 60, 72, 96)

---
## 布局家族 (Layout Families)
---

1. 分割英雄区 (Split Hero): 左文案右产品图/截图，5/7 分割
2. 功能对比网格 (Feature Grid): 不等大卡片交错排列
3. 作品集画廊 (Gallery Grid): 图片/作品网格展示
4. 流程步骤 (Workflow Steps): 水平步骤条或编号卡片
5. 客户 Logo 墙 (Logo Wall): 灰度 Logo 横排
6. 评价卡片 (Testimonial Cards): 引用 + 头像 + 职位
7. 定价卡片 (Pricing Cards): 3-4 列，推荐方案加蓝色边框
8. FAQ 手风琴 (FAQ Accordion): 紧凑可展开 Q&A

---
## PC端布局规范
---

- 最大内容宽度: 1280px
- 内容区内边距: 40px
- 导航高度: 64px
- 段落垂直间距: 60px 至 96px
- 12列网格系统
- Hero 标题用 featureDisplay 或 Poppins，副标题用 featureDeck，不超过 24 字
- 主要 CTA 必须在首屏可见

---
## 移动端布局规范 (<768px)
---

- 内容区内边距: 20px
- 导航高度: 52px
- 段落垂直间距: 32px 至 48px
- 4列网格系统
- 所有卡片全宽堆叠
- 按钮全宽或 ≥44px 触摸目标
- 汉堡菜单

---
## 平板端布局规范 (768px-1024px)
---

- 内容区内边距: 28px
- 导航高度: 56px
- 段落垂直间距: 44px 至 60px
- 6列网格系统
- 卡片2列

---
## 组件状态 (Component States)
---

- hover: 颜色加深 + 轻微上移 (-1px) + 阴影稍深
- focus-visible: 2px 蓝色光环
- active: 轻微缩放 scale(0.98)
- disabled: 40% 透明度，pointer-events: none
- loading: 骨架屏或蓝色 shimmer 动画
- empty: 虚线边框占位 + 引导文字

---
## 使用提示词模板 (Prompt Template)
---

使用 Lovart Clean Blue SaaS 风格。

项目：
- 产品：[名称]
- 受众：[目标用户]
- 页面类型：[landing / product / portfolio]
- 转化目标：[目标 CTA]

要求：
- 浅灰画布 (#f7f8fa)，白色卡片，清爽无笨重阴影
- 唯一强调色蓝色 (#3b82f6)，hover 深蓝 (#147dff)
- Display 字体 featureDisplay/Poppins，正文 Inter
- 中等圆角 (8px 按钮, 10-16px 卡片)
- 避免重阴影、避免多彩 CTA、避免暗色段落
- 至少 4 种布局家族防止重复感
- 移动端响应式，全宽卡片堆叠

---
## 禁止清单 (Anti-Slop Ban List)
---

- 不要使用重阴影 (最大 shadow 透明度 <0.1)
- 不要使用渐变背景
- 不要使用玻璃态 (glassmorphism)
- 不要使用紫色/绿色/橙色 CTA
- 不要使用闪烁动画
- 不要使用伪仪表盘
- 不要使用三个相同大小的功能卡片排成一行
- 不要使用装饰性的大圆角 (>20px)
- 不要使用装饰性标题编号 (01, 02, 03)
- 不要使用 <0.5 对比度的灰色文字

本文档为站内渲染。原始文件本地路径：saas/source/knowledge-world/Knowledge-World-设计配色-lovart-clean-blue-saas-fea3e7.txt（仅本地保留，不入库不部署）