industrial-brutalist-ui

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

Updated Mar 26, 2026
One-click install
npx skills add https://github.com/javiruu/viru-air --skill industrial-brutalist-ui-javiruu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/javiruu/viru-air/tree/main/.agents/skills/industrial-brutalist-ui
Command: npx skills add https://github.com/javiruu/viru-air --skill industrial-brutalist-ui-javiruu

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 complete rules 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, blueprint-style) or Tactical Telemetry (dark, CRT terminal) and apply it consistently. - Typographic Architecture: Rules for macro-typography with fluid clamp() scaling, monospace micro-typography for data, and degraded serif accents. - Layout & Effects Engineering: Rigid CSS Grid compartmentalization, ASCII symbology, halftone dithering, CRT scanlines, and mechanical noise filters. - Use Case: Build a flight-tracking dashboard that looks like a declassified aerospace terminal, with monospaced telemetry tables, hazard-red accents, and scanline overlays. ## Quick Start Design a dark tactical telemetry dashboard for my flight price watchlist using the industrial brutalist style.

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 dashboard UI with CSS?▼

Use strict CSS Grid layouts with 1px gap dividers, uppercase heavy sans-serif headers scaled with clamp(), and monospace fonts for data. Reject border-radius, gradients, and shadows, and delineate zones with solid 1-2px borders.

What fonts work for industrial or terminal-style web design?▼

Use neo-grotesque heavy sans-serifs like Inter Black, Archivo Black, or Monument Extended for headers. For telemetry data use monospaced fonts like JetBrains Mono, IBM Plex Mono, or VT323 with generous letter-spacing and uppercase casing.

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 lines, to simulate electron beam sweeps. Combine with a low-opacity SVG noise filter for unified analog grain.

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

No. Pick one substrate per project: light newsprint tones for Swiss Industrial Print or dark deactivated-CRT backgrounds for Tactical Telemetry. Mixing both modes within one interface breaks the design system's coherence.

What colors should a military terminal UI use?▼

Use a near-black background like #0A0A0A with white phosphor #EAEAEA text and a single hazard red accent (#E61919). Terminal green #4AF626 is optional for one specific indicator only, never as general text color.