industrial-brutalist-ui

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

Updated Aug 25, 2026
One-click install
npx skills add https://github.com/KlyrhonMiko/kly-skills --skill industrial-brutalist-ui-klyrhonmiko
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/KlyrhonMiko/kly-skills/tree/main/data/skills/brutalist-skill
Command: npx skills add https://github.com/KlyrhonMiko/kly-skills --skill industrial-brutalist-ui-klyrhonmiko

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing data-heavy dashboards, portfolios, or editorial sites with a distinctive industrial-brutalist identity is difficult without clear rules for typography, color, grids, and analog texture effects. This Skill provides a complete design system for building interfaces that look like declassified blueprints or tactical terminals. ## 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: Defines macro-typography with fluid clamp() scaling, negative tracking, and monospace micro-typography for telemetry data. - Analog Degradation Effects: Implements halftone dithering, CRT scanlines via repeating-linear-gradient, and SVG noise filters to simulate physical media. - Use Case: Build a data-dense portfolio site with massive uppercase headlines, 1px grid dividing lines, ASCII-framed metadata like [ UNIT / D-01 ], and a hazard-red accent on an off-white substrate. ## Quick Start Use the industrial-brutalist-ui skill to design a dark tactical telemetry dashboard 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?▼

Use strict CSS Grid layouts with 1px gap dividing lines, massive uppercase sans-serif headlines scaled with clamp(), monospace fonts for data, and zero border-radius. Restrict colors to one light or dark substrate with a single red accent.

What fonts work best for brutalist and terminal UI design?▼

Use heavy neo-grotesque sans-serifs like Archivo Black or Inter Extra Bold for structural headers, and monospaced fonts like JetBrains Mono, IBM Plex Mono, or VT323 for telemetry data and metadata labels.

How do I add CRT scanline effects to a webpage?▼

Apply a repeating-linear-gradient background overlay 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 horizontal electron beam sweeps on dark terminal interfaces.

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

No. The design system requires choosing one substrate palette per project, either Swiss Industrial Print light mode or Tactical Telemetry dark mode, and using it consistently throughout the interface.

When should I avoid using brutalist UI design?▼

Avoid brutalist design for consumer products needing soft, friendly aesthetics, since it prohibits gradients, rounded corners, and translucency. It suits data-dense dashboards, portfolios, and editorial sites projecting raw functionality.