openvibers/openvibe.design Commits
Rules 142-148: app icons fill their square, names in the brand face, one segmented control, the + holds every tool, round icon actions, an agent shows what it does, a time without a zone is UTC (#296)
Changes
@@@ -521,6 +521,34 @@ const RULES = Object.freeze(["When a section has nothing yet (no store items, no activity, nothing collected), it shows its mark, one line saying what will appear, and one quieter line saying how; never a bare heading over a grey sentence, and never an empty box.",'2026-11-12', 'The wallet\'s Store showed a heading and "New items will appear here after review." in grey, marked "UGLY" by the owner.',[], ['openvibe-shared test: wallet-chrome']),++ R("app-icon-fills-its-square", "look", "An app or site icon is its own hue on a rounded square, with the glyph at 58% of it, centred.",++ "Every place an app or a site is drawn (the menu, You, the site list, search rows, the feed, a card) uses the same app icon: the site's steady hue (from its id) as a soft gradient on a square with 29% corners and a hairline in that hue, and the glyph drawn at 58% of the square, placed absolutely so no hover or animation can move it off centre. A folder shows its first four apps in an even 2×2 at two thirds of their cell. A press sinks an icon; a mouse lifts it and lights it in its hue. Never a small glyph inside a ring, and never one sized by guesswork per page.",++ '2026-11-12', "The owner, 11-12, circling the menu's folders and app tiles: \"these icons are offset and kind of broken … they don't take the full space\"; \"make the icons bigger so they actually take up more of the square … fix the alignment\"; and \"they're so small everywhere across the board\".",++ [{ label: 'The menu', href: '/components/menu' }], ['openvibe-shared test: menu-home-screen-chrome', 'openvibe-shared test: kit-layout-chrome']),++ R("names-in-the-brand-face", "words", "Names are set in the brand face; the words you read are in the UI face.",++ "The name of an app, a site, a tab, a section or a person in a list is set in OV Brand (Nunito 800, which the navbar loads on every site); times, notes, messages and every sentence stay in the UI face. A name wraps to two balanced lines and never ends in \"…\"; a section head is a name in sentence case, not small capitals.",++ '2026-11-12', "The owner, 11-12, on the menu's app names: \"improve the fonts … it looks kind of unplanned … the text could be improved\"; and \"try and prevent labels that end with dot dot dot … align them better\".",++ [], ['openvibe-shared test: menu-home-screen-chrome']),++ R("one-segmented-control", "motion", "Tabs and switches are one segmented control whose ink slides to the chosen one.",++ "A set of tabs or a switch (You's Apps · Notifications · Recent, Vibe's Chat · Code · Agents) is one rounded track; the chosen one sits on an ink that slides there from the last one, and the content slides in from that side. Calm fades instead; only Off removes the movement. Arrow keys move along it. On a phone only the chosen tab says its name when the others would not fit; each keeps its glyph and count.",++ '2026-11-12', "The owner, 11-12, on Vibe's Chat · Code · Agents row: \"these can be aligned more perfectly … bigger font size and better icon size … animations, effects to the tabs that look nice, both on mobile and desktop\".",++ [], ['openvibe-shared test: menu-places-chrome', 'openvibe-shared test: menu-home-screen-chrome']),++ R("the-plus-holds-every-tool", "building", "In every composer the mic comes first, and the + opens every tool of that box.",++ "A box to write in (a post, a chat, Vibe, a comment, an agent's task) is the one shared composer. Its row starts with the mic, then the +; the + opens all of the box's tools as big named tiles: its own (pictures, camera, files, emoji), its site's and its mods', and the extras every box has (Timer). On a phone the row keeps the mic, the + and the first tool; a wide box shows more. While empty, the box shows what people do with it, one example at a time. A tool is a module any site or mod adds once for every box.",++ '2026-11-12', "The owner, 11-12, on Vibe's box: \"the mic … it's not even on the right spot. Fix it to the left and redo the composer … the same shared harmony, unified composer across sites … the timer should be in the plus thing … usable on all composers across all sites\"; and \"it should show different things people do\".",++ [{ label: 'The composer', href: '/components/thread-composer' }], ['openvibe-shared test: composer-v2-chrome', 'openvibe-shared test: dock-chrome']),++ R("actions-are-round-icons", "look", "Close, Open and Back are round icon buttons; words are for the one main action.",++ "A control that every person knows by its shape (close, open, back, more, edit) is a round icon button with its name for readers and as a tooltip, sized to a finger. Words are kept for the one main action of a place (Post, Set it up, Answer). Edges are hairlines in a soft tint; a thick bright ring or a wide bordered pill around an icon is never used.",++ '2026-11-12', "The owner, 11-12, marking the menu: \"Close … ICON\", \"Open … ICON\"; and on the phone's close button: \"these buttons and borders … get extra wide, are kind of ugly … make that more sleek and modern\".",++ [], ['openvibe-shared test: menu-close-chrome']),++ R("an-agent-shows-what-it-does", "agents", "An agent's face shows what it is doing now.",++ "Wherever an agent appears (You, Vibe, a run card, a notice), its face carries a glyph for what it is doing: reading, searching, writing, coding, streaming, shopping, thinking, waiting for you, paused. An agent may name its own glyph from the registry; otherwise its current step's words choose one. A working agent breathes softly (Calm slower, Off still); one waiting for you turns amber. Where the registry has no fitting glyph, the design system makes one (openvibe.design's icon maker through Exchange) and adds it for everyone.",++ '2026-11-12', "The owner, 11-12, on the AI strip under You: \"put an icon depending on the agent status … custom for the agent … it can generate its own status icons if they don't exist already\".",++ [], ['openvibe-shared test: menu-home-screen-chrome']),++ R("a-time-without-a-zone-is-utc", "data", "APIs send times with their zone; a time without one is read as UTC.",++ "Every API returns times as ISO 8601 with a zone (2026-11-12T05:01:02Z). A client that meets \"2026-11-12 05:01:02\" reads it as UTC, never as the reader's local time, and every relative time (\"3 h ago\") stays current while it is on screen.",++ '2026-11-12', "The owner, 11-12: \"how come everything in the history is just now? … the time doesn't update\". Network's history sent zone-less UTC times, which browsers read as local time, so every visit west of UTC was hours ahead.",++ [], ['openvibe-shared test: menu-home-screen-chrome']),]);// The register's order is the rule's number: a person can cite "rule 7" and a link can carry it.
@@ -521,6 +521,34 @@ const RULES = Object.freeze([
@@ -521,6 +521,34 @@ const RULES = Object.freeze([
"When a section has nothing yet (no store items, no activity, nothing collected), it shows its mark, one line saying what will appear, and one quieter line saying how; never a bare heading over a grey sentence, and never an empty box.",
"When a section has nothing yet (no store items, no activity, nothing collected), it shows its mark, one line saying what will appear, and one quieter line saying how; never a bare heading over a grey sentence, and never an empty box.",
'2026-11-12', 'The wallet\'s Store showed a heading and "New items will appear here after review." in grey, marked "UGLY" by the owner.',
'2026-11-12', 'The wallet\'s Store showed a heading and "New items will appear here after review." in grey, marked "UGLY" by the owner.',
[], ['openvibe-shared test: wallet-chrome']),
[], ['openvibe-shared test: wallet-chrome']),
+ R("app-icon-fills-its-square", "look", "An app or site icon is its own hue on a rounded square, with the glyph at 58% of it, centred.",
+ "Every place an app or a site is drawn (the menu, You, the site list, search rows, the feed, a card) uses the same app icon: the site's steady hue (from its id) as a soft gradient on a square with 29% corners and a hairline in that hue, and the glyph drawn at 58% of the square, placed absolutely so no hover or animation can move it off centre. A folder shows its first four apps in an even 2×2 at two thirds of their cell. A press sinks an icon; a mouse lifts it and lights it in its hue. Never a small glyph inside a ring, and never one sized by guesswork per page.",
+ '2026-11-12', "The owner, 11-12, circling the menu's folders and app tiles: \"these icons are offset and kind of broken … they don't take the full space\"; \"make the icons bigger so they actually take up more of the square … fix the alignment\"; and \"they're so small everywhere across the board\".",
+ [{ label: 'The menu', href: '/components/menu' }], ['openvibe-shared test: menu-home-screen-chrome', 'openvibe-shared test: kit-layout-chrome']),
+ R("names-in-the-brand-face", "words", "Names are set in the brand face; the words you read are in the UI face.",
+ "The name of an app, a site, a tab, a section or a person in a list is set in OV Brand (Nunito 800, which the navbar loads on every site); times, notes, messages and every sentence stay in the UI face. A name wraps to two balanced lines and never ends in \"…\"; a section head is a name in sentence case, not small capitals.",
+ '2026-11-12', "The owner, 11-12, on the menu's app names: \"improve the fonts … it looks kind of unplanned … the text could be improved\"; and \"try and prevent labels that end with dot dot dot … align them better\".",
+ [], ['openvibe-shared test: menu-home-screen-chrome']),
+ R("one-segmented-control", "motion", "Tabs and switches are one segmented control whose ink slides to the chosen one.",
+ "A set of tabs or a switch (You's Apps · Notifications · Recent, Vibe's Chat · Code · Agents) is one rounded track; the chosen one sits on an ink that slides there from the last one, and the content slides in from that side. Calm fades instead; only Off removes the movement. Arrow keys move along it. On a phone only the chosen tab says its name when the others would not fit; each keeps its glyph and count.",
+ '2026-11-12', "The owner, 11-12, on Vibe's Chat · Code · Agents row: \"these can be aligned more perfectly … bigger font size and better icon size … animations, effects to the tabs that look nice, both on mobile and desktop\".",
+ [], ['openvibe-shared test: menu-places-chrome', 'openvibe-shared test: menu-home-screen-chrome']),
+ R("the-plus-holds-every-tool", "building", "In every composer the mic comes first, and the + opens every tool of that box.",
+ "A box to write in (a post, a chat, Vibe, a comment, an agent's task) is the one shared composer. Its row starts with the mic, then the +; the + opens all of the box's tools as big named tiles: its own (pictures, camera, files, emoji), its site's and its mods', and the extras every box has (Timer). On a phone the row keeps the mic, the + and the first tool; a wide box shows more. While empty, the box shows what people do with it, one example at a time. A tool is a module any site or mod adds once for every box.",
+ '2026-11-12', "The owner, 11-12, on Vibe's box: \"the mic … it's not even on the right spot. Fix it to the left and redo the composer … the same shared harmony, unified composer across sites … the timer should be in the plus thing … usable on all composers across all sites\"; and \"it should show different things people do\".",
+ [{ label: 'The composer', href: '/components/thread-composer' }], ['openvibe-shared test: composer-v2-chrome', 'openvibe-shared test: dock-chrome']),
+ R("actions-are-round-icons", "look", "Close, Open and Back are round icon buttons; words are for the one main action.",
+ "A control that every person knows by its shape (close, open, back, more, edit) is a round icon button with its name for readers and as a tooltip, sized to a finger. Words are kept for the one main action of a place (Post, Set it up, Answer). Edges are hairlines in a soft tint; a thick bright ring or a wide bordered pill around an icon is never used.",
+ '2026-11-12', "The owner, 11-12, marking the menu: \"Close … ICON\", \"Open … ICON\"; and on the phone's close button: \"these buttons and borders … get extra wide, are kind of ugly … make that more sleek and modern\".",
+ [], ['openvibe-shared test: menu-close-chrome']),
+ R("an-agent-shows-what-it-does", "agents", "An agent's face shows what it is doing now.",
+ "Wherever an agent appears (You, Vibe, a run card, a notice), its face carries a glyph for what it is doing: reading, searching, writing, coding, streaming, shopping, thinking, waiting for you, paused. An agent may name its own glyph from the registry; otherwise its current step's words choose one. A working agent breathes softly (Calm slower, Off still); one waiting for you turns amber. Where the registry has no fitting glyph, the design system makes one (openvibe.design's icon maker through Exchange) and adds it for everyone.",
+ '2026-11-12', "The owner, 11-12, on the AI strip under You: \"put an icon depending on the agent status … custom for the agent … it can generate its own status icons if they don't exist already\".",
+ [], ['openvibe-shared test: menu-home-screen-chrome']),
+ R("a-time-without-a-zone-is-utc", "data", "APIs send times with their zone; a time without one is read as UTC.",
+ "Every API returns times as ISO 8601 with a zone (2026-11-12T05:01:02Z). A client that meets \"2026-11-12 05:01:02\" reads it as UTC, never as the reader's local time, and every relative time (\"3 h ago\") stays current while it is on screen.",
+ '2026-11-12', "The owner, 11-12: \"how come everything in the history is just now? … the time doesn't update\". Network's history sent zone-less UTC times, which browsers read as local time, so every visit west of UTC was hours ahead.",
+ [], ['openvibe-shared test: menu-home-screen-chrome']),
]);
]);
// The register's order is the rule's number: a person can cite "rule 7" and a link can carry it.
// The register's order is the rule's number: a person can cite "rule 7" and a link can carry it.