skills.rest
noticesfromchat
noticesfromchatCOMMUNITY
Explore all skills by this author →
GitHub

industrial-brutalist-ui

Generates industrial brutalist and tactical terminal interface designs using CSS grids and typography.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing a coherent brutalist or retro-terminal web interface requires consistent decisions about typography, color, grid structure, and texture effects, which are easy to get wrong without a defined system. ## Core Features & Use Cases - Two Visual Archetypes: Implements either Swiss Industrial Print (light, heavy sans-serif, red accents) or Tactical Telemetry (dark, monospace, CRT effects) as a committed single mode. - Typographic System: Defines macro-typography with fluid clamp() scaling and micro-typography with monospace data styling. - Texture Engineering: Provides CSS and SVG techniques for halftone dithering, scanlines, and mechanical noise overlays. - Use Case: Ask for a landing page styled as a military telemetry terminal and receive HTML/CSS with monospace data tables, ASCII framing, scanline overlays, and a strict dark palette. ## Quick Start Design a landing page for my product using a dark tactical terminal aesthetic with monospace typography 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 interface?▼

Brutalist web design uses rigid CSS Grid layouts, visible 1px compartment borders, zero border-radius, and extreme typographic scale contrast. Pick one mode, light Swiss print or dark terminal, and commit to it consistently across the interface.

What fonts work for terminal or telemetry UI design?▼

Monospace fonts like JetBrains Mono, IBM Plex Mono, Space Mono, and VT323 suit telemetry data at 10-14px with generous letter-spacing. Pair them with heavy sans-serifs like Archivo Black or Inter Extra Bold for structural headers.

How do I add CRT scanline effects with CSS?▼

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 interfaces.

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

No, the system requires choosing one substrate palette per project. Mixing light Swiss print backgrounds with dark terminal sections breaks the visual coherence that defines the aesthetic.

When should I not use brutalist UI design?▼

Avoid it when the product requires conventional consumer UI patterns, soft gradients, rounded components, or when the user has not explicitly requested an industrial or terminal aesthetic. Existing product constraints take precedence.

Related Skills

Explore More Design & Creative Skills→
dnkrowdnkrow
1

industrial-brutalist-ui

Build mechanical web interfaces with CSS Grid and terminal styling.

Community
Advanced
NVIDIA-NeMoNVIDIA-NeMo
58

visual-dev

Automate visual regression testing and UI implementation with Playwright MCP browser automation.

Official
Intermediate
DeiblerDeibler
8

color-accessibility-and-mode

Design accessible color palettes meeting WCAG contrast, dark mode, and color-blindness requirements.

Community
Intermediate
LedgerHQLedgerHQ
23

component-styling

Applies cross-platform design-token styling rules to React and React Native components.

Official
Intermediate