Engineer Brutalist & Tactical UI Interfaces

This skill engineers industrial-brutalist and tactical-telemetry web interfaces by fusing mid-century Swiss typographic design, industrial manufacturing manuals, and retro-futuristic aerospace or military terminal interfaces. It requires picking exactly one of two visual archetypes per project and committing to it rather than mixing them: Swiss Industrial Print, a high-contrast light mode built from 1960s corporate identity systems and heavy machinery blueprints, with monolithic heavy sans-serif type, rigid grids with visible dividing lines, oversized viewport-bleeding numerals, and primary red as the only accent; or Tactical Telemetry & CRT Terminal, a dark-mode-only style drawn from classified military databases, legacy mainframes, and aerospace HUDs, built on dense monospaced tabular data, ASCII framing devices and crosshairs, and simulated hardware artifacts like phosphor glow, scanlines, and low bit-depth rendering. Typography carries most of the structural and decorative weight across three tiers: macro-typography (Neue Haas Grotesk, Inter Extra Bold/Black, Archivo Black, Roboto Flex Heavy, or Monument Extended) at fluid scales like clamp(4rem, 10vw, 15rem) with tight-to-negative letter-spacing and compressed leading; micro-typography (JetBrains Mono, IBM Plex Mono, Space Mono, VT323, Courier Prime) fixed small and uppercase for metadata, navigation, unit IDs, and coordinates; and a sparing high-contrast serif layer (Playfair Display, EB Garamond, Times New Roman) degraded with halftone or 1-bit dithering for textural contrast. Colors are locked to one substrate per project - matte off-white paper tones with carbon-black foreground for the light Swiss mode, near-black backgrounds with white-phosphor foreground for the dark telemetry mode - with hazard red as the single shared accent, and an optional terminal green reserved for at most one specific status indicator. Layout rejects conventional padding for a strict CSS Grid blueprint with visible compartmentalization, alternates between extreme data density and vast calculated negative space, and bans border-radius entirely in favor of 90-degree corners. Analog degradation is simulated in the frontend via halftone or dithering filters, CRT scanline gradients, and a low-opacity global noise overlay, and the DOM is built with semantic tags that reflect the telemetry content.

Use it when the user wants a brutalist, industrial, Swiss-print, CRT-terminal, or tactical-telemetry interface, for data-heavy dashboards, portfolios, editorial pages, or command-center UIs that should feel raw and mechanical, or when a design must reject soft gradients, rounded consumer UI, glassmorphism, and generic SaaS card layouts. Avoid it for consumer products, accessibility-sensitive flows, or brands that need warmth and softness, since the style is intentionally severe; CRT, halftone, dithering, and degradation effects must be tested for readability, contrast, and motion sensitivity before shipping; and the light industrial and dark telemetry palettes must not be mixed in the same interface unless a controlled hybrid is explicitly requested.

The input is a request for a brutalist or telemetry-style interface; the output is CSS/HTML structure and styling directives covering typography scale, one committed color substrate, grid layout, ASCII and industrial symbology, and post-processing texture. A representative CRT-scanline output pattern:

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

display: grid; gap: 1px; with contrasting parent/child background colors is used to generate razor-thin dividing lines without explicit border declarations, and CSS clamp() is reserved exclusively for macro-typography scaling.

Designers and developers building dashboards, portfolios, editorial sites, or command-center interfaces who want a deliberately raw, mechanical, high-data-density aesthetic instead of a soft consumer SaaS look - and who are prepared to test the resulting CRT and dithering effects for readability and motion sensitivity.