# Terminal CLI > Monospace everything, phosphor green and amber on black, prompt symbols, bracketed buttons and ASCII-boxed panels with a blinking cursor. - Nickname: Green screen - Also called: Command-line UI, TUI style, Hacker terminal - Category: Futuristic & Tech - Moods: Techy, Edgy, Serious, Nostalgic - Industries: SaaS, Startup & Tech, AI Products, Web3 & Crypto, Gaming - Style page: https://uilingo.dev/styles/terminal-cli/ 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 ## Audit Passed after 1 round · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, dark mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Terminal CLI" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: dark ## The style in one line Monospace everything, phosphor green and amber on black, prompt symbols, bracketed buttons and ASCII-boxed panels with a blinking cursor. Design keywords: monospace everything, green on black, amber highlights, reverse-video selection, prompt symbols $ >, ASCII box panels, blinking block cursor, [ bracketed ] buttons, block-character progress. ## Visual language The product looks like it runs inside a shell. Every glyph is one monospace family on a near-black #070A07 screen; text is phosphor green, highlights and headings-in-boxes are amber, and anything selected or primary is shown in reverse video — a solid green block with black text. There are no radii, gradients or shadows: structure comes from single-line ASCII-style boxes with their titles cut into the top border, dashed rules, and real CLI syntax ($, >, --flags, ## headings, [ ] brackets). A block cursor blinks after the hero headline. Dense, honest, hacker-tool. ## Signature details (must be visible) - One monospace family for everything (IBM Plex Mono; Thai falls back to IBM Plex Sans Thai), body ~15–16px, density 0.9 - Palette: bg #070A07, text #C4F5CC, headings/numbers #3DFF6E with a faint 14px green text-shadow, amber #FFB000 for section labels and prompts, cyan #5FD7FF as the only extra ANSI colour - Reverse video for selection: background #3DFF6E, color #041A0A on primary buttons, active nav/tab/segment, chips and selected rows - Boxes: 1px solid #2C6B3A, border-radius 0, no shadow; card title sits on the top border as '[ TITLE ]' with the bg colour behind it - Prompt syntax as decoration: eyebrow '$ command', lead '> output', section heads '## Title', labels '--flag', FAQ '[+] / [-]', badges '[OK]' - Blinking block cursor (0.55em × 0.95em, steps(1) 1.06s) after the hero headline and article title - Block-character bars: progress, bar charts and meters masked into 7px blocks with 2px gaps (repeating-linear-gradient mask) - Highlighted/CTA boxes use a 3px double border (amber or green) like ╔═╗ ## Design tokens — use these exact values Colours (dark mode): - background #070A07 - surface #0B100C - surface-2 #101A12 - text #C4F5CC - text-muted #74AD80 - primary #3DFF6E (text on it #041A0A) - secondary #FFB000 (text on it #1C1200) - accent #5FD7FF - border #2C6B3A - success #3DFF6E · warning #FFB000 · danger #FF5F56 - chart series #3DFF6E, #FFB000, #5FD7FF, #FF7AD9, #C4F5CC Radius: sm 0px, md 0px, lg 0px, xl 0px, pill 0px Border width: 1px Shadows: sm `none`, md `none`, lg `none` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 0.9 density Motion: 0ms steps(1) ## Typography (Latin + Thai) - Headings: IBM Plex Mono 500/600 with Thai fallback IBM Plex Sans Thai 500/600 - Body: IBM Plex Mono 400/500/600 with Thai fallback IBM Plex Sans Thai 400/500/600 - Mono: IBM Plex Mono - Google Fonts URL: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+Thai:wght@400;500;600&display=swap - CSS stacks: heading `"IBM Plex Mono", "IBM Plex Sans Thai", system-ui, sans-serif`; body `"IBM Plex Mono", "IBM Plex Sans Thai", system-ui, sans-serif`; mono `"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, "IBM Plex Sans Thai", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to IBM Plex Sans Thai — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.2rem, 4.6vw, 3.6rem), heading weight 600, heading tracking -0.01em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: 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. ## Components - Buttons: text wrapped in '[ … ]' via ::before/::after; primary = reverse video green; secondary = 1px green-border box; hover inverts to light text block; focus = 1px dashed amber outline offset 3px; no transitions - Inputs: square 1px #2C6B3A box on bg, green caret; focus = green border + slightly lighter fill; labels lowercase with a muted '--' prefix - Checkbox shows a literal 'x' on a green square; radio is a small square that fills green; switch is a square track with a block knob - Cards/panels: TUI box with title on the border ('[ TASKS COMPLETED ]' in amber caps) and any action badge on the right of the border - Badges: no fill, '[label]' in status colour (green ok, amber warn, red #FF5F56 error); solid badge = amber reverse video - Nav: brand rendered as '~/brand $', links as './product', current link in reverse video - Dashboard top bar like tmux: numbered windows '1:Overview*' with the active one in reverse video; activity feed lines prefixed with '>' - Charts: 2px square-capped lines with a faint glow, dotted 1-6 grid, no area fills; bar charts are stacks of blocks; legend dots are squares - Tables: amber uppercase headers over a dashed rule, dotted row separators, monospace cells - Mobile tab bar: one-line bar with lowercase labels, active tab in reverse video ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → logos → features → steps → stats → pricing → faq → cta. Feature section as list. Landing: split hero with a big green monospace headline + blinking cursor on the left and boxed terminal panels (chart, KPIs) on the right; features as a man-page style list with '>' headings and left rules; numbered 'step_01' sections; stats with '>' prompts; pricing boxes with a double-bordered recommended plan; FAQ as '?' questions with [+] toggles. Separate sections with dashed rules instead of background changes. Dashboard uses a top tmux-style window bar, boxed widgets with titles on their borders, status panels with square dots, and log-like activity. ## Content Use realistic product copy (fictional brand) suited to: Developer tools, CLIs and API products. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## 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 - Any border-radius, drop shadow, gradient or glassy blur - Proportional sans-serif fonts for Latin text - Neon magenta/cyan glitch effects or chamfered corners — that drifts into Cyberpunk - More than green + amber + one ANSI accent - Heavy CRT scanlines, curvature or flicker that hurt legibility - Smooth easing animations — state changes should snap ## Stack notes One self-contained HTML file with a