skills.rest
TarunTeja44
TarunTeja44COMMUNITY
Explore all skills by this author →
GitHub

industrial-brutalist-ui

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

1|Updated Feb 22, 2026
Search Tags:#typography#css#web design#brutalism#ui design#terminal aesthetic#grid layout
One-click install
npx skills add https://github.com/TarunTeja44/portfolio --skill industrial-brutalist-ui-tarunteja44
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/TarunTeja44/portfolio/tree/main/.agents/skills/brutalist-skill
Command: npx skills add https://github.com/TarunTeja44/portfolio --skill industrial-brutalist-ui-tarunteja44

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, 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 data-dense portfolio site that looks like a declassified military blueprint, with uppercase black-weight headers, monospace metadata in ASCII brackets, and a strict 1px grid with zero border-radius. ## Quick Start Ask the AI to build a landing page for a data dashboard using the industrial brutalist style with the dark tactical telemetry palette.

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?▼

Use strict CSS Grid layouts with 1px dividing lines, zero border-radius, and extreme typographic contrast. Combine massive uppercase sans-serif headers using clamp() with small monospace metadata text, and limit colors to one substrate palette with a single red accent.

What fonts work best for brutalist web design?▼

Use heavy neo-grotesque sans-serifs like Archivo Black, Inter Black, or Monument Extended for structural headers. Pair them with monospace fonts like JetBrains Mono, IBM Plex Mono, or Space Mono for data and telemetry text.

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

Apply a repeating-linear-gradient background overlay, such as repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px). Combine with a low-opacity SVG noise filter for unified analog grain.

Should brutalist sites use light or dark mode?▼

Pick exactly one substrate per project and never mix them. Use light mode (#F4F4F0 paper tones) for Swiss Industrial Print styles, or dark mode (#0A0A0A) for Tactical Telemetry terminal interfaces.

When should I avoid the brutalist design style?▼

Avoid it for consumer products needing friendly, approachable interfaces, since it deliberately rejects gradients, soft shadows, rounded corners, and conventional UI patterns. It suits data-dense, editorial, or statement-driven projects instead.

Related Skills

Explore More Design & Creative Skills→
duggal1duggal1
2

colorize

Apply a defined color palette to UI components for readability and brand alignment.

Community
Advanced
PlayableIntelligencePlayableIntelligence
307

game-deploy

Deploy browser games to here.now, GitHub Pages, Vercel, or Netlify.

Official
Advanced
loveconnorloveconnor

typography

Define and validate typographic systems with WCAG 2.2 contrast compliance.

Community
Advanced
jon23djon23d
1

ui-design

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

Community
Intermediate