brutalist-skill

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

3|Updated Apr 20, 2026
One-click install
npx skills add https://github.com/langgenius/due-date-hq-jwl --skill brutalist-skill-langgenius
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: brutalist-skill
Source: https://github.com/langgenius/due-date-hq-jwl/tree/main/.claude/skills/brutalist-skill
Command: npx skills add https://github.com/langgenius/due-date-hq-jwl --skill brutalist-skill-langgenius

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing data-heavy dashboards, portfolios, or editorial sites that need a raw, mechanical, high-density look is hard to do consistently without a defined system. This Skill provides a complete design specification for building interfaces that fuse Swiss typographic print with military terminal aesthetics, so every layout, font, and color choice follows strict rules. ## Core Features & Use Cases - Two Visual Archetypes: Choose between Swiss Industrial Print (light, paper-like substrates with heavy sans-serif type) or Tactical Telemetry (dark CRT terminal mode with monospace data readouts), with rules preventing inconsistent mixing. - Typographic Architecture: Concrete parameters for macro-typography (fluid clamp scales, negative tracking, compressed leading) and micro-typography (monospace metadata at 10-14px with generous tracking). - Layout & Effects Directives: Blueprint CSS Grid layouts with visible compartmentalization, zero border-radius, ASCII framing symbols, halftone dithering, CRT scanlines, and SVG noise filters. - Use Case: Ask for a project status dashboard styled as a declassified military terminal, and receive HTML/CSS with monospace telemetry tables, scanline overlays, hazard-red accents, and ASCII-bracketed section headers. ## Quick Start Build a dark tactical telemetry dashboard for my server monitoring page using the brutalist design system.

Frequently Asked Questions about brutalist-skill

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a brutalist website design?

Brutalist web design uses rigid CSS Grid layouts, extreme typographic scale contrast, visible borders, and zero border-radius. This Skill defines two committed modes: light Swiss Industrial Print or dark Tactical Telemetry, each with fixed color and typography rules.

What fonts work best for brutalist and terminal UI design?

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

How do I add CRT scanline effects with CSS?

Apply a repeating-linear-gradient background such as repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px) to simulate horizontal electron beam sweeps on dark terminal interfaces.

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

No. The design system requires choosing one substrate palette per project and using it consistently. Mixing light Swiss print backgrounds with dark terminal sections breaks the mechanical coherence the aesthetic depends on.

When should I not use brutalist design for a website?

Avoid brutalism for consumer products needing soft, approachable UX, since it rejects gradients, rounded corners, and conventional padding. It suits data-dense dashboards, portfolios, and editorial sites where raw functionality and high information density are desired.