industrial-brutalist-ui

Build mechanical web interfaces with CSS Grid and terminal styling.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you create web interfaces that look like engineered blueprints or tactical terminal displays, focusing on rigid grids, extreme typography contrast, and simulated analog degradation instead of typical consumer UI patterns.

Core Features & Use Cases

  • Industrial brutalist UI system: Build deterministic CSS Grid layouts with visible compartmentalization, 90-degree geometry, and utilitarian borders for data-heavy screens.
  • Two selectable visual archetypes: Implement either Swiss industrial print (light substrate) or tactical telemetry CRT terminal (dark substrate) without mixing modes.
  • Telemetry-grade typography and texture: Use macro/micro typography rules plus halftone, scanlines, dithering, and mechanical noise to avoid a purely “digital” look.
  • Use Case: Turn a dashboard, portfolio, or editorial layout into a declassified, mechanical, information-dense interface with hazard-accent states and terminal-like metadata.

Quick Start

Implement the industrial brutalist UI rules by building a grid-first layout with uppercase macro headers, monospace telemetry data, a single consistent substrate palette, and CRT/halftone texture overlays.

Frequently Asked Questions about industrial-brutalist-ui

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

FAQPage Schema
How do I build a brutalist web UI with a tactical terminal aesthetic?

To build a brutalist web UI with a tactical terminal aesthetic, use deterministic CSS Grid structures with visible compartmentalization, uppercase typography, and hazard-accent colors to create mechanical, high-density interfaces.

What is the difference between Swiss industrial print and CRT telemetry styling for web layouts?

The difference between Swiss industrial print and CRT telemetry styling is substrate selection: light print uses a light background for editorial layouts, while dark telemetry uses a dark background for dashboard data displays, avoiding mixed modes.

How do I add analog degradation effects like scanlines and dithering to a CSS Grid layout?

You add analog degradation effects like scanlines and dithering to a CSS Grid layout by applying optional texture overlays, halftone patterns, and mechanical noise to avoid a purely digital look and achieve blueprint-like texture.

Can I use extreme typographic scale contrast for data-heavy dashboards without breaking rigid grid composition?

Yes, you can use extreme typographic scale contrast for data-heavy dashboards by pairing macro uppercase headers with monospace micro telemetry data, maintaining rigid 90-degree geometry and utilitarian borders within the deterministic grid.

When should I not use hazard-accent color constraints in an industrial brutalist visual system?

You should not use hazard-accent color constraints outside the defined industrial brutalist visual system if your project requires conventional consumer UI patterns, soft geometries, or mixed light and dark substrate archetypes.

Does the industrial brutalist UI approach require specific dependencies or component libraries?

No, the industrial brutalist UI approach requires no external dependencies or component libraries, relying entirely on deterministic CSS Grid structures, rigid composition rules, and terminal typography conventions.