CLI Material Palette

Spatial Materials

The Character Grid

Everything exists on a monospace grid. Each cell is one character wide, one line tall.

Standard width: 80-120 characters
Vertical rhythm: Line-by-line flow
Grid snap: All elements align to character boundaries

Try in terminal

Whitespace Hierarchy

Space is semantic structure.

command ├─ nested item │ └─ deeper nesting └─ sibling item command output (blank line = conceptual break) next command

Try in terminal

Status with Details

Use indentation to show task status and nested information.

Try in browser

Typographic Materials

Weight & Style

Limited but powerful modifiers.

Bold — emphasis, headers, current selection
Dim — secondary information
Underline — links, input fields
Inverse — highlights, selected items
Strikethrough — completed tasks

Try in terminal

Color Materials

ANSI 16-Color Palette

The base vocabulary. Terminal themes remap these colors.

Black (30) / Bright Black (90) → default text, dimmed text
Red (31) / Bright Red (91) → errors, warnings
Green (32) / Bright Green (92) → success, completion
Yellow (33) / Bright Yellow (93) → warnings, attention
Blue (34) / Bright Blue (94) → information, links
Magenta (35) / Bright Magenta (95) → highlights, special states
Cyan (36) / Bright Cyan (96) → emphasis, metadata
White (37) / Bright White (97) → primary text, headers

Try in terminal

Diff Highlighting

Show code changes with color-coded additions and deletions.

Try in browser

Symbol Vocabulary

Status & Completion

✓ ✔ ✅ — success, complete
✗ ✘ ❌ — error, failed
⚠ ⚡ — warning, attention
ℹ ⓘ 💡 — information, hint
● ○ ◉ ◯ — selection, radio
■ □ ▪ ▫ ☐ ☑ ☒ — checkbox states

Tree & Structure

├── └── │ ─ — tree branches
▸ ▾ ► ▼ — collapsed/expanded
⌙ ↳ └─→ — continuation, return

Arrows & Direction

→ ← ↑ ↓ — basic arrows
⇒ ⇐ ⇑ ⇓ — double arrows
➜ ➔ ➤ — pointer arrows
↩ ↪ ⤴ ⤵ — curved arrows

Progress & Loading

⠋ ⠙ ⠹ ⠸ ⠼ ⠴ ⠦ ⠧ ⠇ ⠏ — spinner frames
▏ ▎ ▍ ▌ ▋ ▊ ▉ █ — progress blocks
◐ ◓ ◑ ◒ — rotating circle
⣾ ⣽ ⣻ ⢿ ⡿ ⣟ ⣯ ⣷ — dots spinner

Symbols & Icons

★ ☆ — starred, rating
♥ ♡ — favorited
⚙ ⚡ — settings, power
🔒 🔓 — locked, unlocked
📁 📂 📄 — file/folder
🔍 🔎 — search

Try in terminal

Temporal Materials

Progress Indicators

Character-based animations for "working" states.

Spinning: ⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏ — braille spinner ⣾⣽⣻⢿⡿⣟⣯⣷ — dots spinner ◐◓◑◒ — half circles Progress Bars: ▏▎▍▌▋▊▉█ — eighth blocks Block Style: ░▒▓█ — shading progression ▁▂▃▄▅▆▇█ — vertical growth Corner Arcs: ◜◝◞◟ — rotating corners Corner Boxes: ▖▘▝▗ — box corners Size Progression: ⋅∙·•● — growing dots Block Shading: ░░▒▒▓▓██ — gradient fill Size Pulsing: ·•●•· — dot pulse ∘○◯○∘ — circle pulse Star Bursts: ✦✧★✧✦ — twinkling ✶✷✸✹ — burst pattern

Try in browser

Blinking Text Animation

Cycle through characters to create attention-grabbing effects.

Try in browser

Task List Execution

Show real-time progress through multiple tasks.

Try in browser

Interactive Patterns

Menu Selection

Navigate through options with visual feedback.

Try in browser

Checkbox & Radio Groups

Toggle selections with interactive controls.

Try in browser

Confirmation Dialogs

Standard patterns for user confirmation.

Try in browser

Tab Navigation

Switch between different views or contexts.

Try in browser