industrial-brutalist-ui

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

3|Updated Apr 20, 2026
One-click install
npx skills add https://github.com/langgenius/due-date-hq-jwl --skill industrial-brutalist-ui-langgenius
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/langgenius/due-date-hq-jwl/tree/main/.claude/skills/industrial-brutalist-ui
Command: npx skills add https://github.com/langgenius/due-date-hq-jwl --skill industrial-brutalist-ui-langgenius

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing data-heavy dashboards, portfolios, or editorial sites that need a raw, mechanical look is hard without a coherent design system. This Skill provides a complete visual language for building interfaces that fuse Swiss typographic print with military terminal aesthetics, avoiding generic consumer UI patterns. ## Core Features & Use Cases - Two Visual Archetypes: Choose between Swiss Industrial Print (light, paper-like substrates with heavy sans-serif type) or Tactical Telemetry (dark CRT terminals with monospace data and scanlines). - Typographic Architecture: Defines macro-typography with fluid clamp() scaling, tight tracking, and compressed leading, plus micro-typography rules for monospace metadata. - Strict Color and Layout Systems: Enforces utilitarian palettes (carbon ink, hazard red, phosphor white), zero border-radius, visible grid compartmentalization, and 1px grid-gap dividing lines. - Analog Degradation Effects: Implements halftone dithering, CRT scanlines via repeating-linear-gradient, and SVG noise filters for physical texture. - Use Case: Build a declassified-blueprint-style analytics dashboard with massive uppercase headers, bracketed monospace telemetry like [ UNIT / D-01 ], crosshair grid markers, and a single hazard-red accent. ## Quick Start Ask the AI to build a data dashboard landing page using the industrial brutalist style with the tactical telemetry dark 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 create a brutalist website design with CSS?

Brutalist web design uses rigid CSS Grid layouts, visible 1px dividing lines, zero border-radius, and extreme typographic scale contrast. Combine heavy uppercase sans-serif headers with small monospace metadata, and restrict colors to a utilitarian palette like off-white, carbon black, and one hazard-red accent.

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

For structural headers use heavy neo-grotesque fonts like Inter Extra Bold, Archivo Black, or Neue Haas Grotesk. For data and telemetry use monospace fonts such as JetBrains Mono, IBM Plex Mono, or VT323. High-contrast serifs like Playfair Display work sparingly for textural contrast.

How do I add CRT scanline effects to a webpage?

Apply a repeating-linear-gradient background overlay, for example 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 to simulate analog hardware degradation.

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

No. The design system requires committing to one substrate per project: either Swiss Industrial Print (light, paper-like) or Tactical Telemetry (dark, CRT-style). Mixing light and dark substrates within the same interface breaks the visual coherence of the system.

When should I avoid using brutalist UI design?

Avoid brutalist styling for consumer products that depend on conventional usability patterns, soft gradients, and friendly rounded components. The aesthetic suits data-dense dashboards, portfolios, and editorial sites where mechanical precision and high information density are intentional goals.