industrial-brutalist-ui

# SKILL: Industrial Brutalism & Tactical Telemetry UI ## 1. Skill Meta **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. ## 1b. Single-voice craft (do NOT parallelize) This is **one coherent art-direction voice**, not a multi-angle audit. Do NOT fan out to parallel sub-agents, run consensus graders, or split the look across workers — a brutalist interface lives or dies by a single, ruthlessly consistent hand. One designer, one substrate, one accent, start to finish. **Decision-first workflow (apply in order):** 1. **Commit the archetype.** Pick exactly ONE — Swiss Industrial Print (§2.1, light) OR Tactical Telemetry/CRT (§2.2, dark). Never mix substrates in one interface (§4). 2. **Lock the system tokens** before writing any component: substrate bg + foreground + the single red accent (§4), macro font + micro mono font (§3), grid unit + border weight (§5). 3. **Build typographically.** Typography is the structure; imagery is secondary (§3). Macro headers via `clamp()`, monospace for all telemetry/metadata. 4. **Degrade last.** Layer analog effects (halftone, scanlines, noise — §7) only after the rigid layout reads correctly. Effects are seasoning, never the meal. **Worked example — Tactical Telemetry status card (one element, full voice):** ```html <output class="cell"> <span class="meta">[ UNIT / D-01 ] REV 2.6</span> <data value="98.4" class="readout">98.4<span class="unit">%</span></data> <span class="status">▮ NOMINAL</span> </output> ``` ```css .cell{background:#121212;color:#EAEAEA;border:1px solid #2A2A2A;border-radius:0; padding:12px;font-family:"JetBrains Mono",monospace;display:grid;gap:8px} .meta{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#777} .readout{font-size:clamp(2rem,6vw,4rem);line-height:.9;letter-spacing:-.04em; font-family:"Archivo Black",sans-serif} .unit{color:#E61919} /* the single accent, used once, with intent */ .status{font-size:.7rem;letter-spacing:.08em;color:#4AF626} /* green: ONE element only */ ``` Note the discipline: `border-radius:0`, one accent red used once, terminal green confined to a single status glyph (§4) — not a palette. ## 2. Visual Archetypes 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 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. ### 2.2 Tactical Telemetry & CRT Terminal 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). ## 3. Typographic Architecture 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) * **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. ### 3.2 Micro-Typography (Data & Telemetry) * **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. ### 3.3 Textural Contrast (Artistic Disruption) * **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. ## 4. Color System 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): * **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. ### 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. ## 5. Layout and Spatial Engineering 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. ## 6. UI Components and Symbology 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. ## 7. Textural and Post-Processing Effects 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. ## 8. Web Engineering Directives 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. 2. **Semantic Rigidity:** Construct the DOM using precise semantic tags (`<data>`, `<samp>`, `<kbd>`, `<output>`, `<dl>`) to accurately reflect the technical nature of the telemetry. 3. **Typography Clamping:** Implement CSS `clamp()` functions exclusively for macro-typography to ensure massive text scales aggressively while maintaining structural integrity across viewports. ## 9. Output Contract Deliver, in this order: 1. **Archetype declaration** — which ONE mode was chosen (Swiss Print or Tactical Telemetry) and why it fits the brief. 2. **Design tokens** — the locked substrate bg, foreground, single red accent (+ optional one-element green), macro font, mono font, grid unit, and border weight, as concrete values or CSS custom properties. 3. **Working code** — production HTML/CSS (and framework markup if the project uses one) for the requested surface, using semantic tags (§8.2), real font stacks, and `border-radius:0` throughout. 4. **Effect layer** — the specific halftone/scanline/noise treatment applied, with the actual CSS/SVG snippet. ## 10. Verify before you call it done - [ ] Exactly ONE archetype/substrate is used — no light/dark mixing (§4). - [ ] The red accent appears with intent only; terminal green (if any) is confined to a single element (§4). - [ ] No `border-radius`, no gradients, no soft drop shadows, no modern translucency (§4, §5). - [ ] Macro type uses `clamp()` with tight/negative tracking; all metadata is uppercase monospace (§3). - [ ] Layout is grid-anchored with visible compartment borders (§5); the page renders without console errors and is responsive. - [ ] At least one analog degradation effect is present but layered last (§7). ## 11. Evidence & honesty guardrail - **No invented assets.** Reference only fonts and techniques actually named here (or real, loadable web fonts). Never claim a font/effect is applied without the corresponding code present. - **Cite the section** driving each non-obvious choice (e.g. "tracking `-0.04em` per §3.1") so decisions are auditable, not vibes. - **Don't hallucinate the brand.** If the brief lacks content, copy, or data, use clearly-marked placeholder telemetry (`UNIT / D-01`, `REV 2.6`) — never fabricate real metrics or claims. - **Scope discipline (surgical):** restyle only what was asked; do not refactor unrelated components or introduce new dependencies. Preserve every constraint in §§2–8 — they are the skill, not suggestions.