industrial-brutalist-ui

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

Updated Jul 10, 2026
One-click install
npx skills add https://github.com/Kaleb-Rupe/aurora --skill industrial-brutalist-ui-kaleb-rupe
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/Kaleb-Rupe/aurora/tree/main/claude/skills/industrial-brutalist-ui
Command: npx skills add https://github.com/Kaleb-Rupe/aurora --skill industrial-brutalist-ui-kaleb-rupe

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, opinionated specification for building interfaces that fuse Swiss typographic print with military terminal aesthetics, eliminating guesswork around grids, typography, color, and texture. ## Core Features & Use Cases - Two Committed Visual Modes: Choose between Swiss Industrial Print (light, paper-like substrates) or Tactical Telemetry (dark CRT terminal) with strict rules preventing inconsistent mixing. - Typographic Architecture: Concrete parameters for macro-typography (fluid clamp scales, negative tracking, compressed leading) and micro-typography (monospace data readouts), with named web font recommendations. - Utilitarian Color & Layout Systems: Exact hex palettes, 1px grid-gap divider techniques, zero border-radius enforcement, and ASCII-based symbology for framing data. - Analog Degradation Effects: CSS and SVG recipes for halftone dithering, CRT scanlines, and global noise grain. - Use Case: Ask for a telemetry-style analytics dashboard and receive a dark-mode interface with monospace data tables, phosphor-white text, a single hazard-red accent, scanline overlays, and blueprint-grid compartmentalization. ## 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 dashboard UI with CSS?

Use a strict CSS Grid with 1px gaps and contrasting backgrounds to create razor-thin dividers, pair massive uppercase sans-serif headers with small monospace data text, and enforce zero border-radius. This Skill provides exact font, scale, and color parameters for the full system.

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

For structural headers use heavy neo-grotesques like Inter Black, Archivo Black, or Monument Extended with negative tracking. For data and telemetry use monospace fonts like JetBrains Mono, IBM Plex Mono, or VT323 at 10-14px with generous letter-spacing.

How do I add CRT scanline effects to a website?

Apply a repeating-linear-gradient background overlay alternating transparent and semi-transparent black bands every 2-4 pixels to simulate electron beam sweeps. Combine with a low-opacity SVG noise filter on the root element for unified analog grain.

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

No. The system requires committing to one substrate per project: either Swiss Industrial Print (light, off-white paper tones) or Tactical Telemetry (dark, near-black CRT backgrounds). Mixing substrates within one interface breaks the visual coherence.

When should I not use a brutalist design system?

Avoid it for consumer products needing friendly, approachable UX, since it deliberately rejects gradients, soft shadows, rounded corners, and conventional UI patterns. It suits data-dense, editorial, or statement-driven projects rather than mainstream e-commerce or onboarding flows.