skills.rest
kireevkit15-sys
kireevkit15-sysCOMMUNITY
Explore all skills by this author →
GitHub

industrial-brutalist-ui

Generate CSS Grid layouts, typography tokens, and telemetry UI components.

Updated Apr 5, 2026
Search Tags:#typography#css#brutalism#telemetry#ui-design#design-system#industrial-design
One-click install
npx skills add https://github.com/kireevkit15-sys/-1 --skill industrial-brutalist-ui-kireevkit15-sys
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/kireevkit15-sys/-1/tree/main/skills/industrial-brutalist-ui
Command: npx skills add https://github.com/kireevkit15-sys/-1 --skill industrial-brutalist-ui-kireevkit15-sys

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a precise, production-ready design and engineering system for building web interfaces that intentionally reject consumer UI softness in favor of mechanical precision, extreme typographic hierarchies, and high-density data presentation so teams can deliver consistent industrial/brutalist experiences without ad-hoc decisions.

Core Features & Use Cases

  • Bimodal Visual Modes: Choose either Swiss Industrial Print (light, blueprint-like) or Tactical Telemetry (dark, CRT/terminal) and follow strict rules for that mode.
  • Typographic System: Guidance for macro-scale fluid typography and small fixed monospace telemetry text, including font recommendations, tracking, and leading.
  • Color & Grid Determinism: Single-substrate color palettes and mathematically precise CSS Grid layouts with visible compartmentalization and no border-radius.
  • Techniques & Effects: Implementable CSS/SVG directives for halftone dithering, CRT scanlines, mechanical noise overlays, and strict semantic markup for telemetry elements.
  • Use Cases: High-density admin dashboards, telemetry consoles, portfolios or editorials that must read like declassified blueprints or military terminals.

Quick Start

Generate a responsive CSS Grid template, type scale tokens, color tokens, and a sample header plus a telemetry card implemented for Tactical Telemetry dark mode.

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 telemetry dashboard with high-density data grids?▼

Build an industrial telemetry dashboard using deterministic CSS Grid layouts with visible compartmentalization, extreme typographic scale contrast, and monospaced data rendering to achieve high-density presentation without ad-hoc design decisions.

What is the best way to add CRT scanlines and halftone effects to a web UI?▼

Add CRT scanlines and halftone effects using implementable CSS and SVG post-processing directives, applying mechanical noise overlays and dithering techniques to achieve simulated analog degradation for tactical telemetry interfaces.

Can I use fluid typography with monospaced data rendering for brutalist web design?▼

Fluid typography pairs with monospaced data rendering through clamp-based macro-scale type scales for headers and fixed monospace fonts for telemetry text, ensuring rigid hierarchies and tracking consistency across industrial interfaces.

Does this brutalist UI design system support both light blueprint and dark terminal modes?▼

The system supports bimodal visual modes: Swiss Industrial Print for light blueprint-like aesthetics and Tactical Telemetry for dark CRT terminal interfaces, each with strict single-substrate color palettes and layout rules.

When should I avoid using extreme typographic hierarchies in data-heavy dashboards?▼

Avoid extreme typographic hierarchies when consumer UI softness is required, as this system intentionally rejects rounded borders and soft aesthetics in favor of mechanical precision, rigid modular grids, and no border-radius.

How do I create a responsive CSS Grid template for a tactical telemetry console?▼

Create a responsive CSS Grid template by generating deterministic layout structures with mathematically precise grids, color tokens, type scale tokens, and sample telemetry cards configured for the Tactical Telemetry dark mode.

Related Skills

Explore More Design & Creative Skills→
JosiahSiegelJosiahSiegel
51

tailwindcss-advanced-layouts

Implement advanced Tailwind CSS layouts with Grid, Flexbox, and Container Queries.

Community
Advanced
uxjosephuxjoseph
68

design-skill

Generate HTML slide templates with typography, color palettes, and layout tokens.

Community
Basic
LeonxlnxLeonxlnx
74.5k

industrial-brutalist-ui

Design industrial-style web interfaces with rigid CSS Grid layouts and telemetry typography.

Community
Advanced
yrlanrteixeirayrlanrteixeira

industrial-brutalist-ui

Construct web interfaces with industrial and brutalist design aesthetics.

Community
Advanced