industrial-brutalist-ui

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

Updated Jun 11, 2026
One-click install
npx skills add https://github.com/dylinmat/design-skills-plugin --skill industrial-brutalist-ui-dylinmat
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/dylinmat/design-skills-plugin/tree/main/plugins/design/skills/industrial-brutalist-ui
Command: npx skills add https://github.com/dylinmat/design-skills-plugin --skill industrial-brutalist-ui-dylinmat

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing data-heavy dashboards, portfolios, or editorial sites that need a raw, mechanical look is hard without a coherent system; this Skill provides complete design rules for building industrial brutalist interfaces that fuse Swiss typographic print with tactical terminal aesthetics. ## 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. - Typographic Architecture: Defines macro-typography with heavy sans-serifs at fluid clamp() scales and micro-typography with monospace fonts for data and metadata. - Utilitarian Color & Layout Systems: Enforces strict palettes (carbon ink, hazard red, phosphor white), visible grid compartmentalization, zero border-radius, and analog degradation effects like halftones, scanlines, and dithering. - Use Case: Build a declassified-blueprint-style portfolio site with oversized uppercase headlines, ASCII-framed navigation labels like [ PROJECTS ], 1px grid dividing lines, and a global SVG noise filter for physical grain. ## Quick Start Use the industrial-brutalist-ui skill to design a dark tactical telemetry dashboard with monospace data readouts, crosshair markers, and CRT 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 design a brutalist website with Swiss typography?

Use heavy neo-grotesque fonts like Inter Black or Archivo Black at fluid clamp() scales with tight negative tracking and uppercase casing. Anchor all elements to a strict CSS Grid with visible 1px dividing lines and reject border-radius entirely for mechanical rigidity.

What fonts work best for terminal-style UI design?

Monospace fonts like JetBrains Mono, IBM Plex Mono, Space Mono, and VT323 work best for terminal interfaces. Set them at small fixed sizes (10-14px) with generous letter-spacing (0.05em to 0.1em) and uppercase casing to simulate mechanical typewriter output.

How do I add CRT scanline effects with CSS?

Apply a repeating-linear-gradient background to simulate horizontal electron beam sweeps, such as repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px). Combine with a low-opacity SVG noise filter for unified physical grain.

Can I mix light and dark modes in brutalist design?

No, this system requires choosing one substrate palette per project. Swiss Industrial Print uses light off-white backgrounds with carbon ink, while Tactical Telemetry uses dark backgrounds with phosphor white; mixing them breaks the visual coherence.

When should I avoid the brutalist UI approach?

Avoid this approach for consumer products needing soft, friendly interfaces, since it deliberately rejects gradients, rounded corners, and conventional padding. It suits data-dense dashboards, portfolios, and editorial sites where raw functionality and high information density are priorities.