A design system built entirely around the aesthetics of real terminal emulators — phosphor glow, monospace type, CRT scanlines, blinking cursors, ASCII box-drawing, typewriter animations, and an interactive shell. Not a dark theme with green text. An actual terminal, rendered as a product UI. For developer tools, CLI products, infrastructure platforms, and any technical product that wants its interface to feel like home to an engineer.
What Is Terminal Design?
Terminal Design is not a dark theme with green text. It is a complete design system built to make a product's website feel like a terminal session — the same environment that engineers live in for 8+ hours a day. The aesthetic is immediate and unmistakable: phosphor green on near-black, monospace type throughout, blinking block cursor, CRT scanlines, ASCII box-drawing for structure, and a page that opens with a simulated boot sequence.
The system has one design constraint: every element must answer "would a real terminal do this?" No rounded corners — terminals have none. No icons — terminals use ASCII. No gradients — terminals use solid color on solid black. No sans-serif — terminals use monospace exclusively.
The Vibe
user@product:~$ _
The blinking block cursor next to that prompt triggers a Pavlovian response in any engineer: I am home. Terminal Design works because it communicates trust through familiarity. It doesn't try to convince technical users the product is good — it shows them it was built by people who think the same way they do.
The Three Signature Moments
1. The Boot Sequence — The page loads with system initialization messages appearing line by line ([OK] in phosphor green, timing staggered by 120–150ms), then fades into the main content. Every developer who has ever watched a server boot will feel something before they read a word.
2. The Typewriter Heading — The hero heading types itself character by character after the boot completes. A real JavaScript loop at ~40ms per character, not a CSS animation. The cursor keeps blinking after typing completes. This is the only moment of theatrics — everything else is dense and functional.
3. The Interactive Shell — A fake terminal in the page where visitors type commands and get pre-programmed output. help, deploy, status, version, clear. Unknown commands return a proper bash-style error. Visitors discover it organically and spend significantly longer on the page. It is the most copied element of this style.
Who Is Using It?
Charm CLI, Warp, Vercel CLI, Railway, Fly.io, and dozens of developer tools whose landing pages themselves feel like terminal sessions. The pattern is also used by security researchers, CTF platforms, and indie CLI tool authors who want the page to signal the same technical culture as the product.
The visual tell: monospace everywhere, phosphor glow on headings, [OK] in the log stream, ASCII progress bars (████░░░░), and a nav that looks like a terminal titlebar with [product] bracket notation.
Design Rules (Deep Dive)
Monospace Is Non-Negotiable
Every character on the page — headings, body, buttons, labels, nav links — must be in a monospace font. JetBrains Mono, Fira Code, Source Code Pro. There are no exceptions. A single sans-serif font breaks the illusion immediately and irrecoverably. Monospace is the foundation; without it, nothing else reads as terminal.
The Two-Zone Color System
The palette divides into background (dark) and foreground (phosphor). Background tokens range from #0A0E0A (page) to #243029 (card borders). Foreground tokens range from #00FF41 (primary phosphor) to #007A20 (muted labels). These zones never mix — you do not put a light element on a light background or invert the palette in a section.
State colors follow universal terminal convention: #FF3333 for errors, #FFD700 for warnings, #00FF41 for success (same as primary), #5BB8FF for info. Never deviate from these — any engineer will read them correctly on sight.
Phosphor Glow: Use It Sparingly
text-shadow: 0 0 8px #00FF41, 0 0 20px rgba(0,255,65,0.25) on headings and key interactive elements creates the phosphor CRT monitor effect. Apply it to the H1, the active nav item, and the highlighted plan in pricing — nothing else. Overuse turns the entire page into a glowing mess that loses all legibility.
Density Over Whitespace
Real terminals pack information densely. Section padding should be 28–36px, never 80–96px. Elements butt up against each other separated only by 1px solid #1E2820 border lines, not whitespace. A terminal UI that uses generous whitespace stops looking like a terminal and starts looking like a dark theme.
ASCII Progress Bars as Data Visualisation
Replace conventional charts and stat blocks with ASCII progress bars: ████████████░░░░░░░░ 62%. Use filled block █ (U+2588) and light shade ░ (U+2591). 25 total blocks, filled count = Math.round(percentage / 4). This is the most distinctively terminal approach to data display and immediately signals design intention.
Buttons as CLI Commands
Every button is a CLI command in brackets: [ Install CLI ], [ Read Docs ], [ Deploy ]. No fill by default — transparent background, phosphor-colored border and text. Hover: background fills with phosphor green, text inverts to near-black. The bracket prefix and suffix can be done with CSS ::before and ::after pseudo-elements so the brackets don't appear in the DOM text.
The Core Philosophy
Terminal Design is a statement of values directed at a specific audience. It says: this product was built by engineers who respect your intelligence. We are not going to make it pretty — we are going to make it legible, dense, and familiar.
The phosphor green is not a brand color. It is a reference — to the phosphor screens of VT100 terminals, to the tools that built the internet, to the environment where real work happens. For an engineer who lives in a terminal, seeing this aesthetic on a product's landing page is a signal that the people who built it understand the work.
Used correctly, this is the highest-trust design choice you can make for a technical audience. Used incorrectly — on the wrong product, or executed without the discipline of real terminal conventions — it reads as costume, not conviction.