Industrial Brutalist Ui
Apply a rigid industrial-brutalist design system when building data-heavy dashboards, portfolios, or editorial sites that should read like machinery manuals or tactical terminals.
Overview
Industrial Brutalist UI is an agent skill for the Build phase that architects raw, grid-locked interfaces blending Swiss typographic print with tactical terminal aesthetics.
Install
npx skills add https://github.com/leonxlnx/taste-skill --skill industrial-brutalist-uiWhat is this skill?
- Two commit-to-one archetypes: Swiss Industrial Print versus Tactical Telemetry—do not mix modes in one interface
- Rigid modular grids, extreme typographic scale contrast, and utilitarian palettes
- Programmatic analog degradation: halftones, CRT scanlines, bitmap dithering
- Explicit rejection of conventional consumer UI chrome in favor of mechanical precision
- Tuned for high data density on dashboards and editorial layouts
- 2 visual archetypes—pick exactly one per project
Adoption & trust: 88.2k installs on skills.sh; 37.9k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your dashboard or site looks like generic startup UI and fails to communicate precision, density, or a distinctive editorial identity.
Who is it for?
Solo builders shipping data-heavy dashboards, technical portfolios, or editorial properties who want a deliberate anti-slop visual identity.
Skip if: Consumer-friendly marketing landings, playful brands, or projects that need soft gradients, rounded cards, and conventional app chrome without heavy customization.
When should I use this skill?
Building data-heavy dashboards, portfolios, or editorial sites that should feel like declassified blueprints or tactical telemetry—not consumer UI.
What do I get? / Deliverables
You get a committed brutalist design language—one archetype, rigid grid, extreme type contrast, utilitarian color, and optional degradation effects—ready for your agent to implement in frontend code.
- Interface implementing chosen archetype (Swiss Industrial Print or Tactical Telemetry)
- Documented grid, type scale, palette, and degradation treatment
Recommended Skills
Journey fit
Canonical shelf is Build because the skill encodes visual and CSS-level interface patterns you implement in the product UI, not distribution or content planning. Frontend is where typography, grid, color, and degradation effects are specified and shipped in components and pages.
How it compares
Use as a stylistic design-system brief for agents, not as a generic component kit or a Stitch DESIGN.md generator.
Common Questions / FAQ
Who is industrial-brutalist-ui for?
Indie developers and designers shipping web UIs who want Swiss-industrial or tactical-terminal aesthetics with high information density.
When should I use industrial-brutalist-ui?
During Build when you are implementing frontend layouts for dashboards, portfolios, or editorial sites and need strict grid, typography, and utilitarian color rules—not during launch SEO or content planning.
Is industrial-brutalist-ui safe to install?
Review the Security Audits panel on this Prism page and the skill repo before installing; the skill is design guidance and does not inherently require network or secrets.
SKILL.md
READMESKILL.md - Industrial Brutalist Ui
# 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. ### 3.1 Macro-Typography (Structural Headers) * **Classification:** Neo-Grotesque / Heavy Sans-Serif. * **Optimal Web Fonts:** Neue Haas Grotesk (Black), Inter (Extra Bold/Black), Archivo Black, Roboto Flex (Heavy), Monument Extended. * **Implementation Parameters:** * **Scale:** Deployed at massive scales using fluid typography (e.g., `clamp(4rem, 10vw, 15rem)`). * **Tracking (Letter-spacing):** Extremely tight, often negative (`-0.03em` to `-0.06em`), forcing glyphs to form solid architectural blocks. * **Leading (Line-height):** Highly compressed (`0.85` to `0.95`). * **Casing:** Exclusively uppercase for structural impact. ### 3.2 Micro-Typography (Data & Telemetry) * **Classification:** Monospace / Technical Sans. * **Optimal Web Fonts:** JetBrains Mono, IBM Plex Mono, Space Mono, VT323, Courier Prime. * **Implementation Parameters:** * **Scale:** Fixed and small (`10px` to `14px` / `0.7rem` to `0.875rem`). * **Tracking:** Generous (`0.05em` to `0.1em`) to simulate mechanical typewriter spacing or terminal matrices. * **Leading:** Standard to tight (`1.2` to `1.4`). * **Casing:** Exclusively uppercase. Used for all metadata, navigation, unit IDs, and coordinates. ### 3.3 Textural Contrast (Artistic Disruption) * **Classification:** High-Contrast Serif. * **Optimal Web Fonts:** Playfair Display, EB Garamond, Times New Roman. * **Implementation Parameters:** Used exceedingly sparingly. Must be subjected to heavy post-processing (halftone f