industrial-brutalist-ui

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

3|1|Updated Apr 29, 2026
One-click install
npx skills add https://github.com/firstsun-dev/skills --skill industrial-brutalist-ui-firstsun-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/firstsun-dev/skills/tree/main/plugins/frontend-product-design/skills/industrial-brutalist-ui
Command: npx skills add https://github.com/firstsun-dev/skills --skill industrial-brutalist-ui-firstsun-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing data-heavy dashboards, portfolios, or editorial sites that need a raw, mechanical, blueprint-like character is hard without a coherent design system. This Skill provides a complete specification for building industrial brutalist interfaces, covering typography, color, layout, components, and analog degradation effects. ## Core Features & Use Cases - Two Visual Archetypes: Choose between Swiss Industrial Print (light, paper-like substrates) or Tactical Telemetry (dark CRT terminal mode), with strict rules preventing inconsistent mixing. - Typographic Architecture: Concrete font stacks, fluid clamp() scaling, tracking, and casing rules for macro headers and monospace telemetry data. - Layout & Effects Directives: CSS Grid compartmentalization, 90-degree corners, ASCII framing symbols, halftone dithering, CRT scanlines, and SVG noise filters. - Use Case: Ask your agent to build a project portfolio page styled like a declassified military blueprint, and it will apply the dark telemetry palette, monospace data tables, crosshair markers, and scanline overlays defined here. ## Quick Start Build a data dashboard page using the industrial brutalist style with the tactical telemetry dark mode and monospace typography.

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, visible 1px borders, zero border-radius, and extreme typographic scale contrast. This Skill defines exact palettes, font stacks, and layout rules for Swiss print or military terminal variants.

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

Use heavy neo-grotesque sans-serifs like Inter Black, Archivo Black, or Monument Extended for macro headers, and monospace fonts like JetBrains Mono, IBM Plex Mono, or VT323 for data and telemetry text.

How do I add CRT scanline effects to a webpage?▼

Apply a repeating-linear-gradient background with alternating transparent and semi-transparent dark bands every 2-4 pixels. 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 design system requires choosing one substrate per project: light paper tones for Swiss Industrial Print or dark backgrounds for Tactical Telemetry. Mixing both within one interface breaks visual coherence.

When should I not use brutalist UI design?▼

Avoid this style for consumer products needing friendly, approachable interfaces, since it rejects gradients, rounded corners, and soft shadows. It suits data-dense dashboards, portfolios, and editorial sites prioritizing raw functionality.