industrial-brutalist-ui

Design industrial-brutalist web interfaces using Swiss grid systems and tactical telemetry aesthetics.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing data-heavy dashboards, portfolios, or editorial sites with a distinctive industrial-brutalist character is hard to do consistently, often resulting in generic consumer UI patterns or incoherent mixing of styles. This Skill provides a complete design system covering typography, color, layout, components, and texture effects. ## Core Features & Use Cases - Dual Visual Archetypes: Choose between Swiss Industrial Print (light, blueprint-style) or Tactical Telemetry (dark, CRT terminal) modes with strict rules preventing inconsistent mixing. - Typographic Architecture: Concrete guidance on macro-typography (fluid clamp scales, tight tracking), monospace micro-typography for data, and serif textural contrast. - Analog Degradation Effects: CSS and SVG techniques for halftones, 1-bit dithering, CRT scanlines, and mechanical noise overlays. - Use Case: Build a monitoring dashboard with a declassified-blueprint aesthetic using a rigid CSS grid, monospace telemetry readouts, hazard-red accents, and subtle scanline textures. ## Quick Start Use the industrial-brutalist-ui skill to design a dark tactical telemetry dashboard for my server monitoring data with monospace typography and a strict modular grid.

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 dashboard UI with CSS?▼

Use a strict CSS Grid with 1px gaps and contrasting backgrounds to create visible dividing lines, pair massive uppercase sans-serif headers with small monospace data text, and reject border-radius entirely. Limit color to one substrate palette with a single hazard-red accent.

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

Use heavy neo-grotesque sans-serifs like Inter Black, Archivo Black, or Monument Extended for structural headers, and monospaced fonts like JetBrains Mono, IBM Plex Mono, or VT323 for data and telemetry. High-contrast serifs like Playfair Display work sparingly for textural contrast.

How do I add CRT scanline effects to a website with CSS?▼

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

Can I mix light and dark modes in a brutalist interface?▼

No. The design system requires choosing one substrate palette per project, either Swiss Industrial Print (light) or Tactical Telemetry (dark), and using it consistently. Mixing substrates within one interface breaks the mechanical coherence of the aesthetic.

When should I avoid using industrial-brutalist design?▼

Avoid it for standard consumer flows where military language, extreme density, or heavy texture would confuse users. In those cases, borrow only the typographic discipline and grid rigor without forcing telemetry framing or degradation effects.