industrial-brutalist-ui

Generates brutalist web interfaces combining Swiss typographic grids with military terminal aesthetics.

3|Updated Apr 25, 2026
One-click install
npx skills add https://github.com/cherishwins/npsi-site --skill industrial-brutalist-ui-cherishwins
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/cherishwins/npsi-site/tree/main/.agents/skills/industrial-brutalist-ui
Command: npx skills add https://github.com/cherishwins/npsi-site --skill industrial-brutalist-ui-cherishwins

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 complete rules for building interfaces that fuse Swiss print typography with military terminal aesthetics. ## Core Features & Use Cases - Dual Visual Archetypes: Choose between Swiss Industrial Print (light, blueprint-style) or Tactical Telemetry (dark, CRT terminal) modes with strict consistency rules. - Typographic Architecture: Defines macro-typography with fluid clamp() scaling, monospace micro-typography for telemetry data, and degraded serif accents. - Layout & Effects Engineering: Enforces rigid CSS Grid compartmentalization, zero border-radius, ASCII framing symbols, halftone dithering, CRT scanlines, and SVG noise filters. - Use Case: Build a data-dense aerospace dashboard with monospaced telemetry readouts, crosshair grid markers, phosphor-glow scanlines, and hazard-red accent highlights. ## Quick Start Design a dark tactical telemetry dashboard for a sensor monitoring page 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 design a brutalist dashboard UI with CSS?▼

Use strict CSS Grid layouts with 1px gap dividers, zero border-radius, and visible compartmentalization via solid borders. Combine massive uppercase sans-serif headers using clamp() with small monospace telemetry text, and limit accents to a single hazard red.

What fonts work best for industrial brutalist web design?▼

Use heavy neo-grotesque sans-serifs like Inter Black, Archivo Black, or Monument Extended for structural headers. Pair them with monospace fonts like JetBrains Mono, IBM Plex Mono, or VT323 for data and telemetry text.

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

Apply a repeating-linear-gradient background overlay, such as alternating transparent and semi-transparent black 2px bands, to simulate electron beam sweeps. Combine with a low-opacity SVG noise filter for unified analog grain.

Should I use light or dark mode for brutalist interfaces?▼

Pick exactly one substrate per project and never mix them. Use light off-white paper tones for Swiss Industrial Print styles, or near-black backgrounds with white phosphor text for Tactical Telemetry terminal styles.

When is brutalist UI design not appropriate?▼

Avoid this style for consumer products needing conventional usability patterns, soft gradients, or friendly rounded components. The system deliberately rejects standard UI conventions in favor of mechanical rigidity and high data density.