Industrial / Utilitarian

---
name: industrial-utilitarian
description: Apply the Industrial / Utilitarian visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Industrial / Utilitarian, mentions industrial, utility design, factory aesthetic, or describes charcoal plus safety yellow, stencil and grotesque type, hazard stripe details — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Industrial / Utilitarian Design System

Function-first hardware aesthetic: charcoal and concrete gray with safety yellow, bold grotesque and stencil type, hazard stripes, spec-sheet labels, and hard shadows. Every element looks load-rated and torque-tested.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Industrial / Utilitarian.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (industrial, utility design, factory aesthetic, hardware brutalism, safety-yellow industrial), or describes its traits: charcoal plus safety yellow; stencil and grotesque type; hazard stripe details; spec-sheet labeling; 0–2px radius with thick borders; hard flat shadows.

## Design tokens

### Color palette

- Charcoal page background, like powder-coated steel: `#1c1c1c` (--color-bg)
- Panel background, machined a shade lighter: `#2a2a2a` (--color-surface)
- Off-white primary text: `#f0efeb` (--color-text)
- Secondary text, worn aluminum: `#b0aea8` (--color-text-muted)
- Safety yellow — CTAs, hazard stripes, active states: `#f2c200` (--color-accent)
- Concrete gray — borders, dividers, inactive controls: `#4a4a4a` (--color-concrete)
- Emergency-stop red for destructive actions: `#e03e3e` (--color-danger)
- Default heavy border tone: `#4a4a4a` (--color-border)

### Typography

- Display / headings: Big Shoulders Display (fallback: Arial Narrow, sans-serif) (ideal: Druk, premium — use Big Shoulders Display as the free substitute)
- Body: Archivo (fallback: Helvetica, Arial, sans-serif)
- Mono / data: IBM Plex Mono (fallback: Courier New, monospace)
- Type scale: 1.333 ratio, base 16px — computed steps: 16px / 21px / 28px / 38px / 51px / 67px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 800, line-height 1.1, letter-spacing 0.02em, uppercase
- Body: line-height 1.5, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 32, 48, 64 — Modular and machine-packed: consistent gutters like a parts tray, tighter inside panels, every gap looking measured with calipers.
- Border radius: none 0px, sm 2px — Corners are sheet-metal square; 2px maximum, as if deburred rather than rounded.
- Border treatment: 2px solid #4a4a4a — Borders are structural — thick and visible. Active or hazardous elements upgrade to 2px safety yellow.

### Shadows

- hard: `4px 4px 0 rgba(0, 0, 0, 0.6)` — Default panel shadow — stamped, not floated
- inset-panel: `inset 0 2px 4px rgba(0, 0, 0, 0.5)` — Recessed wells, inputs, and gauge housings

### Layout

- Max content width: 1360px
- Strict modular grid with visible seams, like panelized machinery
- Every module labeled: stencil part numbers, mono spec tags (LOAD, QTY, REV)
- Hazard-stripe strips separate major sections
- Data presented as spec sheets: bordered tables, mono values, units always shown

### Effects

- 45-degree hazard stripe patterns (yellow/black) as dividers and callouts
- Stencil-cut heading treatment on featured labels
- Subtle brushed-metal or concrete texture on large surfaces
- Rivet-dot details at panel corners

### Motion

- Easing: cubic-bezier(0.7, 0, 0.3, 1); durations 100ms / 180ms / 300ms
- Mechanical, deliberate transitions — slide and lock, no bounce
- Toggles snap like industrial switches with a 1-frame settle
- Hover raises the yellow: borders and labels flip to accent instantly

## CSS variables (drop-in)

```css
:root {
  --color-bg: #1c1c1c;
  --color-surface: #2a2a2a;
  --color-text: #f0efeb;
  --color-text-muted: #b0aea8;
  --color-accent: #f2c200;
  --color-concrete: #4a4a4a;
  --color-danger: #e03e3e;
  --color-border: #4a4a4a;
  --radius-none: 0px;
  --radius-sm: 2px;
  --shadow-hard: 4px 4px 0 rgba(0, 0, 0, 0.6);
  --shadow-inset-panel: inset 0 2px 4px rgba(0, 0, 0, 0.5);
  --border-default: 2px solid #4a4a4a;
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body: Archivo, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;
  --text-base: 16px;
  --leading-heading: 1.1;
  --leading-body: 1.5;
  --tracking-heading: 0.02em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.7, 0, 0.3, 1);
  --duration-fast: 100ms;
  --duration-base: 180ms;
  --duration-slow: 300ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800&family=Archivo:wght@400;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** 56px charcoal bar with 2px concrete bottom border; stenciled wordmark, uppercase Archivo links, active link marked by a yellow hazard-stripe underline
- **Hero:** Huge uppercase Big Shoulders headline in off-white with one word in safety yellow, mono spec-line beneath (e.g. EST. LOAD 12,000 LBS), yellow CTA, product photographed on concrete
- **Card:** #2a2a2a panel, 2px concrete border, hard shadow, stencil label top-left with mono part number, spec rows in a bordered table
- **Button (primary):** Safety yellow fill, black uppercase text, 2px black border, hard shadow; darkens to amber on press
- **Button (secondary):** Transparent, 2px concrete border, off-white uppercase text; border flips to yellow on hover
- **Form fields:** Recessed charcoal well (inset shadow), 2px concrete border, mono input text; focus swaps border to safety yellow

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

Diagonal hazard stripes (safety yellow on black, 45 degrees) used as functional markers — section dividers, warning callouts, active-state underlines — alongside stenciled part-number labels on every component. Spend boldness here; keep everything else quiet.

## Do

- Label everything like a parts catalog — part numbers, units, revision tags
- Use hazard stripes functionally, marking real warnings and active zones
- Keep type uppercase, heavy, and load-bearing
- Make interactive states feel mechanical: snap, lock, latch

## Don't

- No soft gradients, glassy blurs, or gentle pastel anything
- No rounded corners beyond 2px
- Don't use safety yellow decoratively everywhere — it must mean 'active or caution' or it means nothing
- Avoid thin, elegant type; every face should look die-cut

## Accessibility notes

- Safety yellow on charcoal passes strongly (~10:1) for large UI, and black-on-yellow buttons are excellent (~12:1); never put white text on yellow
- All-caps stencil and grotesque headings are fine at display size but body copy stays mixed-case Archivo
- Hazard stripes are decorative patterns — pair any warning stripe with an explicit text label for screen readers

## Reference sites

- DeWalt: https://www.dewalt.com
- Hilti: https://www.hilti.com
- Caterpillar: https://www.cat.com

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip industrial-utilitarian.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/industrial-utilitarian.json

Settings → Capabilities → Skills → Upload skill → industrial-utilitarian.zip