# Style Pack: Data Trust Console # 来源: DESGIN.md Style Pack 6 # 适用: B2B SaaS、数据分析、金融科技、管理后台、内部工具、CRM、合规、报告 # 情绪: 可信、清晰、结构化、冷静、胜任 # 主题: 浅色 (Light) --- ## 配色 Token (Colors) --- --bg: #F8FAFC --bg-raised: #FFFFFF --bg-elevated: #F1F5F9 --fg: #0F172A --fg-muted: #64748B --fg-secondary: #475569 --border: #CBD5E1 --border-soft: #E2E8F0 --accent: #2563EB --accent-hover: #1D4ED8 --accent-fg: #FFFFFF --accent-soft: rgba(37,99,235,0.08) --success: #16A34A --warning: #D97706 --danger: #DC2626 --- ## 字体 (Typography) --- --font-display: "Inter", "IBM Plex Sans", ui-sans-serif, system-ui, 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", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif --font-size-body: 0.938rem --font-weight-body: 400 --line-height-body: 1.55 --letter-spacing-body: -0.008em --font-size-body-sm: 0.813rem --font-weight-body-sm: 400 --line-height-body-sm: 1.5 --font-size-label: 0.75rem --font-weight-label: 650 --line-height-label: 1 --letter-spacing-label: 0.05em --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace --font-size-mono: 0.813rem --font-weight-mono: 500 --line-height-mono: 1.45 --- ## 圆角 (Border Radius) --- --radius-none: 0px --radius-sm: 4px --radius-md: 8px --radius-lg: 12px --radius-xl: 28px --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 2px rgba(15,23,42,0.04) --shadow-md: 0 2px 8px rgba(15,23,42,0.06) --shadow-lg: 0 4px 16px rgba(15,23,42,0.08) --- ## 布局 (Layout) --- --max-width-desktop: 1280px --content-padding-desktop: 40px --content-padding-tablet: 28px --content-padding-mobile: 16px --nav-height-desktop: 60px --nav-height-mobile: 52px --section-gap-desktop: 72px --section-gap-mobile: 48px --grid-columns-desktop: 12 --grid-columns-tablet: 6 --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: 16px --btn-primary-padding-y: 10px --btn-primary-font-weight: 600 --btn-primary-font-size: 0.875rem # 次按钮 (Secondary Button) --btn-secondary-bg: var(--bg-raised) --btn-secondary-fg: var(--fg) --btn-secondary-border: var(--border) --btn-secondary-hover-bg: var(--bg-elevated) --btn-secondary-radius: var(--radius-md) --btn-secondary-padding-x: 16px --btn-secondary-padding-y: 10px # 卡片 (Card) — 紧凑+板岩边框 --card-bg: var(--bg-raised) --card-fg: var(--fg) --card-border: var(--border) --card-radius: var(--radius-lg) --card-padding: 20px --card-shadow: var(--shadow-sm) # 数据表格 (Data Table) --table-header-bg: transparent --table-header-fg: var(--fg-muted) --table-header-font-weight: 600 --table-header-font-size: 0.75rem --table-row-hover-bg: rgba(37,99,235,0.03) --table-row-border: var(--border-soft) --table-cell-padding: 10px 16px --table-font-size: 0.875rem --table-numeric-font: var(--font-mono) --table-numeric-variant: tabular-nums # 输入框 (Input) --input-bg: var(--bg-raised) --input-fg: var(--fg) --input-placeholder: var(--fg-muted) --input-border: var(--border) --input-radius: var(--radius-sm) --input-padding-x: 12px --input-padding-y: 10px --input-focus-ring: 0 0 0 2px rgba(37,99,235,0.2) --input-height: 40px # 徽章 (Badge) --badge-bg: var(--border-soft) --badge-fg: var(--fg-muted) --badge-radius: var(--radius-sm) --badge-padding-x: 8px --badge-padding-y: 3px --badge-font-size: 0.688rem --badge-font-weight: 600 # 导航 (Navigation) --nav-bg: var(--bg-raised) --nav-border: var(--border) --nav-border-width: 0 0 1px 0 --nav-link-fg: var(--fg-muted) --nav-link-hover-fg: var(--fg) --nav-link-active-fg: var(--accent) # 侧边栏 (Sidebar) --sidebar-bg: var(--bg) --sidebar-width: 240px --sidebar-border: var(--border) --sidebar-link-fg: var(--fg-secondary) --sidebar-link-hover-bg: rgba(37,99,235,0.06) --sidebar-link-active-bg: rgba(37,99,235,0.1) --sidebar-link-active-fg: var(--accent) # 指标卡 (Metric Card) --metric-value-fg: var(--fg) --metric-value-font: var(--font-mono) --metric-value-size: 1.5rem --metric-value-weight: 700 --metric-label-fg: var(--fg-muted) --metric-label-size: 0.688rem --metric-change-positive: var(--success) --metric-change-negative: var(--danger) --- ## 动效 (Motion) --- --duration-fast: 120ms --duration-normal: 200ms --duration-slow: 300ms --easing-default: cubic-bezier(0.4, 0, 0.2, 1) --- ## 设计铁律 (Design Locks) --- 1. 颜色锁定：唯一主强调色蓝色 #2563EB 2. 形状锁定：受控中等圆角 (controlled medium)，按钮 8px，卡片 12px 3. 主题锁定：浅石板灰画布 (#F8FAFC) 4. 字体锁定：Inter/IBM Plex Sans，数据密度区 14-16px，指标用等宽数字 5. 间距锁定：紧凑间距，4, 8, 12, 16, 24, 32, 48, 64, 96, 128 --- ## 布局家族 (Layout Families) --- 1. 仪表盘网格 (Dashboard Grid): 摘要卡片 + 数据表 + 过滤器 2. 指标价值 (Value + Metrics): 左价值主张右指标面板 3. 选项卡区域 (Tabbed Sections): 分类内容切换 4. 侧边栏+内容 (Sidebar + Content): 经典管理面板布局 5. 对比表格 (Comparison Table): 干净无斑马纹行 6. 信任模块 (Trust Module): Logo + 合规图标 7. 定价卡片 (Pricing Cards): 紧凑功能对比 --- ## PC端布局规范 --- - 最大内容宽度: 1280px - 内容区内边距: 40px - 导航高度: 60px (紧凑) - 段落垂直间距: 72px --- ## 移动端布局规范 (<768px) --- - 内容区内边距: 16px - 导航高度: 52px - 段落垂直间距: 48px --- ## 组件状态 (Component States) --- - hover: 蓝色行高亮 - focus-visible: 2px 蓝色光环 - active: 背景微深 - disabled: 35% 不透明度 - loading: 蓝色骨架屏 - empty: 虚线边框 + 浅色提示文字 --- ## 使用提示词模板 (Prompt Template) --- 使用 Data Trust Console 风格。 项目： - 产品：[名称] - 受众：[目标用户] - 页面类型：[dashboard / analytics / admin / landing] - 转化目标：[目标 CTA] 要求： - 浅板石 UI (#F8FAFC)，蓝色强调 (#2563EB) - 清晰仪表盘层次，紧凑卡片，可信 B2B 清晰度 - 避免装饰伪图表、避免管理视图过度空白、避免消费级大字体到处用 --- ## 禁止清单 (Anti-Slop Ban List) --- - 不要使用装饰性伪图表 - 不要使用管理视图过度空白 - 不要使用消费级大字体到处用 - 不要使用斑马纹表格 - 不要使用重阴影 - 不要使用圆形按钮 - 不要使用多彩色系统
本文档为站内渲染。原始文件本地路径：saas/source/knowledge-world/Knowledge-World-设计配色-data-trust-d79474.txt（仅本地保留，不入库不部署）