# Style Pack: Quiet Precision # 来源: UNIVERSAL_DESIGN.md Style Pack 1 # 适用: B2B SaaS、AI 工具、生产力应用、开发者工具、目录、产品化仪表盘 # 情绪: 克制、昂贵、冷静、精确 # 主题: 浅色 (Light) --- ## 配色 Token (Colors) --- --bg: #F7F8F5 --bg-raised: #FFFFFF --bg-elevated: #F1F3EF --fg: #171717 --fg-muted: #6F7378 --fg-secondary: #43474D --border: #E3E6DF --border-strong: #D0D3CB --accent: #2F6BFF --accent-hover: #2455E5 --accent-fg: #FFFFFF --accent-soft: rgba(47,107,255,0.08) --success: #22A861 --warning: #E59125 --danger: #E54343 --- ## 字体 (Typography) --- --font-display: "Geist", "Satoshi", "Cabinet Grotesk", system-ui, sans-serif --font-size-display: clamp(3rem, 7vw, 5.8rem) --font-weight-display: 650 --line-height-display: 0.96 --letter-spacing-display: -0.055em --font-size-h1: clamp(2.25rem, 4.5vw, 4rem) --font-weight-h1: 650 --line-height-h1: 0.98 --letter-spacing-h1: -0.045em --font-size-h2: clamp(1.625rem, 2.8vw, 2.5rem) --font-weight-h2: 620 --line-height-h2: 1.03 --letter-spacing-h2: -0.035em --font-sans: "Geist", system-ui, sans-serif --font-size-body: 1rem --font-weight-body: 400 --line-height-body: 1.65 --letter-spacing-body: -0.01em --font-size-label: 0.75rem --font-weight-label: 650 --line-height-label: 1 --letter-spacing-label: 0.05em --font-mono: "Geist Mono", "JetBrains Mono", "SF Mono", monospace --font-size-mono: 0.8125rem --font-weight-mono: 500 --line-height-mono: 1.4 --- ## 圆角 (Border Radius) --- --radius-none: 0px --radius-sm: 6px --radius-md: 12px --radius-lg: 16px --radius-xl: 20px --radius-2xl: 28px --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 1px 2px rgba(23,23,23,0.03) --shadow-card: 0 1px 0 var(--border), 0 2px 8px rgba(23,23,23,0.03) --- ## 布局 (Layout) --- --max-width-desktop: 1200px --content-padding-desktop: 48px --content-padding-tablet: 32px --content-padding-mobile: 20px --nav-height-desktop: 64px --nav-height-mobile: 52px --section-gap-desktop: 96px --section-gap-mobile: 56px --- ## 组件规格 (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-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-elevated) --btn-secondary-radius: var(--radius-md) --btn-secondary-padding-x: 20px --btn-secondary-padding-y: 10px # 卡片 (Card) — 16px 圆角 + 1px 边框 + 几乎无阴影 --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-card) # 标签 (Tag) --tag-bg: var(--bg-elevated) --tag-fg: var(--fg-muted) --tag-radius: var(--radius-sm) --tag-padding-x: 8px --tag-padding-y: 3px --tag-font-size: 0.688rem --tag-font-weight: 600 # 输入框 (Input) --input-bg: var(--bg-raised) --input-fg: var(--fg) --input-border: var(--border-strong) --input-radius: var(--radius-sm) --input-padding-x: 14px --input-padding-y: 10px --input-focus-ring: 0 0 0 2px rgba(47,107,255,0.2) --input-height: 44px # 导航 (Navigation) --nav-bg: rgba(247,248,245,0.88) --nav-backdrop: blur(8px) --nav-border: none --- ## 动效 (Motion) --- --duration-fast: 120ms --duration-normal: 200ms --duration-slow: 350ms --easing-default: cubic-bezier(0.4, 0, 0.2, 1) --- ## 设计铁律 (Design Locks) --- 1. 颜色锁定：唯一蓝色强调 #2F6BFF 2. 形状锁定：按钮 10-12px，卡片 16px 3. 阴影锁定：1px 边框 + 极轻阴影 4. 主题锁定：淡米绿画布 (#F7F8F5) 5. 字体锁定：Geist/Satoshi，正文 Geist 6. 间距锁定：4, 8, 16, 24, 40, 56, 96 --- ## 布局家族 (Layout Families) --- 1. 分割英雄区 (Split Hero): 55% 文案 45% 产品视觉 2. 非对称 Bento (Asymmetric Bento): 不等大卡片 3. 特征细节分割 (Feature Detail Split): 左特征右图 4. 紧凑证明条 (Compact Proof Strip): Logo/数据行 5. 定价卡片 (Pricing Cards): 克制边框 6. 评价引用 (Testimonial Quote) 7. FAQ --- ## PC端布局规范 --- - 最大内容宽度: 1200px-1320px - 导航高度: 64px - 段落垂直间距: 96px --- ## 移动端布局规范 (<768px) --- - 内容区内边距: 20px - 导航高度: 52px - 段落垂直间距: 56px --- ## 组件状态 (Component States) --- - hover: 蓝色加深 - focus-visible: 2px 蓝色光环 - disabled: 40% 不透明度 - loading: 蓝色骨架屏 --- ## 使用提示词模板 (Prompt Template) --- 使用 Quiet Precision 风格。 项目：[同上格式] --- ## 禁止清单 (Anti-Slop Ban List) --- - 不要使用彩色功能图标 - 不要使用渐变文字 - 不要使用三个相同功能卡片 - 不要使用重阴影 - 不要使用全屏混乱布局
本文档为站内渲染。原始文件本地路径：saas/source/knowledge-world/Knowledge-World-设计配色-quiet-precision-2800cc.txt（仅本地保留，不入库不部署）