industrial-brutalist-ui

Generate CSS and design specs for industrial-brutalist data-dense web interfaces.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you design high-data-density interfaces with rigid, industrial visual structure by turning Swiss print and tactical CRT aesthetics into consistent, implementable UI rules rather than ad-hoc styling.

Core Features & Use Cases

  • Swiss Industrial Print or Tactical Telemetry mode selection: Forces a single cohesive substrate (light or dark) to avoid mixed aesthetics and visual collisions.
  • Typography architecture: Specifies macro/structural uppercase heavy sans rules and micro/telemetry monospace uppercase data rules with precise spacing targets.
  • Mechanical layout & symbology: Enforces CSS Grid determinism, 90-degree geometry, border-based compartmentalization, and technical ASCII/terminal framing for dashboards and editorial data displays.
  • Analog degradation effects: Defines halftone/1-bit dithering concepts, CRT scanlines, and mechanical noise to add physical texture to otherwise-perfect digital UI.

Quick Start

Use the skill to produce a complete CSS + design spec for a data-heavy dashboard screen in either Swiss Industrial Print (light) or Tactical Telemetry (dark) mode, including grid structure, type scales, palette, and degradation 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 design a brutalist web dashboard with Swiss typography grids?

To design a brutalist web dashboard, synthesize Swiss typography grids with tactical CRT terminal aesthetics. This enforces strict 90-degree geometry, deterministic CSS Grid compartmentalization, and technical symbology for high-data-density interfaces.

What is the best way to add CRT scanlines and analog degradation effects to a CSS grid layout?

The best way to apply analog degradation effects to a CSS grid layout is by simulating CRT scanlines, halftone dithering, and mechanical noise overlays. This adds physical texture to otherwise-perfect digital UI components.

Can I use mixed light and dark modes for industrial UI design in a single data-dense interface?

No, industrial UI design requires strict mode selection to avoid mixed aesthetics and visual collisions. You must choose either Swiss Industrial Print for light substrates or Tactical Telemetry for dark CRT aesthetics.

How do I structure typography architecture for a tactical telemetry dashboard?

Structure typography architecture by contrasting heavy uppercase macro sans rules against micro monospace uppercase data rules. This extreme typographic scale contrast organizes structural elements and telemetry data precisely.

Does brutalist UI design work for editorial pages or only for telemetry web dashboards?

Brutalist UI design works for editorial pages, portfolios, and telemetry web dashboards. The deterministic layout, border-based compartmentalization, and technical ASCII framing apply to any data-heavy display requiring rigid visual structure.

Why does my industrial design system lack visual texture despite using monospace typography?

An industrial design system lacks visual texture without analog degradation styling. Applying simulated 1-bit dithering concepts and mechanical noise overlays alongside monospace typography creates the necessary physical CRT terminal feel.