Design for AI

Terminal / hacker: UI design prompt

Palette, type rules and a pasteable prompt for terminal / hacker. Also called hacker aesthetic, CLI UI, command-line website, green screen, TUI style. 1970s-80s terminals; web revival 2015 onward (developer portfolios, security tools).

Traits

  • monospace type for everything, including headings
  • black or very dark background with phosphor green or amber text
  • prompt characters ($, >, ~) as list markers and headings
  • box-drawing characters, ASCII art logos, blinking block cursor
  • typed-out text effect on the hero, one line at a time
  • borders are single-line ASCII or 1px in the text colour
  • tables aligned in fixed columns like directory listings

Palette

#0c0c0c page, #33ff33 primary green (or #ffb000 amber), #1f7a1f dim green, #c8c8c8 secondary, #ff5555 error red, #ffff55 warning

Type

JetBrains Mono, IBM Plex Mono, Fira Code or Commit Mono; single size 14-16px, headings same size in bold or boxed, line-height 1.5

Do

  • use one font size and make hierarchy with prompts, uppercase and box-drawing rules
  • add a scanline overlay (repeating-linear-gradient, 2px, opacity 0.06) and a slight text glow
  • make the typed effect skippable and disable it under prefers-reduced-motion

Don't

  • do not mix in a sans-serif for "readability"; that breaks the fiction
  • do not use rounded corners, gradients or shadows
  • do not turn it into a fake OS with fake windows; stay in one terminal

Known for it: Hack The Box, Hackaday (partial), countless developer portfolios, Warp and Ghostty marketing pages

CSS seed
:root {
  --bg: #0c0c0c;
   --fg: #33ff33;
   --dim: #1f7a1f;
   --muted: #c8c8c8;
   --alert: #ff5555;
   --radius: 0;
   --glow: 0 0 6px rgba(51,255,51,0.5);
   --font: 'JetBrains Mono',monospace
}
Prompt

Build the site as a terminal. Background #0c0c0c, text #33ff33, dim text #1f7a1f, secondary #c8c8c8, error #ff5555. Font JetBrains Mono 15px everywhere, line-height 1.5; headings are the same size in bold, prefixed with "$ " or wrapped in box-drawing characters (┌─┐ │ └─┘). Max width 88 characters, padding 24px, left aligned. Nav is a single line of paths (~/home ~/work ~/about) with the active one in inverse video (background #33ff33, text #0c0c0c). Hero: a typed-out line with a blinking block cursor (steps() animation, 1s blink), typing 40ms per character, skippable on click. Lists use "> " markers; data in fixed-width columns. Links underlined in #33ff33, hover inverts colours. Add text-shadow 0 0 6px rgba(51,255,51,0.5) and a 2px scanline overlay at opacity 0.06. No radius, no gradients, no images except ASCII art. Under prefers-reduced-motion, show all text instantly.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site as a terminal. Background #0c0c0c, text #33ff33, dim text #1f7a1f, secondary #c8c8c8, error #ff5555. Font JetBrains Mono 15px everywhere, line-height 1.5; headings are the same size in bold, prefixed with "$ " or wrapped in box-drawing characters (┌─┐ │ └─┘). Max width 88 characters, padding 24px, left aligned. Nav is a single line of paths (~/home ~/work ~/about) with the active one in inverse video (background #33ff33, text #0c0c0c). Hero: a typed-out line with a blinking block cursor (steps() animation, 1s blink), typing 40ms per character, skippable on click. Lists use "> " markers; data in fixed-width columns. Links underlined in #33ff33, hover inverts colours. Add text-shadow 0 0 6px rgba(51,255,51,0.5) and a 2px scanline overlay at opacity 0.06. No radius, no gradients, no images except ASCII art. Under prefers-reduced-motion, show all text instantly.

## Tokens
:root { --bg:#0c0c0c; --fg:#33ff33; --dim:#1f7a1f; --muted:#c8c8c8; --alert:#ff5555; --radius:0; --glow:0 0 6px rgba(51,255,51,0.5); --font:'JetBrains Mono',monospace }

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.

Snippets in this style

B 094CRT amber