industrial-brutalist-ui

name	industrial-brutalist-ui
description	原始机械感界面，融合瑞士印刷字体与军用终端美学。刚性栅格、极端字号对比、实用主义配色、模拟老化效果。适用于数据密集型仪表盘、作品集，或需要显得像解密蓝图的编辑部站点。

SKILL：工业粗野主义与战术遥测 UI

1. 技能元信息

名称： 工业粗野主义与战术遥测界面工程 描述： 精通架构那类网页界面——它们把二十世纪中叶的瑞士印刷字体设计、工业制造手册与复古未来主义的航空/军用终端界面熔于一炉。这门学科要求你绝对掌握刚性模块化栅格、极端字号对比、纯实用主义配色，以及对模拟老化的程序化仿真（半调网点、CRT 扫描线、位图抖动）。目标是构建投射出原始功能性、机械精度与高数据密度的数字环境，刻意抛弃常规消费级 UI 套路。

2. 视觉原型

本设计系统通过融合两种迥异但高度兼容的视觉范式来运作。每个项目挑选其一并贯彻到底。不要在同一界面内交替或混用两种模式。

2.1 瑞士工业印刷

源自 1960 年代企业识别系统与重型机械蓝图。

• 特征： 高对比度浅色模式（新闻纸/米白基底）。依赖厚重的整体式无衬线字体。以可见分隔线勾勒出毫不妥协的结构栅格。以超大、溢出视口的数字或字形来断句的激进非对称负空间。大量使用主红色作为警示/强调色。

2.2 战术遥测与 CRT 终端

源自机密军用数据库、遗留大型机与航空平视显示器（HUD）。

• 特征： 专属深色模式。高密度表格数据呈现。等宽字体绝对主导。集成技术性构框元素（ASCII 括号、十字准星）。应用模拟硬件限制（磷光辉光、扫描线、低位深渲染）。

3. 字体架构

字体是首要的结构与装饰基础设施。图像居次。系统要求在尺度、字重与间距上有极端变化。

3.1 宏观字体（结构性标题）

• 分类： Neo-Grotesque / 厚重无衬线。
• 最佳网页字体： Neue Haas Grotesk (Black)、Inter (Extra Bold/Black)、Archivo Black、Roboto Flex (Heavy)、Monument Extended。
• 实现参数：
  • 尺度： 用流体字体部署为巨大尺度（如 clamp(4rem, 10vw, 15rem)）。
  • 字距（Letter-spacing）： 极紧，常为负值（-0.03em 到 -0.06em），迫使字形组成实心的建筑级块体。
  • 行距（Line-height）： 高度压缩（0.85 到 0.95）。
  • 大小写： 结构冲击力上专用大写。

3.2 微观字体（数据与遥测）

• 分类： 等宽 / 技术无衬线。
• 最佳网页字体： JetBrains Mono、IBM Plex Mono、Space Mono、VT323、Courier Prime。
• 实现参数：
  • 尺度： 固定且小（10px 到 14px / 0.7rem 到 0.875rem）。
  • 字距： 宽松（0.05em 到 0.1em），模拟机械打字机间距或终端矩阵。
  • 行距： 标准到紧凑（1.2 到 1.4）。
  • 大小写： 专用大写。用于所有元数据、导航、单元 ID 与坐标。

3.3 质感对比（艺术性打断）

• 分类： 高对比衬线。
• 最佳网页字体： Playfair Display、EB Garamond、Times New Roman。
• 实现参数： 极其节制地使用。必须经过重度后处理（半调滤镜、1-bit 抖动）以劣化矢量完美度，与干净的无衬线形成质感对峙。

4. 色彩系统

色彩架构毫不妥协。渐变、柔和投影与现代半透明严格禁止。颜色模拟实体媒介或原始发光显示。

关键：每个项目选定一套基底配色并始终如一地使用。绝不在同一界面内混用浅色与深色基底。

若为瑞士工业印刷（浅色）：

• 背景： #F4F4F0 或 #EAE8E3（哑光、未漂白的文档纸）。
• 前景： #050505 到 #111111（碳素墨）。
• 强调： #E61919 或 #FF2A2A（航空/危险红）。这是唯一的强调色。用于删除线、粗结构分隔线或关键数据高亮。

若为战术遥测（深色）：

• 背景： #0A0A0A 或 #121212（关机的 CRT。避免纯 #000000）。
• 前景： #EAEAEA（白磷光）。这是主文本色。
• 强调： #E61919 或 #FF2A2A（航空/危险红）。同样的红，同样的规则。
• 终端绿（#4AF626）： 可选。仅用于某个特定的单一 UI 元素（如一个状态指示灯或一处数据读数）——绝不作为通用文本色。若无明确用途，就完全省略。

5. 布局与空间工程

布局必须显得经过数学工程。它拒绝常规网页内边距，转而采用可见的分隔隔间化。

• 蓝图栅格： 严格遵循 CSS Grid 架构。元素不漂浮；它们精确锚定到栅格轨道与交点。
• 可见隔间化： 大量使用实线边框（1px 或 2px solid）划分不同的信息区。水平线（<hr>）常跨满整个容器宽度以隔离操作单元。
• 双模密度： 布局在极端数据密度（紧密堆叠的等宽元数据聚集在一起）与框住宏观字体的大片精算负空间之间摆荡。
• 几何： 绝对拒绝 border-radius。所有转角必须恰好为 90 度，以强制机械刚性。

6. UI 组件与符号系统

标准网页 UI 惯例被实用主义的工业图形元素取代。

• 句法装饰： 使用 ASCII 字符框住数据点。
  • 构框： [ DELIVERY SYSTEMS ]、< RE-IND >
  • 方向： >>>、///、\\\\
• 工业标记： 突出集成注册（®）、版权（©）与商标（™）符号，让它们作为结构性几何元素而非法律文本发挥作用。
• 技术资产： 在栅格交点集成十字准星（+）、重复的竖线（条形码）、粗横向警示条纹，以及随机字符串数据（如 REV 2.6、UNIT / D-01）来模拟活跃的机械进程。

7. 质感与后处理效果

为防止设计显得纯数字，通过 CSS 与 SVG 滤镜把模拟老化工程化进前端。

• 半调网点与 1-Bit 抖动： 把连续色调图像或大号衬线字体转成点阵图样。通过预处理，或用 CSS mix-blend-mode: multiply 叠层结合 SVG 放射状点阵图样实现。
• CRT 扫描线： 对终端界面，给背景应用 repeating-linear-gradient 模拟水平电子束扫描（如 repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px)）。
• 机械噪点： 对 DOM 根应用一个全局、低透明度的 SVG 静态/噪点滤镜，在深浅两种模式上引入统一的物理颗粒感。

8. Web 工程指令

1. 栅格确定性： 使用 display: grid; gap: 1px; 配合父/子对比背景色，无需复杂边框声明即可生成数学上完美的极细分隔线。
2. 语义刚性： 用精确的语义标签（<data>、<samp>、<kbd>、<output>、<dl>）构建 DOM，准确反映遥测的技术性质。
3. 字体钳制： 专门对宏观字体使用 CSS clamp() 函数，确保超大文本在各视口间激进缩放的同时保持结构完整。