skills.rest
ShyamRavidath
ShyamRavidathCOMMUNITY
Explore all skills by this author →
GitHub

industrial-brutalist-ui

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

Updated Apr 20, 2026
Search Tags:#typography#frontend#brutalism#ui design#css grid#terminal aesthetic#swiss design
One-click install
npx skills add https://github.com/ShyamRavidath/oscc-detection-v2 --skill industrial-brutalist-ui-shyamravidath
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/ShyamRavidath/oscc-detection-v2/tree/main/.agents/skills/industrial-brutalist-ui
Command: npx skills add https://github.com/ShyamRavidath/oscc-detection-v2 --skill industrial-brutalist-ui-shyamravidath

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing data-heavy dashboards, portfolios, or editorial sites with a distinctive industrial-brutalist identity requires deep knowledge of typographic systems, rigid grid engineering, and analog degradation effects that most developers lack. ## Core Features & Use Cases - Dual Visual Archetypes: Implements either Swiss Industrial Print (light, blueprint-style) or Tactical Telemetry (dark, CRT terminal) design systems with strict consistency rules. - Typographic Architecture: Defines macro-typography with fluid clamp() scaling, negative tracking, and monospace micro-typography for telemetry data. - Analog Degradation Effects: Provides CSS/SVG techniques for halftone dithering, CRT scanlines, and mechanical noise overlays. - Use Case: Build a declassified-blueprint-style portfolio site with viewport-bleeding uppercase headers, 1px grid compartmentalization, ASCII-framed metadata, and a phosphor-green status readout. ## Quick Start Use the industrial-brutalist-ui skill to design a dark tactical telemetry dashboard for my sensor data 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 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 Industrial Print or dark Tactical Telemetry.

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

Use heavy neo-grotesque sans-serifs like Archivo Black, Inter Black, or Monument Extended for structural headers, and monospaced fonts like JetBrains Mono, IBM Plex Mono, or VT323 for data and telemetry. High-contrast serifs like Playfair Display appear only sparingly with dithering effects.

How do I add CRT scanline effects to a website 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 electron beam sweeps. Combine with a low-opacity SVG noise filter 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 and using it consistently. Mixing the light Swiss print palette with the dark telemetry palette breaks the mechanical rigidity that defines the aesthetic.

When should I not use a brutalist design system?▼

Avoid brutalist styling for consumer products needing soft, approachable UX, since it deliberately rejects gradients, rounded corners, and conventional padding. It suits data-dense dashboards, portfolios, and editorial sites, not mainstream e-commerce or accessibility-critical applications.

Related Skills

Explore More Design & Creative Skills→
dnkrowdnkrow
1

industrial-brutalist-ui

Build mechanical web interfaces with CSS Grid and terminal styling.

Community
Advanced
lucaspedrozaemlucaspedrozaem
1

frontend

Design frontend architectures and component systems for SaaS products.

Community
Advanced
scsm-unrestrictscsm-unrestrict
1

a11y-responsive

Implements and audits accessibility, responsive layouts, and cross-browser compatibility for web interfaces.

Community
Intermediate
GatsbyhateyouGatsbyhateyou

organic

Apply organic curves, soft colors, and natural gradients to interface design.

Community
Basic