skills.rest
optimaxin
optimaxinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

industrial-brutalist-ui

Generates brutalist web interfaces combining Swiss typographic grids with military terminal aesthetics.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing data-heavy dashboards, portfolios, or editorial sites with a distinctive industrial brutalist look requires deep knowledge of typographic scale contrast, rigid grid systems, and analog degradation effects that most developers lack. ## Core Features & Use Cases - Dual Visual Archetypes: Choose between Swiss Industrial Print (light, paper-like substrates) or Tactical Telemetry (dark CRT terminal modes) with strict consistency rules. - Typographic Architecture: Implements macro-typography with fluid clamp() scaling, monospace micro-typography for data, and degraded serif accents. - Analog Degradation Effects: Applies halftone dithering, CRT scanlines, and SVG noise filters via CSS to simulate physical media. - Use Case: Build a data-dense aerospace dashboard with monospaced telemetry readouts, hazard-red accents, ASCII framing symbols, and scanline overlays on a dark terminal substrate. ## Quick Start Use the industrial-brutalist-ui skill to design a dark tactical telemetry dashboard for my sensor monitoring page.

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 provides complete specifications for grids, typography, and color systems.

What fonts work best for terminal or military HUD interfaces?▼

Monospace fonts like JetBrains Mono, IBM Plex Mono, Space Mono, and VT323 work best for terminal interfaces. Use them at small fixed sizes (10-14px) with generous letter-spacing (0.05em-0.1em) and uppercase casing for telemetry data.

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

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 horizontal electron beam sweeps on dark terminal interfaces.

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

No, this design system strictly prohibits mixing substrates. Choose either Swiss Industrial Print (light, off-white paper backgrounds) or Tactical Telemetry (dark, near-black CRT backgrounds) and commit to it for the entire interface.

When should I avoid using brutalist UI design?▼

Avoid brutalist design for consumer products requiring conventional usability patterns, soft aesthetics, gradients, or rounded friendly components. It suits data-dense dashboards, editorial sites, and portfolios where raw mechanical precision is the goal.

Related Skills

Explore More Design & Creative Skills→
Usmanhacker2641Usmanhacker2641

industrial-brutalist-ui

Architect brutalist UI systems for data-heavy dashboards with grid and typographic rules.

Community
Advanced
SungmasterSungmaster

frontend-design

Generate production-grade frontend interfaces with aesthetic frameworks and design principles.

Community
Advanced
sarkarshivaditya-labsarkarshivaditya-lab

wellmate-visual-regression

Validate UI visual changes through baseline capture, rendering comparison, and accessibility checks.

Community
Intermediate
tylerwindtylerwind
47

ui-neumorphic-design

Apply dual shadows, soft highlights, and typography rules for neumorphic UI styling.

Community
Basic