industrial-brutalist-ui

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

Updated Apr 15, 2026
One-click install
npx skills add https://github.com/joaopaulotr/PesquiseMaisHealth --skill industrial-brutalist-ui-joaopaulotr
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/joaopaulotr/PesquiseMaisHealth/tree/main/.agents/skills/industrial-brutalist-ui
Command: npx skills add https://github.com/joaopaulotr/PesquiseMaisHealth --skill industrial-brutalist-ui-joaopaulotr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing data-heavy dashboards, portfolios, or editorial sites that need a raw, mechanical, blueprint-like identity is difficult with conventional UI patterns. This Skill provides a complete design system for building industrial brutalist interfaces with rigid grids, extreme typographic contrast, and analog degradation effects. ## Core Features & Use Cases - Two Visual Archetypes: Choose between Swiss Industrial Print (light, paper-like substrates with heavy sans-serif type) or Tactical Telemetry (dark CRT terminal mode with monospace data density). - Typographic Architecture: Defines macro-typography with fluid clamp() scaling, tight tracking, and uppercase casing, plus micro-typography rules for monospace telemetry data. - Analog Degradation Effects: Implements halftone dithering, CRT scanlines via repeating-linear-gradient, and SVG noise filters to simulate physical media. - Use Case: Build a data-dense aerospace telemetry dashboard with monospaced readouts, ASCII bracket framing, hazard-red accents, and scanline overlays on a near-black background. ## Quick Start Use the industrial-brutalist-ui skill to design a dark tactical telemetry dashboard for my sensor monitoring page.

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, zero border-radius, extreme typographic scale contrast via clamp(), and flat utilitarian colors. This Skill defines complete rules for grids, typography, color, and texture effects.

What fonts work best for terminal or telemetry UI design?

Monospace fonts like JetBrains Mono, IBM Plex Mono, Space Mono, and VT323 work best for telemetry data at 10-14px with generous letter-spacing. Pair them with heavy sans-serifs like Archivo Black or Inter Black for structural headers.

How do I add CRT scanline effects to a webpage?

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

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

No, this design system requires choosing one substrate palette per project. Swiss Industrial Print uses light paper backgrounds while Tactical Telemetry uses dark CRT backgrounds, and mixing them breaks visual coherence.

What colors are allowed in industrial brutalist design?

The palette is restricted to a paper or near-black background, carbon ink or white phosphor foreground, and a single hazard red accent (#E61919). Gradients, soft shadows, and translucency are prohibited; terminal green is optional for one element only.