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

Annotate chrome inherits the light theme (toolbars and panels use surface tokens). Canvas tooling stays in page-scoped CSS under annotate.html.

Out of scope

React SPA, dark theme toggle, visual pipeline builder UI.