{"id":"pg_01M60H80XC18QRQ8BH22SDA83Z","space":"openvibe","slug":"openvibe-design-language","url":"https://openvibe.wiki/w/openvibe/openvibe-design-language","state":"published","visibility":"public","revision":1,"title":"OpenVibe design language","summary":"How every OpenVibe site looks and behaves: theme tokens in light and dark, the open kit of app pieces, the bar with one menu for search and every site, compact account menu, short home pages, one loading look and agent sessions.","body_markdown":"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.\"\n\n## Colours and themes\n\nNothing 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.\n\n## The pieces\n\nA 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.\n\n## The bar on every site\n\n- **Places:** four or five main places with icons; the rest fold into More. Other sites live in the menu, not on the bar.\n- **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]].\n- **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.\n- **Balances:** OpenCoins and Vibes share one calm pill on phones, and the site's name always reads whole.\n\n## Home pages\n\nA 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.\n\n## Loading and agent sessions\n\nOne 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.\":\n- **Steps:** grouped and folded, each with its command, change and output, live while it runs.\n- **Helpers** nest under the step that started them.\n- **Hand-offs** read \"Claude Code → Codex\".\n- **The plan** sits in the head.\n\nIt reads the sessions of every agent [[OpenVibe.Codes]] runs, and [[OpenVibe.Actor]]'s.\n","blocks":{"type":"root","children":[{"type":"text","value":"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.\"\n\n## Colours and themes\n\nNothing 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.\n\n## The pieces\n\nA 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.\n\n## The bar on every site\n\n- **Places:** four or five main places with icons; the rest fold into More. Other sites live in the menu, not on the bar.\n- **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]].\n- **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.\n- **Balances:** OpenCoins and Vibes share one calm pill on phones, and the site's name always reads whole.\n\n## Home pages\n\nA 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.\n\n## Loading and agent sessions\n\nOne 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.\":\n- **Steps:** grouped and folded, each with its command, change and output, live while it runs.\n- **Helpers** nest under the step that started them.\n- **Hand-offs** read \"Claude Code → Codex\".\n- **The plan** sits in the head.\n\nIt reads the sessions of every agent [[OpenVibe.Codes]] runs, and [[OpenVibe.Actor]]'s.\n"}]},"published_at":"2026-10-28T05:55:34.984Z","revision_published_at":"2026-10-28T05:55:34.984Z","revision_created_at":"2026-10-28T05:55:34.964Z","authorship":{"mode":"imported","workflow":null,"reviewed":false,"labels":[],"reviews":{"person":null,"ai_editor":null}},"infobox":[{"key":"repository","label":"Repository","type":"url","value":"https://github.com/OpenVibers/OpenVibe.Shared"},{"key":"package","label":"Package","type":"text","value":"openvibe-shared"},{"key":"guide","label":"Guide","type":"url","value":"https://github.com/OpenVibers/OpenVibe.Shared/blob/main/docs/kit.md"},{"key":"license","label":"License","type":"text","value":"MIT (the kit), AGPL-3.0 (the services)"}],"citations":[{"url":"https://github.com/OpenVibers/OpenVibe.Shared/blob/8f0ce1117b866b61ab41a6b31165405af43b9fa6/README.md","title":"openvibe-shared README.md (commit 8f0ce11)","source_item_id":null,"retrieved_at":"2026-10-28T05:40:00.000Z","quote":"design tokens and theme rendering, the navbar, footer and panels of the OpenVibe Frame","license_note":null},{"url":"https://github.com/OpenVibers/OpenVibe.Shared/blob/8f0ce1117b866b61ab41a6b31165405af43b9fa6/docs/kit.md","title":"openvibe-shared docs/kit.md (commit 8f0ce11)","source_item_id":null,"retrieved_at":"2026-10-28T05:40:00.000Z","quote":"One set of app pieces for every OpenVibe site, and for anyone else's","license_note":null},{"url":"https://github.com/OpenVibers/OpenVibe.Shared/blob/8f0ce1117b866b61ab41a6b31165405af43b9fa6/docs/kit.md","title":"openvibe-shared docs/kit.md (commit 8f0ce11)","source_item_id":null,"retrieved_at":"2026-10-28T05:40:00.000Z","quote":"The package is MIT.","license_note":null},{"url":"https://github.com/OpenVibers/OpenVibe.Shared/blob/8f0ce1117b866b61ab41a6b31165405af43b9fa6/docs/kit.md","title":"openvibe-shared docs/kit.md (commit 8f0ce11)","source_item_id":null,"retrieved_at":"2026-10-28T05:40:00.000Z","quote":"The kit uses the site's theme (`theme-loader.js`), so it wears every theme in light and dark","license_note":null},{"url":"https://github.com/OpenVibers/OpenVibe.Shared/blob/8f0ce1117b866b61ab41a6b31165405af43b9fa6/docs/kit.md","title":"openvibe-shared docs/kit.md (commit 8f0ce11)","source_item_id":null,"retrieved_at":"2026-10-28T05:40:00.000Z","quote":"Every class starts with `ovk-`, and nothing in `kit.css` styles a bare element","license_note":null},{"url":"https://github.com/OpenVibers/OpenVibe.Shared/blob/8f0ce1117b866b61ab41a6b31165405af43b9fa6/docs/kit.md","title":"openvibe-shared docs/kit.md (commit 8f0ce11)","source_item_id":null,"retrieved_at":"2026-10-28T05:40:00.000Z","quote":"a composer pinned at the bottom, and a bottom tab bar on phones","license_note":null},{"url":"https://github.com/OpenVibers/OpenVibe.Shared/blob/8f0ce1117b866b61ab41a6b31165405af43b9fa6/docs/kit.md","title":"openvibe-shared docs/kit.md (commit 8f0ce11)","source_item_id":null,"retrieved_at":"2026-10-28T05:40:00.000Z","quote":"One control on every site: the navbar's magnifier (or `/`, or Ctrl+K) opens the OpenVibe menu.","license_note":null},{"url":"https://github.com/OpenVibers/OpenVibe.Shared/blob/8f0ce1117b866b61ab41a6b31165405af43b9fa6/docs/kit.md","title":"openvibe-shared docs/kit.md (commit 8f0ce11)","source_item_id":null,"retrieved_at":"2026-10-28T05:40:00.000Z","quote":"Pressing your picture opens a compact menu","license_note":null},{"url":"https://github.com/OpenVibers/OpenVibe.Shared/blob/8f0ce1117b866b61ab41a6b31165405af43b9fa6/docs/kit.md","title":"openvibe-shared docs/kit.md (commit 8f0ce11)","source_item_id":null,"retrieved_at":"2026-10-28T05:40:00.000Z","quote":"Don't pass the site's own name as the eyebrow","license_note":null},{"url":"https://github.com/OpenVibers/OpenVibe.Shared/blob/8f0ce1117b866b61ab41a6b31165405af43b9fa6/docs/agent-session.md","title":"openvibe-shared docs/agent-session.md (commit 8f0ce11)","source_item_id":null,"retrieved_at":"2026-10-28T05:40:00.000Z","quote":"A coding agent's session, as people read it.","license_note":null}],"attachments":[],"links":[{"space":"openvibe","slug":"openvibe-actor"},{"space":"openvibe","slug":"openvibe-codes"},{"space":"openvibe","slug":"openvibe-food"},{"space":"openvibe","slug":"openvibe-live"},{"space":"openvibe","slug":"openvibe-network"},{"space":"openvibe","slug":"openvibe-search"}],"indexability":{"indexable":false,"reasons":["ai_generated_unreviewed"]}}