Design

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