Menu
Apply only to a named brutalist direction. Use for Swiss-grid, terminal, industrial, raw, or mechanical visual language after choosing the main build/redesign workflow.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Resolve short approval against the latest checkpoint. Use for "lgtm", "looks good", "approved", or "go ahead"; not risky or review feedback.
Re-check a prior assistant claim. Use when user says "nack", "not convinced", or "check again"; not for review feedback.
UI/UX routing front door. Use as the front door for broad or ambiguous UI/UX work that needs the right build, redesign, audit, design-system, accessibility, or browser specialist. Do not use when the user already names a narrower UI skill.
Proposes UI Vault resource upgrades for a selected webpage. Use when the user asks for libraries, assets, effects, or inspiration for an existing page. Do not use for implementation or greenfield design.
Upload, list, or delete files with s3upload and return expiring Azure links. Use for configured temporary Azure storage; not for S3 or cloud setup.
Ship local Git changes by inspecting, polishing, validating, split-committing, and pushing. Use for commit, push, ship, delivery audit, or delivery blockers; not deploys or releases.
| name | industrial-brutalist-ui |
| description | Apply only to a named brutalist direction. Use for Swiss-grid, terminal, industrial, raw, or mechanical visual language after choosing the main build/redesign workflow. |
Name: Industrial Brutalism & Tactical Telemetry Interface Engineering Description: Advanced proficiency in architecting web interfaces that synthesize mid-century Swiss Typographic design, industrial manufacturing manuals, and retro-futuristic aerospace/military terminal interfaces. This discipline requires absolute mastery over rigid modular grids, extreme typographic scale contrast, purely utilitarian color palettes, and the programmatic simulation of analog degradation (halftones, CRT scanlines, bitmap dithering). The objective is to construct digital environments that project raw functionality, mechanical precision, and high data density, deliberately discarding conventional consumer UI patterns.
The design system operates by merging two distinct but highly compatible visual paradigms. Pick ONE per project and commit to it. Do not alternate or mix both modes within the same interface.
Derived from 1960s corporate identity systems and heavy machinery blueprints.
Derived from classified military databases, legacy mainframes, and aerospace Heads-Up Displays (HUDs).
Typography is the primary structural and decorative infrastructure. Imagery is secondary. The system demands extreme variance in scale, weight, and spacing.
clamp(4rem, 10vw, 15rem)).-0.03em to -0.06em), forcing glyphs to form solid architectural blocks.0.85 to 0.95).10px to 14px / 0.7rem to 0.875rem).0.05em to 0.1em) to simulate mechanical typewriter spacing or terminal matrices.1.2 to 1.4).The color architecture is uncompromising. Gradients, soft drop shadows, and modern translucency are strictly prohibited. Colors simulate physical media or primitive emissive displays.
CRITICAL: Choose ONE substrate palette per project and use it consistently. Never mix light and dark substrates within the same interface.
#F4F4F0 or #EAE8E3 (Matte, unbleached documentation paper).#050505 to #111111 (Carbon Ink).#E61919 or #FF2A2A (Aviation/Hazard Red). This is the ONLY accent color. Used for strike-throughs, thick structural dividing lines, or vital data highlights.#0A0A0A or #121212 (Deactivated CRT. Avoid pure #000000).#EAEAEA (White phosphor). This is the primary text color.#E61919 or #FF2A2A (Aviation/Hazard Red). Same red, same rules.#4AF626): Optional. Use ONLY for a single specific UI element (e.g., one status indicator or one data readout) — never as a general text color. If it doesn't serve a clear purpose, omit it entirely.The layout must appear mathematically engineered. It rejects conventional web padding in favor of visible compartmentalization.
1px or 2px solid) to delineate distinct zones of information. Horizontal rules (<hr>) frequently span the entire container width to segregate operational units.border-radius. All corners must be exactly 90 degrees to enforce mechanical rigidity.Standard web UI conventions are replaced with utilitarian, industrial graphic elements.
[ DELIVERY SYSTEMS ], < RE-IND >>>>, ///, \\\\®), copyright (©), and trademark (™) symbols functioning as structural geometric elements rather than legal text.+) at grid intersections, repeating vertical lines (barcodes), thick horizontal warning stripes, and randomized string data (e.g., REV 2.6, UNIT / D-01) to simulate active mechanical processes.To prevent the design from appearing purely digital, simulated analog degradation is engineered into the frontend via CSS and SVG filters.
mix-blend-mode: multiply overlays combined with SVG radial dot patterns.repeating-linear-gradient to the background to simulate horizontal electron beam sweeps (e.g., repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px)).display: grid; gap: 1px; with contrasting parent/child background colors to generate mathematically perfect, razor-thin dividing lines without complex border declarations.<data>, <samp>, <kbd>, <output>, <dl>) to accurately reflect the technical nature of the telemetry.clamp() functions exclusively for macro-typography to ensure massive text scales aggressively while maintaining structural integrity across viewports.Follow the shared skill contract for repo study, dirty-worktree hygiene, verification evidence, safe handoffs, and safety defaults.