skills.rest
desarrolloainia
desarrolloainiaCOMMUNITY
Explore all skills by this author →
GitHub

industrial-brutalist-ui

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

Updated Sep 14, 2026
Search Tags:#typography#ui#web design#brutalism#CSS Grid#Swiss design#crt terminal
One-click install
npx skills add https://github.com/desarrolloainia/nuevo_circuito_mir --skill industrial-brutalist-ui-desarrolloainia
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/desarrolloainia/nuevo_circuito_mir/tree/main/frontend/.agents/skills/industrial-brutalist-ui
Command: npx skills add https://github.com/desarrolloainia/nuevo_circuito_mir --skill industrial-brutalist-ui-desarrolloainia

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing data-heavy dashboards, portfolios, or editorial sites with a distinctive industrial-brutalist identity requires deep knowledge of typographic systems, rigid grid engineering, and analog degradation effects that most developers lack. ## Core Features & Use Cases - Dual Visual Archetypes: Implements either Swiss Industrial Print (light, blueprint-style) or Tactical Telemetry (dark, CRT terminal) design systems with strict consistency rules. - Typographic Architecture: Defines macro-typography with fluid clamp() scaling, negative tracking, and compressed leading, paired with monospace micro-typography for data and metadata. - Analog Degradation Effects: Applies halftone dithering, CRT scanlines via repeating-linear-gradient, and SVG noise filters to simulate physical media. - Use Case: Build a declassified-blueprint-style portfolio site with viewport-bleeding uppercase headers, 1px grid dividing lines, ASCII-framed navigation labels, and hazard-red accent highlights. ## Quick Start Use the industrial-brutalist-ui skill to build a dark tactical telemetry dashboard with monospace data tables, scanline effects, and red accent highlights.

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 with visible 1px dividing lines, massive uppercase typography via clamp() functions, and zero border-radius. This skill defines two archetypes: light Swiss Industrial Print or dark Tactical Telemetry modes.

What fonts work best for industrial brutalist UI design?▼

Use heavy neo-grotesque sans-serifs like Archivo Black or Inter Extra Bold for structural headers, and monospaced fonts like JetBrains Mono or IBM Plex Mono for data and telemetry. High-contrast serifs like Playfair Display appear sparingly with halftone degradation.

How to add CRT scanline effects to a website?▼

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

Can I mix light and dark modes in brutalist design?▼

No, this design system strictly prohibits mixing light and dark substrates within one interface. Choose either Swiss Industrial Print (light, off-white paper background) or Tactical Telemetry (dark, near-black CRT background) and commit fully.

What colors are allowed in industrial brutalist interfaces?▼

The palette is restricted to a paper or near-black background, carbon ink or white phosphor foreground, and a single hazard red accent (#E61919). Gradients, soft shadows, and translucency are prohibited; terminal green is optional for one element only.

Related Skills

Explore More Design & Creative Skills→
duggal1duggal1
2

colorize

Apply a defined color palette to UI components for readability and brand alignment.

Community
Advanced
forbotsakeforbotsake
5

open-gstack-browser

Launch GStack Browser with AI-controlled Chromium and a live sidebar.

Official
Advanced
fengshao1227fengshao1227
5.9k

typeset

Improves typography by fixing font choices, hierarchy, sizing, weight, and readability in web interfaces.

Community
Intermediate
microsoftmicrosoft
2.9k

frontend-ui-dark-ts

Create dark-themed React UI systems with Tailwind CSS and Framer Motion.

Official
Advanced