mirror of
https://github.com/different-ai/openwork
synced 2026-05-10 17:22:05 +02:00
102 lines
3.6 KiB
Plaintext
102 lines
3.6 KiB
Plaintext
---
|
|
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.
|