industrial-brutalist-ui

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

Updated May 11, 2026
One-click install
npx skills add https://github.com/cloudofgeorge/AI-hands-Engineer --skill industrial-brutalist-ui-cloudofgeorge
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/cloudofgeorge/AI-hands-Engineer/tree/main/skills/design/industrial-brutalist-ui
Command: npx skills add https://github.com/cloudofgeorge/AI-hands-Engineer --skill industrial-brutalist-ui-cloudofgeorge

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 texture simulation that most developers lack. ## Core Features & Use Cases - Dual Visual Archetypes: Choose between Swiss Industrial Print (light mode, heavy sans-serif, red accents) or Tactical Telemetry (dark mode, monospace, CRT effects) with strict consistency rules. - Typographic Architecture: Implements extreme scale contrast with fluid macro-typography via CSS clamp(), tight tracking, and monospace micro-typography for data readouts. - Analog Degradation Effects: Applies halftone dithering, CRT scanlines, and SVG noise filters to simulate physical media and legacy hardware. - Use Case: Build a portfolio site that looks like a declassified military blueprint, with viewport-bleeding numerals, ASCII-framed data points, and a strict 1px grid compartmentalization. ## Quick Start Design a dark-mode telemetry dashboard for my sensor data using the industrial brutalist style with monospace typography and scanline effects.

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?

Use strict CSS Grid layouts with 1px gap dividers, heavy uppercase sans-serif typography at fluid scales via clamp(), and a limited palette of off-white, carbon black, and hazard red. Reject border-radius, gradients, and shadows entirely.

What fonts work best for industrial or terminal UI design?

Use neo-grotesque fonts like Inter Black, Archivo Black, or Monument Extended for structural headers, and monospace fonts like JetBrains Mono, IBM Plex Mono, or VT323 for data and telemetry text.

How do I add CRT scanline effects to a website?

Apply a repeating-linear-gradient background overlay, such as repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px), to simulate horizontal electron beam sweeps on dark interfaces.

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

No. The system requires choosing one substrate palette per project: either Swiss Industrial Print (light) or Tactical Telemetry (dark). Mixing light and dark substrates within the same interface breaks visual consistency.

When should I not use brutalist UI design?

Avoid this style for consumer products needing conventional usability patterns, soft aesthetics, or broad accessibility comfort. It suits data-heavy dashboards, portfolios, and editorial sites where raw mechanical character is the goal.