industrial-brutalist-ui

Generates brutalist web interfaces combining Swiss typographic grids with military terminal aesthetics.

Updated Aug 6, 2026
One-click install
npx skills add https://github.com/ferrarifankid04/ai-skills-public --skill industrial-brutalist-ui-ferrarifankid04
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/ferrarifankid04/ai-skills-public/tree/main/claude-code/skills/industrial-brutalist-ui
Command: npx skills add https://github.com/ferrarifankid04/ai-skills-public --skill industrial-brutalist-ui-ferrarifankid04

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing data-heavy dashboards, portfolios, or editorial sites with a distinctive industrial aesthetic is hard without a coherent design system; this Skill provides complete rules for typography, color, layout, and texture so interfaces look like declassified blueprints or tactical terminals instead of generic consumer UI. ## Core Features & Use Cases - Dual Visual Archetypes: Choose between Swiss Industrial Print (light, paper-like) or Tactical Telemetry CRT Terminal (dark, phosphor) modes with strict consistency rules. - Typographic Architecture: Concrete font stacks, fluid clamp() scaling, tracking, and casing rules for macro headers and monospace telemetry data. - Layout & Effects Engineering: CSS Grid compartmentalization, 1px dividing lines, zero border-radius, ASCII framing symbols, halftone dithering, CRT scanlines, and SVG noise filters. - Use Case: Ask the AI to build a data-dense project dashboard styled as a military terminal, and it will produce dark-mode monospace telemetry tables with scanline overlays, red accent highlights, and crosshair grid markers. ## Quick Start Use the industrial-brutalist-ui skill to design a dark tactical telemetry dashboard for my server monitoring page 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 website design with CSS?

Brutalist web design uses rigid CSS Grid layouts with visible 1px dividing lines, zero border-radius, extreme typographic scale contrast via clamp(), and a restricted utilitarian color palette. This Skill provides complete rules for typography, spacing, and texture effects.

What fonts work best for terminal or military-style UI design?

Monospace fonts like JetBrains Mono, IBM Plex Mono, Space Mono, and VT323 work best for telemetry data and terminal interfaces. Pair them with heavy neo-grotesque sans-serifs like Inter Black or Archivo Black for oversized structural headers.

How do I add CRT scanline effects to a webpage?

Apply a repeating-linear-gradient background with thin alternating transparent and dark bands to simulate electron beam sweeps. Combine it 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, this design system requires choosing one substrate per project: either light Swiss Industrial Print or dark Tactical Telemetry. Mixing substrates within the same interface breaks the mechanical consistency the aesthetic depends on.

When should I not use brutalist UI design?

Avoid this style for consumer products needing soft, friendly, accessible interfaces with gradients, rounded corners, and conventional patterns. It suits data-dense dashboards, portfolios, and editorial sites where raw mechanical character is the goal.