Terminal Aesthetic

You might say

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-likeA 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
────── ┤Title├ ──────, characters replace graphic separation
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 data Status labels are examples Link 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 terms Billing Subscription 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
→ Work arrangements are listed in the job posting
$ ./apply --with github
→ Submit the materials listed in the job posting