industrial-brutalist-ui

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing data-heavy dashboards, portfolios, or editorial sites with a distinctive industrial-brutalist identity is hard to do consistently; this Skill provides a complete design system covering typography, color, layout, and texture so the output feels like declassified blueprints or tactical terminals rather than generic consumer UI. ## Core Features & Use Cases - Two Committed Visual Modes: Swiss Industrial Print (light, heavy sans-serif, hazard red) or Tactical Telemetry (dark, monospace, CRT effects) — one per project, never mixed. - Typographic Architecture: Macro-typography with fluid clamp() scaling and negative tracking, plus micro-typography in monospace for metadata and telemetry. - Analog Degradation Effects: Halftone dithering, CRT scanlines via repeating-linear-gradient, and SVG noise filters to simulate physical media. - Use Case: Build a data-dense aerospace dashboard with a dark CRT substrate, JetBrains Mono telemetry readouts, ASCII bracket framing, and scanline overlays — all with strict 90-degree geometry and visible grid compartmentalization. ## Quick Start Design a brutalist industrial-style landing page for my portfolio using the Swiss print mode with oversized typography and a red accent.

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 massive fluid scales with clamp(), tight negative letter-spacing, and uppercase casing. Anchor everything to a strict CSS Grid with visible 1px dividing lines and a single hazard-red accent on an off-white substrate.

What fonts work best for terminal-style UI design?

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

How do I add CRT scanline effects 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 horizontal electron beam sweeps. Combine with a low-opacity SVG noise filter for unified physical grain.

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

No. The design system requires choosing one substrate per project — either Swiss Industrial Print (light) or Tactical Telemetry (dark) — and using it consistently. Mixing substrates breaks the mechanical rigidity the aesthetic depends on.

Why should brutalist designs avoid border-radius and gradients?

Border-radius and gradients are prohibited because they signal consumer UI softness. Brutalist interfaces enforce 90-degree corners and flat utilitarian color to project mechanical precision and raw functionality, simulating physical media or primitive emissive displays.