Terminal Hacker 终端黑客风（Terminal / Hacker / CRT）

If you called it…如果你管它叫……

Full style DNA完整风格 DNA

1. One phosphor ink on black黑底单一磷光墨色 color defining定义特征

   Pure black ground (#000–#050805) with a single luminous ink for text, borders, and graphics — matrix green #00ff41 or amber #ffb000. One electron gun, one hue; a second color already feels wrong.

   纯黑底（#000–#050805）配一种发光墨色，通吃文字、边框和图形 —— 黑客帝国绿 #00ff41 或琥珀色 #ffb000。一支电子枪一种色相；出现第二种颜色就已经不对味了。

2. Phosphor glow on every glyph每个字形都带磷光辉光 surface defining定义特征

   Text and line art carry a same-hue halo — text-shadow: 0 0 6px rgba(0,255,65,.6), 0 0 20px rgba(0,255,65,.25) — as if the phosphor is still warm. Flat, matte text breaks the spell.

   文字和线条画都带同色光晕 —— text-shadow: 0 0 6px rgba(0,255,65,.6), 0 0 20px rgba(0,255,65,.25) —— 像磷光还没冷却。平实的哑光文字会立刻破功。

3. Scanlines and flicker扫描线与闪烁 surface defining定义特征

   A repeating-linear-gradient of 1px dark lines every 2–4px overlays the whole screen, plus a subtle brightness flicker in steps timing. The image should read as emitted by a tube, not printed.

   用 repeating-linear-gradient 在整个屏幕上覆一层每 2–4px 一条的 1px 暗线，再加 steps 时序的轻微亮度闪烁。画面要读起来像显像管发出来的，不是印上去的。

4. Blinking block cursor闪烁方块光标 motion defining定义特征

   A solid full-cell block █ at the input position, toggling on/off roughly once a second with steps(1) — a hard blink, never a fade. It marks where the machine is listening.

   输入位置是一个实心整格方块 █，大约每秒开关一次，用 steps(1) —— 硬闪，绝不淡入淡出。它标出机器正在听的位置。

5. Boot logs and typewriter reveal开机日志与打字机式揭示 motion supporting辅助特征

   Screens open with BIOS-style self-tests ('MEM CHECK ...... OK') in terse ALL-CAPS machine voice behind prompt symbols (>, $, #), and content appears character-by-character at ~30–60ms per glyph.

   打开画面先跑 BIOS 式自检（「MEM CHECK ...... OK」），提示符（>、$、#）后面跟着简短的全大写机器口吻，内容再以每字约 30–60ms 的速度逐字出现。

6. ASCII boxes and character artASCII 框线与字符画 imagery supporting辅助特征

   Frames drawn from +---+ and |, progress bars as [██████░░░░], waveforms and logos built from characters on the monospace grid — graphics rendered as text because the hardware had nothing else.

   边框用 +---+ 和 | 画，进度条是 [██████░░░░]，波形和标志都搭在等宽网格的字符上 —— 把图形渲染成文字，因为当年的硬件别无选择。

7. Which phosphor用哪种磷光 color variable可变特征

   Green #00ff41 is the Matrix cliché; amber #ffb000 reads warmer and more 'office 1983'; cool white is the sober variant. The construction carries the style, not the hue.

   绿色 #00ff41 是黑客帝国式套路；琥珀色 #ffb000 更暖、更像「1983 年的办公室」；冷白是素净变体。撑起风格的是构造，不是色相。

8. Soft, polychrome UI柔软多彩的现代 UI surface avoid避免

   Full-color imagery, gradients, rounded glass cards, and drop shadows dissolve the illusion instantly — if it looks like a modern app tinted green, it isn't terminal.

   全彩图像、渐变、圆角玻璃卡片和投影会立刻瓦解幻境 —— 如果它看起来像刷成绿色的现代 App，那就不是终端。

Often confused with: Web Brutalism最容易混淆：网页粗野主义

Compare: Terminal Hacker vs Web Brutalism →对比页 →

In code — optional starting points代码写法 —— 可选起点

color: #00ff41; background: #050805; font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; text-shadow: 0 0 6px rgba(0,255,65,.6), 0 0 20px rgba(0,255,65,.25);

.crt::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); animation: crt-flicker 3s steps(60) infinite; }

.prompt::after { content: "\2588"; animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } }

Style brief — paste into your agent风格 Brief —— 粘贴给你的代理

Accessibility & misuse可访问性与误用

Full-brightness phosphor on black passes contrast easily (#00ff41 on #000 is roughly 13:1), but the glow and the dim 'muted' states eat it — keep body text at full brightness, test any dimmed line against 4.5:1, and remember bright-vs-dim is the only emphasis axis in a one-hue palette, so don't let dimmed text carry essential information.

全亮磷光配黑底轻松过对比度（#00ff41 配 #000 约 13:1），但辉光和暗色「弱化」状态会吃掉它 —— 正文保持全亮，所有压暗的文字实测过 4.5:1；记住单色相 palette 里亮/暗是唯一的强调轴，别让压暗的文字承载关键信息。

Flicker and jitter are the real hazard: keep any flashing below three per second and low in amplitude, and under prefers-reduced-motion disable flicker, cursor blink, and typewriter entirely — content must already be present in the DOM and fully readable without the animation.

闪烁和抖动才是真正的风险：任何闪光控制在每秒 3 次以内、低幅度，并在 prefers-reduced-motion 下彻底关掉闪烁、光标闪和打字机 —— 内容必须已经在 DOM 里，不靠动画也能完整阅读。

ALL-CAPS log lines and dense monospace slow long-form reading, and some screen readers announce all-caps strings letter by letter — keep caps to short status strings, write body copy in normal case, and never let a long boot sequence gate access to the actual content.

全大写日志行和密集等宽字会拖慢长文阅读，有些屏幕阅读器还会把全大写字符串逐字母念出来 —— 大写只留给短状态串，正文用正常大小写，永远别让冗长的开机序列挡住真正的内容。

Origin起源

Descends from 1970s–80s character terminals, when one electron gun meant one color: green- and amber-phosphor CRTs like IBM's 3270 (1971) and DEC's VT100 (1978) produced the look out of pure hardware necessity. Hollywood turned it into 'hacker' shorthand — WarGames (1983), and above all The Matrix (1999), whose falling green 'digital rain' was created by production designer Simon Whiteley from glyphs scanned out of Japanese cookbooks. The style survives as deliberate retro-futurism: CSS scanlines, boot sequences, and block cursors running on hardware that has never seen a tube.

源自 1970–80 年代的字符终端，那时一支电子枪就意味着一种颜色：IBM 3270（1971）和 DEC VT100（1978）这类绿磷光、琥珀磷光 CRT 纯粹出于硬件必然造就了这副模样。好莱坞把它变成了「黑客」的速记符号 —— 《战争游戏》（1983），尤其是《黑客帝国》（1999），那场下落的绿色「数字雨」由艺术指导 Simon Whiteley 创作，字形扫描自日文菜谱。这个风格如今作为刻意的复古未来主义存活着：CSS 扫描线、开机序列和方块光标，跑在从没见过显像管的硬件上。

See also相关词条