industrial-brutalist-ui

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

Updated Sep 3, 2026
One-click install
npx skills add https://github.com/xzedm/clipplic-landing --skill industrial-brutalist-ui-xzedm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/xzedm/clipplic-landing/tree/main/.agents/skills/industrial-brutalist-ui
Command: npx skills add https://github.com/xzedm/clipplic-landing --skill industrial-brutalist-ui-xzedm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing data-heavy dashboards, portfolios, or editorial sites with a distinctive industrial aesthetic is difficult without a coherent design system. This Skill provides a complete rule set for building interfaces that fuse Swiss typographic print with military terminal styling, eliminating guesswork around grids, type scale, color, and texture. ## Core Features & Use Cases - Two Visual Archetypes: Choose between Swiss Industrial Print (light, blueprint-style) or Tactical Telemetry (dark, CRT terminal) and apply it consistently. - Typographic Architecture: Concrete rules for macro-typography (fluid clamp scales, tight tracking) and micro-typography (monospace data readouts) with recommended web fonts. - Strict Color & Layout Systems: Fixed palettes with a single hazard-red accent, CSS Grid compartmentalization with visible 1px dividers, and zero border-radius. - Analog Degradation Effects: CSS/SVG techniques for halftone dithering, CRT scanlines, and mechanical noise overlays. - Use Case: Build a data-dense aerospace telemetry dashboard with monospace readouts, ASCII framing like [ UNIT / D-01 ], scanline overlays, and a dark phosphor palette. ## Quick Start Use the industrial-brutalist-ui skill to design a dark tactical telemetry dashboard for my sensor monitoring app.

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 dividers, zero border-radius, and extreme typographic scale contrast. Combine heavy uppercase sans-serif headers using clamp() with small monospace metadata text, and restrict colors to a single accent like hazard red.

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

Use heavy neo-grotesque fonts like Inter Black, Archivo Black, or Monument Extended for structural headers. For data and telemetry, use monospace fonts such as JetBrains Mono, IBM Plex Mono, or VT323 at small sizes with generous letter-spacing.

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

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

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

No. The design system requires committing to one substrate per project: either Swiss Industrial Print (light, off-white paper) or Tactical Telemetry (dark, near-black). Mixing both modes within the same interface breaks the visual coherence.

When should I not use a brutalist design approach?▼

Avoid brutalism for consumer products needing soft, friendly aesthetics, since it prohibits gradients, rounded corners, and translucency. It suits data-dense dashboards, portfolios, and editorial sites where raw functionality and mechanical precision are desired.