# Style Pack: Midnight Command Center # 来源: DESGIN.md Style Pack 2 # 适用: 开发者工具、AI 代理、代码产品、数据运维、安全仪表盘、基础设施 # 情绪: 精确、强大、技术性、电影感、专注 # 主题: 暗色 (Dark) --- ## 配色 Token (Colors) --- --bg: #090A0F --bg-raised: #11131C --bg-elevated: #171A26 --fg: #F4F6FB --fg-secondary: #9AA3B2 --fg-muted: #6A7384 --border: #2B3042 --border-soft: #222637 --accent: #8B5CF6 --accent-hover: #A78BFA --accent-fg: #FFFFFF --accent-soft: rgba(139,92,246,0.12) --accent-glow: rgba(139,92,246,0.2) --success: #34D399 --warning: #FBBF24 --danger: #EF4444 --- ## 字体 (Typography) --- --font-display: "Geist", "Inter", "IBM Plex Sans", 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: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif --font-size-body: 1rem --font-weight-body: 400 --line-height-body: 1.65 --letter-spacing-body: -0.011em --font-size-label: 0.78rem --font-weight-label: 650 --line-height-label: 1 --letter-spacing-label: 0.06em --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, 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: 14px --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 0 0 1px var(--border) --shadow-glow-sm: 0 0 12px rgba(139,92,246,0.08) --shadow-glow-md: 0 0 20px rgba(139,92,246,0.12) --shadow-inner: inset 0 1px 0 rgba(255,255,255,0.04) --- ## 布局 (Layout) --- --max-width-desktop: 1280px --content-padding-desktop: 48px --content-padding-tablet: 32px --content-padding-mobile: 20px --nav-height-desktop: 72px --nav-height-mobile: 56px --section-gap-desktop: 96px --section-gap-mobile: 64px --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: 18px --btn-primary-padding-y: 12px --btn-primary-font-weight: 600 --btn-primary-font-size: 0.938rem --btn-primary-glow: var(--shadow-glow-sm) --btn-primary-hover-glow: var(--shadow-glow-md) # 次按钮 (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: 18px --btn-secondary-padding-y: 12px # 卡片 (Card) — 暗面板 --card-bg: var(--bg-raised) --card-fg: var(--fg) --card-border: var(--border) --card-border-width: 1px --card-radius: var(--radius-lg) --card-padding: 24px --card-shadow: var(--shadow-inner) # 代码块 (Code Block) --code-bg: var(--bg) --code-fg: var(--fg-secondary) --code-border: var(--border) --code-radius: var(--radius-md) --code-padding: 16px --code-font: var(--font-mono) # 输入框 (Input) --input-bg: var(--bg-elevated) --input-fg: var(--fg) --input-placeholder: var(--fg-muted) --input-border: var(--border) --input-radius: var(--radius-md) --input-padding-x: 14px --input-padding-y: 12px --input-focus-border: var(--accent) --input-focus-ring: 0 0 0 2px var(--accent-soft) --input-height: 44px # 徽章 (Badge) --badge-bg: var(--border-soft) --badge-fg: var(--fg-secondary) --badge-radius: var(--radius-full) --badge-padding-x: 10px --badge-padding-y: 6px --badge-font-size: 0.75rem --badge-font-weight: 600 # 导航 (Navigation) --nav-bg: rgba(9,10,15,0.85) --nav-backdrop: blur(12px) --nav-border: var(--border) --nav-link-fg: var(--fg-secondary) --nav-link-hover-fg: var(--fg) --nav-link-active-fg: var(--accent) # 分割线 (Divider) --divider-color: var(--border) --divider-width: 1px # 指标卡 (Metric Card) --metric-value-fg: var(--accent) --metric-value-font: var(--font-mono) --metric-value-size: 1.5rem --metric-value-weight: 700 --metric-label-fg: var(--fg-secondary) --- ## 动效 (Motion) --- --duration-fast: 150ms --duration-normal: 220ms --duration-slow: 350ms --duration-reveal: 500ms --easing-default: cubic-bezier(0.4, 0, 0.2, 1) --- ## 设计铁律 (Design Locks) --- 1. 颜色锁定：唯一主强调色紫罗兰 #8B5CF6，不使用其他颜色 CTA 2. 形状锁定：精确中等圆角 (precise medium)，按钮 10px，卡片 14px 3. 阴影锁定：细边框为主 + 微妙辉光 + 内阴影，不使用重阴影 4. 主题锁定：纯暗色 (#090A0F)，不使用浅色段落 5. 字体锁定：Geist/Inter 为主体，代码/命令/日志/指标用 Mono 6. 间距锁定：4, 8, 12, 16, 24, 32, 48, 64, 96, 128 --- ## 布局家族 (Layout Families) --- 1. 控制台分割英雄区 (Console Split Hero): 真实产品截图或实际组件预览 2. 双列技术段 (Two-Column Technical Section): 左技术说明右代码/图表 3. 粘性功能堆叠 (Sticky Feature Stack): 固定侧边索引 + 滚动内容 4. 代码块展示 (Code Block Showcase): 真实代码，非装饰 5. 指标横条 (Metric Strip): KPI 数字条 6. 集成网格 (Integration Grid): 工具/API 图标 7. 架构图区域 (Architecture Diagram): 系统拓扑图 --- ## PC端布局规范 --- - 最大内容宽度: 1280px - 内容区内边距: 48px - 导航高度: 72px - 段落垂直间距: 96px 至 128px - 12列网格系统 --- ## 移动端布局规范 (<768px) --- - 内容区内边距: 20px - 导航高度: 56px - 段落垂直间距: 64px 至 80px - 4列网格系统 --- ## 组件状态 (Component States) --- - hover: 强调色加深 + 辉光增强 - focus-visible: 2px 紫罗兰光环 - active: 去辉光，背景加深 - disabled: 40% 不透明度 - loading: 紫罗兰脉冲 --- ## 使用提示词模板 (Prompt Template) --- 使用 Midnight Command Center 风格。 项目： - 产品：[名称] - 受众：[目标用户] - 页面类型：[landing / dashboard / docs] - 转化目标：[目标 CTA] 要求： - 近黑表面 (#090A0F)，精确暗色 UI，唯一紫罗兰强调 (#8B5CF6) - 技术密度适中，真实产品证明，微妙动效 - 避免通用 AI 紫色网格背景、避免伪终端、避免过多霓虹色 - 至少 4 种布局家族 --- ## 禁止清单 (Anti-Slop Ban List) --- - 不要使用 AI 紫色网格 blob 渐变 - 不要使用伪终端（由无意义的 div 构建） - 不要使用过多霓虹色 - 不要使用重阴影 - 不要使用玻璃态 - 不要使用三个相同功能卡片
本文档为站内渲染。原始文件本地路径：saas/source/knowledge-world/Knowledge-World-设计配色-midnight-command-7c92d2.txt（仅本地保留，不入库不部署）