industrial-brutalist-ui

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

1|Updated Jan 10, 2024
One-click install
npx skills add https://github.com/noemdb/cfla --skill industrial-brutalist-ui-noemdb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: industrial-brutalist-ui
Source: https://github.com/noemdb/cfla/tree/main/.agents/skills/industrial-brutalist-ui
Command: npx skills add https://github.com/noemdb/cfla --skill industrial-brutalist-ui-noemdb

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 specification for building interfaces that fuse Swiss typographic print with military terminal visuals, eliminating guesswork around grids, typography, color, and texture. ## Core Features & Use Cases - Dual Visual Archetypes: Choose between Swiss Industrial Print (light, blueprint-style) or Tactical Telemetry (dark, CRT terminal) modes with strict consistency rules. - Typographic Architecture: Concrete parameters for macro-typography (fluid clamp scaling, negative tracking) and micro-typography (monospace data readouts) with recommended web fonts. - Engineering Directives: CSS techniques for razor-thin grid lines, scanline overlays, halftone dithering, and semantic HTML tags for technical telemetry. - Use Case: Build a declassified-blueprint-style portfolio site with oversized uppercase headers, monospace metadata blocks, hazard-red accents, and a global noise texture. ## Quick Start Use the industrial-brutalist-ui skill to design a dark tactical telemetry dashboard for my server monitoring page with monospace data tables 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 dividing lines, zero border-radius, and extreme typographic scale contrast. Combine oversized uppercase sans-serif headers using clamp() with small monospace metadata text, and avoid gradients or soft shadows.

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

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

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

Apply a repeating-linear-gradient background overlay, such as repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px). Combine with a low-opacity SVG noise filter on the root element for analog grain.

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

No, this design system requires committing to one substrate per project. Swiss Industrial Print uses light paper backgrounds (#F4F4F0), while Tactical Telemetry uses dark CRT backgrounds (#0A0A0A). Mixing them breaks the visual coherence.

What colors should a military terminal UI use?▼

Use a near-black background (#0A0A0A), white phosphor foreground (#EAEAEA), and hazard red (#E61919) as the sole accent. Terminal green (#4AF626) is optional but restricted to a single purposeful element like one status indicator.