nnn — 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.

The fastest terminal file manager.…

nnn-style CLI toolsKeyboard-driven dashboards

02 ANSI palette

Scheme: nnn default NNN_COLORS

Chrome

bg #000000

fg #ffffff

cursor #ffffff

selection #005f5f

accent #00afaf

ANSI 16

black #484f58

red #ff7b72

green #3fb950

yellow #d29922

blue #58a6ff

magenta #bc8cff

cyan #00afaf

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 nnn
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
0123456789  !@#$%^&*()  []{}  │─┌┐└┘├┤┬┴┼  ▸▸▼▶

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

04 TUI widgets

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

nnn │ 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 #00afaf 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	21.0	AAA
accent on bg	7.75	AAA
green on bg	8.27	AAA
red on bg	8.33	AAA