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