Terminal UI Design
Create distinctive, production-grade terminal interfaces with intentional aesthetics. Don't just print text—craft an experience.
Quick Start
Before coding, choose a bold aesthetic direction:
| Style | Vibe | Colors | Borders |
|---|
| Cyberpunk | Neon, futuristic | Hot pink #ff00ff, cyan #00ffff, purple #1a0a2e | Block █▀▄ |
| Amber Terminal | Vintage CRT | #ffb000 on black | Double ╔═╗ |
| Minimalist Zen | Clean, focused | Nord palette, cool blues | Rounded ╭─╮ |
| Retro Mainframe | Corporate, formal | Green on black | ASCII-only +-+ |
| Synthwave | 80s nostalgia | Purple, pink gradients | Heavy ┏━┓ |
| Monochrome Brutalist | Stark, bold | Single color + intensity | Heavy ┏━┓ |
Pick ONE direction and execute it with precision.
Design Thinking Checklist
| Question | Decision Point |
|---|
| Purpose | What problem? Who uses it? What workflow? |
| Tone | Pick extreme: cyberpunk, zen, retro, maximalist, playful |
| Constraints | Python Rich, Go bubbletea, Rust ratatui, ANSI codes? |
| Differentiation | What makes this UNFORGETTABLE? |
Box Drawing & Borders
Choose borders that match your aesthetic:
Single: ┌─────┐ │ └─────┘ Clean, modern
Double: ╔═════╗ ║ ╚═════╝ Bold, formal, retro
Rounded: ╭─────╮ │ ╰─────╯ Soft, friendly
Heavy: ┏─────┓ ┃ ┗─────┛ Strong, industrial
Dashed: ┄┄┄┄┄┄ ┆ Light, airy
ASCII: +-----+ | +-----+ Retro, universal
Block: █▀▀▀▀█ ▄ ▀▀▀▀▀ Chunky, brutalist
Pro tip: Use decorative corners: ◆ ◈ ✦ ⬡ ◢◣◤◥
Color Strategies
| Strategy | When to Use | Technique |
|---|
| ANSI 16 | Universal compatibility | Classic palette, craft unique combos |
| 256-color | Rich but portable | Gradients, subtle variations |
| True color | Modern terminals | Full spectrum, smooth transitions |
| Monochrome | Elegant constraint | Single color, vary intensity |
Create atmosphere:
- Background color blocks for sections
- Gradient fills: ░▒▓█
- Semantic color (avoid cliché red=bad, green=good)
- Reverse video for emphasis
- Dim for secondary, bold for primary
Typography
The terminal is ALL typography:
| Technique | Effect | Example |
|---|
| ASCII art headers | Dramatic intro | figlet style banners |
| Text weight | Hierarchy | Bold, dim, normal |
| Decoration | Emphasis | Underline, italic, strikethrough |
| Letter spacing | Headers | H E A D E R |
| Case | Voice | ALL CAPS headers, lowercase body |
| Unicode symbols | Richness | → • ◆ ★ ⚡ λ ∴ ≡ ⌘ ✓ ✗ |
| Custom bullets | Personality | ▸ ◉ ✓ ⬢ › instead of - |
Block: ███████╗██╗██╗ ███████╗
Slant: /___ / / // / / ____/
Small: ╔═╗┌─┐┌─┐
Minimal: [ HEADER ]
Layout & Spatial Composition
Break free from single-column output:
| Element | Usage |
|---|
| Panels & Windows | Distinct regions with borders |
| Columns | Side-by-side information |
| Tables | Aligned data, Unicode table chars |
| Whitespace | Generous padding, breathing room |
| Density | Match purpose—dense dashboards, sparse wizards |
| Hierarchy | Visual distinction: primary, secondary, chrome |
| Asymmetry | Off-center titles, weighted layouts |
Motion & Animation
| Element | Examples |
|---|
| Spinners | ⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏, ⣾⣽⣻⢿⡿⣟⣯⣷ |
| Progress bars | ▓░, █▒, [=====>], ◐◓◑◒ |
| Typing effects | Character-by-character reveal |
| Transitions | Wipe effects, fade with color intensity |
| Live updates | Streaming data, real-time charts |
Data Display
| Type | Technique |
|---|
| Sparklines | ▁▂▃▄▅▆▇█ inline mini-charts |
| Bar charts | Horizontal bars with block chars |
| Tables | Smart sizing, alternating rows, aligned nums |
| Trees | ├── └── │ hierarchies |
| Status | ● green, ○ empty, ◐ partial, ✓ complete |
| Gauges | [████████░░] with percentage |
Decorative Elements
Dividers: ───── ═════ •••••• ░░░░░░ ≋≋≋≋≋≋
Sections: ▶ SECTION, [ SECTION ], ─── SECTION ───, ◆ SECTION
Textures: · ∙ ░ patterns for backgrounds
Icons: (if Nerd Fonts available)
Anti-Patterns to Avoid
| ❌ Avoid | ✅ Instead |
|---|
| Plain unformatted text | Styled output with intent |
| Default colors | Cohesive palette |
| Generic [INFO] prefixes | Styled prefixes with icons |
| Simple ---- dividers | Unicode dividers ───── ═════ |
| Walls of text | Structured panels and sections |
| Generic progress | Creative spinners and bars |
| Boring help | Formatted, aligned help text |
| Inconsistent spacing | Precise alignment |
Library Quick Reference
| Language | Libraries |
|---|
| Python | Rich, Textual, curses, prompt_toolkit |
| Go | Bubbletea, Lipgloss |
| Rust | Ratatui |
| Node.js | Ink, Blessed, cliui |
| Pure | ANSI escape codes |
ANSI Escape Codes
\x1b[1m Bold
\x1b[3m Italic
\x1b[4m Underline
\x1b[31m Red foreground
\x1b[38;2;R;G;Bm True color (RGB)
\x1b[2J Clear screen
\x1b[H Cursor home
Implementation Pattern
- Choose aesthetic first (cyberpunk, zen, retro, etc.)
- Define palette (2-3 colors + background)
- Select border style (single, double, rounded, block)
- Create reusable components (panel, table, status)
- Apply consistently across all output
Resources
| File | When to Load |
|---|
| references/box-drawing.md | Need border character reference |
| references/ansi-codes.md | Need escape code reference |
| references/color-palettes.md | Need pre-defined palettes |
Exit Criteria (Code Verified)
- Output has intentional aesthetic (not generic)
- Cohesive color palette used throughout
- Borders and typography match chosen style
- No plain text without formatting
- Anti-patterns avoided
