industrial-brutalist-ui

Define high-density dashboard interfaces with industrial brutalist CSS Grid layouts.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/ceshez/VELAR --skill industrial-brutalist-ui-ceshez
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/ceshez/VELAR/tree/main/.agents/skills/industrial-brutalist-ui
Command: npx skills add https://github.com/ceshez/VELAR --skill industrial-brutalist-ui-ceshez

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It provides a rigorous, repeatable visual and engineering spec for building high-density dashboard or editorial interfaces that feel mechanically precise instead of generic consumer UI.

Core Features & Use Cases

  • Swiss industrial print mode: light-substrate, rigid grid layouts with heavy structural typography and hazard-red accents for critical highlights.
  • Tactical telemetry & CRT terminal mode: dark-mode, mono-driven, tabular high-density presentations with scanlines and simulated phosphor glow.
  • Analog degradation effects: halftone/1-bit dithering, CRT scanlines, and global mechanical noise to avoid sterile “pure digital” rendering.
  • Layout determinism: CSS Grid-first compartmentalization, visible dividing lines, and strict 90-degree geometry for blueprint-like clarity.

Quick Start

Ask the AI to generate a component-level layout and CSS strategy for either the Swiss industrial print mode or the Tactical telemetry & CRT terminal mode for your data dashboard, including a consistent color substrate choice and the required analog degradation 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 design a high-density data dashboard with industrial brutalist UI?

To design a high-density data dashboard with industrial brutalist UI, use rigid CSS Grid compartmentalization, strict palette constraints, and monospaced typography. This enforces deterministic layouts and mechanical precision while prohibiting border-radius and modern soft visual effects.

What's the best way to add CRT scanlines and analog degradation effects to a web interface?

The best way to add CRT scanlines and analog degradation effects is to apply simulated phosphor glow, halftone dithering, and global mechanical noise rendering. These effects prevent sterile pure-digital rendering and provide tactical telemetry readability in dark-mode terminal interfaces.

Can I use CSS Grid for rigid layout compartmentalization in editorial systems?

Yes, you can use CSS Grid for rigid layout compartmentalization in editorial systems. A CSS Grid-first approach with visible dividing lines and strict 90-degree geometry creates blueprint-like clarity, ensuring layout determinism for Swiss industrial print mode interfaces.

What typography scale contrast works for high-density telemetry dashboards?

Typography scale contrast for high-density telemetry dashboards relies on heavy structural typography combined with monospaced telemetry readability. This approach ensures mechanical precision and tabular data presentation without relying on modern soft visual effects or border-radius.

Does industrial brutalist UI design allow border-radius and modern soft visual effects?

No, industrial brutalist UI design prohibits border-radius and modern soft visual effects. Instead, it enforces strict 90-degree geometry, visible dividing lines, and rigid grid compartmentalization to maintain blueprint-like clarity and deterministic layout rules.

When do I need tactical telemetry and CRT terminal mode for data dashboards?

You need tactical telemetry and CRT terminal mode for data dashboards when presenting tabular high-density data in dark-mode environments. This mode utilizes monospaced typography, scanlines, and simulated phosphor glow to achieve mechanical precision and tactical clarity.