skills.rest
AvaTar-ArTs
AvaTar-ArTsCOMMUNITY
Explore all skills by this author →
GitHub

industrial-brutalist-ui

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

Updated Jul 10, 2026
Search Tags:#typography#css#web design#brutalism#ui design#terminal aesthetic#grid layout
One-click install
npx skills add https://github.com/AvaTar-ArTs/.Agent-skills --skill industrial-brutalist-ui-avatar-arts
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/AvaTar-ArTs/.Agent-skills/tree/main/skills/taste-skill/skills/brutalist-skill
Command: npx skills add https://github.com/AvaTar-ArTs/.Agent-skills --skill industrial-brutalist-ui-avatar-arts

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing data-heavy dashboards, portfolios, or editorial sites that need a raw, mechanical, blueprint-like 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, high-contrast, heavy sans-serif) or Tactical Telemetry (dark, monospace, CRT terminal) design systems. - Typographic Architecture: Specifies macro-typography with fluid clamp() scaling, negative tracking, and micro-typography with monospace fonts for data readouts. - Analog Degradation Effects: Applies halftone dithering, CRT scanlines, and SVG noise filters via CSS to simulate physical media. - Use Case: Build a declassified-blueprint-style portfolio site with viewport-bleeding uppercase headers, 1px grid compartmentalization, ASCII-framed metadata, and a single hazard-red accent color. ## Quick Start Use the industrial-brutalist-ui skill to build a dark tactical telemetry dashboard for my project metrics with monospace data readouts 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 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 color palette. This skill provides complete specifications for typography, color, spacing, and texture effects.

What fonts work best for industrial or terminal-style interfaces?▼

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

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

Apply a repeating-linear-gradient background with alternating transparent and semi-transparent black 2px bands to simulate electron beam sweeps. Combine with a low-opacity SVG noise filter on the DOM root for unified analog grain.

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

No. The skill mandates choosing one substrate per project: either Swiss Industrial Print (light, off-white paper background) or Tactical Telemetry (dark, near-black background). Mixing substrates within one interface breaks the visual system's coherence.

When is brutalist UI design not appropriate?▼

Brutalist interfaces deliberately reject conventional consumer UI patterns, soft shadows, gradients, and rounded corners. They suit portfolios, editorial sites, and data dashboards but are poor fits for mainstream consumer products requiring familiar, accessible interaction patterns.

Related Skills

Explore More Design & Creative Skills→
MMA-Marketing-ProMMA-Marketing-Pro
1

industrial-brutalist-ui

Create industrial brutalist web interfaces with rigid grids and technical typography.

Official
Advanced
wangqianCAIwangqianCAI

Canvas Skill

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

Community
Intermediate
loveconnorloveconnor

typography

Define and validate typographic systems with WCAG 2.2 contrast compliance.

Community
Advanced
hbritelhbritel

ui-designer

Design reusable user interfaces with Tailwind CSS and component libraries.

Community
Intermediate