industrial-brutalist-ui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

SKILL: Industrial Brutalism & Tactical Telemetry UI

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

1. Skill Meta

1. Skill 元信息

Name: Industrial Brutalism & Tactical Telemetry Interface Engineering Description: Advanced proficiency in architecting web interfaces that synthesize mid-century Swiss Typographic design, industrial manufacturing manuals, and retro-futuristic aerospace/military terminal interfaces. This discipline requires absolute mastery over rigid modular grids, extreme typographic scale contrast, purely utilitarian color palettes, and the programmatic simulation of analog degradation (halftones, CRT scanlines, bitmap dithering). The objective is to construct digital environments that project raw functionality, mechanical precision, and high data density, deliberately discarding conventional consumer UI patterns.

名称： 工业粗野主义与战术遥测界面工程 描述： 精通架构 Web 界面的高级技能，融合中世纪 Swiss 字体排版设计、工业制造手册，以及复古未来主义的航空航天/军用终端界面。这一设计体系要求严格掌控刚性模块化网格、极端字体尺度对比、纯实用主义配色，以及以程序化方式模拟 analog degradation（halftone、CRT scanlines、bitmap dithering）。目标是构建能够呈现原始功能感、机械精度与高数据密度的数字环境，并有意摒弃传统消费级 UI 模式。

2. Visual Archetypes

2. 视觉原型

The design system operates by merging two distinct but highly compatible visual paradigms. Pick ONE per project and commit to it. Do not alternate or mix both modes within the same interface.

该设计系统通过融合两种截然不同但高度兼容的视觉范式来运作。每个项目只能选择其中一种并始终贯彻。不要在同一界面中交替使用或混合这两种模式。

2.1 Swiss Industrial Print

2.1 Swiss 工业印刷

Derived from 1960s corporate identity systems and heavy machinery blueprints.

Characteristics: High-contrast light modes (newsprint/off-white substrates). Reliance on monolithic, heavy sans-serif typography. Unforgiving structural grids outlined by visible dividing lines. Aggressive, asymmetric use of negative space punctuated by oversized, viewport-bleeding numerals or letterforms. Heavy use of primary red as an alert/accent color.

源自 20 世纪 60 年代的企业识别系统和重型机械蓝图。

特征： 高对比度浅色模式（新闻纸/米白基底）。依赖巨型、粗重的无衬线字体。采用可见分隔线勾勒的不容妥协的结构网格。大胆、不对称地使用负空间，并以超大、贯穿视口的数字或字母形成强烈视觉节点。大量使用主红色作为警示/强调色。

2.2 Tactical Telemetry & CRT Terminal

2.2 战术遥测与 CRT 终端

Derived from classified military databases, legacy mainframes, and aerospace Heads-Up Displays (HUDs).

Characteristics: Dark mode exclusivity. High-density tabular data presentation. Absolute dominance of monospaced typography. Integration of technical framing devices (ASCII brackets, crosshairs). Application of simulated hardware limitations (phosphor glow, scanlines, low bit-depth rendering).

源自机密军事数据库、传统大型机和航空航天抬头显示器（HUD）。

特征： 仅限深色模式。以高密度表格形式呈现数据。绝对以等宽字体为主。整合技术框架元素（ASCII 括号、十字准线）。应用模拟硬件限制（phosphor glow、扫描线、低位深渲染）。

3. Typographic Architecture

3. 字体排版架构

Typography is the primary structural and decorative infrastructure. Imagery is secondary. The system demands extreme variance in scale, weight, and spacing.

字体排版是主要的结构与装饰基础设施，图像素材则退居次要位置。该系统要求在尺度、字重和间距上形成极端差异。

3.1 Macro-Typography (Structural Headers)

3.1 宏观排版（结构标题）

Classification: Neo-Grotesque / Heavy Sans-Serif.
Optimal Web Fonts: Neue Haas Grotesk (Black), Inter (Extra Bold/Black), Archivo Black, Roboto Flex (Heavy), Monument Extended.
Implementation Parameters:
- Scale: Deployed at massive scales using fluid typography (e.g.,
```
clamp(4rem, 10vw, 15rem)
```
  ).
- Tracking (Letter-spacing): Extremely tight, often negative (
```
-0.03em
```
  to
```
-0.06em
```
  ), forcing glyphs to form solid architectural blocks.
- Leading (Line-height): Highly compressed (
```
0.85
```
  to
```
0.95
```
  ).
- Casing: Exclusively uppercase for structural impact.

分类： Neo-Grotesque / Heavy Sans-Serif。
最佳 Web 字体： Neue Haas Grotesk (Black)、Inter (Extra Bold/Black)、Archivo Black、Roboto Flex (Heavy)、Monument Extended。
实现参数：
- 尺度： 使用流体排版（fluid typography）部署超大字号（例如
```
clamp(4rem, 10vw, 15rem)
```
  ）。
- 字距（Tracking）： 极其紧凑，通常为负值（
```
-0.03em
```
  至
```
-0.06em
```
  ），迫使字形组合成完整的建筑块。
- 行高（Leading）： 高度压缩（
```
0.85
```
  至
```
0.95
```
  ）。
- 大小写： 结构标题全部使用大写，以强化视觉冲击。

3.2 Micro-Typography (Data & Telemetry)

3.2 微观排版（数据与遥测）

Classification: Monospace / Technical Sans.
Optimal Web Fonts: JetBrains Mono, IBM Plex Mono, Space Mono, VT323, Courier Prime.
Implementation Parameters:
- Scale: Fixed and small (
```
10px
```
  to
```
14px
```
  /
```
0.7rem
```
  to
```
0.875rem
```
  ).
- Tracking: Generous (
```
0.05em
```
  to
```
0.1em
```
  ) to simulate mechanical typewriter spacing or terminal matrices.
- Leading: Standard to tight (
```
1.2
```
  to
```
1.4
```
  ).
- Casing: Exclusively uppercase. Used for all metadata, navigation, unit IDs, and coordinates.

分类： Monospace / Technical Sans。
最佳 Web 字体： 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 Textural Contrast (Artistic Disruption)

3.3 纹理对比（艺术性扰动）

Classification: High-Contrast Serif.
Optimal Web Fonts: Playfair Display, EB Garamond, Times New Roman.
Implementation Parameters: Used exceedingly sparingly. Must be subjected to heavy post-processing (halftone filters, 1-bit dithering) to degrade vector perfection and create textural juxtaposition against the clean sans-serifs.

分类： High-Contrast Serif。
最佳 Web 字体： Playfair Display、EB Garamond、Times New Roman。
实现参数： 使用频率极低。必须经过重度后处理（halftone 滤镜、1-bit dithering），削弱矢量图形的完美度，从而与纯净的无衬线字体形成纹理对比。

4. Color System

4. 色彩系统

The color architecture is uncompromising. Gradients, soft drop shadows, and modern translucency are strictly prohibited. Colors simulate physical media or primitive emissive displays.

CRITICAL: Choose ONE substrate palette per project and use it consistently. Never mix light and dark substrates within the same interface.

色彩架构毫不妥协。严格禁止使用渐变、柔和投影和现代半透明效果。色彩应模拟物理媒介或原始发光显示器。

关键要求：每个项目只能选择一种基底配色并始终保持一致。绝不要在同一界面中混合浅色与深色基底。

If Swiss Industrial Print (Light):

如果采用 Swiss 工业印刷（浅色）：

Background:
```
#F4F4F0
```
or
```
#EAE8E3
```
(Matte, unbleached documentation paper).
Foreground:
```
#050505
```
to
```
#111111
```
(Carbon Ink).
Accent:
```
#E61919
```
or
```
#FF2A2A
```
(Aviation/Hazard Red). This is the ONLY accent color. Used for strike-throughs, thick structural dividing lines, or vital data highlights.

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

If Tactical Telemetry (Dark):

如果采用战术遥测（深色）：

Background:
```
#0A0A0A
```
or
```
#121212
```
(Deactivated CRT. Avoid pure
```
#000000
```
).
Foreground:
```
#EAEAEA
```
(White phosphor). This is the primary text color.
Accent:
```
#E61919
```
or
```
#FF2A2A
```
(Aviation/Hazard Red). Same red, same rules.
Terminal Green (
#4AF626
): Optional. Use ONLY for a single specific UI element (e.g., one status indicator or one data readout) — never as a general text color. If it doesn't serve a clear purpose, omit it entirely.

背景：
```
#0A0A0A
```
或
```
#121212
```
（停用 CRT。避免使用纯
```
#000000
```
）。
前景：
```
#EAEAEA
```
（白色 phosphor）。这是主要文字颜色。
强调色：
```
#E61919
```
或
```
#FF2A2A
```
（航空/危险红）。采用相同的红色和相同规则。
终端绿（
#4AF626
）：可选。仅可用于一个特定 UI 元素（例如一个状态指示器或一组数据读数），绝不能作为常规文字颜色。如果没有明确用途，应完全省略。

5. Layout and Spatial Engineering

5. 布局与空间工程

The layout must appear mathematically engineered. It rejects conventional web padding in favor of visible compartmentalization.

The Blueprint Grid: Strict adherence to CSS Grid architectures. Elements do not float; they are anchored precisely to grid tracks and intersections.
Visible Compartmentalization: Extensive utilization of solid borders (
```
1px
```
or
```
2px solid
```
) to delineate distinct zones of information. Horizontal rules (
```
<hr>
```
) frequently span the entire container width to segregate operational units.
Bimodal Density: Layouts oscillate between extreme data density (tightly packed monospace metadata clustered together) and vast expanses of calculated negative space framing macro-typography.
Geometry: Absolute rejection of
```
border-radius
```
. All corners must be exactly 90 degrees to enforce mechanical rigidity.

布局必须呈现出经过数学化设计的结构感。它拒绝常规 Web padding，转而采用清晰可见的信息分区。

蓝图网格（The Blueprint Grid）： 严格遵循 CSS Grid 架构。元素不可随意漂浮；必须精确锚定在网格轨道及其交叉点上。
可见分区： 广泛使用实线边框（
```
1px
```
或
```
2px solid
```
）来划分不同的信息区域。水平分隔线（
```
<hr>
```
）通常贯穿整个容器宽度，用于分隔操作单元。
双模密度： 布局在极端数据密度（紧密聚集的等宽元数据）与用于衬托宏观排版的大面积精确负空间之间切换。
几何形态： 绝对禁止使用
```
border-radius
```
。所有角必须保持精确的 90 度，以强化机械刚性。

6. UI Components and Symbology

6. UI 组件与符号系统

Standard web UI conventions are replaced with utilitarian, industrial graphic elements.

Syntax Decoration: Utilization of ASCII characters to frame data points.
- Framing:
```
[ DELIVERY SYSTEMS ]
```
  ,
```
< RE-IND >
```
- Directional:
```
>>>
```
  ,
```
///
```
  ,
```
\\\\
```
Industrial Markers: Prominent integration of registration (
```
®
```
), copyright (
```
©
```
), and trademark (
```
™
```
) symbols functioning as structural geometric elements rather than legal text.
Technical Assets: Integration of crosshairs (
```
+
```
) at grid intersections, repeating vertical lines (barcodes), thick horizontal warning stripes, and randomized string data (e.g.,
```
REV 2.6
```
,
```
UNIT / D-01
```
) to simulate active mechanical processes.

标准 Web UI 约定被实用型工业图形元素取代。

语法装饰： 使用 ASCII 字符框定数据点。
- 框架：
```
[ DELIVERY SYSTEMS ]
```
  、
```
< RE-IND >
```
- 方向：
```
>>>
```
  、
```
///
```
  、
```
\\\\
```
技术素材： 在网格交叉点整合十字准线（
```
+
```
）、重复垂直线（条形码）、粗重水平警示条纹，以及随机字符串数据（例如
```
REV 2.6
```
、
```
UNIT / D-01
```
），以模拟活跃的机械流程。

7. Textural and Post-Processing Effects

7. 纹理与后处理效果

To prevent the design from appearing purely digital, simulated analog degradation is engineered into the frontend via CSS and SVG filters.

Halftone and 1-Bit Dithering: Transforming continuous-tone images or large serif typography into dot-matrix patterns. Achieved via pre-processing or CSS
```
mix-blend-mode: multiply
```
overlays combined with SVG radial dot patterns.

CRT Scanlines: For terminal interfaces, applying a

repeating-linear-gradient

to the background to simulate horizontal electron beam sweeps (e.g.,

repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px)

Mechanical Noise: A global, low-opacity SVG static/noise filter applied to the DOM root to introduce a unified physical grain across both dark and light modes.

为了防止设计显得过于数字化，使用 CSS 和 SVG 滤镜对前端进行工程化处理，模拟 analog degradation。

Halftone 与 1-Bit Dithering： 将连续色调图像或大型衬线字体转换为点阵图案。通过预处理，或使用 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 root 应用全局低透明度 SVG 静态/噪声滤镜，在深色和浅色模式中引入统一的物理颗粒感。

8. Web Engineering Directives

8. Web 工程指令

Grid Determinism: Utilize
```
display: grid; gap: 1px;
```
with contrasting parent/child background colors to generate mathematically perfect, razor-thin dividing lines without complex border declarations.
Semantic Rigidity: Construct the DOM using precise semantic tags (
```
<data>
```
,
```
<samp>
```
,
```
<kbd>
```
,
```
<output>
```
,
```
<dl>
```
) to accurately reflect the technical nature of the telemetry.
Typography Clamping: Implement CSS
```
clamp()
```
functions exclusively for macro-typography to ensure massive text scales aggressively while maintaining structural integrity across viewports.

网格确定性： 使用
```
display: grid; gap: 1px;
```
，并通过对比父级与子级背景色生成数学上精确、极其纤细的分隔线，避免使用复杂的边框声明。
语义刚性： 使用精确的语义标签（
```
<data>
```
、
```
<samp>
```
、
```
<kbd>
```
、
```
<output>
```
、
```
<dl>
```
）构建 DOM，以准确反映遥测信息的技术属性。
字体尺度钳制： 仅对宏观排版使用 CSS
```
clamp()
```
函数，确保超大字号能够强硬扩展，同时在不同视口下保持结构完整性。