industrial-brutalist-ui

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

Updated May 23, 2026
One-click install
npx skills add https://github.com/Oatse/CWE-Automation --skill industrial-brutalist-ui-oatse
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/Oatse/CWE-Automation/tree/main/.agents/skills/industrial-brutalist-ui
Command: npx skills add https://github.com/Oatse/CWE-Automation --skill industrial-brutalist-ui-oatse

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing data-heavy dashboards, portfolios, or editorial sites with a distinctive industrial aesthetic requires deep knowledge of typographic systems, grid engineering, and analog degradation effects that most developers lack. ## Core Features & Use Cases - Dual Visual Archetypes: Implements either Swiss Industrial Print (light mode, heavy sans-serif, hazard red accents) or Tactical Telemetry (dark mode, monospace, CRT effects) with strict consistency rules. - Typographic Architecture: Defines macro-typography with fluid clamp() scaling, negative tracking, and compressed leading, plus micro-typography for monospace telemetry data. - Analog Degradation Effects: Provides CSS and SVG techniques for halftone dithering, CRT scanlines, and mechanical noise overlays. - Use Case: Build a declassified-blueprint-style portfolio site with viewport-bleeding uppercase headers, 1px grid compartmentalization, ASCII-framed metadata like [ UNIT / D-01 ], and a global noise filter. ## Quick Start Use the industrial-brutalist-ui skill to build a dark tactical telemetry dashboard with monospace data tables, scanline effects, and hazard red accents.

Frequently Asked Questions about industrial-brutalist-ui

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

FAQPage Schema
How do I create a brutalist website design with CSS?

Brutalist web design uses rigid CSS Grid layouts with visible 1px borders, extreme typographic scale contrast via clamp(), and zero border-radius. This skill provides complete specifications for grids, typography, color palettes, and texture effects.

What fonts work best for industrial or terminal UI design?

Use heavy neo-grotesque sans-serifs like Inter Black, Archivo Black, or Monument Extended for structural headers. For telemetry data, use monospace fonts like JetBrains Mono, IBM Plex Mono, or VT323 with generous letter-spacing and uppercase casing.

How do I add CRT scanline effects to a website?

Apply a repeating-linear-gradient background to simulate electron beam sweeps, such as repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px). Combine with a low-opacity SVG noise filter for analog degradation.

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

No, this design system strictly prohibits mixing substrates. Choose either Swiss Industrial Print (light, off-white backgrounds) or Tactical Telemetry (dark, near-black backgrounds) and commit to it consistently across the entire interface.

When should I avoid using brutalist UI design?

Avoid this approach for consumer products requiring conventional usability patterns, soft aesthetics, gradients, or rounded friendly components. The system deliberately rejects standard web UI conventions in favor of mechanical rigidity and high data density.