industrial-brutalist-ui

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

Updated Jul 28, 2026
One-click install
npx skills add https://github.com/Aadi-110i/PEP-PROJECT --skill industrial-brutalist-ui-aadi-110i
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/Aadi-110i/PEP-PROJECT/tree/main/skills/industrial-brutalist-ui
Command: npx skills add https://github.com/Aadi-110i/PEP-PROJECT --skill industrial-brutalist-ui-aadi-110i

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing data-heavy dashboards, portfolios, or editorial sites that need a raw, mechanical, high-density look is difficult without a coherent design system. This Skill provides a complete set of rules for building industrial brutalist and tactical telemetry interfaces, covering typography, color, layout, and analog degradation effects. ## Core Features & Use Cases - Two Visual Archetypes: Choose between Swiss Industrial Print (light, blueprint-style) or Tactical Telemetry (dark, CRT terminal) and apply it consistently across the interface. - Typographic Architecture: Defines macro-typography with heavy sans-serifs at fluid clamp() scales and micro-typography with monospaced fonts for data and metadata. - Layout & Effects Engineering: Enforces rigid CSS Grid compartmentalization, zero border-radius, ASCII framing symbols, halftone dithering, CRT scanlines, and SVG noise overlays. - Use Case: Build a security monitoring dashboard with a dark phosphor terminal aesthetic, dense monospace tables, hazard-red accents, and scanline overlays that looks like a declassified military console. ## Quick Start Use the industrial-brutalist-ui skill to redesign my analytics dashboard as a dark tactical telemetry interface with monospace data tables and scanline 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 create a brutalist dashboard UI with CSS?

Use strict CSS Grid layouts with 1px gaps for visible dividing lines, heavy uppercase sans-serif headers scaled with clamp(), and monospace fonts for data. Reject border-radius, gradients, and shadows in favor of solid borders and flat utilitarian color.

What fonts work best for industrial or terminal-style web design?

Use neo-grotesque heavy sans-serifs like Inter Black, Archivo Black, or Monument Extended for structural headers. For data and telemetry, use monospaced fonts such as JetBrains Mono, IBM Plex Mono, or VT323 at small sizes with generous letter-spacing.

How do I add CRT scanline effects to a website?

Apply a repeating-linear-gradient background overlay, such as 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. The design system requires committing to one substrate per project: either light Swiss Industrial Print or dark Tactical Telemetry. Mixing light and dark palettes within the same interface breaks the mechanical coherence of the aesthetic.

What colors should a military terminal UI use?

Use a near-black background like #0A0A0A, white phosphor #EAEAEA as primary text, and hazard red #E61919 as the single accent. Terminal green #4AF626 is optional and restricted to one specific status element, never general text.