industrial-brutalist-ui

SKILL.md

Raw mechanical interfaces fusing Swiss typography with military terminal aesthetics for data-heavy dashboards.

Choose one visual archetype per project: Swiss Industrial Print (light mode, heavy sans-serif, red accents) or Tactical Telemetry (dark mode, monospace, phosphor glow effects)

Typographic system demands extreme scale contrast between macro-typography (massive uppercase headers with tight tracking) and micro-typography (small monospace data with generous spacing)

Layout enforces visible compartmentalization via CSS Grid with solid borders, 90-degree corners only, and oscillation between extreme data density and vast negative space

Includes analog degradation effects: halftone dithering, CRT scanlines, mechanical noise overlays, and ASCII framing devices to simulate declassified blueprints

SKILL: Industrial Brutalism & Tactical Telemetry UI

1. Skill Meta

Name: Industrial Brutalism & Tactical Telemetry Interface Engineering
Description: Advanced proficiency in architecting web interfaces that synthesize mid-century Swiss Typographic design, industrial manufacturing manuals, and retro-futuristic aerospace/military terminal interfaces. This discipline requires absolute mastery over rigid modular grids, extreme typographic scale contrast, purely utilitarian color palettes, and the programmatic simulation of analog degradation (halftones, CRT scanlines, bitmap dithering). The objective is to construct digital environments that project raw functionality, mechanical precision, and high data density, deliberately discarding conventional consumer UI patterns.

2. Visual Archetypes

The design system operates by merging two distinct but highly compatible visual paradigms. Pick ONE per project and commit to it. Do not alternate or mix both modes within the same interface.

2.1 Swiss Industrial Print

Derived from 1960s corporate identity systems and heavy machinery blueprints.

Characteristics: High-contrast light modes (newsprint/off-white substrates). Reliance on monolithic, heavy sans-serif typography. Unforgiving structural grids outlined by visible dividing lines. Aggressive, asymmetric use of negative space punctuated by oversized, viewport-bleeding numerals or letterforms. Heavy use of primary red as an alert/accent color.

2.2 Tactical Telemetry & CRT Terminal

Derived from classified military databases, legacy mainframes, and aerospace Heads-Up Displays (HUDs).

Characteristics: Dark mode exclusivity. High-density tabular data presentation. Absolute dominance of monospaced typography. Integration of technical framing devices (ASCII brackets, crosshairs). Application of simulated hardware limitations (phosphor glow, scanlines, low bit-depth rendering).

3. Typographic Architecture

Typography is the primary structural and decorative infrastructure. Imagery is secondary. The system demands extreme variance in scale, weight, and spacing.