industrial-brutalist-ui

Use strict CSS Grid layouts with visible 1px borders, zero border-radius, and extreme typographic contrast. Combine massive uppercase sans-serif headers using clamp() with small monospace metadata text, and limit colors to one substrate plus a single red accent.

For structural headers use heavy neo-grotesques like Inter Black, Archivo Black, or Monument Extended. For data and telemetry use monospaced fonts like JetBrains Mono, IBM Plex Mono, or VT323 with generous letter-spacing and uppercase casing.

Apply a repeating-linear-gradient background overlay, such as alternating 2px transparent and semi-transparent black bands, to simulate electron beam sweeps. Combine with a low-opacity SVG noise filter on the root element for unified analog grain.

No. The system requires choosing one substrate per project: light newsprint tones for Swiss Industrial Print or dark CRT backgrounds for Tactical Telemetry. Mixing substrates within one interface breaks the mechanical consistency the aesthetic depends on.

Avoid it for consumer products needing soft, friendly UX patterns, since the style rejects gradients, rounded corners, and translucency. It suits data-dense dashboards, portfolios, and editorial sites where raw functionality and high information density are desired.