tui-design

TUI Design System

Universal design patterns for building exceptional terminal user interfaces. Framework-agnostic — works with Ratatui, Ink, Textual, Bubbletea, or any TUI toolkit.

Core philosophy: TUIs earn their power through spatial consistency, keyboard fluency, and information density that respects human attention. Design for the expert's speed without abandoning the beginner's discoverability.

TUI Design Process

digraph tui_design {
    rankdir=TB;
    "What are you building?" [shape=diamond];
    "Select layout paradigm" [shape=box];
    "Design interaction model" [shape=box];
    "Define visual system" [shape=box];
    "Validate against anti-patterns" [shape=box];
    "Ship it" [shape=doublecircle];

    "What are you building?" -> "Select layout paradigm";
    "Select layout paradigm" -> "Design interaction model";
    "Design interaction model" -> "Define visual system";
    "Define visual system" -> "Validate against anti-patterns";
    "Validate against anti-patterns" -> "Ship it";
}

---

1. Layout Paradigm Selector

Choose your primary layout based on what you're building:

App Type	Paradigm	Examples
File manager	Miller Columns	yazi, ranger
Git / DevOps tool	Persistent Multi-Panel	lazygit, lazydocker
System monitor	Widget Dashboard	btop, bottom, oxker
Data browser / K8s	Drill-Down Stack	k9s, diskonaut
SQL / HTTP client	IDE Three-Panel	harlequin, posting
Shell augmentation	Overlay / Popup	atuin, fzf
Log / event viewer	Header + Scrollable List	htop, tig

Persistent Multi-Panel

All panels visible simultaneously. Focus shifts between them. Users build spatial memory — "branches are always top-left."

┌─ Status ──┬─────────── Detail ──────────┐
├─ Files ───┤                              │
│ > file.rs │  diff content here...        │
│   main.rs │                              │
├─ Branches ┤                              │
│ * main    │                              │
│   feat/x  │                              │
├─ Commits ─┤                              │
│ abc1234   │                              │
└───────────┴──────────────────────────────┘
  [q]uit [c]ommit [p]ush [?]help