industrial-brutalist-ui

Create industrial brutalist UIs with rigid grids and typographic systems.

Updated Mar 7, 2024
One-click install
npx skills add https://github.com/JamesOliveira1/Project-MastroWebSite --skill industrial-brutalist-ui-jamesoliveira1
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/JamesOliveira1/Project-MastroWebSite/tree/main/.agents/skills/industrial-brutalist-ui
Command: npx skills add https://github.com/JamesOliveira1/Project-MastroWebSite --skill industrial-brutalist-ui-jamesoliveira1

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a design framework for constructing industrial brutalist user interfaces that communicate mechanical precision and high data density, enabling teams to deliver consistent visuals without bespoke adaptations for every project.

Core Features & Use Cases

  • Rigid, modular grid-driven layouts with extreme typographic scale and restricted color palettes.
  • Clear separation between two archetypes: Swiss Industrial Print and Tactical Telemetry & CRT Terminal, to be chosen per project.
  • Post-processing texture: halftones, scanlines, and noise to simulate analogue degradation.

Quick Start

Create a prototype that applies the chosen brutalist mode using a strict CSS grid, mono-spaced typography for data panels, and CRT-like post-processing 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 build an industrial brutalist UI for data-heavy dashboards?

To build an industrial brutalist UI, apply strict CSS grid layouts, heavy monospaced typography, restricted color palettes, and post-processing textures like scanlines to achieve high data density and mechanical precision.

What is the difference between Swiss Industrial Print and Tactical Telemetry UI styles?

Swiss Industrial Print focuses on rigid modular grids and extreme typographic scale, while Tactical Telemetry emphasizes CRT terminal aesthetics, ASCII-framed data panels, and analog degradation effects for data dashboards.

How do I add CRT terminal effects and analog degradation to a web interface?

Add CRT terminal effects and analog degradation by applying post-processing textures such as halftones, scanlines, and noise overlays to simulate the mechanical look of vintage telemetry displays.

Can I use strict modular grid systems and monospaced typography for editorial sites?

Yes, you can apply strict modular grid systems and monospaced typography to editorial sites to enforce color discipline and achieve a declassified blueprint aesthetic with high structural rigidity.

What's the best way to design a tactical telemetry dashboard with ASCII-framed data?

The best way to design a tactical telemetry dashboard is to enforce strict grid layouts, utilize monospaced typography for data panels, and frame data outputs with ASCII borders to maintain visual consistency.

When should I avoid using brutalist UI design for web applications?

You should avoid brutalist UI design when your project requires soft visual hierarchy, fluid responsive layouts, or broad accessibility, as the framework mandates strict color discipline, heavy typography, and rigid grids.