Make it feel like a hacker terminal: black background, green text, monospace type, and command-line vibes.
Borrow command-line language to feel direct, technical, and tool-like·A terminal aesthetic uses monospaced type, prompts, command output, and a restrained palette. It suits developer tools and API documentation when the commands are real, searchable, and copyable. The whole page does not need to become green text on black.
Scroll sideways to explore the full example
▣ release/consoleprod · ap-east-109:42:18
DEPLOYMENT #8842
checkout-api v2.14.0
canary 25% · checks are watching p95 and error rate.
$ deploy promote --to=100%
promote →rollback ↶
✓ bundle 1.2s✓ migrations skipped○ metrics window 02:14 left
Design Principles
Use monospace for commands, data, and short labels
Keep long explanations in a comfortable reading style
Use prompts and status symbols to clarify structure
Treat ASCII dividers as organization rather than decoration
Keep cursor animation subtle and respect reduced-motion settings
When to use it
Command-line tool website
$ npx create-ai-appA CLI tool’s site can borrow cues from the command line.
Developer documentation
docs/ ├─ quickstart.md └─ api.mdThe docs site uses monospaced type, making every navigation item look like command output.
API or cloud-service page
POST /v1/chatSuccessful response · Sample delay
Engineering recruitment page
$ whoami → backend engineer (remote)It can express engineering culture, but job details and application instructions must stay direct.
When NOT to use it
Assume non-technical visitors understand every terminal symbol
The family photo album also uses green text on black.In nontechnical contexts, this style may offer few useful task cues.
Use low-contrast small text on a dark surface
Dark green on black, made even smaller, becomes hard to read.
Turn commands into images that cannot be copied
A terminal screenshot fills the first screen, leaving text unselectable and unsearchable.Keep commands as real text that people can copy and search.
Mix many unrelated glass and realistic effects into the same system
$ runFrosted-glass bubbles
Anatomy
iiii = mmmm+Green text on black background+$ run+──┤ ├─+
Used for command, path and data alignment; not mandatory for long bodies
Use a small amount of basic colors to highlight the output status while ensuring contrast and status meaning.
Prompts indicate command context; key operations, status, and errors still require text or stable icons
Can be used as a decorative running prompt; do not continue to interfere with reading, and support reducing animation effects
AI Prompt
Terminal-style deployment console, monospace type, black background with restrained green text, shell prompt and command history, service health, canary deployment, promote and rollback tasks, ASCII dividers and subtle reduced-motion cursor
Typical use cases
CLI product
Scroll sideways to explore the full example
▣ release/consoleprod · ap-east-109:42:18
DEPLOYMENT #8842
checkout-api v2.14.0
canary 25% · p95 stable · error rate 0.08%
$ deploy promote --to=100%
promote →rollback ↶
Developer docs
Scroll sideways to explore the full example
vibe-cli.dev
vibe▮Fictional example · docs · pricing
Use natural language to put ideas online
Describe the page you want, AI will generate the code and deploy it. No dragging, no panels, just one line of commands.
$ npx vibe init⌘C copy
Fictional demo dataStatus labels are examplesLink monitoring source
API service
Scroll sideways to explore the full example
──┤ Start ├─────
▸ Get started quickly
Installation
First project
──┤ command ├─────
vibe init
vibe deploy
# Get started quickly
Example of installation and deployment steps
$ npm i -g vibe-cli
$ vibe init my-app # Choose a template
$ vibe deploy # ✓ https://my-app.vibe.app
Tip: The command should support copying and searching, and should not be presented only as a screenshot.
Engineering careers
Scroll sideways to explore the full example
echo.apistatus: Example status ●
One API for multiple models
POST/v1/chat/completions
{ "model": "auto", "messages": […] }
→ Success · Example latency · Example cost
Trial termsBillingSubscription terms
──────┤ Fictional example · Link status data to its monitoring source ├───────
Cloud dashboard
Scroll sideways to explore the full example
──────┤ man 1 hiring ├──────
$ whoami
→ Backend Engineer · Work arrangements and pay are listed in the job posting
$ cat requirements.txt
→ Demonstrated hands-on engineering experience
→ Able to understand, maintain, and improve an existing codebase
