深色科技Dark Tech

核心特征

• 近黑底色 #08090A，面板略浅 #111214
• 边框只用 8% 白色的极细线
• 紫蓝渐变 #7C5CFF → #4EA8FF 做强调
• 顶部紫色光晕，网格线向下淡出
• 标题字距收紧，字重稳重

色板与字体

英文

Space Grotesk（自托管）

中文

系统黑体：苹方 / 微软雅黑

说明

原版产品多用 Inter 或自研无衬线；真实项目可用 Inter、Geist 或 Space Grotesk，标题字距调到 -0.03em。

起源与代表作

年代：2020 年后 Linear、Vercel 等开发者产品带火

深色界面本是开发者工具的传统，2020 年前后随着 Linear、Vercel 等产品的官网与应用采用近黑底色、极细边框和克制的渐变光效，这种做法被大量 SaaS 与 AI 产品效仿，形成了一套相对固定的视觉语言：近黑背景、紫蓝色强调、顶部光晕、淡出的网格与收紧的字距。它强调专业、高效与现代感，是当下技术类产品落地页最常见的风格之一。

AI 设计提示词 · Prompt

深色科技（Dark Tech）风格界面：页面背景近黑 #08090A，顶部叠加紫色 #7C5CFF（35% 透明度）的椭圆径向光晕，并叠加 40px 间距、rgba(255,255,255,0.05) 的细网格，网格用 linear-gradient(180deg, transparent, #08090A 340px) 向下淡出。卡片与面板背景 #111214，1px rgba(255,255,255,0.08) 边框，圆角 12px，不用投影。文字雾白 #F4F5F7，次要文字 #9AA0AA。主按钮使用 linear-gradient(135deg, #6D4DF5, #3A6FE0) 底、白字，圆角 8px，字重 600；次按钮透明底，8% 白色边框。标题使用 Space Grotesk，34px，字重 700，字距 -0.03em，行高 1.1。引导标签使用天蓝 #4EA8FF。数字与图标保持简洁，不使用发光描边。所有正文对比度不低于 4.5:1，渐变只用于按钮、强调文字与光晕。

A Dark Tech interface: page background near-black #08090A, with an elliptical violet #7C5CFF radial glow at 35% opacity at the top and a fine 40px grid in rgba(255,255,255,0.05) that fades downward via linear-gradient(180deg, transparent, #08090A 340px). Cards and panels use #111214 with a 1px rgba(255,255,255,0.08) border and 12px corners, no shadows. Text is mist white #F4F5F7, secondary text #9AA0AA. The primary button uses linear-gradient(135deg, #6D4DF5, #3A6FE0) with white text, 8px corners and weight 600; the secondary button is transparent with an 8% white border. Headings use Space Grotesk at 34px, weight 700, letter-spacing -0.03em and line height 1.1. Eyebrow labels use sky blue #4EA8FF. Keep numbers and icons simple with no glowing outlines. Keep all body contrast at least 4.5:1 and use gradients only on buttons, emphasized text and glows.

CSS 设计变量

这套风格的设计令牌，可直接粘贴进项目的全局样式。

:root {
  --ds-bg: #08090a;
  --ds-surface: #111214;
  --ds-text: #f4f5f7;
  --ds-muted: #9aa0aa;
  --ds-border: 1px solid rgba(255, 255, 255, 0.08);
  --ds-violet: #7c5cff;
  --ds-sky: #4ea8ff;
  --ds-gradient: linear-gradient(135deg, #7c5cff, #4ea8ff);
  --ds-radius: 12px;
}

适合与不适合

和相近风格的区别

• 数据大屏风：深色科技是近黑底、极细边框与紫蓝渐变，克制而现代，面向产品界面；数据大屏用深蓝底、青蓝发光数字与四角装饰，服务于大屏指标展示。
• 玻璃拟态：两者常搭配深色背景。深色科技靠细边框与渐变光晕分层，卡片多为不透明；玻璃拟态靠半透明与背景模糊制造悬浮感，依赖丰富的背景色。

常见踩坑

• 近黑底上纯白文字对比度过高，长时间阅读容易刺眼，正文建议用 #E4E6EB 这类略灰的白，次要文字至少保证 4.5:1
• 8% 白色的极细边框在低亮度屏幕上几乎看不见，交互元素必须有额外的焦点轮廓与悬停反馈，不能只靠这条边框
• 渐变光晕与网格都是大面积背景，叠加多层会增加绘制开销，移动端可去掉网格或降低光晕范围
• 紫蓝渐变白字在天蓝一端对比度会下降，按钮渐变不要使用过亮的蓝色，并为 prefers-color-scheme 提供浅色版本

相关 UI 模式

在 UI 模式词典里查看组件级的实现与演示。

常见问题