什么是 Minimal Dark + 彩色光晕？
这套视觉语言由几个核心元素组成：近纯黑的深色背景（#000 或极深的 #04060f）、有目的放置的彩色辉光（通常是青色 #06b6d4 或紫色 #7239ff，用 radial-gradient + filter: blur 实现）、极高对比度的白色主文字，以及半透明玻璃态卡片（rgba white + backdrop-filter: blur）。
这套系统之所以广泛流行，原因很简单：它能用最少的视觉元素制造出最强的科技感和高级感。深色背景让任何颜色都显得更纯净更有力量，光晕创造了神秘的空间深度，而高对比度文字保证了可读性。Vercel 在 2021 年重设计后将这套系统推向主流，随后被 AI 产品浪潮全面采用。
"Dark mode isn't just a color preference. It's a statement about the product's personality — precise, focused, and built for people who take their tools seriously."
— Rauno Freiberg, 前 Vercel 设计师深色系的色彩系统
好的 Minimal Dark 不是"把背景涂黑"——它需要一套精密的色彩层次系统。以下是从顶级产品中总结出的标准色彩架构：
↑ 从左到右：纯黑底层 → 主背景 → 卡片背景 → 悬浮层 → 边框 → 次要文字
光晕色彩方面，目前最流行的是青蓝组合（#06b6d4 + #3b82f6）和紫青组合（#7239ff + #06b6d4）。光晕不应超过 2 种颜色，且每个视口内的光晕面积总和不应超过屏幕的 15%——否则会从"神秘"变成"杂乱"。
核心设计原则
真正的 #000000 太死板，缺乏层次。顶级产品使用的是带有极淡色相的深色，如 #04060f（微蓝黑）、#0f0a1e（微紫黑）。这个细微的色相差异会让整个页面感觉更有深度，更有"温度"。
光晕应该指向页面中最重要的内容区域，而不是随意装饰。通常放置在 Hero 标题背后或者第一屏的角落，用 blur(120px) 以上的模糊度让边缘完全消散，产生"从内发光"的感觉。
玻璃态（Glassmorphism）在深色系中表现最好：background: rgba(255,255,255,0.06)，边框 rgba(255,255,255,0.1)，配合 backdrop-filter: blur(16px)。避免使用太高的白色透明度（超过 0.15 会失去神秘感）。
主标题: rgba(255,255,255,1.0) — 绝对白，100%对比；正文: rgba(255,255,255,0.7) — 舒适阅读亮度；辅助信息: rgba(255,255,255,0.4) — 存在感极低但可读。严格遵守 3 档，不要出现中间值。
代表产品案例
这套视觉语言目前在 AI/工具类产品中应用最为广泛，以下三个是行业标杆：
还值得深入研究的：Framer.com（纯黑 + 流动渐变光）、Perplexity AI（深蓝 + 柔和光晕）、Arc Browser（深色 + 彩色分区）。每个产品的光晕策略都有不同侧重，值得逐一拆解。
如何快速实现这套效果
CSS 光晕的实现：创建一个 position:absolute 的 div，设置 width/height 约 600px，border-radius: 50%，background: radial-gradient(circle, rgba(114,57,255,0.4), transparent 65%)，filter: blur(120px)，放在内容层下方即可。
网格背景的实现：用两个方向的 linear-gradient 叠加，颜色为 rgba(255,255,255,0.04)，background-size 约 60px，用 mask-image: radial-gradient 让网格在边缘自然消散，避免生硬边界。
动效加分点：光晕可以加缓慢的 translate 动画（10-15秒循环），模拟大气折射效果。鼠标位置可以驱动光晕轻微跟随，制造"页面有生命"的感觉。