OpenVibe design language

The OpenVibe design language is how every OpenVibe site looks and behaves, and the open toolkit that carries it: openvibe-shared, whose README says it owns the "design tokens and theme rendering, the navbar, footer and panels of the OpenVibe Frame". Its guide, docs/kit.md, calls the kit "One set of app pieces for every OpenVibe site, and for anyone else's", and states: "The package is MIT."

Colours and themes

Nothing on a site picks a colour of its own. The page's theme (theme-loader.js, with light and dark halves of every theme and the season's own) sets tokens such as --bg-primary, --text-primary, --accent and --accent-strong, and every piece reads them: "The kit uses the site's theme (theme-loader.js), so it wears every theme in light and dark". Filled controls use --accent-strong with --on-accent-strong, which stay readable in every theme. "Every class starts with ovk-, and nothing in kit.css styles a bare element", so the kit sits beside a site's own CSS.

The pieces

A sticky head with its tabs, lists of rows, cards that fold, settings rows, a search row, "a composer pinned at the bottom, and a bottom tab bar on phones". The same builders run on the server and in the page. Pages are short: tabs and folds instead of long scrolls, the most useful things first, and on a phone a site acts like an app, with OpenVibe.Live, OpenVibe.Food and the other sites showing their main places in a bottom tab bar.

The bar on every site

• Places: four or five main places with icons; the rest fold into More. Other sites live in the menu, not on the bar.
• The OpenVibe menu: "One control on every site: the navbar's magnifier (or /, or Ctrl+K) opens the OpenVibe menu". It holds search, every site and every tool in three tabs (For you, Sites, Tools). Typing gives one ranked list that puts the person's own history and the sites they use first, and the box completes what they type. Suggestions come from OpenVibe.Search through OpenVibe.Network.
• The account menu: "Pressing your picture opens a compact menu": the name with + (add an account), settings and sign out beside it; the person's places as a grid of icons in the order they use them; one row for light, dark, text size, motion and themes.
• Balances: OpenCoins and Vibes share one calm pill on phones, and the site's name always reads whole.

Home pages

A product's home starts with a short hero: what it is in one line, a short lede, two buttons side by side and a strip of real numbers, three across on a phone. The guide says: "Don't pass the site's own name as the eyebrow", because the bar above already shows it.

Loading and agent sessions

One loading look covers every site: an overlay over the thing's own picture, with a progress line, and skeleton rows. For coding agents, agent-session.js shows "A coding agent's session, as people read it.":

• Steps: grouped and folded, each with its command, change and output, live while it runs.
• Helpers nest under the step that started them.
• Hand-offs read "Claude Code → Codex".
• The plan sits in the head.

It reads the sessions of every agent OpenVibe.Codes runs, and OpenVibe.Actor's.