Pane · Splitter
PanelResizerWhatA pane is a resizable region beside others; the splitter is the bar between them.
How it worksDrag to resize; double-click resets widths.
Not "window" or "column". Also resizer.
Point at anything to learn its name. Five real Cortex screens, every region and control labelled with what we call it, how it works, and what not to call it.
Hover a pair for the difference.
The Workbench is where documents and pages open as tabs in panes. The Assistant is the AI dock beside it; it can open things in the Workbench but isn't part of it.
A pane is a column of the Workbench. A tab is one item inside a pane. A panel is a side area like the comments or activity panel.
A skill is a saved prompt you insert. An agent is a configured AI specialist with tools and access. A workflow runs an agent automatically on an event or schedule.
A template is the reusable recipe (fields, AI blocks, parameters). Generating it produces a report, which is saved as a page you can edit.
An AI block generates a whole section (prose, table, chart). An AI field fills a single value inline in a sentence.
Annotation is the umbrella: comments, claim audits, compliance and review findings. A comment is the human, discussion kind.
A menu runs an action (Rename, Delete). A select picks a value and shows it in the trigger.
Dialog blocks the page. Sheet slides in from an edge and keeps context. Popover is anchored to its trigger and closes on outside click.
Kebab and meatball mean "more actions" for one object: ⋮ on rows, ⋯ in horizontal strips. Hamburger opens navigation, never actions.
A badge is read-only status or a count. A chip is a token you can remove or click.
Go To… (⌘K) jumps to any page, document or action. A search input only filters the list it sits above. Search open documents (⌘⇧F) searches inside the Workbench tabs.
Hover follows the mouse. Focus follows the keyboard (ring). Selected is a lasting choice.
Describe UI as where → what → state: "In pane 2's tab strip, the meatball should open the pane menu, not a popover."
Generic primitives, one category at a time. Hover a tile for what it is and how it works.
WhatA pane is a resizable region beside others; the splitter is the bar between them.
How it worksDrag to resize; double-click resets widths.
Not "window" or "column". Also resizer.
WhatSwitch between views of the same thing; one visible at a time.
How it worksActive tab gets the accent underline; arrow keys move between tabs.
Changing table/cards is a segmented control.
WhatA bounded surface grouping one object's information.
How it worksHairline edge (ring-1); whole card may be clickable.
Card inside a card = card-on-card.
WhatA hairline that separates groups.
How it worksPurely visual, no interaction.
Draggable one = splitter.
WhatPadding is inside an edge, gap is between siblings, gutter is the page margin.
How it worksMira is dense: gap-2 toolbars, px-6 py-4 sections.
Say "add gap-2", not "some margin".
WhatBackground, raised card, floating popover, and the scrim behind modals.
How it worksShadows only on floating layers.
Never bg-white; use the token.
WhatPrimary is the one main action (teal). Secondary (outline) is the alternative. Ghost has no chrome until hovered.
How it worksOne primary per surface; it shows a spinner while working.
Not "the green/white button".
WhatA link button is an action styled as text. A destructive button is for irreversible actions.
How it worksDestructive usually lives inside a confirmation dialog.
"Archive" is reversible, so not destructive.
WhatIcon-only buttons: 28px in toolbars (icon button), 20–24px inside rows (icon affordance).
How it worksAlways tooltipped. With a pressed state it's a toggle (the star).
Not "the little button".
What2–4 mutually exclusive options in one pill.
How it worksChanges how the same content is shown; the category picker above is one.
Not tabs.
WhatA default action plus a chevron for variants.
How it worksMain part runs the default; chevron opens alternatives.
A button that only opens a menu is a menu button.
WhatThe action a screen is designed to drive, phrased as a verb.
How it worksUsually the primary button of an empty state.
CTA names intent; primary names style.
WhatLabel + input + helper text.
How it worksHelper text becomes red error text when invalid; validate on blur.
"Input" = the box; "field" = the whole set.
WhatIndependent on/off choices; tri-state adds indeterminate (—).
How it worksIndeterminate means only some children are selected.
Not "half-checked".
WhatA switch takes effect immediately. A radio group picks exactly one of a few visible options.
How it worksNeed Save to apply? Use a checkbox instead of a switch.
Radio is Proposed.
WhatEach entered value becomes a removable chip.
How it worksEnter adds; Backspace on empty removes the last.
Also "tag input".
WhatA field with attached prefix/suffix text, icon or button.
How it worksShares one border and one focus ring.
Left = prefix, right = suffix.
WhatOne box per digit for verification codes.
How it worksFocus jumps forward; paste fills all boxes.
OTP = one-time password.
WhatRead-only pills for counts, maturity (Beta) or status.
How it worksStatus tones: success, warning, destructive, info, always with a word.
Say warning badge, not "orange pill".
WhatAn inline message spanning a region: info, warning or error.
How it worksStays until resolved; can hold one action.
Top of the app = global banner.
WhatProgress is determinate (we know how far). Spinner is indeterminate.
How it worksRings show quotas (credits); bars show tasks (parsing).
Grey placeholder shapes are a skeleton.
WhatWhat a list shows when empty (with a CTA) or when it failed to load (with Retry).
How it worksIcon disc, title, one line, one action.
After a search: no-results state.
WhatA key cap showing a shortcut.
How it worksInformational; in triggers, menus, tooltips.
Write ⌘K, not "Command K".
WhatA person's photo or initials; overlapping ones form a stack with "+N".
How it worksShows who has access or who is editing.
Initials are the fallback.
WhatHeader row, column headers, rows, cells. List surface wraps it with toolbar and states.
How it worksClick a column header to sort.
Say row, not "line".
WhatThe same list shown as cards ("Card view").
How it worksOnly when cards say more than rows; tables are the default.
Toggled by a segmented control.
WhatOrganization → containers → sub-spaces, with configurable level names.
How it worksNodes expand and collapse; the empty Workbench pane shows it as the navigator.
Top = root; nested = sub-space.
WhatSplits a long list into pages.
How it worksRange summary + previous/next + page numbers.
Loading on scroll = infinite scroll.
WhatStacked sections that expand or collapse.
How it worksA single one is a disclosure; "Thought for 6s" in the assistant is one.
Also "collapsible".
WhatProgress through a multi-step flow.
How it worksThe workflow builder's Describe → Configure steps follow this idea.
Each screen is a step.
WhatHover = mouse over. Focus = keyboard on it. Active = pressed now. Selected = lasting choice. Disabled = unavailable. Loading = working.
Name the state in tickets.
WhatOutline around a container: active, drop target, capture or focus.
How it worksThe teal outline in the explorer works the same way.
Not "the green border".
WhatDrag handle → drag preview → drop target → drop indicator.
How it worksDrop on a pane to open, on its edge to split, on the composer to attach.
Reorder by dragging = drag to reorder.
WhatAI output arriving progressively.
How it worksStop ends it; the final frame replaces the preview.
Not "loading".
WhatThe UI changes before the server confirms.
How it worksA toast offers Undo; rolls back on failure.
Prefer over confirm dialogs for reversible actions.
WhatDirty = unsaved edits. Pages autosave and show Saving… / Saved / Live.
How it worksA saved point to roll back to is a version.
"Read-only" means the live session is open on another screen.
WhatEverything reachable with Tab in a logical focus order.
How it worksEsc closes the top overlay; focus returns to its trigger.
Intended trapping in modals = focus trap.