Icons and graphics

Guide index · Shape · Color · Glyph guide

One meaning, graphical icons and terminal glyphs

Each concept keeps one symbol paired with a text label. Desktop and mobile both use the identical outlined vector vocabulary on a 24×24 logical grid, with the same role-based sizes and strokes. Layout and padding may adapt, and mobile enlarges the touch target around an icon while preserving its drawn size. The symbol-system split is graphical icons versus terminal glyphs. The terminal draws one-cell characters from the glyph guide, stepping down through capability tiers until meaning is preserved in words.

Semantic color follows the same roles as typography and status chips. An inactive icon does not become green merely because it depicts a checkmark.

Graphical icons

Desktop

Outlined geometric paths on a 24×24 grid with 2px strokes, round caps and joins, inside a 2px optical inset unless a directional shape needs more room. Default icons use primary or secondary text color.

Mobile

Identical shapes, sizes, stroke and color roles as desktop, including 16px and 20px icons in compact contexts. Interactive icons gain a 48×48 touch target around the same drawn icon. Prefer visible labels beside icons; do not rely on hover-only tooltips.

Terminal

One known-width cell per symbol when a glyph tier applies. When width is unreliable, use the word column in the table below. See terminal design for capability fallbacks.

Vocabulary and meaning

Icons need accessible names on icon-only controls. Decorative icons are excluded from the accessibility tree.

One cell per symbol · no scaling
 Search field
▸ Selected row
[ Action ]

 Information
Run Action
▸ Category context
✓ Ready
! Stale
[ ] Draft

Copy identity  Enter

Workflow and connectors

Desktop

Nodes are chamfered content cards with 16px insets, a title, optional category marker and a separate status label. Connectors use 1px orthogonal lines, 2px dash/4px gap for noninteractive relationships, and 4px junction dots when joins need distinction.

Mobile

Same node cards, status labels and connectors, stacked vertically for portrait screens; preserve dependencies in text when a graph cannot fit.

Terminal

Stage lists with box-drawing connectors; at lowest capability, numbered steps with explicit “depends on” lines.

1. Ingest     ✓ Complete
   │
   ├─ 2. Validate  ↻ Running
   │
   └─ 3. Publish  Accepted

Progress and data graphics

Desktop and mobile

Progress tracks are quiet, 8px high, drawn as segments with cyan fill and an explicit count. Unknown totals use an indeterminate indicator and “Total unknown,” not a guessed percent.

Terminal

Choose the bar width from the available layout and adapt the whole-segment count; eight two-cell segments (16 display cells) are an example, not a fixed count. Use two-cell segments (filled ▐▌, empty U+EE00 / U+EE02), plus exact counts in text. Nerd Font is required and guaranteed; this progress bar has no fallback recipe. Pair every bar, including secondary bars, with its operation text and count. The GUI spinner uses four chamfer-like segments; the terminal uses clockwise quadrant blocks ▘ ▝ ▗ ▖, never circle slices.

Checking files · 3 / 8
▐▌▐▌▐▌ 3 / 8

Unknown total
Discovering files · total unknown

✓ Complete