soft structuralism

# Style Pack: Soft Structuralism
# 来源: UNIVERSAL_DESIGN.md Style Pack 4
# 适用: 健康、健康相关工具、消费者生产力、作品集、友好 AI 应用、关系或习惯产品
# 情绪: 平静、宽敞、人性化、触感
# 主题: 浅色 (Light)

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

--bg: #F8F8F6
--bg-raised: #FFFFFF
--bg-soft: #EEF1ED
--fg: #1E2428
--fg-muted: #707A7C
--fg-secondary: #4A5456
--border: #E2E6E1
--border-strong: #D0D5CE
--accent: #7FAE9B
--accent-hover: #6A9A87
--accent-fg: #102019
--accent-soft: rgba(127,174,155,0.12)
--accent-dark-fg: #FFFFFF
--success: #5A9E6F
--warning: #C4A24A
--danger: #C45A5A

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

--font-display: "Cabinet Grotesk", "Satoshi", "Plus Jakarta Sans", "Geist", sans-serif
--font-size-display: clamp(2.5rem, 5vw, 4.5rem)
--font-weight-display: 680
--line-height-display: 0.98
--letter-spacing-display: -0.03em

--font-size-h1: clamp(2rem, 3.5vw, 3.25rem)
--font-weight-h1: 650
--line-height-h1: 1.02

--font-size-h2: clamp(1.5rem, 2.5vw, 2.25rem)
--font-weight-h2: 600
--line-height-h2: 1.08

--font-sans: "Geist", system-ui, sans-serif
--font-size-body: 1rem
--font-weight-body: 400
--line-height-body: 1.68
--letter-spacing-body: -0.006em

--font-size-label: 0.75rem
--font-weight-label: 650
--line-height-label: 1
--letter-spacing-label: 0.04em

--font-mono: ui-monospace, monospace
--font-size-mono: 0.813rem
--font-weight-mono: 500
--line-height-mono: 1.45

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

--radius-none: 0px
--radius-sm: 8px
--radius-md: 14px
--radius-lg: 20px
--radius-xl: 28px
--radius-2xl: 32px
--radius-full: 999px

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

--space-xs: 4px
--space-sm: 8px
--space-md: 16px
--space-lg: 24px
--space-xl: 40px
--space-2xl: 56px
--space-section: 96px

---
## 阴影 (Shadows)
---

--shadow-none: none
--shadow-sm: 0 2px 8px rgba(30,36,40,0.03)
--shadow-md: 0 4px 16px rgba(30,36,40,0.05)
--shadow-lg: 0 8px 28px rgba(30,36,40,0.06)

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

--max-width-desktop: 1200px
--content-padding-desktop: 52px
--content-padding-tablet: 32px
--content-padding-mobile: 20px
--nav-height-desktop: 68px
--nav-height-mobile: 56px
--section-gap-desktop: 96px
--section-gap-mobile: 64px

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

# 主按钮 (Primary Button) — 柔和绿色填充
--btn-primary-bg: var(--accent)
--btn-primary-fg: var(--accent-dark-fg)
--btn-primary-hover-bg: var(--accent-hover)
--btn-primary-radius: var(--radius-full)
--btn-primary-padding-x: 22px
--btn-primary-padding-y: 12px
--btn-primary-font-weight: 600

# 次按钮 (Secondary Button)
--btn-secondary-bg: transparent
--btn-secondary-fg: var(--fg)
--btn-secondary-border: var(--border-strong)
--btn-secondary-hover-bg: var(--bg-soft)
--btn-secondary-radius: var(--radius-full)
--btn-secondary-padding-x: 22px
--btn-secondary-padding-y: 12px

# 卡片 (Card) — 嵌套软壳
--card-bg: var(--bg-raised)
--card-fg: var(--fg)
--card-border: var(--border)
--card-radius: var(--radius-xl)
--card-padding: 28px
--card-shadow: var(--shadow-sm)

# 软卡片 (Soft Card) — 更大圆角
--soft-card-bg: var(--bg-soft)
--soft-card-radius: var(--radius-2xl)
--soft-card-padding: 32px

# 输入框 (Input)
--input-bg: var(--bg-raised)
--input-fg: var(--fg)
--input-border: var(--border-strong)
--input-radius: var(--radius-lg)
--input-padding-x: 16px
--input-padding-y: 12px
--input-focus-ring: 0 0 0 3px var(--accent-soft)
--input-height: 46px

# 徽章 (Badge)
--badge-bg: var(--accent-soft)
--badge-fg: var(--accent)
--badge-radius: var(--radius-full)
--badge-padding-x: 12px
--badge-padding-y: 5px

# 导航 (Navigation)
--nav-bg: rgba(248,248,246,0.9)
--nav-backdrop: blur(8px)
--nav-border: var(--border)

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

--duration-fast: 160ms
--duration-normal: 240ms
--duration-slow: 400ms
--easing-spring: cubic-bezier(0.34, 1.4, 0.64, 1)

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

1. 颜色锁定：柔和绿色 #7FAE9B
2. 形状锁定：小按钮允许 999px pill，卡片软 20-28px
3. 主题锁定：柔和浅灰画布 (#F8F8F6)
4. 字体锁定：Cabinet Grotesk/Satoshi + Geist
5. 间距锁定：宽松间距，4, 8, 16, 24, 40, 56, 96
6. 动效：弹簧式、柔和、仅透明度+变形

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

1. 大平静标题英雄区 (Large Calm Headline Hero): + 柔和图片/设备模型
2. 宽白空间 (Wide White Space Sections)
3. 交错卡片 (Staggered Cards): 软面板
4. 评价+照片 (Testimonials with Photos)
5. 引导步骤 (Onboarding Steps)
6. 定价卡片 (Pricing Cards)

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

- 最大内容宽度: 1200px
- 内容区内边距: 52px
- 段落垂直间距: 96px

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

- 内容区内边距: 20px
- 段落垂直间距: 64px

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

- hover: 弹簧式轻微扩展
- focus-visible: 3px 柔绿光环
- loading: 绿色脉冲

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

使用 Soft Structuralism 风格。

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

- 不要使用幼稚粉彩过载
- 不要无规则地混合过圆角和过圆按钮
- 不要使用通用健康米色
- 不要使用重阴影
- 不要使用尖锐元素
- 不要使用暗色段落（除非特殊需求）

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