Back to map
Digital / Web UI

Terminal Green

A terminal-inspired green phosphor material for developer, AI agent, and system-monitoring interfaces.

Status: ReadyTg
Tg

Usage

  • Logs
  • Agent consoles
  • Open-source landing pages

Adjustable parameters

  • green hue
  • scanline opacity
  • font weight
  • background
  • density

AI Prompt

Create a terminal green interface material with dark charcoal background, phosphor green text, subtle scanlines, and calm command-line density.

Tailwind notes

Use near-black backgrounds, green text, subtle repeating-linear-gradient scanlines, and a monospace font.

Performance notes

Scanlines should be static. Avoid fast blinking text except for tiny cursors.

CSS

.terminal-green {
  border: 1px solid rgba(57, 255, 142, .28);
  border-radius: 12px;
  background:
    repeating-linear-gradient(180deg, rgba(57,255,142,.06) 0 1px, transparent 1px 4px),
    #050806;
  color: #8dffb2;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

React example

export function TerminalGreenLog({ lines }) {
  return <pre className="terminal-green">{lines.join("\n")}</pre>;
}