skills.rest
tamagusko
tamaguskoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

industrial-brutalist-ui

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

Updated Oct 7, 2022
Search Tags:#typography#web design#brutalism#ui design#css grid#terminal aesthetic#swiss design
One-click install
npx skills add https://github.com/tamagusko/linux-cfg --skill industrial-brutalist-ui-tamagusko
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/tamagusko/linux-cfg/tree/main/dotfiles/claude/skills/industrial-brutalist-ui
Command: npx skills add https://github.com/tamagusko/linux-cfg --skill industrial-brutalist-ui-tamagusko

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing data-heavy dashboards, portfolios, or editorial sites with a distinctive industrial or retro-terminal look requires deep knowledge of typographic scale, grid systems, and analog degradation effects that most developers lack. ## Core Features & Use Cases - Dual Visual Archetypes: Choose between Swiss Industrial Print (light, blueprint-style) or Tactical Telemetry (dark, CRT terminal) design systems. - Typographic Architecture: Concrete font, scale, tracking, and leading rules for macro headers and monospace data readouts. - Analog Degradation Effects: CSS and SVG techniques for halftones, scanlines, dithering, and mechanical noise. - Use Case: Build a declassified-blueprint-style portfolio site with massive uppercase headers, monospace metadata, red accent lines, and a subtle CRT scanline overlay. ## Quick Start Use the industrial-brutalist-ui skill to design a dark tactical telemetry dashboard for my sensor data project.

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

Brutalist web design uses rigid CSS Grid layouts, visible 1px borders, zero border-radius, and extreme typographic contrast. Combine massive uppercase sans-serif headers with small monospace metadata, and restrict colors to a single substrate palette with one accent.

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

Monospace fonts like JetBrains Mono, IBM Plex Mono, Space Mono, and VT323 suit terminal interfaces. Use them at small fixed sizes (10-14px) with generous letter-spacing and uppercase casing for data readouts and metadata.

How do I add CRT scanline effects with CSS?▼

Apply a repeating-linear-gradient background to simulate electron beam sweeps, such as alternating transparent and semi-transparent black 2px bands. Combine with a low-opacity SVG noise filter for unified analog grain.

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

No. This design system requires committing to one substrate per project: light newsprint tones for Swiss Industrial Print or dark CRT backgrounds for Tactical Telemetry. Mixing both breaks the visual coherence of the interface.

When should I avoid brutalist UI design?▼

Avoid it for consumer products needing conventional usability patterns, soft aesthetics, or broad accessibility comfort. Brutalism suits data-dense dashboards, portfolios, and editorial sites where raw mechanical character is the goal.

Related Skills

Explore More Design & Creative Skills→
astoreyaiastoreyai
3

kymera-brand

Define Kymera Brand System UI guidelines for dashboards, reports, presentations, and technical artifacts across web and print with color tokens, typography, components, and backgrounds for dark/light modes.

Community
Basic
RylaispiritRylaispirit
55

frontend-design

Implements and verifies accessible, responsive production frontend interfaces in existing repositories.

Community
Advanced
jimmy706jimmy706

audit

Audit interface quality across accessibility, performance, theming, and responsive design.

Community
Advanced
jon23djon23d
1

ui-design

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

Community
Intermediate