赛博朋克Cyberpunk

核心特征

• 近黑底色 #0B0B12，加细扫描线质感
• 霓虹黄、品红与青三种高亮色
• 面板与按钮用 clip-path 切出斜角
• 标题带发光与错位色差的文字阴影
• Orbitron 大写字母，辅以等宽数字

色板与字体

英文

Orbitron（自托管）

中文

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

说明

原版游戏界面多用 Rajdhani、Share Tech Mono 等硬朗的科技字体；真实项目可用 Rajdhani 或 Chakra Petch，中文用系统黑体。

起源与代表作

年代：源自 1980 年代科幻（《银翼杀手》1982 年、《神经漫游者》1984 年），2020 年《赛博朋克 2077》再度带火

「Cyberpunk」一词来自 Bruce Bethke 1983 年的短篇小说，随后被 William Gibson 的《神经漫游者》（1984）与电影《银翼杀手》（1982）塑造成型：高科技与低生活并存，霓虹闪烁的雨夜都市。日本动画《阿基拉》（1988）进一步丰富了它的视觉符号。2020 年游戏《赛博朋克 2077》上市，把霓虹黄、切角面板和故障字重新带回大众视野，也成为游戏与科技产品界面的常用风格。

AI 设计提示词 · Prompt

赛博朋克（Cyberpunk）风格界面：页面背景近黑 #0B0B12，叠加 repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 3px) 扫描线，右上角再加一团品红 #FF2A6D（28% 透明度）的径向光晕。文字冷光白 #F0F0F5，次要文字 #9AA3B5。卡片与输入框背景 #151522，1px 青色 #05D9E8 描边，用 clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)) 切出对角斜边，左侧加 3px 品红内阴影；主按钮霓虹黄 #FCEE0A 底、#0B0B12 字，同样切角，次按钮青色描边。标题使用 Orbitron 800 大写，32px，带 2px 品红与青色错位的文字阴影；数字与 Logo 用霓虹黄，并加 text-shadow 发光。圆角 0，不用柔和阴影。发光只用于标题、数字与 Logo；所有正文对比度不低于 4.5:1。

A Cyberpunk interface: near-black page background #0B0B12 with a scanline overlay of repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 3px) and a magenta #FF2A6D radial glow at 28% opacity in the top-right corner. Text is cold white #F0F0F5, secondary text #9AA3B5. Cards and inputs use background #151522 with a 1px cyan #05D9E8 border, cut into diagonal corners with clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)) and a 3px magenta inset bar on the left; the primary button is neon yellow #FCEE0A with #0B0B12 text, also cut-cornered, and the secondary button has a cyan outline. Headings use Orbitron 800 in uppercase at 32px with 2px magenta and cyan offset text shadows; numbers and the logo use neon yellow with a glowing text-shadow. Corner radius 0 and no soft shadows. Use glow only on headings, numbers and the logo; keep body contrast at least 4.5:1.

CSS 设计变量

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

:root {
  --ds-bg: #0b0b12;
  --ds-surface: #151522;
  --ds-text: #f0f0f5;
  --ds-muted: #9aa3b5;
  --ds-yellow: #fcee0a;
  --ds-magenta: #ff2a6d;
  --ds-cyan: #05d9e8;
  --ds-cut: 14px;
}

适合与不适合

和相近风格的区别

• 蒸汽波：赛博朋克是近黑底上的霓虹、切角面板与发光文字，冷硬紧张，带反乌托邦意味；蒸汽波用粉紫青的柔和渐变与旧系统窗口，怀旧而梦幻。

常见踩坑

• clip-path 会把边框与阴影一起裁掉，斜角处的描边会缺一段，可以用内阴影或伪元素补一条斜线，且不要在切角元素上放需要溢出的内容
• 发光 text-shadow 用在正文上会让字形模糊，发光只给标题、数字与 Logo，正文保持纯色无阴影并对比度不低于 4.5:1
• 霓虹黄、品红、青同时大面积出现会很刺眼，每屏让一种颜色负责主操作，另两种只做细线与点缀
• 扫描线、多层 text-shadow 与 clip-path 叠加会增加绘制开销，整页只铺一层扫描线，动画闪烁需遵守 prefers-reduced-motion

相关 UI 模式

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

常见问题