skills.rest
truongnat
truongnatCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

industrial-brutalist-ui

Generates brutalist web interfaces using rigid grids, monospace typography, and analog degradation effects.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing data-heavy dashboards, portfolios, or editorial sites with a distinctive industrial or military-terminal aesthetic requires deep knowledge of typographic scale, grid engineering, and CSS texture effects that most developers lack. ## Core Features & Use Cases - Dual Visual Archetypes: Implements either Swiss Industrial Print (light, paper-like substrates) or Tactical Telemetry (dark CRT terminal) modes with strict consistency rules. - Typographic Architecture: Defines macro-typography with fluid clamp() scaling, negative tracking, and monospace micro-typography for data readouts. - Analog Degradation Effects: Provides CSS/SVG techniques for halftone dithering, CRT scanlines, and mechanical noise overlays. - Use Case: Build a declassified-blueprint-style dashboard for a telemetry monitoring app with monospace data tables, hazard-red accents, and scanline overlays. ## 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, and a restricted color palette. This skill provides exact parameters for fonts, spacing, and ASCII-based UI decoration.

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

Use heavy neo-grotesque sans-serifs like Archivo Black or Inter ExtraBold for macro headers, and monospace fonts like JetBrains Mono or IBM Plex Mono for data readouts. High-contrast serifs like Playfair Display work sparingly for textural contrast.

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 for unified analog grain.

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

No. The skill mandates choosing one substrate per project: light paper tones for Swiss Industrial Print or dark backgrounds for Tactical Telemetry. Mixing substrates within one interface breaks the visual system's coherence.

When should I not use brutalist UI design?▼

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

Related Skills

Explore More Design & Creative Skills→
rampstackcorampstackco
523

content-strategy

Plan and govern a content program with editorial positioning, pillars, formats, and calendar.

Official
Advanced
coastdigitalgroupcoastdigitalgroup
2

fluid-typography-system

Generate CSS fluid typography scales with clamp() and viewport parameters.

Official
Intermediate
EIS-ITSEIS-ITS

Frontend Accessibility

Identify and fix accessibility issues in frontend interfaces using semantic HTML, ARIA, and keyboard navigation.

Official
Intermediate
TheOrcDevTheOrcDev
436

videorc-design

Implement Videorc UI styling with shadcn/ui components and CSS variables.

Community
Intermediate