Teenage Engineering Industrial

---
name: teenage-engineering-industrial
description: Apply the Teenage Engineering Industrial visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Teenage Engineering Industrial, mentions teenage engineering, op-1 style, hardware ui, or describes gray aluminum panel surfaces, safety-orange functional accent, circular knobs and square key grids — 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
---

# Teenage Engineering Industrial Design System

Web design as instrument faceplate, after Teenage Engineering's OP-1 and TX-6: flat light-gray aluminum panels, a strict modular grid of circular knobs and square keys, one loud safety-orange accent, engraved lowercase mono labels, and tiny functional glyphs. Every element earns its place like a control that does something.

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 Teenage Engineering Industrial.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (teenage engineering, op-1 style, hardware ui, instrument panel, knob interface, synth panel design), or describes its traits: gray aluminum panel surfaces; safety-orange functional accent; circular knobs and square key grids; engraved lowercase mono labels; tiny crosses and index marks on the grid; flat with shallow machined shadows.

## Design tokens

### Color palette

- Anodized light-gray panel background: `#e4e4e1` (--color-bg)
- Recessed module areas and control wells: `#d4d4d1` (--color-surface)
- Black module variant — screens, key blocks, inverted sections: `#262626` (--color-panel-dark)
- Primary text and engraved labels: `#141414` (--color-text)
- Secondary labels, units, and index numbers: `#5c5c58` (--color-text-muted)
- Safety orange — knob indicators, active states, the one loud control: `#ff4a00` (--color-accent)
- Pressed/active orange and orange-on-light text where contrast matters: `#c33800` (--color-accent-deep)
- Knob caps and raised key tops: `#f4f4f1` (--color-knob)
- LCD green-gray for display modules: `#9aa48c` (--color-screen)
- Hairline panel seams and grid rules: `#b9b9b5` (--color-border)

### Typography

- Display / headings: Inter (fallback: Helvetica Neue, Arial, sans-serif) (ideal: TE-adjacent grotesk (Helvetica/Univers), premium — use Inter as the free substitute)
- Body: Inter (fallback: Helvetica Neue, Arial, sans-serif) (ideal: Helvetica Neue, premium — use Inter as the free substitute)
- Mono / data: IBM Plex Mono (fallback: SF Mono, Menlo, monospace)
- Type scale: 1.2 ratio, base 15px — computed steps: 15px / 18px / 22px / 26px / 31px / 37px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 500, line-height 1.15, letter-spacing -0.01em, lowercase
- Body: line-height 1.55, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 32, 48, 72 — Machine-packed but never cluttered: controls sit on a strict repeating module (multiples of 8px), with clear wells of empty panel between functional clusters.
- Border radius: none 0px, sm 3px, knob 999px — Panels and keys are square or barely eased (3px); anything rotary is a perfect circle. No in-between radii.
- Border treatment: 1px solid #b9b9b5 — Hairline seams delineate modules like panel joints; controls get shadow, not border.

### Shadows

- machined: `0 1px 2px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6)` — Knobs and raised keys — shallow, hard, factory-lit
- well: `inset 0 2px 5px rgba(0, 0, 0, 0.35)` — Recessed screens, sliders tracks, and control wells
- key-pressed: `inset 0 1px 3px rgba(0, 0, 0, 0.4)` — Active/pressed key state — travel of about 1px

### Layout

- Max content width: 1080px
- Compose the page as faceplate modules separated by hairline seams
- Expose the grid: tiny + crosses at module intersections, index numbers along edges
- One orange element per view carries the primary action; everything else stays gray
- Specs and data belong in dense mono tables, lowercase, unit-labeled

### Effects

- Tiny + registration crosses at grid intersections (8-10px, border color)
- Knob indicator lines rotated with CSS transform to show value
- Dot-matrix or seven-segment styling on LCD-green screen modules
- Engraved label effect: text-shadow 0 1px 0 rgba(255,255,255,0.7) on gray panel

### Motion

- Easing: steps(12, end); durations 80ms / 160ms / 300ms
- Knobs rotate in detented steps, not smooth sweeps
- State changes snap like switches; hover adds no more than a shade shift
- LED-style indicators blink on/off rather than fading
- Screens may update with a one-frame LCD refresh flicker, used sparingly

## CSS variables (drop-in)

```css
:root {
  --color-bg: #e4e4e1;
  --color-surface: #d4d4d1;
  --color-panel-dark: #262626;
  --color-text: #141414;
  --color-text-muted: #5c5c58;
  --color-accent: #ff4a00;
  --color-accent-deep: #c33800;
  --color-knob: #f4f4f1;
  --color-screen: #9aa48c;
  --color-border: #b9b9b5;
  --radius-none: 0px;
  --radius-sm: 3px;
  --radius-knob: 999px;
  --shadow-machined: 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-well: inset 0 2px 5px rgba(0, 0, 0, 0.35);
  --shadow-key-pressed: inset 0 1px 3px rgba(0, 0, 0, 0.4);
  --border-default: 1px solid #b9b9b5;
  --font-display: Inter, "Helvetica Neue", Arial, sans-serif;
  --font-body: Inter, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;
  --text-base: 15px;
  --leading-heading: 1.15;
  --leading-body: 1.55;
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --ease: steps(12, end);
  --duration-fast: 80ms;
  --duration-base: 160ms;
  --duration-slow: 300ms;
}
```

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

## Component recipes

- **Nav:** A thin top panel strip: lowercase wordmark engraved at left, mono section labels (01 work, 02 products, 03 support) spaced on the module grid, and a single orange dot or switch marking the active section.
- **Hero:** A faceplate: large lowercase statement in medium-weight grotesk on bare panel, flanked by a functional-looking knob cluster or key grid; one orange control is the call to action, labeled underneath in mono.
- **Card:** A module outlined by hairline seams with a tiny index number top-left (mono, muted), a recessed screen or diagram area, and controls along the bottom edge; black panel-dark variant for emphasis.
- **Button (primary):** A square or circular orange key: #ff4a00 fill, machined shadow, lowercase mono label engraved beneath or inside in white; pressing swaps to key-pressed inset and darkens to accent-deep.
- **Button (secondary):** The same key geometry in knob-white #f4f4f1 with black label and hairline rim — reads as an unlit key next to the orange one.
- **Form fields:** A recessed well: surface color with the well inset shadow, mono input text, lowercase label above in muted gray, and a 2px orange underline when focused — like a parameter being edited.

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

A knob cluster: perfect circles with a single orange indicator line at 45 degrees, sitting on a visible layout grid dotted with tiny + registration marks and labeled underneath in 10-11px lowercase mono. Spend boldness here; keep everything else quiet.

## Do

- Ration orange ruthlessly — one primary control per view keeps the panel legible
- Label everything in small lowercase mono like silkscreened engraving, with units
- Keep knobs perfect circles and keys perfect squares on an exposed grid
- Use the black panel-dark module for contrast sections instead of new colors

## Don't

- Don't add gradients, gloss, or deep shadows — this is matte machined aluminum, not gel
- Don't set body copy in mono; mono is for labels, values, and specs
- Don't let decorative controls outnumber real ones — fake knobs everywhere become theme-park
- Don't introduce a second accent color; status can be shown with black, gray, and blink

## Accessibility notes

- Orange #ff4a00 on the gray panel is about 2.6:1 — treat it as a graphical indicator color only; orange text on light panel must use accent-deep #c33800 and stay large.
- Engraved 10-11px mono labels are below comfortable reading size; pair them with accessible names and keep interactive hit areas at 44px even when the visual control is smaller.
- Stepped (detented) animations can look like jank to some users; honor prefers-reduced-motion by removing the stepping.

## Reference sites

- Teenage Engineering: https://teenage.engineering/
- Teenage Engineering products (OP-1, TX-6, OB-4): https://teenage.engineering/products
- Teenage Engineering — background: https://en.wikipedia.org/wiki/Teenage_Engineering

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

Install this skill

unzip teenage-engineering-industrial.zip -d ~/.claude/skills/

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

Settings → Capabilities → Skills → Upload skill → teenage-engineering-industrial.zip