industrial-brutalist-ui

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

Updated Aug 26, 2026
One-click install
npx skills add https://github.com/danieliudi/trackforge-os --skill industrial-brutalist-ui-danieliudi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/danieliudi/trackforge-os/tree/main/.cursor/skills/industrial-brutalist-ui
Command: npx skills add https://github.com/danieliudi/trackforge-os --skill industrial-brutalist-ui-danieliudi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing data-heavy dashboards, portfolios, or editorial sites that need a raw, mechanical look is hard to do consistently. This Skill provides a complete design system for building interfaces that fuse Swiss typographic print with military terminal aesthetics, so every typographic, color, and layout decision follows strict, coherent rules. ## Core Features & Use Cases - Two Committed Visual Modes: Choose between Swiss Industrial Print (light, paper-like substrates) or Tactical Telemetry (dark CRT terminal) and apply it consistently across the interface. - Typographic Architecture: Macro-typography with fluid clamp() scaling and negative tracking, micro-typography in monospace for telemetry data, and sparing degraded serif accents. - Utilitarian Color & Layout Systems: Restricted palettes with a single hazard-red accent, rigid 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 monitoring dashboard that looks like a declassified military terminal, with monospace telemetry readouts, ASCII bracket framing, crosshair grid markers, and scanline overlays. ## 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 dividers, zero border-radius, extreme typographic scale contrast via clamp(), and restricted color palettes. This Skill provides complete rules for typography, color, layout, and texture effects.

What fonts work best for terminal or military-style UI?

Monospace fonts like JetBrains Mono, IBM Plex Mono, Space Mono, and VT323 work best for telemetry data and terminal interfaces. Pair them with heavy neo-grotesque sans-serifs like Inter Black or Archivo Black for structural headers.

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

No, this design system requires choosing one substrate per project. Swiss Industrial Print uses light paper-like backgrounds, while Tactical Telemetry uses dark CRT backgrounds. Mixing them breaks the visual coherence.

How do I add CRT scanline effects to a website?

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

When should I not use brutalist UI design?

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