skills.rest
myrson2
myrson2COMMUNITY
Explore all skills by this author →
GitHub

industrial-brutalist-ui

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

2|Updated Jul 20, 2026
Search Tags:#typography#web design#brutalism#ui design#css grid#terminal aesthetic#crt effects
One-click install
npx skills add https://github.com/myrson2/eMSME --skill industrial-brutalist-ui-myrson2
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/myrson2/eMSME/tree/main/.agents/.agents/skills/industrial-brutalist-ui
Command: npx skills add https://github.com/myrson2/eMSME --skill industrial-brutalist-ui-myrson2

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing data-heavy dashboards, portfolios, or editorial sites with a distinctive industrial aesthetic requires deep knowledge of typographic systems, 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 monospace micro-typography for data readouts. - Analog Degradation Effects: Applies halftone dithering, CRT scanlines, and mechanical noise via CSS and SVG filters. - Use Case: Build a declassified-blueprint-style portfolio site with viewport-bleeding black typography, 1px grid dividers, ASCII-framed metadata, and a global noise overlay. ## Quick Start Use the industrial-brutalist-ui skill to build a dark tactical telemetry dashboard with monospace data tables, scanline effects, and hazard-red accents.

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 1px dividing lines, zero border-radius, extreme typographic scale contrast via clamp(), and a restricted utilitarian color palette. This skill provides complete specifications for grids, typography, and effects.

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

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

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

Apply a repeating-linear-gradient background to simulate horizontal electron beam sweeps, such as alternating transparent and semi-transparent black 2px bands. Combine with a low-opacity SVG noise filter 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 Swiss Industrial Print (light, off-white paper) or Tactical Telemetry (dark, near-black CRT). Mixing substrates within one interface breaks visual coherence.

When should I avoid using brutalist UI design?▼

Avoid brutalist styling for consumer products requiring conventional usability patterns, soft gradients, rounded corners, or friendly translucency. This aesthetic suits data-dense dashboards, portfolios, and editorial sites prioritizing raw mechanical character.

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
NVIDIA-OmniverseNVIDIA-Omniverse
179

deploy-texture-agent-brev

Deploy or smoke-test the Texture Agent on Brev-hosted endpoints.

Official
Advanced
cedriczielcedricziel
6

ux-principles

Codify accessible web UI guidelines for server-rendered templates and ARIA usage.

Community
Intermediate
jon23djon23d
1

ui-design

Guide React app UI builds with standardized Mantine or Tailwind choices and accessibility rules.

Community
Intermediate