skills.rest
Aeonxuu
AeonxuuCOMMUNITY
Explore all skills by this author →
GitHub

industrial-brutalist-ui

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

Updated May 9, 2026
Search Tags:#web design#brutalism#ui design#CSS Grid#monospace#terminal aesthetic#swiss typography
One-click install
npx skills add https://github.com/Aeonxuu/southtownslandservice_v2 --skill industrial-brutalist-ui-aeonxuu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/Aeonxuu/southtownslandservice_v2/tree/main/.agents/skills/industrial-brutalist-ui
Command: npx skills add https://github.com/Aeonxuu/southtownslandservice_v2 --skill industrial-brutalist-ui-aeonxuu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing data-heavy dashboards, portfolios, or editorial sites that break from conventional consumer UI patterns requires deep knowledge of typographic systems, grid engineering, and analog texture simulation. This Skill provides a complete design system for building industrial brutalist interfaces without guesswork. ## Core Features & Use Cases - Dual Visual Archetypes: Choose between Swiss Industrial Print (light, blueprint-style) or Tactical Telemetry (dark, CRT terminal) modes with strict consistency rules. - Typographic Architecture: Concrete font pairings, fluid clamp() scaling, negative tracking, and casing rules for macro and micro typography. - Analog Degradation Effects: CSS and SVG techniques for halftone dithering, CRT scanlines, and mechanical noise overlays. - Use Case: Build a declassified-blueprint-style portfolio site with viewport-bleeding black typography, 1px grid compartmentalization, monospace metadata labels, and a single hazard-red accent color. ## Quick Start Use the industrial-brutalist-ui skill to design a dark tactical telemetry dashboard with monospace data tables 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 design a brutalist website with Swiss typography?▼

Brutalist Swiss design uses heavy neo-grotesque fonts like Inter Black or Archivo Black at massive fluid scales with clamp(), negative letter-spacing, compressed line-height, and uppercase casing. Anchor all elements to a strict CSS Grid with visible 1px dividing lines and a single red accent color.

What fonts work best for terminal-style UI design?▼

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

How do I create CRT scanline effects with CSS?▼

CRT scanlines are created with 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). Combine with a low-opacity SVG noise filter on the DOM root for unified grain.

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

No, mixing light and dark substrates within the same interface is prohibited. Choose one archetype per project: Swiss Industrial Print uses off-white paper backgrounds with carbon ink, while Tactical Telemetry uses near-black backgrounds with white phosphor text.

Why should brutalist design avoid border-radius and gradients?▼

Border-radius and gradients simulate consumer UI softness, which contradicts the mechanical rigidity of industrial design. All corners must be exactly 90 degrees, and colors must simulate physical media or primitive emissive displays without translucency or soft shadows.

Related Skills

Explore More Design & Creative Skills→
willhammondhimselfwillhammondhimself

fonts

Select distinctive typography for Next.js projects with pairing guidelines.

Community
Intermediate
langgeniuslanggenius

industrial-brutalist-ui

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

Official
Intermediate
lexicalninjalexicalninja
2

accessibility-design-checker

Identify accessibility issues in UI designs, wireframes, and prototypes.

Community
Intermediate
renpereiradxrenpereiradx

frontend-design

Redirects frontend design work to the fixed Fluent 2 design contract for the ERP webapp.

Community
Basic