Engineer Brutalist & Tactical UI Interfaces

Industrial Brutalism and Tactical Telemetry UI is a frontend design skill from the Leonxlnx/taste-skill repository. It guides the creation of raw, mechanical interfaces that synthesize mid-century Swiss typographic design, industrial manufacturing manuals and retro-futuristic aerospace or military terminal interfaces. It rejects soft gradients, rounded consumer UI, glassmorphism and generic SaaS card layouts.

The design system offers two visual archetypes, and the rule is to pick one per project and commit to it. Swiss Industrial Print derives from 1960s corporate identity systems and heavy machinery blueprints: light newsprint or off-white backgrounds, heavy sans-serif type, visible dividing lines and asymmetric negative space. Tactical Telemetry and CRT Terminal derives from classified databases, legacy mainframes and aerospace HUDs: dark mode only, dense tabular data, monospaced type, ASCII brackets and crosshairs, and simulated hardware limits.

Typography carries the structure. Macro headers use heavy neo-grotesque sans-serif fonts such as Neue Haas Grotesk Black, Archivo Black or Monument Extended, at massive fluid scales (for example clamp(4rem, 10vw, 15rem)), with tight negative tracking of -0.03em to -0.06em, line height of 0.85 to 0.95 and all caps. Micro type for data uses monospace fonts such as JetBrains Mono, IBM Plex Mono or Space Mono at 10px to 14px with generous tracking. High-contrast serifs are used sparingly and degraded with halftone or dithering.

Use it when the user wants a brutalist, industrial, Swiss-print, CRT terminal or tactical telemetry interface, when building data-heavy dashboards, portfolios, editorial pages or command-center UIs that should feel raw and mechanical, or when a design must reject soft gradients and rounded consumer styling.

The limitations are firm. The style is intentionally severe and may not fit consumer products, accessibility-sensitive flows, or brands that need warmth and softness. CRT, halftone, dithering and degradation effects must be tested for readability, contrast and motion sensitivity. Do not mix the light industrial and dark telemetry palettes in one interface unless the user explicitly asks for a controlled hybrid.

The input is a design request or an existing interface to review; the skill's example is to review an interface, identify the highest-impact design problems and propose an implementation-ready improvement. The output is design direction and implementation guidance covering color, layout, components, effects and engineering rules.

The color system is strict. Light mode uses #F4F4F0 or #EAE8E3 backgrounds with #050505 to #111111 ink. Dark mode uses #0A0A0A or #121212 with #EAEAEA text, avoiding pure black. Hazard red (#E61919 or #FF2A2A) is the only accent. Terminal green (#4AF626) is optional and reserved for a single UI element.

Layout follows a strict CSS Grid blueprint with visible 1px or 2px borders, alternating extreme data density with large negative space, and no border-radius at all. Components use ASCII framing such as [ DELIVERY SYSTEMS ], registration and copyright symbols as geometric markers, crosshairs and barcode-like lines. Effects include halftone and 1-bit dithering, CRT scanlines via repeating-linear-gradient and a low-opacity global noise filter. One engineering directive for razor-thin dividers is:

display: grid; gap: 1px;

used with contrasting parent and child background colors. The directives also call for precise semantic tags such as data, samp, kbd, output and dl, and for using clamp() only on macro typography.

It is for front-end designers and developers building dashboards, portfolios, editorial pages or command-center interfaces that need a deliberately raw, high-density look, and who accept the trade-offs in accessibility and warmth.