Retro Terminal / CRT

---
name: retro-terminal
description: Apply the Retro Terminal / CRT visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Retro Terminal / CRT, mentions CRT, green screen, phosphor terminal, or describes green phosphor monospace text, scanline overlay, blinking block cursor — 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
---

# Retro Terminal / CRT Design System

A phosphor CRT terminal on the web: green (or amber) monospace text glowing on near-black, scanlines, blinking block cursors, ASCII-art dividers, and interfaces that pretend every interaction is a command.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Retro Terminal / CRT.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (CRT, green screen, phosphor terminal, hacker aesthetic, command line UI), or describes its traits: green phosphor monospace text; scanline overlay; blinking block cursor; ASCII borders; near-black background.

## Design tokens

### Color palette

- CRT glass, near-black with green cast: `#0a0e0a` (--color-bg)
- Panel background, slightly lifted: `#101710` (--color-surface)
- Primary phosphor green: `#33ff66` (--color-text)
- Dimmed green for secondary output: `#1e9944` (--color-text-muted)
- Amber for warnings, highlights, and the alt phosphor mode: `#ffb000` (--color-accent)
- Green rules and ASCII box-drawing borders: `#33ff66` (--color-border)

### Typography

- Display / headings: VT323 (fallback: Courier New, monospace)
- Body: IBM Plex 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.05em, uppercase
- Body: line-height 1.7, letter-spacing 0.02em

### Spacing, radius, border

- Spacing scale (px): 8, 16, 24, 32, 48, 64 — Character-grid rhythm: spacing in multiples of the monospace line height, as if laid out in a 80x24 terminal.
- Border radius: none 0px — Terminals have no rounded corners; optionally round the outermost viewport frame like CRT glass.
- Border treatment: 1px solid #33ff66 — Prefer ASCII box-drawing characters (┌─┐│└┘) or double rules (╔═╗) rendered as text for panel frames.

### Shadows

- phosphor-glow: `0 0 8px rgba(51, 255, 102, 0.6)` — text-shadow on all green text
- screen-glow: `inset 0 0 120px rgba(51, 255, 102, 0.08)` — Vignette glow on the viewport frame

### Layout

- Max content width: 960px
- Single column, like terminal output scrolling upward
- Sections introduced by prompt lines ($ command --flag)
- Tables and charts drawn with ASCII/box-drawing characters

### Effects

- Scanline overlay (repeating-linear-gradient, 3px period, 4% opacity)
- Blinking block cursor (step animation, ~1s period)
- Typewriter reveal for hero text
- Slight screen curvature or vignette on the outer frame

### Motion

- Easing: steps(20, end); durations 0ms / 300ms / 1200ms
- Text types on character by character (steps easing)
- State changes are instant — terminals don't tween
- Cursor blink is the heartbeat; keep exactly one visible

## CSS variables (drop-in)

```css
:root {
  --color-bg: #0a0e0a;
  --color-surface: #101710;
  --color-text: #33ff66;
  --color-text-muted: #1e9944;
  --color-accent: #ffb000;
  --color-border: #33ff66;
  --radius-none: 0px;
  --shadow-phosphor-glow: 0 0 8px rgba(51, 255, 102, 0.6);
  --shadow-screen-glow: inset 0 0 120px rgba(51, 255, 102, 0.08);
  --border-default: 1px solid #33ff66;
  --font-display: VT323, "Courier New", monospace;
  --font-body: "IBM Plex Mono", "Courier New", monospace;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;
  --text-base: 16px;
  --leading-heading: 1.3;
  --leading-body: 1.7;
  --tracking-heading: 0.05em;
  --tracking-body: 0.02em;
  --ease: steps(20, end);
  --duration-fast: 0ms;
  --duration-base: 300ms;
  --duration-slow: 1200ms;
}
```

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

## Component recipes

- **Nav:** A prompt-style breadcrumb line (user@site:~/section$) instead of a bar; links as bracketed [commands]
- **Hero:** Typewriter-revealed ASCII-art logo or uppercase VT323 title, followed by a $ prompt with blinking cursor
- **Card:** ASCII box-drawing frame around monospace content; title embedded in the top rule like ┌─[ TITLE ]─┐
- **Button (primary):** Bracketed label [ EXECUTE ] in green; inverts (green bg, black text) on hover
- **Button (secondary):** Dim green bracketed label, brightens on hover
- **Form fields:** A prompt line: label$ followed by an underscore-cursor input region, no visible box; focus shows the blinking cursor

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

Glowing green monospace type (text-shadow: 0 0 8px) with a blinking █ cursor and a faint scanline overlay across the entire viewport. Spend boldness here; keep everything else quiet.

## Do

- Set literally everything in monospace — one proportional font breaks the illusion
- Give all bright text the phosphor glow text-shadow
- Frame content with ASCII box-drawing characters rather than CSS borders where possible
- Use the amber accent as the only non-green color, for warnings and highlights

## Don't

- No images, gradients (except the vignette), or rounded UI chrome
- Never mix in proportional fonts or modern iconography — use ASCII glyphs
- Don't overdo flicker; a barely-perceptible drift sells CRT better than strobing
- Don't use pure #000 background — CRT black is slightly green and glowing

## Accessibility notes

- Primary green #33ff66 on #0a0e0a passes AAA (≈13:1), but dim green #1e9944 is ≈4.6:1 — AA for normal text, avoid going dimmer
- Typewriter effects must render full text immediately for screen readers and prefers-reduced-motion users
- Scanline flicker must stay below photosensitivity thresholds; make the overlay static if in doubt

## Reference sites

- cool-retro-term: https://github.com/Swordfish90/cool-retro-term
- eDEX-UI: https://github.com/GitSquared/edex-ui
- Cathode-inspired demos: https://codepen.io/search/pens?q=crt+terminal

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

Install this skill

unzip retro-terminal.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/retro-terminal.json

Settings → Capabilities → Skills → Upload skill → retro-terminal.zip