skills.rest
gmolike
gmolikeCOMMUNITY
Explore all skills by this author →
GitHub

industrial-brutalist-ui

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

Updated Mar 4, 2026
Search Tags:#typography#web design#brutalism#ui design#css grid#crt terminal#swiss design
One-click install
npx skills add https://github.com/gmolike/Claude-Template --skill industrial-brutalist-ui-gmolike
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/gmolike/Claude-Template/tree/main/.agents/skills/industrial-brutalist-ui
Command: npx skills add https://github.com/gmolike/Claude-Template --skill industrial-brutalist-ui-gmolike

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 texture simulation that most developers lack. ## Core Features & Use Cases - Dual Visual Archetypes: Implements either Swiss Industrial Print (light, paper-based) or Tactical Telemetry CRT (dark, terminal-based) design systems with strict consistency rules. - Typographic Architecture: Defines macro-typography with fluid clamp() scaling, negative tracking, and compressed leading, paired with monospace micro-typography for data and metadata. - Analog Degradation Effects: Engineers halftone dithering, CRT scanlines, and mechanical noise via CSS gradients and SVG filters to simulate physical media. - Use Case: Build a declassified-blueprint-style analytics dashboard with rigid CSS Grid compartments, hazard-red accents, ASCII-framed data labels, and scanline overlays. ## Quick Start Ask the AI to build a landing page or dashboard using the industrial brutalist style with a dark tactical telemetry theme and monospace data readouts.

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 CRT terminal.

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 macro-typography, and monospaced fonts like JetBrains Mono, IBM Plex Mono, or VT323 for data and telemetry. High-contrast serifs appear only sparingly with dithering effects.

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

Apply a repeating-linear-gradient background with alternating transparent and semi-transparent dark bands every 2-4 pixels to simulate electron beam sweeps. 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 choosing one substrate palette per project, either light Swiss Industrial Print or dark Tactical Telemetry, and using it consistently. Mixing substrates breaks the mechanical rigidity the aesthetic depends on.

When should I not use brutalist UI design?▼

Avoid this style for consumer products needing approachable, conventional UX patterns, since it deliberately rejects gradients, soft shadows, rounded corners, and familiar UI conventions. It suits data-dense dashboards, portfolios, and editorial sites prioritizing raw functional aesthetics.

Related Skills

Explore More Design & Creative Skills→
Niksh-HiremathNiksh-Hiremath

typeset

Standardize fonts, hierarchy, spacing, and readability across UI content.

Community
Intermediate
dipenmagdanidipenmagdani

responsive-design

Plan and implement container-query responsive interfaces with fluid typography and CSS Grid.

Community
Advanced
pnewsampnewsam
1

compliance-accessibility

Review web interfaces against WCAG 2.2 accessibility requirements.

Community
Intermediate
jon23djon23d
1

ui-design

Guide React app UI builds with standardized Mantine or Tailwind choices and accessibility rules.

Community
Intermediate