Terminal-Chic Dev Tool

---
name: terminal-chic-devtool
description: Apply the Terminal-Chic Dev Tool visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Terminal-Chic Dev Tool, mentions terminal aesthetic, command-line UI, monospace-forward, or describes monospace headlines and body, phosphor green #00ff41 accent, 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
---

# Terminal-Chic Dev Tool Design System

Monospace-forward product styling that dresses a marketing site or dashboard as a beautiful terminal: near-black canvas, phosphor-green accent, mono type for headlines and body alike, kbd-styled shortcuts, blinking cursors, and a ⌘K command palette as the flagship interaction. Keyboard-first in look and in fact.

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 Terminal-Chic Dev Tool.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (terminal aesthetic, command-line UI, monospace-forward, CLI chic, hacker minimal), or describes its traits: monospace headlines and body; phosphor green #00ff41 accent; blinking block cursor; kbd key tags everywhere; ASCII/box-drawing ornament; ⌘K command palette.

## Design tokens

### Color palette

- Terminal-black canvas: `#0c0c0d` (--color-bg)
- Panels, command palette, code wells: `#141416` (--color-surface)
- Primary phosphor-white text: `#e4e4e7` (--color-text)
- Comments, timestamps, secondary output: `#8b8b93` (--color-text-muted)
- Phosphor green — prompts, cursor, success, links: `#00ff41` (--color-accent)
- Calmer green for fills and borders where full phosphor is too loud: `#16a34a` (--color-accent-dim)
- Panel edges and rules: `#27272a` (--color-border)

### Typography

- Display / headings: JetBrains Mono (fallback: SFMono-Regular, Menlo, monospace) (ideal: Berkeley Mono, premium — use JetBrains Mono as the free substitute)
- Body: IBM Plex Mono (fallback: SFMono-Regular, Menlo, monospace) (ideal: Berkeley Mono, premium — use IBM Plex Mono as the free substitute)
- Mono / data: JetBrains Mono (fallback: SFMono-Regular, 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 700, line-height 1.25, letter-spacing 0
- Body: line-height 1.5, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 32, 48, 64 — Dense like a tmux session: 8px unit, compact 12–16px panel padding, tight line grids; whitespace is spent between sections, not inside components.
- Border radius: sm 4px, md 6px — Small utilitarian radii only; anything rounder breaks the terminal fiction.
- Border treatment: 1px solid #27272a — Panels are outlined like terminal splits; active panes may upgrade to a 1px accent-dim border.

### Shadows

- none: `none` — Default — terminals are flat
- phosphor-glow: `0 0 20px rgba(0,255,65,0.15)` — Sparingly, behind the active cursor or featured prompt
- palette: `0 16px 48px rgba(0,0,0,0.6)` — The ⌘K command palette floating over dimmed content

### Layout

- Max content width: 1100px
- Left-aligned, grid-of-characters rhythm — center alignment is rare
- Sections framed as terminal panes with 1px borders and title bars
- ASCII/box-drawing dividers (─ ┌ ┐) as section ornament
- The ⌘K palette is the hero demo, front and center

### Effects

- Blinking block cursor (1s step animation) on headlines and prompts
- Typewriter reveal for demo command sequences
- kbd tags styled as raised keycaps with 1px borders
- $-prefixed copyable install commands
- Optional faint scanline texture at 2–3% opacity

### Motion

- Easing: steps(1, end); durations 0ms / 120ms / 240ms
- State changes snap — no easing curves on hover, instant color swaps
- Typewriter text appears character-by-character at 20–40ms/char
- The command palette fades and scales in fast (120ms), like Raycast
- Cursor blink and typewriter effects stop under prefers-reduced-motion

## CSS variables (drop-in)

```css
:root {
  --color-bg: #0c0c0d;
  --color-surface: #141416;
  --color-text: #e4e4e7;
  --color-text-muted: #8b8b93;
  --color-accent: #00ff41;
  --color-accent-dim: #16a34a;
  --color-border: #27272a;
  --radius-sm: 4px;
  --radius-md: 6px;
  --shadow-phosphor-glow: 0 0 20px rgba(0,255,65,0.15);
  --shadow-palette: 0 16px 48px rgba(0,0,0,0.6);
  --border-default: 1px solid #27272a;
  --font-display: "JetBrains Mono", SFMono-Regular, Menlo, monospace;
  --font-body: "IBM Plex Mono", SFMono-Regular, Menlo, monospace;
  --font-mono: "JetBrains Mono", SFMono-Regular, Menlo, monospace;
  --text-base: 15px;
  --leading-heading: 1.25;
  --leading-body: 1.5;
  --tracking-heading: 0;
  --tracking-body: 0;
  --ease: steps(1, end);
  --duration-fast: 0ms;
  --duration-base: 120ms;
  --duration-slow: 240ms;
}
```

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

## Component recipes

- **Nav:** Slim mono bar: logo as a $-prompt wordmark, links in lowercase, a kbd '⌘K' search hint, and a bracketed [sign up] CTA
- **Hero:** Mono headline with blinking cursor, one-line muted subhead, then a copyable '$ npm install …' prompt block with a green copy confirmation
- **Card:** #141416 pane with 1px border and a title bar row in text-muted; content in 14–15px mono; active state adds the accent-dim border
- **Button (primary):** #00ff41 fill with #0c0c0d text, 4px radius, mono 500 label; hover inverts to transparent with a green border
- **Button (secondary):** Transparent, 1px #27272a border, light mono label; border shifts to accent-dim on hover
- **Form fields:** Prompt-styled: '>' or '$' prefix, #141416 fill, 1px border, mono input text; focus swaps the prefix to green and shows a block 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

A headline set in mono with a blinking block cursor at its end — plus $-prefixed command snippets styled as live prompts — making the whole page read as a session in a very well-designed terminal. Spend boldness here; keep everything else quiet.

## Do

- Commit to mono everywhere — mixing a humanist sans into headlines dilutes the fiction
- Make every command snippet genuinely copyable, with visible feedback
- Use kbd keycap styling for real, working shortcuts
- Keep full-phosphor #00ff41 for small, high-signal moments and lean on accent-dim elsewhere

## Don't

- No soft shadows, gradients, or large radii — the terminal is flat and sharp
- Don't fake interactivity: a prompt that can't be copied or a ⌘K hint that doesn't work breaks trust
- Avoid long body paragraphs in mono below 14px; mono fatigues at length
- Don't stack green-on-green; phosphor text belongs on the dark canvas only

## Accessibility notes

- #00ff41 on #0c0c0d passes AA with headroom (~14:1), but #0c0c0d text on a full #00ff41 button is the safe fill pairing — never white-on-green
- Mono body text needs 14px+ and 1.5 leading to stay readable; character-grid density can overwhelm screen-magnifier users, so keep landmarks and headings semantic
- Blinking cursors and typewriter effects must halt under prefers-reduced-motion, and nothing may blink faster than 3Hz

## Reference sites

- Warp: https://www.warp.dev
- Raycast: https://www.raycast.com
- Charm: https://charm.sh

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

Install this skill

unzip terminal-chic-devtool.zip -d ~/.claude/skills/

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

Settings → Capabilities → Skills → Upload skill → terminal-chic-devtool.zip