Helix — 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 post-modern modal text editor.…

Helix-style CLI toolsKeyboard-driven dashboards

02 ANSI palette

Scheme: default theme.toml

Chrome

bg #1a1b26

fg #a9b1d6

cursor #a9b1d6

selection #283457

accent #7aa2f7

ANSI 16

black #484f58

red #f7768e

green #9ece6a

yellow #d29922

blue #58a6ff

magenta #bc8cff

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

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

04 TUI widgets

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

Helix │ 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 #7aa2f7 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	8.1	AAA
accent on bg	6.79	AA
green on bg	9.35	AAA
red on bg	6.46	AA