industrial-brutalist-ui

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

Updated Apr 19, 2026
One-click install
npx skills add https://github.com/divinaarmuela/Content --skill industrial-brutalist-ui-divinaarmuela
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/divinaarmuela/Content/tree/main/.claude/skills/industrial-brutalist-ui
Command: npx skills add https://github.com/divinaarmuela/Content --skill industrial-brutalist-ui-divinaarmuela

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing data-heavy dashboards, portfolios, or editorial sites with a distinctive industrial character is difficult without a coherent design system. This Skill provides a complete specification for building interfaces that fuse Swiss typographic print with tactical military terminal aesthetics, eliminating guesswork around grids, type scales, colors, and texture effects. ## Core Features & Use Cases - Two Visual Archetypes: Choose between Swiss Industrial Print (light mode, heavy sans-serif, red accents) or Tactical Telemetry (dark mode, monospace, CRT effects) with strict rules preventing inconsistent mixing. - Typographic Architecture: Concrete parameters for macro-typography (fluid clamp scales, negative tracking, compressed leading) and micro-typography (monospace data readouts), with recommended web fonts like Inter, Archivo Black, and JetBrains Mono. - Analog Degradation Effects: CSS and SVG techniques for halftone dithering, CRT scanlines via repeating-linear-gradient, and global noise filters to simulate physical media. - Use Case: Build a data-dense aerospace telemetry dashboard with a dark CRT substrate, phosphor-white monospace readouts, ASCII bracket framing, scanline overlays, and a single hazard-red accent for critical alerts. ## Quick Start Ask the AI to design a landing page or dashboard using the industrial brutalist style, specifying either the Swiss print or tactical terminal mode.

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 a light substrate like #F4F4F0 with carbon-black heavy sans-serif type at fluid clamp scales, negative letter-spacing, and a single hazard-red accent. Anchor all elements to a visible CSS grid with 1px dividing lines and zero border-radius.

What fonts work best for terminal-style UI design?

Monospace fonts like JetBrains Mono, IBM Plex Mono, Space Mono, and VT323 work best for telemetry data at 10-14px with generous tracking. Pair them with heavy neo-grotesque faces like Inter Black or Archivo Black for structural headers.

How do I create CRT scanline effects in 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). 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. The system requires choosing one substrate per project: light newsprint tones for Swiss Industrial Print or near-black for Tactical Telemetry. Mixing substrates breaks the mechanical consistency the aesthetic depends on.

When should I avoid the brutalist design approach?

Avoid it for consumer products needing soft, friendly conventions like rounded corners, gradients, and translucency, which this system explicitly prohibits. It suits data-dense, editorial, or portfolio contexts where raw utilitarian character is desired.