> From [PageWeave Design](https://pageweave-design.pageweave.site) — a working library for agentic web development. Full index: [llms.txt](https://pageweave-design.pageweave.site/llms.txt)

# Industrial

Interface as machine — condensed caps, mono data, strict grids

- Category: Styles
- Palette: #16181a #e8e6e1 #ffb000 #26292d
- Type pairing: Big Shoulders Display · JetBrains Mono
- Tags: mono grid utilitarian technical dense

## Philosophy

Industrial design treats the interface like a well-built machine: monospace and condensed type, visible grid systems, utilitarian controls, data displayed as data. It borrows from cargo manifests, control panels, technical drawings, and Swiss timetables. Where luxury whispers and playful bounces, industrial *reports*.

Perfect for: developer tools, logistics, hardware, analytics, anything where precision is the brand.

## Typography

- **Display**: Big Shoulders Display, Saira Condensed, or Archivo at 700–900 in caps — tall, compressed, stencil-adjacent.
- **Body**: Barlow or Public Sans; readable but unornamented.
- **Data & labels**: JetBrains Mono or Spline Sans Mono everywhere numbers matter. Tabular figures (`font-variant-numeric: tabular-nums`) are mandatory for any aligned column.
- Unit labels, revision numbers (`REV 2.4.1`), and coordinates in the margins are idiomatic garnish.

## Color

Steel neutrals: base `oklch(0.2 0.01 250)`, panels one step lighter, hairlines at 20% ink. One high-visibility accent drawn from safety equipment — amber `oklch(0.78 0.16 85)` or signal orange — reserved for active states and alerts. Status colors (success/warning/error) are functional, not decorative, and appear in badges and indicators only.

## Surfaces & backgrounds

Blueprint grids (1px lines every 24px at 5% ink), diagonal hazard stripes on warnings, brushed-metal gradients avoided — flat panels with 1px borders instead. Depth via inset borders and layered panels, never shadows with blur > 8px. Optional: subtle scanline or noise overlay to suggest instrumentation.

## Layout grammar

Strict modular grid, often with a persistent left rail of section codes (`01 / OVERVIEW`). Dense tables are a feature — style them beautifully rather than avoiding them. Full-width rows with right-aligned metadata. Corner ticks (`+` marks) at layout intersections are a signature detail.

## Motion

Functional transitions only: 100–150ms ease-out, instant toggles, progress bars that fill linearly. Live-updating numbers should tick, not fade. Loading states use deterministic animations (indeterminate bars), never playful spinners.

## Reference theme

```css
[data-theme="plant"] {
  color-scheme: dark;
  --color-base-100: oklch(0.19 0.01 250);
  --color-base-200: oklch(0.23 0.012 250);
  --color-base-content: oklch(0.9 0.008 250);
  --color-primary: oklch(0.78 0.16 85);
  --color-primary-content: oklch(0.18 0.02 85);
  --color-secondary: oklch(0.65 0.03 250);
  --color-neutral: oklch(0.27 0.012 250);
  --color-neutral-content: oklch(0.88 0.008 250);
  --radius-box: 0rem;
  --radius-field: 0rem;
  --radius-selector: 0rem;
  --border: 1px;
  --depth: 0;
}
```

Headings in `"Big Shoulders Display"`, body in `"Barlow"`, data in `"JetBrains Mono"`.

## Pitfalls

- **Don't** round corners or add soft shadows — precision is the aesthetic.
- **Don't** center everything; industrial layouts are left-anchored and dense.
- **Don't** decorate without information value: every label should report something true.