Gum — TUI Brandbook

01 Foundations

Voice

Keyboard-first — every action has a binding.
Dense information, zero chrome waste.
Status at a glance — color encodes state.

Avoid

Mouse-only workflows
Decorative UI that steals columns
Ambiguous state without color cues

Design principles

Monospace grid — align to character cells, not pixels.
ANSI palette is the design system — reuse semantic colors consistently.
Box-drawing borders define panes; never float widgets.
Key hints belong in a persistent footer or status line.

A tool for glamorous shell scripts.…

Gum-style CLI toolsKeyboard-driven dashboards

02 ANSI palette

Scheme: Charm lipgloss gum styles

Chrome

bg #171717

fg #f0f0f0

cursor #f0f0f0

selection #2a2a2a

accent #ff87d7

ANSI 16

black #484f58

red #ff7b72

green #3fb950

yellow #d29922

blue #58a6ff

magenta #ff87d7

cyan #39c5cf

white #c9d1d9

bright_black #6e7681

bright_red #ffa198

bright_green #56d364

bright_yellow #e3b341

bright_blue #79c0ff

bright_magenta #d2a8ff

bright_cyan #56d4dd

bright_white #ffffff

03 Typography

Mono — JetBrains Mono

$ # launch gum
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
0123456789  !@#$%^&*()  []{}  │─┌┐└┘├┤┬┴┼  ▸▸▼▶

│─┌┐└┘├┤┬┴┼═║╔╗╚╝╠╣╦╩╬ ▁▂▃▄▅▆▇█

04 TUI widgets

Status bar · panes · list · table · gauges · sparkline · modal · key hints

Gum │ context: default │ CPU 12% │ MEM 34% │ ? help

┌─ repository ─────────────────────┐
│ ▼ src/                           │
│   ├─ main.rs                     │
│   └─ lib.rs                      │
│ ▶ tests/                         │
└──────────────────────────────────┘

┌─ files ──────────────────────────┐
│ ▸ README.md          modified    │
│   Cargo.toml         unchanged   │
│   LICENSE            unchanged   │
└──────────────────────────────────┘

┌──────┬──────────┬────────┬───────┐
│ PID  │ NAME     │ CPU%   │ MEM%  │
├──────┼──────────┼────────┼───────┤
│ 1842 │ worker   │  12.4  │  8.1  │
│ 2091 │ api      │   4.2  │ 14.3  │
└──────┴──────────┴────────┴───────┘

CPU [████████████░░░░░░░░] 62% NET ▁▂▃▅▆▇█▇▆▅▄▃▂▁▂▃▄▅ 1.2 Gbps DISK [██████░░░░] 58% ERR 0

╭─ command palette ────────────────╮
│ > checkout main                  │
│   stash pop                      │
│   fetch --all                    │
╰──────────────────────────────────╯

j/k navigate │ enter select │ / filter │ q quit │ ? help

05 Usage

Do

Use #ff87d7 for selection and primary focus states.
Reserve bright red/green for destructive/success git or status states.
Keep status bar one line; overflow truncates with ellipsis.

Don't

Don't use proportional fonts inside panes.
Don't rely on color alone — pair with icons or glyphs.
Don't break the 80-column grid without explicit wide mode.

06 Accessibility

Pair	Ratio	WCAG
fg on bg	15.73	AAA
accent on bg	8.28	AAA
green on bg	7.06	AAA
red on bg	7.11	AAA