# Industrial

> Factory/warehouse, exposed structure, metal, concrete, raw.

- Skill: `jdsadminllc/industrial` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add jdsadminllc/industrial`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jdsadminllc/industrial/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Data & Analytics
- Author: jdsadminllc (https://skillmd.com/u/jdsadminllc)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/jdsadminllc/industrial

---

# Industrial
## Mission
Embrace raw, unpolished aesthetics — exposed structural elements, utilitarian typography, and materials like metal, concrete, and steel that celebrate function over decoration.
## Brand
### 🎨 Colors
- `#1a1a1a` — Near-black (primary)
- `#4a4a4a` — Gunmetal gray (secondary)
- `#c44536` — Rust red (accent)
- `#f5f0eb` — Raw concrete (background)
- `#e0e0e0` — Light steel (text on dark)
- `#8b4513` — Oxidized copper (highlight)
### 🔤 Typography
- **Heading:** Bebas Neue (condensed, bold, industrial) or Oswald
- **Body:** IBM Plex Mono or Space Mono (monospace, technical feel)
- **Scale:** xs: 0.75rem, sm: 0.875rem, base: 1rem, lg: 1.125rem, xl: 1.25rem, 2xl: 1.5rem, 3xl: 2.5rem
### 📐 Spacing
- Tight, efficient spacing: 0.5rem–1.5rem gaps
- Section padding: 4rem vertical, 1.5rem horizontal
- Card gaps: 1rem
- Border radius: 0–2px (sharp, angular, no softness)
### 🧩 Components
- **Buttons:** Heavy borders (2–3px), industrial stencil feel, sharp corners, monospace text, hover fills with rust/oxide color
- **Cards:** Border-heavy with visible structural lines, dark backgrounds, angular cutouts (clip-path), rivet/bolt-like decorative corners
- **Nav:** Heavy top bar with visible structural dividers, all-caps monospace labels, industrial iconography
- **Hero:** Full-width construction imagery or concrete texture, massive condensed headline, exposed grid lines
- **Footer:** Heavy border-top, structural column layout, minimal decoration
### ♿ Accessibility
- Minimum 4.5:1 contrast — dark backgrounds with light text are the norm
- Focus states: thick (3px) high-contrast border, angular not rounded
- Minimum font size: 0.875rem (14px) — monospace reads smaller than proportional
- Reduced motion: no heavy parallax or structural animation
### ✍️ Writing Tone
Direct, utilitarian, no-nonsense. Short declarative sentences. Technical terminology welcomed. All-caps for labels and navigation. No marketing speak. Sentence case for body, uppercase for UI labels.
## Do / Don't
### ✅ Do
- Use visible structural elements — borders, dividers, grid lines — as core design elements
- Embrace monospace and condensed typography for an engineered feel
- Add texture: subtle concrete, metal grain, or paper texture backgrounds
- Use angular shapes, diagonal cuts, and sharp corners consistently
- Expose the "bones" of the layout — visible grid lines are a feature
### ❌ Don't
- Add drop shadows — industrial is flat and physically grounded
- Use rounded corners anywhere — sharp angles define the style
- Choose decorative or script fonts — typography should feel engineered
- Add gradients — stick to flat, solid colors
- Include playful illustrations — the tone is serious and functional
## Quality Gates
- [ ] No rounded corners — all border-radius values are 0–2px
- [ ] All text passes 4.5:1 contrast (monospace needs extra care at small sizes)
- [ ] Texture overlays don't exceed 200KB total
- [ ] No drop shadows or soft UI elements
- [ ] Monospace body text is legible at 14px minimum
- [ ] Angular clip-paths render correctly across browsers