Cassette Futurism

---
name: cassette-futurism
description: Apply the Cassette Futurism visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Cassette Futurism, mentions used future, analog sci-fi, nostromo UI, or describes beige plastic panels with thick bezels, CRT green and amber readouts, physical toggle switches and chunky buttons — 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
---

# Cassette Futurism Design System

The 'used future' of Alien and Severance: beige plastic chassis, chunky bezels and physical toggle switches, dark CRT readouts in phosphor green and amber, dot-matrix labels, and warning stripes — technology that hums, clunks, and shows its wear.

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 Cassette Futurism.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (used future, analog sci-fi, nostromo UI, 70s NASA-punk, lo-fi sci-fi), or describes its traits: beige plastic panels with thick bezels; CRT green and amber readouts; physical toggle switches and chunky buttons; dot-matrix and monospace labels; warning stripes and stenciled markings; inset physical shadows.

## Design tokens

### Color palette

- Beige plastic chassis background: `#d9cba3` (--color-bg)
- Raised panel plastic, slightly lighter: `#e6dcbc` (--color-surface)
- Stenciled near-black labeling: `#2a2620` (--color-text)
- Secondary label text: `#4d453a` (--color-text-muted)
- Warning red-orange for primary actions and alerts: `#8f2b08` (--color-accent)
- CRT screen well, near-black green-cast: `#141712` (--color-screen)
- Phosphor green readout text on screens: `#33ff00` (--color-crt-green)
- Amber alternate readout on screens: `#ffb000` (--color-crt-amber)
- Industrial gray for bezels and switches: `#8c8578` (--color-gray)

### Typography

- Display / headings: VT323 (fallback: Courier New, monospace)
- Body: Space Mono (fallback: Courier New, monospace)
- Mono / data: IBM Plex Mono (fallback: Courier New, monospace)
- Type scale: 1.25 ratio, base 16px — computed steps: 16px / 20px / 25px / 31px / 39px / 49px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 400, line-height 1.3, letter-spacing 0.08em, uppercase
- Body: line-height 1.5, letter-spacing 0.01em

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 32, 48, 64 — Instrument-panel dense — controls grouped in labeled clusters with engraved divider lines, like a flight deck; readouts get generous internal padding.
- Border radius: sm 4px, md 8px — Chunky 4px molded-plastic corners; screens and wells use 8px. Nothing pill-shaped, nothing sharp.
- Border treatment: 2px solid #8c8578 — Bezel borders: outer 2px gray edge plus inner highlight/shadow pair to read as molded plastic depth.

### Shadows

- bezel: `inset 0 2px 0 rgba(255,255,255,0.45), inset 0 -2px 0 rgba(42,38,32,0.35), 0 2px 4px rgba(42,38,32,0.3)` — Raised plastic panels and buttons
- well: `inset 0 3px 8px rgba(0,0,0,0.6), inset 0 1px 2px rgba(0,0,0,0.5)` — Recessed CRT screens and input wells
- phosphor: `0 0 8px rgba(51,255,0,0.6)` — Text glow on green CRT readouts
- phosphor-amber: `0 0 8px rgba(255,176,0,0.6)` — Text glow on amber CRT readouts

### Layout

- Max content width: 1200px
- Panel clusters with stenciled section labels (SYS-01, NAV, COMM)
- Screens inset into plastic; content lives on the readouts, controls on the chassis
- Warning-stripe (diagonal black/yellow) accents on critical actions
- Visible corner screws and rivet dots on major panels

### Effects

- Scanline overlay on screen areas only (2px repeating gradient at 8% opacity)
- Phosphor text glow on readouts
- Diagonal warning-stripe pattern on alert borders
- Subtle plastic-grain noise on beige surfaces
- Slight vignette on CRT wells for tube curvature

### Motion

- Easing: steps(3, end); durations 90ms / 180ms / 350ms
- Readout text types on character-by-character with a block cursor
- Toggles snap between states with a stepped motion — no smooth slides
- Status lights blink slowly (1Hz or less) when active
- Screen content refreshes with a single-frame wipe, disabled under prefers-reduced-motion

## CSS variables (drop-in)

```css
:root {
  --color-bg: #d9cba3;
  --color-surface: #e6dcbc;
  --color-text: #2a2620;
  --color-text-muted: #4d453a;
  --color-accent: #8f2b08;
  --color-screen: #141712;
  --color-crt-green: #33ff00;
  --color-crt-amber: #ffb000;
  --color-gray: #8c8578;
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-bezel: inset 0 2px 0 rgba(255,255,255,0.45), inset 0 -2px 0 rgba(42,38,32,0.35), 0 2px 4px rgba(42,38,32,0.3);
  --shadow-well: inset 0 3px 8px rgba(0,0,0,0.6), inset 0 1px 2px rgba(0,0,0,0.5);
  --shadow-phosphor: 0 0 8px rgba(51,255,0,0.6);
  --shadow-phosphor-amber: 0 0 8px rgba(255,176,0,0.6);
  --border-default: 2px solid #8c8578;
  --font-display: VT323, "Courier New", monospace;
  --font-body: "Space Mono", "Courier New", monospace;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;
  --text-base: 16px;
  --leading-heading: 1.3;
  --leading-body: 1.5;
  --tracking-heading: 0.08em;
  --tracking-body: 0.01em;
  --ease: steps(3, end);
  --duration-fast: 90ms;
  --duration-base: 180ms;
  --duration-slow: 350ms;
}
```

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

## Component recipes

- **Nav:** Beige chassis bar with bezel shadow, stenciled uppercase wordmark, nav links as labeled hardware buttons with pressed states
- **Hero:** Large inset CRT screen: green VT323 headline typing on, amber status line, chassis frame with screws; primary CTA as a guarded warning-red button below
- **Card:** Raised plastic panel: surface bg, bezel shadow, stenciled label strip at top, optional small readout window inside
- **Button (primary):** Warning red-orange fill, cream text, bezel shadow, 4px radius; depresses with inverted bevel on press
- **Button (secondary):** Industrial gray plastic button, dark label, same bezel anatomy
- **Form fields:** Recessed well with dark screen fill, green or amber mono text and block caret; focus brightens phosphor glow

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 dark CRT readout inset into a beige plastic panel: amber or phosphor-green monospace text glowing behind faint scanlines, framed by a thick bezel with visible corner screws and a stenciled equipment label. Spend boldness here; keep everything else quiet.

## Do

- Split the world in two: dark glowing readouts for content, beige plastic for controls
- Label everything in stenciled uppercase mono — labels are the era's decoration
- Give buttons physical anatomy: bevel up, bevel-invert on press
- Let it look used: grain, slight bezel wear, honest utilitarian layout

## Don't

- No sleek glass, thin type, or gradients — this future has no touchscreen polish
- Don't put phosphor glow text on the beige chassis; glow lives only on screens
- Avoid neon magenta/cyan — that's synthwave, a different decade of future
- Don't over-animate; machines here are slow and deliberate

## Accessibility notes

- CRT flicker, cursor blink, and scanline effects carry photosensitivity risk — keep all blinking at 2Hz or below, avoid full-screen flicker entirely, and disable glow pulses and typing effects under prefers-reduced-motion
- Phosphor green (#33ff00) and amber (#ffb000) pass contrast on the dark screen well but fail on beige — never use them for text on the chassis
- Scanline overlays on readouts must stay below 10% opacity to avoid degrading text legibility

## Reference sites

- Aesthetics Wiki — Cassette Futurism: https://aesthetics.fandom.com/wiki/Cassette_Futurism
- Typeset in the Future: Alien: https://typesetinthefuture.com/2014/12/01/alien/
- Severance: https://en.wikipedia.org/wiki/Severance_(TV_series)

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

Install this skill

unzip cassette-futurism.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/cassette-futurism.json

Settings → Capabilities → Skills → Upload skill → cassette-futurism.zip