industrial-brutalist-ui

Use strict CSS Grid layouts with 1px gap dividers, 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 palette with a single red accent.

For macro-typography use heavy neo-grotesques like Inter Extra Bold, 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 design system requires choosing one substrate per project: either Swiss Industrial Print (light, off-white paper) or Tactical Telemetry (dark, near-black CRT). Mixing substrates within one interface breaks the mechanical consistency the aesthetic depends on.

Avoid it for consumer products needing conventional affordances, soft visual hierarchy, or accessibility-sensitive audiences. The aesthetic deliberately rejects rounded corners, gradients, and familiar UI patterns, which can reduce usability for mainstream applications.