---
title: "Orbita UI Style"
description: "Distilled reference for the three-pane OpenWork session layout"
mode: "wide"
---

This style document distills the new Orbita session UI into reusable OpenWork patterns.

## Layout blueprint

- Three-pane shell:
  - **Left rail**: worker + session navigation, quick create, worker actions.
  - **Center canvas**: title bar, chat timeline, floating composer.
  - **Right rail**: capability shortcuts, inbox files, artifact files.
- Spatial rhythm:
  - Left rail `~260px`, right rail `~280px`, center fluid.
  - Center content constrained for reading (`~650px` narrative width).
  - Floating composer width up to `~800px`.

## Visual language

- Palette intent:
  - App shell: `slate-50` style neutral background.
  - Content area: clean white surface.
  - Borders: low-contrast separators (`slate-200` range).
  - Primary action: vivid blue send affordance.
- Typography:
  - UI chrome uses compact sans weights for controls.
  - Assistant narrative text uses serif styling for long-form readability.
  - Meta labels use uppercase microcopy with wide tracking.
- Density:
  - Session rows and action rows are compact but touch-friendly.
  - Hover reveals progressive actions (timestamps, download icon, menus).

## Left rail patterns

- Grouped sections by workspace mode:
  - **Factory / Remote**
  - **Experiments / Local**
- Row anatomy:
  - Chevron for expand/collapse.
  - Primary title + subtle subtitle/status line.
  - Context actions on hover (`+`, overflow menu).
- Session entries:
  - Rounded block rows.
  - Active state uses tinted slate fill.
  - Relative time appears as lightweight trailing metadata.

## Timeline and chat patterns

- User message:
  - Compact rounded bubble with medium-weight sans text.
- Assistant response:
  - Serif narrative, generous line-height.
- Step timelines:
  - Collapsible execution blocks with status dots and tool icons.
  - Exploration groups summarized as `files · searches · lists`.
  - Expanded mode uses vertical rule + grouped step rows.

## Composer patterns

- Floating dock over gradient fade from page bottom.
- Header micro-label indicates workspace mode (`Remote workspace` / `Local workspace`).
- Input body supports:
  - Mentions (`@agent`, `@file`)
  - Slash commands (`/command`)
  - Attachments and pasted artifacts
- Bottom control bar:
  - Attachment, agent, model, thinking selectors.
  - Circular blue send button; stop button while streaming.

## Right rail patterns

- Capability shortcuts rendered as compact tab-like rows:
  - Automations, Skills, Extensions, Messaging.
- Inbox card:
  - Dashed upload drop-zone + compact file list.
  - File rows support quick copy path and hover download.
- Artifacts card:
  - Markdown/image file rows with type pills and path context.
  - Clicking markdown opens the document/editor side panel.

## Document panel behavior

- Opens as a right-side detail pane over the right rail area.
- Keeps user in session context while editing/viewing artifacts.
- Includes explicit close affordance and save/reload states.

## Motion and interaction rules

- Use subtle transition-only motion (`opacity`, `color`, `background`, `shadow`).
- Reserve pulse/spinner animations for active background work.
- Avoid decorative motion that competes with timeline readability.

## Accessibility guardrails

- Preserve keyboard support for all list rows and menus.
- Maintain visible focus states for action controls.
- Keep status conveyed by both color and text labels.

Use this page as the default style baseline for session-surface work unless a task explicitly calls for a different visual language.
