industrial-brutalist-ui

Generates brutalist and tactical telemetry web interfaces with rigid grids, monospace typography, and CRT effects.

3|Updated Jul 17, 2026
One-click install
npx skills add https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore --skill industrial-brutalist-ui-javeria-javaid
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore/tree/main/Users/Javeria/Desktop/Alkhidmat_foundation_lahore/.agents/skills/industrial-brutalist-ui
Command: npx skills add https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore --skill industrial-brutalist-ui-javeria-javaid

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing raw industrial or military-terminal style interfaces requires precise control over grids, typography, and analog degradation effects that generic UI patterns cannot deliver. This Skill provides a complete design system for building brutalist, Swiss-print, and CRT telemetry interfaces without falling back on soft consumer UI conventions. ## Core Features & Use Cases - Two Visual Archetypes: Choose between Swiss Industrial Print (light, paper-like substrates with heavy sans-serif type) or Tactical Telemetry (dark CRT terminals with monospace data density). - Typographic Architecture: Defines macro-typography with fluid clamp() scaling, tight tracking, and uppercase micro-typography for metadata and telemetry readouts. - Analog Degradation Effects: Implements halftone dithering, CRT scanlines via repeating-linear-gradient, and SVG noise filters to simulate physical media. - Use Case: Build a data-dense aerospace dashboard with a dark phosphor palette, ASCII-framed data points like [ DELIVERY SYSTEMS ], crosshair grid markers, and scanline overlays for a command-center aesthetic. ## Quick Start Create a brutalist telemetry dashboard page using a dark CRT palette, monospace typography, visible grid borders, and scanline 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 create a brutalist website design with CSS?▼

Use strict CSS Grid layouts with 1px gap dividers, heavy uppercase sans-serif typography scaled with clamp(), and a limited palette of off-white, carbon black, and hazard red. Reject border-radius, gradients, and soft shadows to enforce mechanical rigidity.

How to add CRT scanline effects to a web page?▼

Apply a repeating-linear-gradient background such as repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px) to simulate electron beam sweeps. Combine with a low-opacity SVG noise filter for unified analog grain.

What fonts work best for terminal or telemetry UI design?▼

Monospace fonts like JetBrains Mono, IBM Plex Mono, Space Mono, and VT323 suit telemetry data at 10-14px with generous tracking. Pair with heavy neo-grotesque faces like Archivo Black or Inter Black for structural headers.

Can I mix light and dark brutalist palettes in one interface?▼

No, the design system requires committing to one substrate per project. Mixing the light Swiss Industrial palette with the dark Tactical Telemetry palette breaks visual coherence unless the user explicitly requests a controlled hybrid.

When should I avoid using brutalist UI design?▼

Avoid brutalist styling for consumer products, accessibility-sensitive flows, or brands requiring warmth and softness. CRT, halftone, and dithering effects must be tested for readability, contrast, and motion sensitivity before deployment.