dark-tech

暗色科技风

统一形象：一台值得信赖的机器——精确、安静、迅捷。

1. 配色（固定）

• 底色：#08090A（近黑色）。面板：#0E0F11 和 #131417。悬停表面：#181A1D。
• 墨色文本：#F7F7F8（主要）、#9CA3AD（次要）、#5C6370（第三级／弱化）。
• 边框：rgba(255, 255, 255, 0.08) 细线。交互元素的边框更明显：rgba(255, 255, 255, 0.16)。
• 强调色——仅限一种：靛蓝 #5E6AD2、紫罗兰 #7C7CF0 或安全翡翠绿 #34D399——根据品牌／含义选择。强调色用于：链接、唯一的主按钮、激活状态、一个数据系列。
• 不用渐变（仅用纯色表面），不使用大面积纯色背景。仅允许强调色发光：在主按钮上使用 box-shadow: 0 0 0 1px rgba(accent, .35), 0 0 24px rgba(accent, .25)。

2. 字体排印（固定）

• **展示字体：**风格鲜明的中性无衬线字体——Space Grotesk，或字重为 500–600 的系统无衬线字体。字号 clamp(2.2rem, 5vw, 4rem)，字间距 −0.03em，行高 1.05。暗色科技风应克制：有力但不张扬。
• **正文：**14–15px，大多数内容使用次要颜色 #9CA3AD；纯色 #F7F7F8 仅用于标题、关键数值和交互标签。行高 1.55。
• **标签／元数据：**等宽字体（IBM Plex Mono / ui-monospace），11–12px，颜色 #5C6370，不做夸张的字间距处理（0–0.02em）。版本号、键、状态使用此样式。
• UI 密度：12–14px 为常规。这是仪表台，不是广告牌。

3. 布局（固定）

• **精细的边框处理：**每个面板、行和表格单元格之间都用 1px rgba(255,255,255,0.08) 边框分隔。内部填充使用色调变化（#0E0F11 / #131417），绝不用黑底白卡片。
• **主视觉区：**小号大写等宽字体引导语、中等字号标题（最大 4rem）、次要颜色的副标题、CTA 按钮行——强调色主按钮 + 透明幽灵按钮。可选：下方放置带边框的指标条或产品面板。
• **数据是主角：**指标、代码块、终端片段和状态表格都是视觉元素。带边框面板中的等宽数字胜过装饰性插图。
• 面板圆角为 6–10px（这是唯一适合稍带圆角的风格，因为看起来像机器部件），按钮圆角为 4–6px。仅在悬停时使用阴影：0 4px 20px rgba(0,0,0,0.5)。
• 定价：使用带边框的行或三面板网格；精选面板使用 1px 强调色边框 + 强调色圆点／勾选列表。

4. 内容处理

• 不用表情符号充当图标。绘制图标：1.5px 描边、圆角端点、16–20px 网格；静止时使用 #9CA3AD，激活时使用强调色。
• 默认不使用摄影图片。暗色科技风界面留白更佳：细线、等宽标签和指标。
• 状态文案：status: healthy、v2.4.1、99.99% SLA——展现产品真实性胜过营销宣称。
• CTA 文案应具体（“立即部署”、“运行基准测试”），绝不用“今天就开始！！”。

5. 动效（精准）

• 时长 120–240ms。缓动使用 cubic-bezier(0.4, 0, 0.2, 1)（Material 风格）或悬停时使用 ease-out。
• 悬停：表面色调变化（#0E0F11 → #131417）+ 边框变亮。仅过渡边框／发光效果，时长 150ms。
• 仅允许一种点缀动效：让一个强调色元素（例如“在线”指示点）缓慢地进行环境脉冲，周期为 2–4s，仅改变不透明度。
• 遵循 prefers-reduced-motion：关闭所有动效。

6. 检查清单（出现以下情况即判定页面不合格……）

• 存在白色或浅色表面（主背景必须为近黑色）。
• 使用了多种强调色。
• 使用了渐变填充。
• 标题字号超过 4rem，或使用展示衬线字体。
• 普通段落正文使用纯白色。
• 面板圆角超过 10px，或按钮圆角超过 6px。
• 使用表情符号图标或明亮的营销摄影图片。
• 存在无法出现在开发者工具中的内容版块。