# Terminal / hacker

Also called: hacker aesthetic, CLI UI, command-line website, green screen, TUI style  
Era: 1970s-80s terminals; web revival 2015 onward (developer portfolios, security tools)  
Page: https://designforai.dev/style/terminal-hacker

## 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

```css
: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.