industrial-brutalist-ui

Design industrial-brutalist web dashboards with CSS Grid and SVG filters.

1|Updated Oct 27, 2025
One-click install
npx skills add https://github.com/sandrasocial/sselfie-9g --skill industrial-brutalist-ui-sandrasocial
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/sandrasocial/sselfie-9g/tree/main/.agents/skills/industrial-brutalist-ui
Command: npx skills add https://github.com/sandrasocial/sselfie-9g --skill industrial-brutalist-ui-sandrasocial

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Many digital products need a visual language that conveys precision, data density, and a rugged aesthetic, but existing UI frameworks lack the industrial‑brutalist style required for technical dashboards, blueprints, and high‑contrast editorial layouts.

Core Features & Use Cases

  • Rigid Grid Architecture: Enforces strict CSS Grid layouts with visible compartmentalization and zero border‑radius.
  • Extreme Typography: Fluid‑clamped macro‑headers and monospaced micro‑type for telemetry data, with optional high‑contrast serif accents.
  • Analog Degradation Effects: Halftone, CRT scanlines, and noise filters simulate physical media.
  • Dual Theme Substrate: Light (Swiss print) or dark (tactical telemetry) palettes, each with a single accent red.
  • Use Case Example: A data‑intensive dashboard for aerospace telemetry can be styled using this system to present real‑time metrics in a blueprint‑like interface that feels both functional and striking.

Quick Start

Ask the skill to generate an industrial‑brutalist UI mockup for a high‑density dashboard.

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 industrial-style dashboard layouts with high-contrast typography?

To create industrial-style dashboard layouts, use rigid CSS Grid architectures with zero border-radius, combined with fluid-clamped macro-headers and monospaced micro-type for telemetry data to enforce strict visual compartmentalization and high contrast.

How do I add analog degradation effects like halftone and CRT scanlines to a web dashboard?

You can apply analog degradation effects like halftone, CRT scanlines, and noise to web dashboards by implementing SVG and CSS filters over your UI components to simulate physical media and rugged aesthetics.

Does this brutalist UI design system support both light and dark themes?

Yes, the brutalist UI design system supports a dual theme substrate featuring a light Swiss print palette and a dark tactical telemetry palette, with each theme utilizing a single accent red for high-contrast editorial layouts.

What is the best way to build data-dense interfaces for aerospace telemetry?

The best way to build data-dense interfaces for aerospace telemetry is applying an industrial-brutalist visual language with rigid grid layouts, extreme typography, and analog degradation effects to present real-time metrics in a functional blueprint format.

Can I use CSS Grid to enforce strict compartmentalization for technical blueprint layouts?

Yes, you can use CSS Grid to enforce strict compartmentalization for technical blueprint layouts by applying visible grid structures with zero border-radius to achieve a rugged, data-dense aesthetic for technical dashboards.