industrial-brutalist-ui

Generates brutalist web interfaces using Swiss typography, monospace telemetry, and analog degradation effects.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing data-heavy dashboards, portfolios, or editorial sites with a distinctive industrial aesthetic is hard to execute consistently. This Skill provides a complete design system for building interfaces that fuse Swiss typographic print with military terminal aesthetics, eliminating guesswork around grids, type scales, color palettes, and texture effects. ## 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 terminal modes with monospace data density), with strict rules to keep each mode consistent. - Typographic Architecture: Concrete parameters for macro-typography (fluid clamp scales, negative tracking, compressed leading) and micro-typography (monospace metadata at 10-14px with generous tracking), plus recommended web fonts like Inter, Archivo Black, JetBrains Mono, and IBM Plex Mono. - Layout & Effects Engineering: Directives for blueprint CSS grids, 1px compartmentalization borders, zero border-radius, ASCII framing symbols, halftone dithering, CRT scanlines via repeating-linear-gradient, and SVG noise filters. - Use Case: Build a declassified-blueprint-style analytics dashboard with massive uppercase headers, dense monospace telemetry tables, hazard-red accents, and a global film-grain overlay. ## Quick Start Ask the AI to design a landing page or dashboard using the industrial brutalist style, specifying whether you want the light Swiss print mode or the dark tactical terminal 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 CSS design relies on strict grid layouts with visible 1px borders, zero border-radius, extreme typographic scale contrast using clamp(), and flat utilitarian colors. This Skill provides exact parameters for type scales, tracking, leading, and palette values for both light and dark modes.

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

For heavy structural headers use neo-grotesque faces like Inter Extra Bold, Archivo Black, or Monument Extended. For data and telemetry use monospace fonts like 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 website?

Apply a repeating-linear-gradient background overlay such as 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 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 the light Swiss Industrial Print palette (#F4F4F0 paper backgrounds) or the dark Tactical Telemetry palette (#0A0A0A CRT backgrounds). Mixing substrates breaks the visual coherence of the system.

When should I not use a brutalist design style?

Avoid brutalism for consumer products needing soft, approachable aesthetics, since the style rejects gradients, rounded corners, and translucency. It suits data-dense dashboards, portfolios, and editorial sites where raw functionality and mechanical precision are desirable.