# Style Pack: Cobalt Authority # 来源: UNIVERSAL_DESIGN.md Style Pack 5 # 适用: 金融科技、数据分析、商业运营、法律科技、合规、B2B 服务、高信任工具 # 情绪: 干脆、可信、现代、锐利 # 主题: 浅色 (Light) --- ## 配色 Token (Colors) --- --bg: #FAFBFC --bg-raised: #FFFFFF --bg-steel: #EEF2F6 --fg: #0E1726 --fg-muted: #64748B --fg-secondary: #475569 --border: #D9E1EA --border-strong: #C4CDD6 --accent: #245BFF --accent-hover: #1D48D6 --accent-fg: #FFFFFF --accent-soft: rgba(36,91,255,0.08) --success: #16A34A --warning: #D97706 --danger: #DC2626 --- ## 字体 (Typography) --- --font-display: "Satoshi", "Geist", system-ui, sans-serif --font-size-display: clamp(2.5rem, 5vw, 4.5rem) --font-weight-display: 680 --line-height-display: 0.95 --letter-spacing-display: -0.04em --font-size-h1: clamp(2rem, 3.5vw, 3.25rem) --font-weight-h1: 650 --line-height-h1: 1 --font-sans: "Geist", "IBM Plex Sans", system-ui, sans-serif --font-size-body: 0.938rem --font-weight-body: 400 --line-height-body: 1.6 --font-mono: "IBM Plex Mono", "Geist Mono", monospace --font-size-mono: 0.813rem --font-weight-mono: 500 --line-height-mono: 1.4 --font-mono-numeric: tabular-nums --- ## 圆角 (Border Radius) --- --radius-none: 0px --radius-sm: 4px --radius-md: 8px --radius-lg: 12px --radius-xl: 28px --radius-full: 999px --- ## 间距 (Spacing) --- --space-xs: 4px --space-sm: 8px --space-md: 16px --space-lg: 24px --space-xl: 40px --space-section: 96px --- ## 阴影 (Shadows) --- --shadow-none: none --shadow-sm: 0 1px 2px rgba(14,23,38,0.04) --shadow-md: 0 2px 8px rgba(14,23,38,0.06) --- ## 布局 (Layout) --- --max-width-desktop: 1280px --content-padding-desktop: 48px --content-padding-tablet: 32px --content-padding-mobile: 20px --nav-height-desktop: 64px --nav-height-mobile: 52px --section-gap-desktop: 80px --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: 18px --btn-primary-padding-y: 10px --btn-primary-font-weight: 600 # 次按钮 (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-steel) --btn-secondary-radius: var(--radius-md) # 卡片 (Card) — 干脆边框 --card-bg: var(--bg-raised) --card-fg: var(--fg) --card-border: var(--border) --card-radius: var(--radius-lg) --card-padding: 20px --card-shadow: none # 表格 (Table) — 分组块 --table-header-bg: transparent --table-header-fg: var(--fg-muted) --table-row-hover-bg: rgba(36,91,255,0.03) --table-cell-padding: 10px 16px # 指标卡 (Metric Card) --metric-value-fg: var(--fg) --metric-value-font: var(--font-mono) --metric-value-size: 1.75rem --metric-value-weight: 700 --metric-label-fg: var(--fg-muted) # 输入框 (Input) --input-bg: var(--bg-raised) --input-fg: var(--fg) --input-border: var(--border-strong) --input-radius: var(--radius-sm) --input-padding-x: 12px --input-padding-y: 10px --input-focus-ring: 0 0 0 2px rgba(36,91,255,0.2) --input-height: 42px --- ## 动效 (Motion) --- --duration-fast: 120ms --duration-normal: 200ms --easing-default: cubic-bezier(0.4, 0, 0.2, 1) --- ## 设计铁律 (Design Locks) --- 1. 颜色锁定：钴蓝色 #245BFF 2. 形状锁定：按钮 8px，卡片 12px，干脆无重阴影 3. 主题锁定：淡钢蓝画布 (#FAFBFC) 4. 字体锁定：Satoshi/Geist/IBM Plex Sans 5. 数字必须用等宽字体 6. 间距锁定：4, 8, 16, 24, 40, 96 --- ## 布局家族 (Layout Families) --- 1. 左价值主张 + 右指标面板 (Left Value Prop + Right Metric Panel) 2. 指标行 (Metric Row) 3. 信任模块 (Trust Module) 4. 紧凑对比表 (Compact Comparison Table) 5. 证明卡片 (Proof Card) 6. 定价卡片 (Pricing Cards) --- ## PC端布局规范 --- - 最大内容宽度: 1280px - 内容区内边距: 48px - 导航高度: 64px - 中等密度：数字应该"呼吸" --- ## 移动端布局规范 (<768px) --- - 内容区内边距: 20px - 导航高度: 52px --- ## 使用提示词模板 (Prompt Template) --- 使用 Cobalt Authority 风格。 --- ## 禁止清单 (Anti-Slop Ban List) --- - 不要使用花哨渐变 - 不要使用没有具体数字的模糊声明 - 不要使用太多图标瓷砖 - 不要使用重阴影 - 不要使用大圆角 - 不要使用多彩色
本文档为站内渲染。原始文件本地路径：saas/source/knowledge-world/Knowledge-World-设计配色-cobalt-authority-ba51b0.txt（仅本地保留，不入库不部署）