skills.rest
nielslataire
nielslataireCOMMUNITY
Explore all skills by this author →
GitHub

industrial-brutalist-ui

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

Updated May 21, 2025
Search Tags:#typography#web design#brutalism#css grid#monospace#terminal ui#scanlines
One-click install
npx skills add https://github.com/nielslataire/Group-LN --skill industrial-brutalist-ui-nielslataire
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/nielslataire/Group-LN/tree/main/.agents/skills/industrial-brutalist-ui
Command: npx skills add https://github.com/nielslataire/Group-LN --skill industrial-brutalist-ui-nielslataire

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 degradation effects that most developers lack. ## Core Features & Use Cases - Dual Visual Archetypes: Implements either Swiss Industrial Print (light mode, heavy sans-serif, hazard red accents) or Tactical Telemetry (dark mode, monospace, CRT effects) with strict consistency rules. - Typographic Architecture: Provides exact font selections, fluid clamp() scaling, tracking, and leading parameters for macro and micro typography. - Analog Degradation Effects: Includes CSS/SVG techniques for halftone dithering, CRT scanlines, and mechanical noise overlays. - Use Case: Build a declassified-blueprint-style portfolio site with viewport-bleeding numerals, 1px grid dividers, ASCII-framed metadata, and a global noise filter. ## Quick Start Use the industrial-brutalist-ui skill to build a dark tactical telemetry dashboard with monospace data tables, scanlines, and red accent highlights.

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, extreme typographic scale contrast via clamp(), and zero border-radius. This skill provides exact parameters for fonts, spacing, and color palettes to achieve the industrial aesthetic.

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

Use heavy neo-grotesque sans-serifs like Inter Black or Archivo Black for structural headers, and monospaced fonts like JetBrains Mono or IBM Plex Mono for data and telemetry. 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 on the DOM root for unified analog grain.

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

No, this system requires choosing one substrate per project. Swiss Industrial Print uses light off-white backgrounds, while Tactical Telemetry uses dark near-black backgrounds; mixing them breaks the visual coherence.

When should I avoid using brutalist UI design?▼

Avoid brutalist styling for consumer products needing conventional usability patterns, soft aesthetics, or approachable branding. The system deliberately rejects gradients, rounded corners, and translucency, which suits technical or editorial contexts only.

Related Skills

Explore More Design & Creative Skills→
calebaerocalebaero

plan-site

Generates five planning artifacts from a validated site brief.

Community
Advanced
forbotsakeforbotsake
5

open-gstack-browser

Launch GStack Browser with AI-controlled Chromium and a live sidebar.

Official
Advanced
primaERPprimaERP

audit

Audit frontend interfaces for accessibility, performance, theming, and responsive design issues.

Official
Advanced
jon23djon23d
1

ui-design

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

Community
Intermediate