brutalist

Auto-load

Attaches itself automatically when a prompt matches.

Raw industrial brutalist interfaces fusing Swiss typographic print with military terminal / telemetry aesthetics. Rigid modular grids, extreme type-scale contrast, utilitarian color, hard 90-degree corners, mono metadata, analog degradation effects. For portfolios, editorial, or data-heavy sites that should feel like a declassified blueprint.

Scaffolds

react

vanilla

Source

Adapted from leonxlnx/taste-skill (MIT), adapted for Codebase scaffolds

Instructions

The full instruction set the agent receives when this skill is active.

Industrial Brutalist / Tactical Telemetry UI

Layer this on top of frontend-design. Dials around VARIANCE 7-9, MOTION 3-5, DENSITY 5-7. Typography is the structure; imagery is secondary. Deliberately discard consumer UI softness.

Pick ONE mode and commit (do not mix)

Swiss Industrial Print (light): unbleached-paper bg #F4F4F0 / #EAE8E3, carbon ink #050505-#111, single accent hazard red #E61919 for rules/highlights. Monolithic heavy sans, oversized viewport-bleeding numerals/letterforms, visible dividing lines.
Tactical Telemetry (dark): deactivated-CRT bg #0A0A0A / #121212 (never pure #000), white-phosphor text #EAEAEA, same hazard red accent. High-density mono tables, ASCII framing, optional terminal green #4AF626 for exactly ONE status readout.

Typography

Macro headers: neo-grotesque / heavy sans (Archivo Black, Inter Black, Anton via next/font on scaffold-next; a heavy system sans on scaffold-react). Fluid clamp(4rem, 10vw, 15rem), tracking -0.03em to -0.06em, line-height 0.85-0.95, UPPERCASE.
Micro/metadata: monospace (JetBrains Mono, IBM Plex Mono, Space Mono via next/font). Fixed small 10-14px, tracking 0.05-0.1em, UPPERCASE. Use for nav, unit IDs, coordinates, captions.

Color & geometry rules

No gradients, no soft drop shadows, no translucency. Colors simulate physical media or emissive displays.
Absolute rejection of border-radius: every corner is exactly 90 degrees.
One substrate per project: never mix a light Swiss section with a dark telemetry section.

Layout

Strict CSS Grid; elements anchor to tracks, they do not float. Trick for razor-thin dividers: display:grid; gap:1px on a contrasting-bg parent so child backgrounds show the 1px lines.
Visible compartmentalization with 1px/2px solid borders and full-width <hr> separators.
Bimodal density: tightly packed mono metadata clusters next to vast negative space framing macro type.
Semantic rigidity: use <data>, <samp>, <kbd>, <output>, <dl> for technical content.

Symbology & texture (use with intent, not as noise)

ASCII framing: [ DELIVERY SYSTEMS ], >>>, ///, crosshair + at grid intersections, barcode line strips, REV 2.6 / UNIT D-01 style stamps.
Optional analog degradation: CRT scanlines via repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,0.1) 2px 4px), a low-opacity SVG noise overlay on a fixed pointer-events-none root layer, or 1-bit dithering on a single large image. Keep it to one or two effects; do not stack every effect at once.

Note: this style intentionally uses heavy uppercase mono labels, which the base skill's eyebrow-restraint rule limits. Here the mono metadata IS the aesthetic, so the eyebrow cap does not apply to telemetry labels, but the em-dash ban still does.