Terminal design

Guide index · Color · Typography · Icons

One identity, two implementations

Oracle keeps one identity on desktop, mobile, and the terminal: chamfered frames, cyan focus, blue action emphasis, violet navigation, explicit status words, and terminal-only persistent ▸ selection glyphs for destinations and rows. Desktop and mobile are one graphical system. They share color roles, shape, type families, roles, sizes and weights, the outlined icon vocabulary at the same sizes and strokes, and control styling. Both use icons. Mobile adapts layout, padding, and component target dimensions for narrow portrait widths and 48px touch targets. Labels stay visible, and the shared type scale honors the host text scale.

The terminal is a separate implementation of those roles on a strict monospaced grid. Surfaces are flat cell backgrounds. Frames, actions, and status are glyphs. Typography and iconography diverge between the graphical system and the terminal: desktop and mobile share the Exo 2 and Oxanium type scale and the same outlined icons at each role-based size, while the terminal uses one cell size and the glyph guide. Color, status, and focus keep the same meaning. Color owns the hex values; this page shows how each role is painted.

The terminal owns its font and zoom. Frame corners, progress segment caps, the quadrant-block spinner, and flow-edge dashes use legacy-computing glyphs, Nerd Font symbols, or stable Unicode from the glyph guide. Nerd Font is required and guaranteed for progress; its bar has no fallback recipe. Other roles may use explicit words and linear layouts when a glyph tier is unavailable. Measure display-cell width, including wide Unicode and combining characters. Clip and wrap at grapheme boundaries.

🮣──────────────────────────────────────────🮢
│ ORACLE / Workspace                       │
│                                          │
│ ▸ Research notes     Ready           │
│   Reading list                           │
│                                          │
│ Enter: open   e: edit            │
🮡──────────────────────────────────────────🮠

Color roles

Use the truecolor hex values from Color when the terminal supports RGB and the application owns the full-screen surface. When only classic ANSI colors are available, use the fallback name shown on each terminal role. A 256-color host maps each role to the nearest palette entry and rechecks pale text, focus, and boundaries. Background color always belongs to a surface. State and selection use foreground color, glyphs, and brackets on that surface.

Color the frame and control glyphs themselves. An unfocused operable pane uses line.essential. A decorative frame uses line.quiet. Focus recolors only the control label with focus, preserving values and selection glyphs. Do not add a focus prefix or substitute a cyan frame. Navigation destinations and selected rows use persistent ▸ in a one-cell slot, blank when unselected, that remains visible when focus moves. Graphical navigation does not use this glyph. Nerd Font is required and guaranteed; no > substitute is needed. A primary action is bold text.primary in brackets. A secondary action uses line.essential on its label and brackets. A selected tab is bold text.primary; an inactive tab uses text.secondary. Navigation uses navigation.accent independently of selection. Selected rows preserve a primary-text ▸ glyph. Ready and verified complete use positive.foreground. Pending, stale, and needs-review use warning.foreground. Failed and invalid use danger.foreground. Accepted and unknown stay neutral. Running uses the neon-green running pair with a ↻ glyph and progress label. Success uses the subdued positive pair with a ✓ glyph. Explanation text stays primary. Status words, focus markers, and selection markers remain when color is unavailable.

Frames and spacing

A major graphical frame uses the panel chamfer from Shape. A small panel uses the smaller cut. A plain panel omits the recess. The terminal frame is one cell thick. With Symbols for Legacy Computing at one-cell widths, the corners are top-left 🮣, top-right 🮢, bottom-left 🮡, and bottom-right 🮠, with ─ and │ edges. The optional recess is 🯓▁▁▁🯐. Use one-column inset on both sides. The title occupies the first interior row. Related metadata follows, then one blank row before a distinct body group when height allows.

The title anchor is the first interior row and first inset column. A glyph that represents selection or state occupies a reserved cell; leave that cell blank when the glyph is absent. A title embedded in the top rule is an optional compact variant. Reserve enough rule cells for each corner. A focused pane recolors its title label cyan and preserves its frame. Panes use line.quiet when decorative and line.essential when the region is operable. A short cyan header accent stays separate from the border. Keep one column between sibling panes, one space inside brackets, and at least two columns between actions. Keep one blank row between unrelated groups when space permits.

🮣────────🮢
│ Major  │
🮡────────🮠

🮣───🯓▁▁▁🯐🮢
│ Recess │
🮡────────🮠

┌────────┐
│ Box    │
└────────┘

Application anatomy and size classes

Desktop keeps a wide multi-pane shell and drops an optional pane before the main region becomes unreadable. Mobile stacks that shell into one column. The terminal chooses the most constrained width and height band below. These bands are rendering defaults. Show a readable resize or help message when the interactive region cannot fit, and preserve selection, drafts, disclosure, and useful scroll positions when the layout changes.

For the expanded composition, target a navigation or list width of 24 columns, a main region of at least 56, and optional details of at least 32, including frames, with one-column gaps. Remove the optional side pane before violating the main width, and offer a visible key to its full-pane view. A full-height shell reserves one header row, one optional separator, one hint row, and one status row. With all four reserved, the remaining height is rows − 4, including workspace frame cells. If hint text wraps, reserve its actual height.

🮣──────────────────────🮢 🮣────────────────────────────────────────────────────────────🮢 🮣──────────────────────────────🮢
│ Notes                │ │ Main                                                       │ │ Details                      │
│ Inbox                │ │ Validation passed                                          │ │ Log                          │
│ Archive              │ │                                                            │ │ Updated 12:04                │
│ Drafts               │ │ Open                                                   │ │                              │
│                      │ │                                                            │ │                              │
🮡──────────────────────🮠 🮡────────────────────────────────────────────────────────────🮠 🮡──────────────────────────────🮠

🮣──────────────🮢 🮣─────────────────────────────────────────────────────────────🮢
│ Notes        │ │ Main                                                        │
│ Inbox        │ │ Validation passed                                           │
│ Archive      │ │                                                             │
│ Drafts       │ │ Open                                                    │
│              │ │                                                             │
🮡──────────────🮠 🮡─────────────────────────────────────────────────────────────🮠

🮣──────────────────────────────────────────────────────────🮢
│ Validation                                               │
│ Validation passed                                        │
│ Open                                                 │
│                                                          │
🮡──────────────────────────────────────────────────────────🮠

🮣──────────────────────────────────────🮢
│ Oracle                               │
│ Resize the terminal,                 │
│ or use line output.                  │
🮡──────────────────────────────────────🮠

Actions, tabs, and selection

Desktop and mobile share the control faces from Interaction. Mobile uses the 48px touch target. Every platform shows one nearby disabled-reason sentence; only when that sentence will not fit may the terminal append “(disabled)”, never “(unavailable)”. The terminal has no hover or press face. All controls keep the containing background with no state-owned cell fills. A primary action is bold pale text in brackets. A secondary action uses the essential edge color. Focus recolors only the label cyan, leaving the value unchanged and the persistent selection glyph visible. A disabled action stays readable and includes a concise reason. A selected tab is bold primary text with a square left join and one diagonal top-right end, as in | Workflow \. Inactive tabs use secondary text. Navigation destinations and data-row selection use one fixed one-cell marker slot, blank when absent and ▸ when selected, so labels never shift. Desktop and mobile destinations omit the glyph. Focus never adds or moves a marker.

Arrow keys move within the active list. Tab and Shift+Tab move between regions. Enter and Space activate controls. Show the shortcuts for the current view, and leave text-editing keys alone while the user is typing. Ctrl+C keeps the app's documented interrupt or exit behavior. A consequential command that requires confirmation uses an explicit prompt with a safe initial focus.

Text, tables, and progress

Desktop and mobile use the type roles in Typography. The terminal uses that same order at one cell size: bold for the title and control name, a blank row before the body, secondary color for metadata, and a code face only where the host already uses one. Uppercase is limited to short tags. Identifiers and raw data stay exact. Copied output excludes borders and ANSI decoration.

A small table keeps the record label, state, and key count. Long metadata belongs in details. Empty, loading, stale, and unavailable results use those words explicitly. A known progress bar uses the width available in its layout, with a whole-segment count adapted to that width and an exact observed count. Eight two-cell segments (16 display cells) illustrate one width, not a fixed count. Nerd Font is required and guaranteed; do not substitute ASCII, Unicode-only, or counts-only progress-bar recipes. Pair each bar with the operation text it measures, including secondary bars and bars in expanded status dialogs. Animate observed changes at 60ms per whole segment, shortening intervals for large jumps to complete catch-up within 1500ms; reduced motion updates immediately. Unknown-total marquees traverse the bar in 3500ms. Empty segments use the cap pair (U+EE00 / U+EE02). Filled segments are ▐▌. The spinner shows one quadrant at a time, clockwise from the top left (▘ ▝ ▗ ▖), holding each for two frames at 8 fps. Unknown totals say “Discovering files · total unknown.” A completed bar is evidence of the observed count, and the surrounding label says whether the external effect finished.

Validation run

Three checks observed complete.
Job 042
revision: 8

No rows
Loading
Stale snapshot
Unavailable

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

Discovering files · total unknown
Discovering files

Color and glyph capabilities

Desktop and mobile always paint the graphical roles. They have no ANSI ladder or character-width ladder. The terminal adapts the same roles down a color ladder (truecolor, 256, 16, no color) and the glyph tiers in the glyph guide. Every step keeps the labels and keyboard reachability. The progress bar is exempt from glyph fallback: Nerd Font is guaranteed, and all color tiers retain its segment caps and filled blocks.

ANSI names are semantic fallbacks. Host themes may remap them. Honor detected capabilities and explicit user color preferences. Leave the user's terminal palette unchanged.

🮣──────────────🮢
│ Validation   │
│ Ready    │
│ ▸ Notes      │
│ Open     │
│ Review   │
🮡──────────────🮠

🮣──────────────🮢
│ Validation   │
│ Ready    │
│ ▸ Notes      │
│ Open     │
│ Review   │
🮡──────────────🮠

🮣──────────────🮢
│ Validation   │
│ Ready    │
│ ▸ Notes      │
│ Open     │
│ Review   │
🮡──────────────🮠

+----------------+
| Validation     |
| [Ready]        |
| ▸ Notes        |
| [ Open ]       |
| [Review]       |
+----------------+

Title: Validation run
Status: Ready
Selection: Research notes
Action: Open

Repaint, accessibility, and restoration

Keep focus and the input cursor visible. Coalesce repaint work, and update a spinner at most 8 times per second. Pause follow mode when the user scrolls away from the newest log line. On exit, restore cursor visibility, terminal modes, and the alternate screen. Noninteractive output contains no required control sequences and stays useful when piped to a file.

A terminal rendering is not screen-reader accessible merely because it is text. Provide the linear mode from the capability set and test it in the intended environment. Desktop and mobile keep the same labels, focus order, and status words in the graphical shell.

🮣 Display name ─────────────🮢
│ north-gateway█            │
🮡───────────────────────────🮠

↻ Following 12:04:11 worker-2 ready
12:04:12 worker-2 accepted job 042

Paused 12:03:58 worker-1 retry scheduled
14 new lines below · press End to resume

$ oracle watch
(alternate screen: workspace)
q
$ █  (cursor visible, normal screen, prior scrollback intact)

Validation run: Ready (job 042)
Checks: 3 of 8 observed complete
Discovering files · total unknown
Result: Outcome pending