# Style Pack: Soft Premium Calm # 来源: DESGIN.md Style Pack 3 # 适用: 健康、生产力、个人 CRM、金融温和 UI、高级微型 SaaS、教练、社区、习惯产品 # 情绪: 柔软、昂贵、清晰、关怀、安静 # 主题: 浅色 (Light) --- ## 配色 Token (Colors) --- --bg: #F6F1E8 --bg-raised: #FBF8F1 --bg-elevated: #FFFFFF --fg: #1F2420 --fg-muted: #6A635A --border: #D7CDBD --border-soft: #E6DED1 --accent: #5D7C6B --accent-hover: #496657 --accent-fg: #FFFFFF --accent-soft: rgba(93,124,107,0.08) --success: #4A8C6F --warning: #C0984A --danger: #C4625A --- ## 字体 (Typography) --- --font-display: "Inter", "Satoshi", "Avenir", ui-sans-serif, sans-serif --font-size-display: clamp(3rem, 7vw, 6.5rem) --font-weight-display: 650 --line-height-display: 0.92 --letter-spacing-display: -0.06em --font-size-h1: clamp(2.5rem, 5vw, 5rem) --font-weight-h1: 650 --line-height-h1: 0.98 --letter-spacing-h1: -0.055em --font-size-h2: clamp(1.875rem, 3.2vw, 3.5rem) --font-weight-h2: 620 --line-height-h2: 1.03 --letter-spacing-h2: -0.045em --font-sans: "Inter", "Satoshi", ui-sans-serif, system-ui, sans-serif --font-size-body: 1.063rem --font-weight-body: 400 --line-height-body: 1.7 --letter-spacing-body: -0.008em --font-size-label: 0.78rem --font-weight-label: 650 --line-height-label: 1 --letter-spacing-label: 0.06em --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-sm: 6px --radius-md: 10px --radius-lg: 20px --radius-xl: 28px --radius-2xl: 32px --radius-full: 999px --- ## 间距 (Spacing) --- --space-xxs: 4px --space-xs: 8px --space-sm: 12px --space-md: 16px --space-lg: 24px --space-xl: 32px --space-2xl: 48px --space-3xl: 64px --space-4xl: 96px --space-5xl: 128px --- ## 阴影 (Shadows) --- --shadow-none: none --shadow-sm: 0 1px 3px rgba(31,36,32,0.03) --shadow-md: 0 4px 12px rgba(31,36,32,0.04) --- ## 布局 (Layout) --- --max-width-desktop: 1180px --content-padding-desktop: 56px --content-padding-tablet: 32px --content-padding-mobile: 20px --nav-height-desktop: 72px --nav-height-mobile: 56px --section-gap-desktop: 112px --section-gap-mobile: 72px --grid-columns-desktop: 12 --grid-columns-tablet: 6 --grid-columns-mobile: 4 --- ## 组件规格 (Component Tokens) --- # 主按钮 (Primary Button) — 鼠尾草绿填充 Pill --btn-primary-bg: var(--accent) --btn-primary-fg: var(--accent-fg) --btn-primary-hover-bg: var(--accent-hover) --btn-primary-radius: var(--radius-full) --btn-primary-padding-x: 20px --btn-primary-padding-y: 14px --btn-primary-font-weight: 600 # 次按钮 (Secondary Button) --btn-secondary-bg: transparent --btn-secondary-fg: var(--fg) --btn-secondary-border: var(--border) --btn-secondary-hover-bg: var(--border-soft) --btn-secondary-radius: var(--radius-full) --btn-secondary-padding-x: 20px --btn-secondary-padding-y: 14px # 卡片 (Card) — 大圆角 + 柔和 --card-bg: var(--bg-elevated) --card-fg: var(--fg) --card-border: var(--border) --card-radius: var(--radius-xl) --card-padding: 28px --card-shadow: var(--shadow-sm) # 输入框 (Input) — 大触摸目标 --input-bg: var(--bg-elevated) --input-fg: var(--fg) --input-placeholder: var(--fg-muted) --input-border: var(--border) --input-radius: var(--radius-lg) --input-padding-x: 16px --input-padding-y: 14px --input-focus-ring: 0 0 0 3px rgba(93,124,107,0.12) --input-height: 48px # 徽章 (Badge) --badge-bg: var(--border-soft) --badge-fg: var(--fg-muted) --badge-radius: var(--radius-full) --badge-padding-x: 12px --badge-padding-y: 6px # 导航 (Navigation) --nav-bg: rgba(246,241,232,0.9) --nav-backdrop: blur(10px) --nav-border: none --nav-link-fg: var(--fg-muted) --nav-link-hover-fg: var(--fg) --- ## 动效 (Motion) --- --duration-fast: 180ms --duration-normal: 250ms --duration-slow: 400ms --duration-reveal: 600ms --easing-default: cubic-bezier(0.4, 0, 0.2, 1) --- ## 设计铁律 (Design Locks) --- 1. 颜色锁定：唯一主强调色鼠尾草绿 #5D7C6B 2. 形状锁定：大圆角 (large soft)，卡片 28px，按钮 full pill 3. 主题锁定：暖奶油色画布 (#F6F1E8) 4. 字体锁定：Inter/Satoshi，正文可稍大 (17-18px) 5. 间距锁定：宽松间距，少元素多空白 --- ## 布局家族 (Layout Families) --- 1. 大图 + 文案 (Image + Copy): 柔和并排 2. 大幅卡片 (Large Card): 大圆角 + 温和边框 3. 冷静引导步骤 (Calm Onboarding Steps): 少量元素 4. 评价卡片 (Testimonial Cards): 头像+引用 5. 定价卡片 (Pricing Cards): 推荐方案绿色强调 6. FAQ 区块: 温和可展开 --- ## PC端布局规范 --- - 最大内容宽度: 1180px - 内容区内边距: 56px（特别宽松） - 段落垂直间距: 112px（非常宽松） --- ## 移动端布局规范 (<768px) --- - 内容区内边距: 20px - 段落垂直间距: 72px --- ## 组件状态 (Component States) --- - hover: 绿色加深 - focus-visible: 3px 温和绿色光环（不刺眼） - active: 轻柔反馈 - disabled: 50% 不透明度 --- ## 使用提示词模板 (Prompt Template) --- 使用 Soft Premium Calm 风格。 项目： - 产品：[名称] - 受众：[目标用户] - 页面类型：[landing / product] - 转化目标：[目标 CTA] 要求： - 暖奶油色底 (#F6F1E8)，鼠尾草绿强调 (#5D7C6B) - 宽松空白，大圆角卡片，冷静高信任布局 - 避免黑色重对比、避免紧迫销售感、避免小密度仪表盘 --- ## 禁止清单 (Anti-Slop Ban List) --- - 不要使用黑色重对比 - 不要使用紧迫销售语言 - 不要使用小密度仪表盘 - 不要使用尖锐圆角 - 不要使用过度阴影 - 不要使用鲜亮颜色
本文档为站内渲染。原始文件本地路径：saas/source/knowledge-world/Knowledge-World-设计配色-soft-premium-a3fb2d.txt（仅本地保留，不入库不部署）