skills.rest
ivaylo91
ivaylo91COMMUNITY
Explore all skills by this author →
GitHub

industrial-brutalist-ui

Generates brutalist web interfaces combining Swiss typography with military terminal aesthetics.

Updated Apr 9, 2026
Search Tags:#typography#web design#brutalism#ui design#css grid#terminal aesthetic#crt effects
One-click install
npx skills add https://github.com/ivaylo91/Shopping-Mobile-App --skill industrial-brutalist-ui-ivaylo91
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/ivaylo91/Shopping-Mobile-App/tree/main/.agents/skills/industrial-brutalist-ui
Command: npx skills add https://github.com/ivaylo91/Shopping-Mobile-App --skill industrial-brutalist-ui-ivaylo91

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing data-heavy dashboards, portfolios, or editorial sites with a distinctive industrial aesthetic requires deep knowledge of typographic systems, grid engineering, and analog degradation effects that most developers lack. ## Core Features & Use Cases - Dual Visual Archetypes: Implements either Swiss Industrial Print (light mode, heavy sans-serif, hazard red accents) or Tactical Telemetry (dark mode, monospace, CRT effects) with strict consistency rules. - Typographic Architecture: Defines macro-typography with fluid clamp() scaling, negative tracking, and compressed leading, plus micro-typography for monospace telemetry data. - Analog Degradation Effects: Provides CSS and SVG techniques for halftone dithering, CRT scanlines, and mechanical noise overlays. - Use Case: Build a data-dense aerospace dashboard with monospace telemetry readouts, ASCII-framed data points, crosshair grid markers, and phosphor-glow scanline effects on a dark substrate. ## Quick Start Create a landing page for my portfolio using the industrial brutalist style with the tactical telemetry dark mode 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 create a brutalist website design with CSS?▼

Brutalist web design uses rigid CSS Grid layouts with visible 1px borders, zero border-radius, extreme typographic scale contrast via clamp(), and a restricted utilitarian color palette. This Skill defines two committed modes: light Swiss print or dark terminal aesthetics.

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

Use heavy neo-grotesque sans-serifs like Inter Black, Archivo Black, or Monument Extended for structural headers. For telemetry data, use monospace fonts like JetBrains Mono, IBM Plex Mono, or VT323 with generous letter-spacing and uppercase casing.

How do I add CRT scanline effects to a website?▼

Apply a repeating-linear-gradient background overlay with alternating transparent and semi-transparent dark bands every 2-4 pixels. Combine with a low-opacity SVG noise filter on the DOM root for unified analog grain.

Can I mix light and dark modes in a brutalist interface?▼

No. The design system requires committing to one substrate palette per project. Mixing light Swiss print backgrounds with dark terminal sections breaks the visual coherence that defines the aesthetic.

When should I not use brutalist UI design?▼

Avoid this style for consumer products requiring soft, approachable interfaces, accessibility-sensitive audiences, or brands built on warmth and friendliness. It suits data-dense, editorial, or technical contexts where raw functionality is the message.

Related Skills

Explore More Design & Creative Skills→
EveryIncEveryInc
28

Every Master Positioning

Align sub-brand messaging with Every's master positioning canon.

Official
Intermediate
wangqianCAIwangqianCAI

Canvas Skill

Render and manage web-based interfaces on connected OpenClaw nodes.

Community
Intermediate
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-typography-advanced

Detect web font, contrast, glyph, and language attribute defects on web pages.

Community
Intermediate
AvihusittonAvihusitton

industrial-brutalist-ui

Generate industrial-brutalist UI designs with rigid grids and analog degradation effects.

Community
Advanced