industrial-brutalist-ui

Generates brutalist web interfaces combining Swiss typography with military terminal aesthetics.

Updated Jul 1, 2026
One-click install
npx skills add https://github.com/w0lzard/Wolzard-s-Marketplace --skill industrial-brutalist-ui-w0lzard
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/w0lzard/Wolzard-s-Marketplace/tree/main/plugins/personal-skills/skills/industrial-brutalist-ui
Command: npx skills add https://github.com/w0lzard/Wolzard-s-Marketplace --skill industrial-brutalist-ui-w0lzard

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing data-heavy dashboards, portfolios, or editorial sites that need a raw, mechanical, blueprint-like character is hard without a coherent design system. This Skill provides a complete set of rules for building industrial brutalist and tactical telemetry interfaces instead of defaulting to generic consumer UI patterns. ## Core Features & Use Cases - Two Committed Visual Modes: Choose between Swiss Industrial Print (light, paper-like substrates with heavy sans-serif type) or Tactical Telemetry (dark CRT terminal with monospace data density), with strict rules against mixing them. - Typographic Architecture: Concrete guidance on macro-typography (fluid clamp scales, negative tracking, compressed leading) and micro-typography (uppercase monospace metadata) using fonts like Inter, Archivo Black, and JetBrains Mono. - Layout and Effects Engineering: Blueprint CSS Grid layouts with visible compartmentalization, zero border-radius, ASCII framing symbols, halftone dithering, CRT scanlines, and SVG noise filters. - Use Case: Build a declassified-blueprint-style analytics dashboard with a strict grid, hazard-red accents, monospace telemetry readouts, and scanline overlays. ## Quick Start Use the industrial-brutalist-ui skill to design a dark tactical telemetry dashboard for my sensor data with monospace typography and a strict bordered grid.

Frequently Asked Questions about industrial-brutalist-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design a brutalist website with Swiss typography?

Brutalist Swiss design uses a strict CSS Grid with visible 1px dividing lines, massive uppercase sans-serif headers with negative letter-spacing, and a single hazard-red accent on an off-white background. Commit to one light palette and reject border-radius, gradients, and shadows entirely.

How do I create a retro CRT terminal interface in CSS?

A CRT terminal interface uses a near-black background, monospace fonts like JetBrains Mono or VT323, and a repeating-linear-gradient overlay to simulate scanlines. Add a low-opacity SVG noise filter and optional phosphor green for a single status element.

What fonts work best for industrial brutalist web design?

Use heavy neo-grotesque sans-serifs like Inter Black, Archivo Black, or Monument Extended for structural headers, and monospaced fonts like JetBrains Mono, IBM Plex Mono, or Space Mono for data and metadata. High-contrast serifs appear only sparingly with halftone degradation.

Can I mix light and dark modes in a brutalist interface?

No, this design system requires choosing one substrate palette per project and using it consistently. Mixing Swiss Industrial Print light mode with Tactical Telemetry dark mode within the same interface breaks the mechanical coherence of the aesthetic.

How do I add halftone or dithering effects to web images?

Apply CSS mix-blend-mode: multiply with SVG radial dot pattern overlays to convert images into dot-matrix textures. A global low-opacity SVG noise filter on the DOM root adds unified physical grain across the page.