industrial-brutalist-ui

Designs dense dashboards and editorial interfaces with rigid grid layouts and analog degradation effects.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the challenge of designing data-heavy interfaces that feel industrial, rigorous, and highly legible through strict grids, extreme typographic contrast, and controlled analog-like visual degradation.

Core Features & Use Cases

  • Razor Rigid Layout System: Enforces deterministic CSS Grid structure with visible compartmentalization (borders, rules) for dense dashboards or editorial screens.
  • Two Mode Visual Paradigms: Produces either Swiss Industrial Print (light, hazard red accents) or Tactical Telemetry & CRT Terminal (dark, phosphor-white, optional terminal green) without mixing modes.
  • Analog Degradation Effects: Simulates halftones, CRT scanlines, dithering, and unified mechanical noise to prevent a purely “clean digital” look for technical or archival storytelling.
  • Use Case: Use it to design a portfolio or analytics dashboard where key metrics must read instantly, while the interface maintains a blueprint/telemetry atmosphere for maximum data density.

Quick Start

Ask the AI to generate a complete UI style spec and starter HTML/CSS for a single data dashboard screen using the Tactical Telemetry (CRT terminal) mode with scanlines and mechanical noise.

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 high-density dashboard with an industrial brutalist aesthetic?

Design a high-density dashboard by applying rigid CSS Grid structures, extreme typographic hierarchy, and controlled analog degradation like halftones or CRT scanlines. This enforces strict visual compartmentalization for maximum data density and legibility.

What visual styles are available for industrial brutalist UI design?

You can use two visual paradigms: Swiss Industrial Print with light backgrounds and hazard red accents, or Tactical Telemetry with dark backgrounds and phosphor-white or terminal green text. Strict palette rules prevent mixing these modes.

How do I add CRT terminal and analog degradation effects to a UI?

Add CRT terminal and analog degradation effects by simulating scanlines, halftones, dithering, and unified mechanical noise. This prevents a purely clean digital look and establishes a technical, archival atmosphere for telemetry-like visual framing.

Does industrial brutalist UI design require zero border-radius and monospaced typography?

Yes, industrial brutalist UI design requires zero border-radius geometry and monospaced micro-typography with uppercase technical casing. These constraints ensure rigorous, highly legible interfaces suited for dense metadata panels and readouts.

Can I use this approach for editorial screens and analytics readouts?

Yes, you can use this approach for editorial screens and analytics readouts. The rigid grid determinism and telemetry-like visual framing ensure key metrics read instantly while maintaining a blueprint atmosphere for maximum data density.

What is the best way to generate starter HTML and CSS for a tactical telemetry dashboard?

The best way to generate starter HTML and CSS for a tactical telemetry dashboard is to request a complete UI style spec from the AI. It will output deterministic grid structures, scanline effects, and mechanical noise simulation for the single dashboard screen.