Home / All Skills / Design & Motion / industrial-brutalist-ui
English (EN)简体中文 (ZH)日本語 (JA)
Design & Motion · leonxlnx/taste-skill

industrial-brutalist-ui

Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.

L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit
Author leonxlnxGitHub leonxlnx/taste-skill ↗Stars 85698License MIT（仓库根 LICENSE 文件；GitHub API spdx MIT；Copyright (c) 2026 Leonxlnx）Commit ccbc15639c
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

Binary paradigm choice as a constitutional-level constraint: Choose either Swiss Industrial Print (light industrial print) or Tactical Telemetry & CRT Terminal (dark terminal) with a full commitment throughout; mixing is strictly forbidden.

skills/brutalist-skill/SKILL.md
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.**
The 'Pick-ONE' rule in Section 2 hardcodes stylistic consistency to prevent the common AI failure mode of inserting random dark modules into light pages, mirroring the 'Random dark sections in a light mode page' issue audited in redesign-skill.

Three-track typography architecture (§3): Heavy sans with negative tracking and compressed line-height for macro headers, small monospace uppercase with wide tracking for data telemetry, and decorative serif reserved for minimal, fragmented text.

skills/brutalist-skill/SKILL.md
* **Optimal Web Fonts:** Neue Haas Grotesk (Black), Inter (Extra Bold/Black), Archivo Black, Roboto Flex (Heavy), Monument Extended.
Unlike other skills in the family, Inter is listed as a macro font option here, showing that the family ban targets 'default-feeling usage' rather than the font itself; macro and micro typography are driven by fluid clamp sizing and tracking parameters (§3.1/3.2).

Color framed as 'medium simulation': Gradients, soft shadows, and modern translucency are banned; must operate on a single substrate (light paper texture or dark CRT) with a single red primary accent, while terminal green is restricted to a single UI element.

skills/brutalist-skill/SKILL.md
The color architecture is uncompromising. Gradients, soft drop shadows, and modern translucency are strictly prohibited. Colors simulate physical media or primitive emissive displays.
§4 defines two complete substrate palettes (#F4F4F0/#EAE8E3 paper vs #0A0A0A/#121212 CRT, with pure #000000 banned for dark mode), a unique red #E61919/#FF2A2A, and restricted terminal green #4AF626—enforcing a color scarcity discipline more extreme than other family members.

Layout as engineering: CSS Grid anchoring, visible division borders, dual-state density (extreme data density vs massive negative space), and strict 90-degree right angles.

skills/brutalist-skill/SKILL.md
* **Geometry:** Absolute rejection of `border-radius`. All corners must be exactly 90 degrees to enforce mechanical rigidity.
Banning border-radius entirely is one of the most mechanically verifiable rules of brutalist design; §5 further demands that elements be 'anchored precisely to grid tracks and intersections'.

Industrialized semiotics: ASCII borders/directional glyphs, registered symbols (®©™) as structural geometry, and crosshairs/barcodes/random serial strings creating the illusion of an active, running machine.

skills/brutalist-skill/SKILL.md
* **Syntax Decoration:** Utilization of ASCII characters to frame data points.
§6 specifies concrete framing templates (`[ DELIVERY SYSTEMS ]`, `< RE-IND >`, `>>>`/`///`/`\\`) along with string patterns like REV 2.6 / UNIT / D-01.

Analog degradation textures implemented via pure CSS/SVG: Halftone/1-bit dithering, repeating-linear-gradient CRT scanlines, and global low-opacity noise—all authored as frontend code rather than image assets.

skills/brutalist-skill/SKILL.md
* **CRT Scanlines:** For terminal interfaces, applying a `repeating-linear-gradient` to the background to simulate horizontal electron beam sweeps
The implementation in §7 achieves a retro hardware feel without requiring external image assets; noise mandates fixed positioning with low opacity, aligning with family performance guidelines.

Closing with four engineering directives in §8: The gap:1px grid hairline trick, semantic DOM (data/samp/kbd/output/dl), and clamp() macro typography scaling.

skills/brutalist-skill/SKILL.md
1. **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.
Using gap:1px combined with background contrast is a classic CSS technique for crisp hairlines, here codified into an explicit rule; the entire document requires zero scripts and zero external resource calls.

2Core Capabilities

01Dual visual language selector: Swiss Industrial Print / Tactical Telemetry & CRT (pick one with exclusive commitment)
02Macro/micro typography hierarchy: Compressed gigantic headings with negative tracking (fluid clamp) + uppercase wide-tracked monospace data font
03Single-substrate color discipline: Light paper or dark CRT substrate, single aviation red accent, isolated terminal green
04Engineered layout: Grid anchoring, visible partition lines, 90-degree right angles, dual-state density
05CSS/SVG analog degradation textures: Halftone dithering, CRT scanlines, mechanical noise
06Semantic DOM and industrial semiotics (ASCII borders, registered symbols, crosshairs, serial strings)

3External Dependencies

KindDependency / Endpoint
package字体栈建议：Neue Haas Grotesk / Archivo Black / Monument Extended / JetBrains Mono / VT323 等

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Can be auto-loaded
For Administrators
Register source and version
Evidence & Triggers (File Paths & Excerpts)
  • SKILL.md: Prompt-only instructions and rule definitions; contains zero script execution and external side effects
Audit Notes: (Evidence: Directory contains only SKILL.md, verified via git ls-files; zero token scan matches, 'fs.' match was a false positive for 'sans-serifs.'). Skill level has zero scripts, zero outbound network traffic, zero credential access, and zero local read/write operations; CSS/SVG texture effects are deliverables in code snippets, not execution artifacts of the skill. Caveats are limited to font recommendations potentially leading generated code to fetch external fonts, and absolute style constraints lacking arbitration when conflicting with user requirements, both of which belong strictly to the dialogue/generation layer.

5Second-Pass Verification

  • [ok] 目录资产面（含隐藏/未跟踪文件） — git ls-files + ls -A 双查：该 skill 目录仅 1 个文件 SKILL.md，无 scripts/references/模板/数据/隐藏文件，无可执行代码。
  • [ok] 执行类 token 扫描 — 逐文件扫描 bash/exec/child_process/curl/wget/fetch/axios/process.env/API_KEY/.env/fs./writeFile/.github 等零命中（brutalist 一处 'sans-serifs.' 单词结尾 fs. 为误报，人工复核排除）。
  • [ok] 引文逐条 grep -F 字节复核 — 本 JSON 所用全部 quote 均以 grep -F 在 pin commit 工作树中逐条验证存在，无 paraphrase 冒充。
  • [ok] 元数据与 pin 核对 — 本地 git HEAD == 任务 pin ccbc15639c97057cbfcf32ecebc38ef716e4bb37（README 显示该提交为 docs/sponsor 修订 #102，2026-08-24）；GitHub API 实查 stars=85698、MIT、pushed_at=2026-08-24T15:23:56Z。frontmatter name 与任务给定名一致。
  • [ok] 功能声明 vs 实际能力夸大检查 — description 声称均由 SKILL.md 正文纯 prompt 机制兑现，无脚本可调用、无越界承诺（详见本文件 how_it_works 引文）。
  • [ok] 家族矛盾点：Inter 在其它成员被禁、此处被列为主字体 — §3.1 原文将 Inter (Extra Bold/Black) 列入 Optimal Web Fonts，且上下文要求负字距压缩大写——与 soft/minimalist 的『禁 Inter 默认用法』不冲突：禁令针对默认感，此处为 Black 字重风格化使用。已在 traits 中如实记录该家族内差异。
  • [ok] 『Never mix light and dark substrates』与 §2 Pick-ONE 是否一致 — §4 CRITICAL 行与 §2 双重声明（'Never mix light and dark substrates within the same interface.'），两处互证，无矛盾。
  • [ok] 红色『ONLY accent』与 terminal green 是否冲突 — §4 明示 #4AF626 仅限单一 UI 元素且『If it doesn't serve a clear purpose, omit it entirely』，受限例外被显式声明，非矛盾。

6Verdict & Scenarios

  • Extremely pure aesthetic with low verification overhead: 90-degree corners, single red accent, and bans on gradients/soft shadows/border-radius are mechanically inspectable rules.
  • Dual paradigm selection + Pick-ONE commitment provides stylistic flexibility while locking down consistency.
  • All tactile texture effects provide copy-paste CSS/SVG templates, delivering a retro hardware look with zero image asset overhead.
  • Unified engineering and visual design: The gap:1px grid line technique, semantic DOM, and clamp macro typography are production-ready frontend practices.
  • Purposely built for data-dense interfaces: Density is treated as a feature rather than a flaw, perfect for dashboards, telemetry, and industrial products.
    • Best for: Ideal for interfaces clearly aiming for an 'industrial brutalist / tactical telemetry' aesthetic: data-heavy dashboards, monitoring/operations terminal interfaces, portfolios, or editorial/archival sites (declassified blueprint aesthetic); also suitable for greenfield React/Tailwind/HTML projects running on hosts supporting custom fonts.
    Not for: Not suitable for soft or luxury brand marketing pages (soft-skill is preferred), minimalist workspaces (minimalist-ui), or mainstream consumer apps; unsuitable for enterprise brand contexts where clients reject zero-radius corners, all-caps typography, or single-red palettes; not intended for incremental refactoring of legacy codebases (use redesign-existing-projects).
    Install Agent-Ready
    ① Verified Mirror 2026-09-09
    Option A · Direct DownloadDownload industrial-brutalist-ui.tar.gz
    sha256: 5e11235d90ac1192…
    Option B · Copy Guide for Agent
    install.json
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 3cca18b368.