industrial-brutalist-ui

Design web interfaces with Swiss typographic and military terminal aesthetics.

Updated Mar 11, 2025
One-click install
npx skills add https://github.com/MohammedSaudAlsahli/dotfiles --skill industrial-brutalist-ui-mohammedsaudalsahli
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/MohammedSaudAlsahli/dotfiles/tree/main/ai/agents-skills/industrial-brutalist-ui
Command: npx skills add https://github.com/MohammedSaudAlsahli/dotfiles --skill industrial-brutalist-ui-mohammedsaudalsahli

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the need for creating interfaces that embody a blend of mid-century Swiss design and military terminal aesthetics, perfect for data-heavy dashboards and editorial sites.

Core Features & Use Cases

  • Swiss Industrial Print: Incorporates high-contrast light modes and heavy sans-serif typography.
  • Tactical Telemetry & CRT Terminal: Utilizes dark modes, high-density data presentation, and monospaced typography.
  • Typography Architecture: Offers macro-typography for headers and micro-typography for data, with textural contrast.
  • Color System: Provides consistent palettes for Swiss Industrial Print and Tactical Telemetry.
  • Layout and Spatial Engineering: Implements strict grid architectures and visible compartmentalization.
  • UI Components and Symbology: Uses ASCII characters and technical framing devices.
  • Textural and Post-Processing Effects: Includes halftone, scanlines, and mechanical noise effects.

Quick Start

Design a dashboard using the industrial-brutalist-ui skill with a Swiss Industrial Print aesthetic.

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 data dashboard with Swiss typographic and military terminal aesthetics?

To design a data dashboard with Swiss typographic and military terminal aesthetics, use rigid modular CSS Grid layouts, extreme typographic scale contrast, and utilitarian color palettes combined with semantic HTML to structure data-heavy interfaces.

What is the best way to apply terminal aesthetics to data visualization interfaces?

The best way to apply terminal aesthetics to data visualization interfaces is to use monospaced typography for high-density data presentation, implement strict grid architectures with visible compartmentalization, and apply scanlines or mechanical noise effects.

Do I need to know CSS Grid and SVG filters to build brutalist web interfaces?

Yes, you need proficiency in CSS Grid and SVG filters to build these brutalist web interfaces. CSS Grid is required to implement strict modular grid layouts, while SVG filters are necessary for creating textural post-processing effects like halftone and scanlines.

How do I structure typography architecture for high-density data dashboards?

Structure typography architecture for high-density data dashboards by contrasting macro-typography for headers with micro-typography for data. This approach uses heavy sans-serif fonts for high-contrast light modes and monospaced fonts for tactical telemetry dark modes.

What UI components and symbology work best for industrial brutalist interface design?

For industrial brutalist interface design, the best UI components and symbology include ASCII characters and technical framing devices. These elements enforce the utilitarian aesthetic when combined with rigid modular grids and consistent utilitarian color palettes.