| name | brutalist-ui |
| description | Apply industrial brutalism or tactical telemetry aesthetic to UI. Use when user asks for "brutalist design", "raw industrial look", "terminal/military aesthetic", "no-nonsense UI", "mechanical feel", "Swiss grid design", "monochrome data interface", or "CRT terminal style". Do NOT use for consumer apps or warm/friendly interfaces — this is for data-dense, austere, or editorial contexts only.
|
| origin | adapted:taste-skill |
| license | MIT © 2026 Leonxlnx |
| version | 1.0.0 |
| compatibility | Web (CSS/Tailwind). Two modes: Swiss Industrial (light) or Tactical Telemetry (dark). |
When to Use
- Use when: dashboard, admin panel, dev tool, terminal-like interface
- Use when: user explicitly names brutalism or industrial aesthetic
- Use when: data density matters more than warmth
- Do NOT use: consumer mobile apps, e-commerce, anything with a "friendly" brand
Step 0 — Pick ONE mode, commit to it
Mode A: Swiss Industrial Print (light)
Background: off-white (#F5F5F0)
Text: carbon black (#1A1A1A)
Accent: hazard red (#CC2200) — one element only
Mode B: Tactical Telemetry (dark)
Background: near-black CRT (#0D0D0D)
Text: phosphor white (#E8E8E0)
Accent: hazard red (#CC2200) OR terminal green (#00FF41) — one, not both
Never mix modes within a single interface.
Typography Rules
Headers (macro): Ultra-condensed heavy sans-serif. Inter Black, Neue Haas Grotesk, or Barlow Condensed.
- Letter-spacing: −0.04em to −0.06em
- Scale: large and aggressive — use fluid
clamp() sizing
- Uppercase or small-caps for category labels
Data/metadata (micro): Fixed-width monospace only. JetBrains Mono, IBM Plex Mono.
- ALL CAPS with +0.08em tracking
- No serif fonts except as deliberate, heavily-degraded display elements
Layout Rules
✓ Absolute corners — border-radius: 0 always. No exceptions.
✓ Visible 1–2px borders compartmentalizing every zone
✓ Grid-based layout — CSS Grid with explicit named areas
✓ Oscillate between dense data clusters and vast negative space
✓ Horizontal rules and vertical dividers carry structural weight
✗ No gradients
✗ No decorative shadows
✗ No rounded anything
✗ No color fills — white/off-white/near-black only (accent once)
Analog Degradation (optional, Mode B only)
Add hardware simulation for CRT authenticity:
.scanlines::after {
content: '';
background: repeating-linear-gradient(
0deg, transparent, transparent 2px,
rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px
);
pointer-events: none;
inset: 0; position: fixed;
}
.telemetry-value { text-shadow: 0 0 8px rgba(0,255,65,0.4); }
Forbidden Patterns
✗ border-radius on any element
✗ More than one accent color visible at once
✗ Gradient backgrounds or fills
✗ Soft box shadows
✗ System UI fonts (Inter, Roboto, SF Pro) for primary display
✗ Mixed modes (light sections inside dark layout)
✗ Decorative icons without data function
Anti-Fake-Pass
❌ Adding border-radius "just a little" (2px counts as a violation)
❌ Using two accent colors simultaneously
❌ Switching modes mid-scroll
✅ Verify: one mode, zero border-radius, one accent color
✅ Read every border-radius value: must all be 0
