Terminal CLI

Also called: Command-line UI, TUI style, Hacker terminal

Monospace everything, phosphor green and amber on black, prompt symbols, bracketed buttons and ASCII-boxed panels with a blinking cursor.

“Green screen”Futuristic & TechEra: 1970s terminals → 2020s dev toolsTechyEdgySeriousNostalgic

Open full screen ↗

terminal-cli / landingEN

terminal-cli / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm0pxRadius md0pxRadius lg0pxRadius xl0pxDensity×0.9Display size×1Latin headingLatin bodyThai headingThai body

Colours · Dark

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

monospace everythinggreen on blackamber highlightsreverse-video selectionprompt symbols $ >ASCII box panelsblinking block cursor[ bracketed ] buttonsblock-character progress

Terminal CLI makes a product look like it runs in a shell. Every glyph is monospace on a near-black screen; text is phosphor green, highlights are amber, and selection is shown in reverse video (green block, black text). Panels are single-line boxes with their title cut into the top border like a TUI, buttons read as [ commands ], labels look like --flags, progress bars are made of blocks, and a block cursor blinks after the headline. No radius, no gradients, no shadows — only characters.

Best for

Developer tools, CLIs and API products
Infra, DevOps and security dashboards
Hackathon, CTF and indie-hacker sites
AI agents that “run commands”

Avoid for

Consumer apps for non-technical people
Long-form reading for a general audience
Luxury, wellness or kids brands

✓ Do

Set every element in one monospace family and align to the character grid
Use reverse video (green bg, black text) for the selected / primary state
Prefix structure with real CLI syntax: $ for actions, > for output, -- for flags, ## for headings

✕ Don't

No border-radius, gradients or drop shadows
Don’t add neon magenta, glitch or angled corners — that is Cyberpunk
Don’t use more than green + amber + one ANSI accent

Not to be confused with

Cyberpunk UI →Cyberpunk mixes neon magenta/cyan with glitch effects and chamfered corners; Terminal CLI is plain green/amber text in square ASCII boxes.HUD / Sci-Fi FUI →HUD draws thin blue vector frames, rings and corner brackets around data; Terminal CLI is character-based, like a shell or TUI.Pixel Art →Pixel art is chunky bitmap illustration in many colours; Terminal CLI is monochrome text on a character grid.

On mobile

Keep the monospace grid but raise body size to 15px; the tab bar is a one-line status bar with the active tab in reverse video, and lists become boxed output blocks with > prefixes.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinIBM Plex Mono · 500/600

The quick brown fox

Heading · ThaiIBM Plex Sans Thai · 500/600

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinIBM Plex Mono · 400/500/600

Clear words make shared decisions.

Body · ThaiIBM Plex Sans Thai · 400/500/600

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

IBM Plex Sans Thai is drawn as the Thai companion of the Plex family, so its loopless, engineered strokes sit naturally beside IBM Plex Mono.

Colour palette

Design tokens

Radius	`sm 0px · md 0px · lg 0px · xl 0px · pill 0px`
Border	`1px`
Shadow	`none`
Display	`clamp(2.2rem, 4.6vw, 3.6rem)`
Motion	`0ms steps(1)`
Density	`×0.9`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Terminal CLI (terminal-cli) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Only a dark mode: its colours sit on :root.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+Thai:wght@400;500;600&display=swap
 */
:root {
  --radius: 0px;
  --background: #070A07;
  --foreground: #C4F5CC;
  --card: #0B100C;
  --card-foreground: #C4F5CC;
  --popover: #0B100C;
  --popover-foreground: #C4F5CC;
  --primary: #3DFF6E;
  --primary-foreground: #041A0A;
  --secondary: #FFB000;
  --secondary-foreground: #1C1200;
  --muted: #101A12;
  --muted-foreground: #74AD80;
  --accent: #101A12;
  --accent-foreground: #C4F5CC;
  --destructive: #FF5F56;
  --border: #2C6B3A;
  --input: #2C6B3A;
  --ring: #3DFF6E;
  --chart-1: #3DFF6E;
  --chart-2: #FFB000;
  --chart-3: #5FD7FF;
  --chart-4: #FF7AD9;
  --chart-5: #C4F5CC;
  --sidebar: #0B100C;
  --sidebar-foreground: #C4F5CC;
  --sidebar-primary: #3DFF6E;
  --sidebar-primary-foreground: #041A0A;
  --sidebar-accent: #101A12;
  --sidebar-accent-foreground: #C4F5CC;
  --sidebar-border: #2C6B3A;
  --sidebar-ring: #3DFF6E;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Terminal CLI (terminal-cli) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Only a dark mode: its colours sit on :root.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+Thai:wght@400;500;600&display=swap
 */
@theme {
  --color-bg: #070A07;
  --color-surface: #0B100C;
  --color-surface-2: #101A12;
  --color-text: #C4F5CC;
  --color-text-muted: #74AD80;
  --color-primary: #3DFF6E;
  --color-on-primary: #041A0A;
  --color-secondary: #FFB000;
  --color-on-secondary: #1C1200;
  --color-accent: #5FD7FF;
  --color-border: #2C6B3A;
  --color-success: #3DFF6E;
  --color-warning: #FFB000;
  --color-danger: #FF5F56;
  --color-chart-1: #3DFF6E;
  --color-chart-2: #FFB000;
  --color-chart-3: #5FD7FF;
  --color-chart-4: #FF7AD9;
  --color-chart-5: #C4F5CC;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-pill: 0px;
  --shadow-sm: 0 0 #0000;
  --shadow-md: 0 0 #0000;
  --shadow-lg: 0 0 #0000;
  --font-heading: "IBM Plex Mono", "IBM Plex Sans Thai", system-ui, sans-serif;
  --font-body: "IBM Plex Mono", "IBM Plex Sans Thai", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, "IBM Plex Sans Thai", monospace;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Terminal CLI (terminal-cli). Default mode: dark. Fonts: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+Thai:wght@400;500;600&display=swap",
  "color": {
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0275,
            0.0392,
            0.0275
          ],
          "hex": "#070a07"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.0627,
            0.0471
          ],
          "hex": "#0b100c"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0627,
            0.102,
            0.0706
          ],
          "hex": "#101a12"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7686,
            0.9608,
            0.8
          ],
          "hex": "#c4f5cc"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4549,
            0.6784,
            0.502
          ],
          "hex": "#74ad80"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2392,
            1,
            0.4314
          ],
          "hex": "#3dff6e"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0157,
            0.102,
            0.0392
          ],
          "hex": "#041a0a"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.6902,
            0
          ],
          "hex": "#ffb000"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1098,
            0.0706,
            0
          ],
          "hex": "#1c1200"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3725,
            0.8431,
            1
          ],
          "hex": "#5fd7ff"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1725,
            0.4196,
            0.2275
          ],
          "hex": "#2c6b3a"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2392,
            1,
            0.4314
          ],
          "hex": "#3dff6e"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.6902,
            0
          ],
          "hex": "#ffb000"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3725,
            0.3373
          ],
          "hex": "#ff5f56"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2392,
            1,
            0.4314
          ],
          "hex": "#3dff6e"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.6902,
            0
          ],
          "hex": "#ffb000"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3725,
            0.8431,
            1
          ],
          "hex": "#5fd7ff"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4784,
            0.851
          ],
          "hex": "#ff7ad9"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7686,
            0.9608,
            0.8
          ],
          "hex": "#c4f5cc"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {},
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "IBM Plex Mono",
        "IBM Plex Sans Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "IBM Plex Mono",
        "IBM Plex Sans Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "IBM Plex Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "IBM Plex Sans Thai",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 600
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 0,
      "unit": "ms"
    }
  },
  "density": {
    "$type": "number",
    "$value": 0.9
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 1
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!