UI design system

OneOpen ML Studio uses a light soft-SaaS shell (Jinja + CSS + vanilla JS). Brand accent is teal #0D9488; product name remains OneOpen.

Tokens

Defined in oneopen_ml_studio/static/css/theme.css:

Token

Role

--bg / wash gradients

Page atmosphere (soft teal + cyan washes)

--surface / --surface-3

Cards, sidebar, inputs

--border / --border-strong

Hairlines and controls

--text / --text-muted

Primary / secondary copy

--accent / --accent-soft

Teal actions and selected states

--radius / --radius-lg

14px / 20px corners

--shadow-sm / --shadow-md

Elevation without heavy chrome

--font

Plus Jakarta Sans

--mono

IBM Plex Mono (versions, metrics, kbd)

Shell

  • Fixed sidebar with brand mark, user chip (menu: Account / Sign in / Sign out), primary nav, project list with type pill + progress bar, version footer.

  • Cmd/Ctrl+K command palette: pages + projects.

  • Mobile (<900px): hamburger toggles sidebar; main click dismisses.

  • Soft page-enter motion; respects prefers-reduced-motion.

Components

Buttons (primary / secondary / ghost / danger), pill tabs, segmented controls, form fields, toast stack, modal backdrop, empty states, skeletons, bulk selection bar, workflow rail, project/image cards (cards only where they are interactive containers).

Annotate (visual)

CV annotate chrome inherits the light theme (toolbars and panels use surface tokens). Canvas tooling lives in page-scoped CSS under annotate.html / annotator.js:

  • Bounding box and polygon drawing

  • Whole-image classification mode

  • SAM point prompts → polygons

  • YOLO Label Assist panel

Non-image projects use annotate_samples.html for text spans, tabular values, transcripts, and LLM fields.

Pipelines

The Pipelines tab includes a visual DAG editor (pipeline_editor.js) plus YAML/JSON import/export. See Pipelines and plugins.

Out of scope (UI)

React SPA, dark theme toggle, realtime multi-user cursors.