industrial-brutalist-ui

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing data-heavy dashboards, portfolios, or editorial sites with a distinctive industrial character is hard without a coherent design system; this Skill provides a complete specification for building interfaces that fuse Swiss typographic print with tactical military terminal aesthetics. ## Core Features & Use Cases - Two 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 parameters for macro-typography (fluid clamp scales, negative tracking) and micro-typography (monospace data readouts), with recommended web fonts. - Layout & Effects Directives: CSS Grid compartmentalization, zero border-radius, ASCII framing symbols, plus analog degradation effects like halftones, scanlines, and SVG noise filters. - Use Case: Ask the AI to build a portfolio landing page styled like a declassified aerospace blueprint, and it will apply the exact color palette, grid structure, and typographic rules defined here. ## Quick Start Build a dark tactical telemetry dashboard for server metrics using the industrial brutalist style with monospace data readouts 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 borders, zero border-radius, extreme typographic scale contrast, and a restricted utilitarian color palette. This Skill defines exact parameters including fluid clamp typography, negative letter-spacing, and ASCII framing symbols.

What fonts work best for industrial or terminal-style UI 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 text. High-contrast serifs like Playfair Display appear only sparingly with degradation effects.

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

Apply a repeating-linear-gradient background to simulate horizontal electron beam sweeps, for example alternating transparent and semi-transparent black 2px bands. Combine with a low-opacity SVG noise filter on the DOM root for unified analog 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, off-white paper background) or Tactical Telemetry (dark, near-black CRT background). Mixing both modes within one interface breaks visual coherence.

When should I not use a brutalist design style?

Avoid brutalist styling for consumer products needing soft, approachable aesthetics, since it prohibits gradients, rounded corners, and translucency. It suits data-dense dashboards, portfolios, and editorial sites where mechanical precision and high information density are desired.