skills.rest
Gito125
Gito125COMMUNITY
Explore all skills by this author →
WebsiteGitHub

industrial-brutalist-ui

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

Updated May 4, 2026
Search Tags:#typography#web design#brutalism#ui design#css grid#terminal aesthetic#swiss design
One-click install
npx skills add https://github.com/Gito125/gideon_portfolio --skill industrial-brutalist-ui-gito125
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/Gito125/gideon_portfolio/tree/main/.github/skills/industrial-brutalist-ui
Command: npx skills add https://github.com/Gito125/gideon_portfolio --skill industrial-brutalist-ui-gito125

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing data-heavy dashboards, portfolios, or editorial sites that feel raw and mechanically precise requires deep knowledge of typographic systems, grid engineering, and analog degradation effects that most developers lack. ## Core Features & Use Cases - Dual Visual Archetypes: Implements either Swiss Industrial Print (light, blueprint-style) or Tactical Telemetry (dark, CRT terminal) modes with strict consistency rules. - Typographic Architecture: Defines macro-typography with fluid clamp() scaling, negative tracking, and monospace micro-typography for telemetry data. - Analog Degradation Effects: Applies halftone dithering, CRT scanlines, and SVG noise filters via CSS to simulate physical media. - Use Case: Build a portfolio site that looks like a declassified military blueprint, with monospace metadata labels, hazard-red accents, visible grid compartments, and scanline overlays. ## Quick Start Use the industrial-brutalist-ui skill to design a dark tactical telemetry dashboard for my project metrics page.

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 borders, zero border-radius, extreme typographic scale contrast via clamp(), and a restricted utilitarian palette. This skill provides complete rules for grids, typography, color, 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 Archivo Black or Inter Black for structural headers.

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

Apply a repeating-linear-gradient background overlay with alternating transparent and semi-transparent dark lines every 2-4 pixels. Combine with a low-opacity SVG noise filter on the root element for unified analog grain.

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

No. The skill mandates choosing one substrate per project: Swiss Industrial Print uses light paper backgrounds, while Tactical Telemetry uses dark CRT backgrounds. Mixing them breaks the visual coherence of the system.

When should I not use brutalist UI design?▼

Avoid brutalist styling for consumer products needing friendly, approachable interfaces, or where accessibility requires soft visual hierarchy. It suits portfolios, dashboards, and editorial sites prioritizing raw data density and mechanical precision.

Related Skills

Explore More Design & Creative Skills→
vvedantbvvedantb
99

brandkit

Generate a cohesive brand-kit board with a 3×3 grid and consistent color palette.

Community
Advanced
nextlevelbuildernextlevelbuilder
123.5k

ui-styling

Build accessible user interfaces with shadcn/ui components and Tailwind CSS utility styling.

Official
Intermediate
HDeiblerHDeibler
6

color-accessibility-and-mode

Validate UI color choices for WCAG contrast and light/dark mode support.

Community
Intermediate
GatsbyhateyouGatsbyhateyou

organic

Apply organic curves, soft colors, and natural gradients to interface design.

Community
Basic