终端黑客风Terminal Style

核心特征

• 纯黑底色，荧光绿 #33FF66 文字（也可用琥珀色）
• 全站等宽字体，标题使用像素感的 VT323
• 按钮写成方括号形式，如「[ 开始 ]」
• 命令提示符 $ 与 > 作为装饰前缀
• 背景叠加扫描线，光标可闪烁

色板与字体

英文

JetBrains Mono、VT323（自托管）

中文

系统等宽或黑体：苹方 / 微软雅黑 / 更纱黑体等宽

说明

正文用 JetBrains Mono、Fira Code 或系统 ui-monospace，标题可用 VT323；中文无等宽版本时使用系统黑体，不影响整体风格。

起源与代表作

年代：1970–80 年代字符终端；《黑客帝国》1999 年

早期计算机通过字符终端交互，1978 年 DEC 推出的 VT100 成为终端的事实标准，绿色或琥珀色荧光的单色显示器也因此深入人心。1999 年电影《黑客帝国》里不断下落的绿色字符雨，把这种形象固化为大众印象中的黑客屏幕。此后命令行工具、开发者文档、极客社区与技术博客常借用这种风格，用等宽字体与命令提示符表达专业和硬核。

AI 设计提示词 · Prompt

终端黑客风（Terminal Style）风格界面：页面背景纯黑 #0A0A0A，叠加 repeating-linear-gradient(0deg, rgba(51,255,102,0.04) 0 1px, transparent 1px 3px) 扫描线，顶部叠加荧光绿 #33FF66（8% 透明度）的径向光晕。文字荧光绿 #33FF66，次要文字 #3FBF5F，边框 1px 暗绿 #1F8F3F，卡片底色 #0F140F，所有圆角为 0，不用投影。全站使用 JetBrains Mono，标题使用 VT323，52px，带 text-shadow: 0 0 8px rgba(51,255,102,0.5)，并在前面加「$ 」提示符。按钮是纯文字加方括号：[ 开始 ]，无底色无边框，次按钮颜色降为 #3FBF5F。小标签后加闪烁方块光标 █（steps(1) 闪烁 1s），并为 prefers-reduced-motion 关闭动画。输入框前加「$ 」。标题用「## 」前缀。不使用渐变色块与图片。所有正文对比度不低于 4.5:1，闪烁只做装饰且必须能关闭。

A Terminal Style interface: page background pure black #0A0A0A with a scanline overlay of repeating-linear-gradient(0deg, rgba(51,255,102,0.04) 0 1px, transparent 1px 3px) and a phosphor-green #33FF66 radial glow at 8% opacity at the top. Text is phosphor green #33FF66, secondary text #3FBF5F, borders are 1px dark green #1F8F3F, cards are #0F140F, all corner radii are 0 and there are no shadows. Use JetBrains Mono everywhere and VT323 for headings at 52px with text-shadow: 0 0 8px rgba(51,255,102,0.5) and a leading $ prompt. Buttons are plain text in square brackets, [ Start ], with no fill and no border; the secondary button drops to #3FBF5F. Small labels are followed by a blinking block cursor █ (steps(1) blink every 1s) and the animation is disabled under prefers-reduced-motion. Inputs get a leading $ and card headings get a leading ##. No gradient blocks or images. Keep all body contrast at least 4.5:1 and treat blinking as decoration that can always be turned off.

CSS 设计变量

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

:root {
  --ds-bg: #0a0a0a;
  --ds-surface: #0f140f;
  --ds-text: #33ff66;
  --ds-muted: #3fbf5f;
  --ds-border: 1px solid #1f8f3f;
  --ds-amber: #ffb000;
  --ds-font: "JetBrains Mono", ui-monospace, monospace;
  --ds-title-font: "VT323", ui-monospace, monospace;
  --ds-radius: 0;
}

适合与不适合

和相近风格的区别

• 像素 8-bit：终端黑客风模仿字符终端，用等宽字体、命令提示符与方括号按钮，只有一种荧光色；像素风来自 8 位游戏，用点阵字体、方块描边和多色调色板。
• 野兽派：两者都用等宽字体、零圆角。终端黑客风是黑底荧光绿的屏幕美学，带扫描线与命令提示符；野兽派是白底黑字与默认蓝色链接的朴素网页，没有屏幕质感。

常见踩坑

• 荧光绿在纯黑底上对比度很高，长时间阅读会刺眼，长文页面可把文字降到 #B7F5C8 或把亮度降低 20%，并避免整页发光
• 光标闪烁属于动画，必须用 prefers-reduced-motion 关闭，且不要让关键信息只靠闪烁来提示
• 方括号按钮没有底色与边框，容易被误认为文字，需要保留悬停与焦点样式，并让可点击区域不小于 44px
• 等宽字体体积不小，JetBrains Mono 与 VT323 只加载用到的字重，避免整套引入影响首屏速度

相关 UI 模式

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

常见问题