Skip to main content
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.