工业粗野主义与战术遥测界面

解决什么问题

默认的 Web UI 面向消费者：柔和渐变、圆角卡片、半透明阴影。当页面需要承载遥测数据、工业手册或航空终端级别的高密度信息时，这些「友好」的视觉语言反而成为噪音。本技能面向另一种界面：看起来像物理制造文档或军用显示器的数字延伸，而非营销页。

核心能力与工作方式

二选一的视觉原型

• Swiss Industrial Print：源自 1960 年代企业识别系统与重型机械蓝图。高对比浅色底（#F4F4F0 / #EAE8E3），粗体无衬线大字，由可见分隔线勾勒的刚性网格，大面积留白与溢出视口的巨幅数字，红色（#E61919）作为唯一强调色。
• Tactical Telemetry & CRT Terminal：源自军用数据库、老式大型机与航天 HUD。纯深色底（#0A0A0A，禁用纯黑），等宽字体统治全局，ASCII 括号与十字准线，磷光辉光、扫描线、低色深渲染等模拟硬件限制。

规则是硬性的：每个项目只能选一种模式，禁止混用。

字体即结构

• 宏字号：Neo-Grotesque 粗体（Inter Black、Archivo Black 等），用 clamp(4rem, 10vw, 15rem) 拉至极值，负字距（-0.03em 到 -0.06em），压缩行高，全大写。
• 微字号：等宽字体（JetBrains Mono、IBM Plex Mono 等），固定在 10–14px，宽松字距模拟打字机间距，用于全部元数据、坐标与单元 ID。
• 衬线字体（Playfair Display 等）仅作点缀，且必须经过半调或 1-bit 抖动处理，与干净的无衬线形成纹理冲突。

工程手法

• display: grid + gap: 1px 配合父子背景色差生成极细分隔线；
• 零圆角，所有角落严格 90 度；
• 用 repeating-linear-gradient 做 CRT 扫描线、SVG 噪点滤镜做全局颗粒、mix-blend-mode: multiply 叠加半调网点，模拟模拟退化；
• ®、©、™ 作为结构几何元素出现，而非法律文本。

适用边界

• 这是一套审美约束而非组件库，从零搭建时需要明确的设计纪律；
• 红色只能用于强调线、删除线与关键数据，终端绿仅允许出现在一个状态指示符上，无明确用途就删掉；
• 极端对比与巨幅字号在小屏可读性差，不适合移动优先场景；
• 多层滤镜与抖动效果有性能预算，上线前需实测。