industrial-brutalist-ui

Architect high-density web UI styles with Swiss grid typography and CRT aesthetics.

Updated Dec 4, 2025
One-click install
npx skills add https://github.com/PolliticalSolutions/political-portal --skill industrial-brutalist-ui-polliticalsolutions
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/PolliticalSolutions/political-portal/tree/main/.agents/skills/industrial-brutalist-ui
Command: npx skills add https://github.com/PolliticalSolutions/political-portal --skill industrial-brutalist-ui-polliticalsolutions

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you design interfaces that feel mechanically precise and information-dense, avoiding generic “consumer UI” polish while still staying readable under heavy data load.

Core Features & Use Cases

  • Rigid grid-based layout engineering: Implement compartmentalized information zones using CSS Grid with visible separators and strict 90-degree geometry.
  • Extreme typographic contrast: Use uppercase macro headlines with clamped heavy sans scales and uppercase monospace micro-typography for coordinates, metadata, and tables.
  • Analog degradation simulation: Apply halftone/1-bit dithering, CRT scanlines, and global mechanical noise to make digital visuals feel printed or declassified.

Quick Start

Build your dashboard using a single selected substrate mode (Swiss Industrial Print or Tactical Telemetry) and enforce its grid, typography, and color constraints end-to-end.

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 data dashboard with a tactical CRT aesthetic?▼

Design a high-density data dashboard by merging rigid Swiss CSS Grid layouts with tactical CRT aesthetics, using extreme typographic contrast, monospace telemetry, and analog degradation effects like scanlines for information-heavy screens.

What is brutalist UI design and when should I use it for web interfaces?▼

Brutalist UI design avoids generic consumer polish by employing mechanically precise, compartmentalized grid structures with strict 90-degree geometry, making it ideal for editorial interfaces or data dashboards requiring extreme scale contrast and high readability.

How do I add CRT scanlines and analog dithering effects to a web UI?▼

Add CRT scanlines and analog dithering to a web UI using CSS and SVG global mechanical noise filters, applying halftone and 1-bit dithering degradation to make digital visuals feel printed or declassified.

Does this brutalist UI approach support responsive typography for data dashboards?▼

Yes, the approach supports responsive typography by enforcing clamp-driven macro typography for heavy sans scale headlines alongside uppercase monospace micro-typography for coordinates, metadata, and tables.

Can I use multiple color palettes within a single tactical telemetry dashboard?▼

No, you must select a single substrate mode like Swiss Industrial Print or Tactical Telemetry and enforce its specific grid, typography, and color constraints end-to-end to maintain visual consistency.

What are the limitations of using strict grid geometry for dashboard layouts?▼

Strict 90-degree grid geometry with visible separators limits fluid or organic layout shapes, requiring compartmentalized information zones that prioritize rigid structural alignment over freeform design flexibility.