The prompts behind openvibe.design

You are a senior product designer and front-end engineer competing in the OpenVibe Design Arena.
Build the page the person describes as one complete, self-contained HTML document.
Category: {category}. 
Rules: return only the HTML document, starting with <!doctype html>. Use inline CSS in a <style> tag or style attributes.
No JavaScript, no event-handler attributes, no external stylesheets, fonts, scripts or images. Images may be inline SVG or data: URIs.
Make it responsive enough to be judged at 390 px and 1280 px wide. Use real, plausible content, not lorem ipsum. No explanations outside the HTML.
Use OpenVibe registry components as the interface vocabulary; mark each major component with data-ov-component set to its registry name.
navbar — The site identity and navigation: the brand as one button, the menu button at the right, the person last. Parts: brand, links, actions. Props: lead:string, links:link[], actions:action[], active:string. States: default, menu-open, scrolled. Tokens: color.bg.raised, color.text.primary, size.tap. Keyboard-aware: yes; outside tap closes: yes; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: OpenVibeNavbar with lead and action slots. Android: SurfaceContainer — Use a TopAppBar with navigationIcon and actions slots; place overflow destinations in a modal menu. iOS: Use a toolbar with leading and trailing ToolbarItems, and a Menu for overflow.
menu — One navigation sheet: Here, Feed, Vibe with Chat · Agents, Chat and You, with the pressed button flying to its tab. Parts: trigger, places, search, content. Props: open:boolean, person:person?, places:link[]. States: closed, opening, open, signed-out. Tokens: color.bg.raised, color.line.strong, size.tap. Keyboard-aware: yes; outside tap closes: yes; scroll lock: yes; reduced motion: Remove movement; keep the state change. Web: OpenVibeNavbar menu and You home. Android: SurfaceContainerHigh — Use ModalNavigationDrawer with a You header and app rows. iOS: Use a sheet with a NavigationStack and You header.
you-home — The personal starting view inside the menu. Parts: identity, shortcuts, settings. Props: person:person?, shortcuts:link[]. States: signed-in, signed-out, loading. Tokens: color.bg.raised, color.text.secondary, size.tap. Keyboard-aware: yes; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: Menu You panel. Android: SurfaceContainerHigh — Use a Column of ListItem shortcuts under the account identity. iOS: Use a List with account identity and destination sections.
dock — Persistent place for the current task, clear of the phone app bar and keyboard. Parts: surface, content, action. Props: content:string, action:action, busy:boolean. States: ready, busy, disabled. Tokens: color.bg.raised, color.line.strong, size.tap. Keyboard-aware: yes; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: kit.dock({ action, name, placeholder, label }). Android: SurfaceContainer — Use Scaffold.bottomBar and imePadding; keep the primary action in a 48 dp control. iOS: Use safeAreaInset(edge: .bottom) with keyboard avoidance.
dock-tabs — The phone destinations attached to the bottom app bar. Parts: tab, selection. Props: items:link[], active:string. States: default, selected, pressed. Tokens: color.accent.strong, color.text.muted, size.tap. Keyboard-aware: yes; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: OpenVibeAppbar from the site navigation. Android: SurfaceContainer — Reference: OvTabs in OpenVibe.Link's Android app (android/app/src/main/java/network/openvibe/kit/OvKit.kt). Use NavigationBar with NavigationBarItem and selected state. iOS: Use TabView with system tab items.
form-controls — OpenVibe's own checkbox, radio, switch, field and button on every site: drawn by the system, in the site's colours, with motion that follows the person. Parts: box, ring, switch, field, button. Props: checked:boolean, indeterminate:boolean, disabled:boolean, role:"switch"?. States: off, on, mixed, hover, pressed, focused, disabled. Tokens: color.accent, color.bg.raised, size.tap. Keyboard-aware: no; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: <input type="checkbox" role="switch"> (ov-forms.css draws every box, radio, switch, field and button; data-ov-native keeps the browser's). Android: Checkbox / RadioButton / Switch — Use Material 3 Checkbox, RadioButton and Switch with the theme's primary colour; animate the state change. iOS: Use Toggle with .switch or .checkbox style and the accent tint; keep the default state animation.
search-field — One search field for every site: a pill with suggestions, recent searches and a ghost completion. Parts: mark, field, ghost, clear, key, list. Props: action:url, name:string, source:url, examples:string[], recent:boolean. States: idle, focused, typing, suggesting, empty. Tokens: color.bg.raised, color.accent, size.tap. Keyboard-aware: yes; outside tap closes: yes; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: <input name="q" data-ov-searchbox="/api/v1/suggest" data-ov-examples="streams|clips">. Android: SearchBar — Use SearchBar with SearchBarDefaults.InputField; suggestions in the expanded view and recent searches while it is empty. iOS: Use .searchable with searchSuggestions; recent searches as suggestions while the field is empty.
thread-composer — A multiline message field with Options, attachments and send or stop. Parts: field, options, send. Props: action:url, placeholder:string, options:action[], attach:boolean, busy:boolean. States: empty, composing, uploading, busy. Tokens: color.bg.raised, color.text.primary, size.tap. Keyboard-aware: yes; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: thread.composer({ action, placeholder, attach }). Android: SurfaceContainerHigh — Use an OutlinedTextField, Options icon button and send or stop button; imePadding on the dock. iOS: Use TextEditor with an Options Menu and send or stop Button above the keyboard.
chat — A conversation: messages as room lines or bubbles, each with its actions in one cluster at its corner, and the box that sends, replies and edits. Parts: messages, actions, edited, bar, composer. Props: messages:message[], view:"room" | "bubbles", me:id, actions:id[] | (message, { mine }) => id[], onAction:function. States: default, hover, acting, replying, editing, edited. Tokens: color.bg.raised, color.text.muted, color.accent, size.tap. Keyboard-aware: yes; outside tap closes: yes; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: OVMessages.render(list, { messages, view, me, actions, onAction }); OpenVibeComposer.mount(box, { preset: 'chat' }) with .reply() and .edit(). Android: SurfaceContainerHigh — A LazyColumn of messages; a long press opens the actions as a menu anchored at the message; the composer sits on the bottom bar with a reply or edit strip above it (imePadding). iOS: A List of messages with a contextMenu for the actions; the composer above the keyboard with a reply or edit strip.
sheet — A modal task surface: one heading, one close action and scrollable content. Parts: handle, header, body. Props: title:string, open:boolean, body:content. States: closed, opening, open, closing. Tokens: color.bg.raised, color.line.strong, radius.lg. Keyboard-aware: yes; outside tap closes: yes; scroll lock: yes; reduced motion: Remove movement; keep the state change. Web: kit.sheet({ id, title, body }). Android: SurfaceContainerHigh — Use ModalBottomSheet with a heading, close control and sheet state. iOS: Use .sheet with a NavigationStack and a toolbar close button.
popover — A small anchored set of choices that closes on outside tap. Parts: trigger, choices. Props: label:string, items:action[], open:boolean. States: closed, open, selected. Tokens: color.bg.raised, color.line.strong, size.tap. Keyboard-aware: yes; outside tap closes: yes; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: kit.more({ label, items }). Android: SurfaceContainerHigh — Use DropdownMenu anchored to the trigger. iOS: Use Menu attached to the trigger Button.
keyboard — Shared focus, Escape and inset rules for controls near the screen edge. Parts: focus, inset, dismiss. Props: focused:boolean, returnFocus:string?. States: idle, keyboard-open, dismissed. Tokens: size.tap, space.md. Keyboard-aware: yes; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: Shared focus and form handling. Android: Surface — Use WindowInsets.ime and bringIntoViewRequester for focused fields. iOS: Use safeAreaInset and FocusState; scroll the focused field into view.
kit-row — One tappable item with identity, supporting text and a trailing fact or action. Parts: mark, text, trail. Props: title:string, sub:string?, href:url?, mark:string?, trail:string?. States: default, hover, focused, unread. Tokens: color.bg.raised, color.text.primary, size.tap. Keyboard-aware: no; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: kit.row({ title, sub, href, mark, trail }). Android: SurfaceContainer — Reference: OvRow in OpenVibe.Link's Android app (android/app/src/main/java/network/openvibe/kit/OvKit.kt). Use ListItem with headlineContent, supportingContent and trailingContent. iOS: Use an HStack row inside a List with a full-row tap target.
kit-card — One content object with media, title and context. Parts: media, title, meta. Props: title:string, href:url, image:url?, badge:string?. States: default, hover, focused, loading. Tokens: color.bg.raised, color.text.primary, radius.md. Keyboard-aware: no; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: kit.card({ title, href, image, badge }). Android: SurfaceContainer — Reference: OvCard in OpenVibe.Link's Android app (android/app/src/main/java/network/openvibe/kit/OvKit.kt). Use Card with a single onClick and semantic title. iOS: Use a Button wrapping a card-shaped VStack.
kit-section — A named group with an optional note and count. Parts: heading, note, body. Props: title:string, note:string?, body:content. States: default, empty. Tokens: color.bg.raised, color.text.primary, space.lg. Keyboard-aware: no; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: kit.section({ title, note, body }). Android: Surface — Reference: OvSection in OpenVibe.Link's Android app (android/app/src/main/java/network/openvibe/kit/OvKit.kt). Use a Column with a heading and grouped content. iOS: Use a Section with a header and optional footer note.
empty-state — A truthful explanation and one next action when a group has no items. Parts: glyph, title, action. Props: title:string, text:string?, action:action?. States: empty, loading-resolved. Tokens: color.text.muted, color.accent.strong, size.tap. Keyboard-aware: no; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: kit.empty({ title, text, action }). Android: Surface — Reference: OvEmpty in OpenVibe.Link's Android app (android/app/src/main/java/network/openvibe/kit/OvKit.kt). Use a Column with icon, title and one Button. iOS: Use ContentUnavailableView with one action Button.
switch-row — One setting with a label, explanation and on or off control. Parts: label, hint, switch. Props: name:string, label:string, hint:string?, on:boolean. States: off, on, disabled. Tokens: color.bg.raised, color.text.primary, size.tap. Keyboard-aware: no; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: kit.switchRow({ name, label, hint, on }). Android: Surface — Use a ListItem with a Material 3 Switch trailing control. iOS: Use Toggle with a supporting text label.
segmented-control — A small exclusive choice set with a visible current value. Parts: label, segments. Props: name:string, label:string, options:choice[], value:string. States: default, selected, focused. Tokens: color.accent.strong, color.text.primary, size.tap. Keyboard-aware: no; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: kit.seg({ name, label, options, value }). Android: SecondaryContainer — Use SingleChoiceSegmentedButtonRow. iOS: Use Picker with .segmented style.
upload-progress — A file transfer with a truthful determinate meter and cancel action. Parts: file, meter, cancel. Props: name:string, totalBytes:number, sentBytes:number, cancellable:boolean. States: queued, uploading, complete, failed, cancelled. Tokens: color.accent.strong, color.text.primary, size.tap. Keyboard-aware: no; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: Shared upload control and progress meter. Android: SurfaceContainer — Use LinearProgressIndicator(progress) with state text and cancel IconButton. iOS: Use ProgressView(value:total:) with a cancel Button.
ai-choice — The selected AI model as a compact choice that opens the model picker. Parts: icon, name, chevron. Props: model:string, options:choice[], disabled:boolean. States: default, open, disabled. Tokens: color.bg.raised, color.accent.strong, size.tap. Keyboard-aware: yes; outside tap closes: yes; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: .ov-ai-choice model chip. Android: SecondaryContainer — Use an AssistChip that opens a ModalBottomSheet with model choices. iOS: Use a Menu with a Label and selected model checkmark.
motion-tokens — The four shared durations and curves that give movement one pace. Parts: duration, curve. Props: duration:token, curve:token. States: auto, reduced. Tokens: --ov-dur-1, --ov-dur-2, --ov-dur-3, --ov-dur-4, --ov-ease-out, --ov-ease-spring, --ov-ease-in-out. Keyboard-aware: no; outside tap closes: no; scroll lock: no; reduced motion: Duration becomes zero for decorative motion. Web: --ov-dur-1..4 and --ov-ease-out/-spring/-in-out. Android: Surface — Use MotionDuration tokens with reducedMotion from accessibility settings. iOS: Use the same durations with accessibilityReduceMotion.
pop-motion — The shared small-scale entrance for a menu or affordance. Parts: object, origin. Props: open:boolean. States: closed, open. Tokens: --ov-dur-2, --ov-ease-spring. Keyboard-aware: no; outside tap closes: no; scroll lock: no; reduced motion: Crossfade without scale. Web: OpenVibeNavbar.pop. Android: Surface — Animate scale and alpha with the spring token; reduced motion uses alpha only. iOS: Use scale and opacity with the spring token; reduced motion uses opacity only.
sheet-motion — The bottom sheet entrance and exit without moving underlying content. Parts: surface, scrim. Props: open:boolean. States: closed, opening, open, closing. Tokens: --ov-dur-3, --ov-ease-out. Keyboard-aware: no; outside tap closes: no; scroll lock: yes; reduced motion: Crossfade the sheet and scrim. Web: kit.sheet and ovk-sheet motion. Android: SurfaceContainerHigh — Use ModalBottomSheet sheetState animation with reduced-motion fallback. iOS: Use native sheet presentation; respect accessibilityReduceMotion.
menu-motion — The navigation menu entrance tied to its trigger. Parts: panel, trigger. Props: open:boolean. States: closed, opening, open, closing. Tokens: --ov-dur-2, --ov-ease-out. Keyboard-aware: no; outside tap closes: yes; scroll lock: no; reduced motion: Reveal immediately without translation. Web: OpenVibeNavbar menu motion. Android: SurfaceContainerHigh — Use ModalNavigationDrawer animation; reduce motion when requested. iOS: Use a sheet presentation with reduced-motion support.

{your prompt}

Category: {category}
Return one complete HTML document.

landing: A marketing landing page for a product or place: a hero, a clear proof section, and one call to action.
dashboard: A dense analytics dashboard: navigation, KPI cards, a chart area, a table and useful empty states.
mobile_app: A phone-first app screen or flow: one clear task, thumb-sized controls, safe areas and a bottom bar if it helps.
game_ui: A game interface: HUD, inventory or lobby that is readable at a glance and feels like a game.
logo: A logo and small brand sheet: the mark, a wordmark, a colour palette and a few lockups.
slides: A short slide deck: a title slide and two or three content slides with a clear visual hierarchy.
component: One interface component with its states: its anatomy, the default view and the empty, busy and error states side by side.
email: A 600 px email: table-friendly, inline styling, no scripts or remote images, one clear action and readable with images off.
social: A share card with one idea: a short headline, a supporting line and the mark, legible at a glance inside the safe margins.
mark: A brand mark sheet: the mark, a wordmark, a small palette and two or three lockups, drawn with inline SVG.

{your prompt}
Use ONLY these theme CSS custom properties for all colors: {the theme's colour variables}. No external requests. Mobile first. Return one complete HTML document.
Build the interface from these OpenVibe component definitions. Mark each major component with data-ov-component set to its registry name. Keep the anatomy, state and keyboard behavior described by the definition.
navbar — The site identity and navigation: the brand as one button, the menu button at the right, the person last. Parts: brand, links, actions. Props: lead:string, links:link[], actions:action[], active:string. States: default, menu-open, scrolled. Tokens: color.bg.raised, color.text.primary, size.tap. Keyboard-aware: yes; outside tap closes: yes; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: OpenVibeNavbar with lead and action slots. Android: SurfaceContainer — Use a TopAppBar with navigationIcon and actions slots; place overflow destinations in a modal menu. iOS: Use a toolbar with leading and trailing ToolbarItems, and a Menu for overflow.
menu — One navigation sheet: Here, Feed, Vibe with Chat · Agents, Chat and You, with the pressed button flying to its tab. Parts: trigger, places, search, content. Props: open:boolean, person:person?, places:link[]. States: closed, opening, open, signed-out. Tokens: color.bg.raised, color.line.strong, size.tap. Keyboard-aware: yes; outside tap closes: yes; scroll lock: yes; reduced motion: Remove movement; keep the state change. Web: OpenVibeNavbar menu and You home. Android: SurfaceContainerHigh — Use ModalNavigationDrawer with a You header and app rows. iOS: Use a sheet with a NavigationStack and You header.
you-home — The personal starting view inside the menu. Parts: identity, shortcuts, settings. Props: person:person?, shortcuts:link[]. States: signed-in, signed-out, loading. Tokens: color.bg.raised, color.text.secondary, size.tap. Keyboard-aware: yes; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: Menu You panel. Android: SurfaceContainerHigh — Use a Column of ListItem shortcuts under the account identity. iOS: Use a List with account identity and destination sections.
dock — Persistent place for the current task, clear of the phone app bar and keyboard. Parts: surface, content, action. Props: content:string, action:action, busy:boolean. States: ready, busy, disabled. Tokens: color.bg.raised, color.line.strong, size.tap. Keyboard-aware: yes; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: kit.dock({ action, name, placeholder, label }). Android: SurfaceContainer — Use Scaffold.bottomBar and imePadding; keep the primary action in a 48 dp control. iOS: Use safeAreaInset(edge: .bottom) with keyboard avoidance.
dock-tabs — The phone destinations attached to the bottom app bar. Parts: tab, selection. Props: items:link[], active:string. States: default, selected, pressed. Tokens: color.accent.strong, color.text.muted, size.tap. Keyboard-aware: yes; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: OpenVibeAppbar from the site navigation. Android: SurfaceContainer — Reference: OvTabs in OpenVibe.Link's Android app (android/app/src/main/java/network/openvibe/kit/OvKit.kt). Use NavigationBar with NavigationBarItem and selected state. iOS: Use TabView with system tab items.
form-controls — OpenVibe's own checkbox, radio, switch, field and button on every site: drawn by the system, in the site's colours, with motion that follows the person. Parts: box, ring, switch, field, button. Props: checked:boolean, indeterminate:boolean, disabled:boolean, role:"switch"?. States: off, on, mixed, hover, pressed, focused, disabled. Tokens: color.accent, color.bg.raised, size.tap. Keyboard-aware: no; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: <input type="checkbox" role="switch"> (ov-forms.css draws every box, radio, switch, field and button; data-ov-native keeps the browser's). Android: Checkbox / RadioButton / Switch — Use Material 3 Checkbox, RadioButton and Switch with the theme's primary colour; animate the state change. iOS: Use Toggle with .switch or .checkbox style and the accent tint; keep the default state animation.
search-field — One search field for every site: a pill with suggestions, recent searches and a ghost completion. Parts: mark, field, ghost, clear, key, list. Props: action:url, name:string, source:url, examples:string[], recent:boolean. States: idle, focused, typing, suggesting, empty. Tokens: color.bg.raised, color.accent, size.tap. Keyboard-aware: yes; outside tap closes: yes; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: <input name="q" data-ov-searchbox="/api/v1/suggest" data-ov-examples="streams|clips">. Android: SearchBar — Use SearchBar with SearchBarDefaults.InputField; suggestions in the expanded view and recent searches while it is empty. iOS: Use .searchable with searchSuggestions; recent searches as suggestions while the field is empty.
thread-composer — A multiline message field with Options, attachments and send or stop. Parts: field, options, send. Props: action:url, placeholder:string, options:action[], attach:boolean, busy:boolean. States: empty, composing, uploading, busy. Tokens: color.bg.raised, color.text.primary, size.tap. Keyboard-aware: yes; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: thread.composer({ action, placeholder, attach }). Android: SurfaceContainerHigh — Use an OutlinedTextField, Options icon button and send or stop button; imePadding on the dock. iOS: Use TextEditor with an Options Menu and send or stop Button above the keyboard.
chat — A conversation: messages as room lines or bubbles, each with its actions in one cluster at its corner, and the box that sends, replies and edits. Parts: messages, actions, edited, bar, composer. Props: messages:message[], view:"room" | "bubbles", me:id, actions:id[] | (message, { mine }) => id[], onAction:function. States: default, hover, acting, replying, editing, edited. Tokens: color.bg.raised, color.text.muted, color.accent, size.tap. Keyboard-aware: yes; outside tap closes: yes; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: OVMessages.render(list, { messages, view, me, actions, onAction }); OpenVibeComposer.mount(box, { preset: 'chat' }) with .reply() and .edit(). Android: SurfaceContainerHigh — A LazyColumn of messages; a long press opens the actions as a menu anchored at the message; the composer sits on the bottom bar with a reply or edit strip above it (imePadding). iOS: A List of messages with a contextMenu for the actions; the composer above the keyboard with a reply or edit strip.
sheet — A modal task surface: one heading, one close action and scrollable content. Parts: handle, header, body. Props: title:string, open:boolean, body:content. States: closed, opening, open, closing. Tokens: color.bg.raised, color.line.strong, radius.lg. Keyboard-aware: yes; outside tap closes: yes; scroll lock: yes; reduced motion: Remove movement; keep the state change. Web: kit.sheet({ id, title, body }). Android: SurfaceContainerHigh — Use ModalBottomSheet with a heading, close control and sheet state. iOS: Use .sheet with a NavigationStack and a toolbar close button.
popover — A small anchored set of choices that closes on outside tap. Parts: trigger, choices. Props: label:string, items:action[], open:boolean. States: closed, open, selected. Tokens: color.bg.raised, color.line.strong, size.tap. Keyboard-aware: yes; outside tap closes: yes; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: kit.more({ label, items }). Android: SurfaceContainerHigh — Use DropdownMenu anchored to the trigger. iOS: Use Menu attached to the trigger Button.
keyboard — Shared focus, Escape and inset rules for controls near the screen edge. Parts: focus, inset, dismiss. Props: focused:boolean, returnFocus:string?. States: idle, keyboard-open, dismissed. Tokens: size.tap, space.md. Keyboard-aware: yes; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: Shared focus and form handling. Android: Surface — Use WindowInsets.ime and bringIntoViewRequester for focused fields. iOS: Use safeAreaInset and FocusState; scroll the focused field into view.
kit-row — One tappable item with identity, supporting text and a trailing fact or action. Parts: mark, text, trail. Props: title:string, sub:string?, href:url?, mark:string?, trail:string?. States: default, hover, focused, unread. Tokens: color.bg.raised, color.text.primary, size.tap. Keyboard-aware: no; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: kit.row({ title, sub, href, mark, trail }). Android: SurfaceContainer — Reference: OvRow in OpenVibe.Link's Android app (android/app/src/main/java/network/openvibe/kit/OvKit.kt). Use ListItem with headlineContent, supportingContent and trailingContent. iOS: Use an HStack row inside a List with a full-row tap target.
kit-card — One content object with media, title and context. Parts: media, title, meta. Props: title:string, href:url, image:url?, badge:string?. States: default, hover, focused, loading. Tokens: color.bg.raised, color.text.primary, radius.md. Keyboard-aware: no; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: kit.card({ title, href, image, badge }). Android: SurfaceContainer — Reference: OvCard in OpenVibe.Link's Android app (android/app/src/main/java/network/openvibe/kit/OvKit.kt). Use Card with a single onClick and semantic title. iOS: Use a Button wrapping a card-shaped VStack.
kit-section — A named group with an optional note and count. Parts: heading, note, body. Props: title:string, note:string?, body:content. States: default, empty. Tokens: color.bg.raised, color.text.primary, space.lg. Keyboard-aware: no; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: kit.section({ title, note, body }). Android: Surface — Reference: OvSection in OpenVibe.Link's Android app (android/app/src/main/java/network/openvibe/kit/OvKit.kt). Use a Column with a heading and grouped content. iOS: Use a Section with a header and optional footer note.
empty-state — A truthful explanation and one next action when a group has no items. Parts: glyph, title, action. Props: title:string, text:string?, action:action?. States: empty, loading-resolved. Tokens: color.text.muted, color.accent.strong, size.tap. Keyboard-aware: no; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: kit.empty({ title, text, action }). Android: Surface — Reference: OvEmpty in OpenVibe.Link's Android app (android/app/src/main/java/network/openvibe/kit/OvKit.kt). Use a Column with icon, title and one Button. iOS: Use ContentUnavailableView with one action Button.
switch-row — One setting with a label, explanation and on or off control. Parts: label, hint, switch. Props: name:string, label:string, hint:string?, on:boolean. States: off, on, disabled. Tokens: color.bg.raised, color.text.primary, size.tap. Keyboard-aware: no; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: kit.switchRow({ name, label, hint, on }). Android: Surface — Use a ListItem with a Material 3 Switch trailing control. iOS: Use Toggle with a supporting text label.
segmented-control — A small exclusive choice set with a visible current value. Parts: label, segments. Props: name:string, label:string, options:choice[], value:string. States: default, selected, focused. Tokens: color.accent.strong, color.text.primary, size.tap. Keyboard-aware: no; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: kit.seg({ name, label, options, value }). Android: SecondaryContainer — Use SingleChoiceSegmentedButtonRow. iOS: Use Picker with .segmented style.
upload-progress — A file transfer with a truthful determinate meter and cancel action. Parts: file, meter, cancel. Props: name:string, totalBytes:number, sentBytes:number, cancellable:boolean. States: queued, uploading, complete, failed, cancelled. Tokens: color.accent.strong, color.text.primary, size.tap. Keyboard-aware: no; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: Shared upload control and progress meter. Android: SurfaceContainer — Use LinearProgressIndicator(progress) with state text and cancel IconButton. iOS: Use ProgressView(value:total:) with a cancel Button.
ai-choice — The selected AI model as a compact choice that opens the model picker. Parts: icon, name, chevron. Props: model:string, options:choice[], disabled:boolean. States: default, open, disabled. Tokens: color.bg.raised, color.accent.strong, size.tap. Keyboard-aware: yes; outside tap closes: yes; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: .ov-ai-choice model chip. Android: SecondaryContainer — Use an AssistChip that opens a ModalBottomSheet with model choices. iOS: Use a Menu with a Label and selected model checkmark.
motion-tokens — The four shared durations and curves that give movement one pace. Parts: duration, curve. Props: duration:token, curve:token. States: auto, reduced. Tokens: --ov-dur-1, --ov-dur-2, --ov-dur-3, --ov-dur-4, --ov-ease-out, --ov-ease-spring, --ov-ease-in-out. Keyboard-aware: no; outside tap closes: no; scroll lock: no; reduced motion: Duration becomes zero for decorative motion. Web: --ov-dur-1..4 and --ov-ease-out/-spring/-in-out. Android: Surface — Use MotionDuration tokens with reducedMotion from accessibility settings. iOS: Use the same durations with accessibilityReduceMotion.
pop-motion — The shared small-scale entrance for a menu or affordance. Parts: object, origin. Props: open:boolean. States: closed, open. Tokens: --ov-dur-2, --ov-ease-spring. Keyboard-aware: no; outside tap closes: no; scroll lock: no; reduced motion: Crossfade without scale. Web: OpenVibeNavbar.pop. Android: Surface — Animate scale and alpha with the spring token; reduced motion uses alpha only. iOS: Use scale and opacity with the spring token; reduced motion uses opacity only.
sheet-motion — The bottom sheet entrance and exit without moving underlying content. Parts: surface, scrim. Props: open:boolean. States: closed, opening, open, closing. Tokens: --ov-dur-3, --ov-ease-out. Keyboard-aware: no; outside tap closes: no; scroll lock: yes; reduced motion: Crossfade the sheet and scrim. Web: kit.sheet and ovk-sheet motion. Android: SurfaceContainerHigh — Use ModalBottomSheet sheetState animation with reduced-motion fallback. iOS: Use native sheet presentation; respect accessibilityReduceMotion.
menu-motion — The navigation menu entrance tied to its trigger. Parts: panel, trigger. Props: open:boolean. States: closed, opening, open, closing. Tokens: --ov-dur-2, --ov-ease-out. Keyboard-aware: no; outside tap closes: yes; scroll lock: no; reduced motion: Reveal immediately without translation. Web: OpenVibeNavbar menu motion. Android: SurfaceContainerHigh — Use ModalNavigationDrawer animation; reduce motion when requested. iOS: Use a sheet presentation with reduced-motion support.

Edit one existing generated design. Return one complete HTML document and nothing else.

The person's instruction: {your instruction}

The current document is between the markers. Keep its theme, its content and its structure unless the instruction asks otherwise.

<<<CURRENT_DESIGN
{the current page}
CURRENT_DESIGN>>>

Use ONLY these theme CSS custom properties for every colour: {the theme's colour variables}. Do not add scripts, event-handler attributes, links, web fonts, remote images or any external request. Mobile first.

Keep using the OpenVibe component registry. Mark each major part with data-ov-component set to its registry name.
navbar — The site identity and navigation: the brand as one button, the menu button at the right, the person last. Parts: brand, links, actions. Props: lead:string, links:link[], actions:action[], active:string. States: default, menu-open, scrolled. Tokens: color.bg.raised, color.text.primary, size.tap. Keyboard-aware: yes; outside tap closes: yes; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: OpenVibeNavbar with lead and action slots. Android: SurfaceContainer — Use a TopAppBar with navigationIcon and actions slots; place overflow destinations in a modal menu. iOS: Use a toolbar with leading and trailing ToolbarItems, and a Menu for overflow.
menu — One navigation sheet: Here, Feed, Vibe with Chat · Agents, Chat and You, with the pressed button flying to its tab. Parts: trigger, places, search, content. Props: open:boolean, person:person?, places:link[]. States: closed, opening, open, signed-out. Tokens: color.bg.raised, color.line.strong, size.tap. Keyboard-aware: yes; outside tap closes: yes; scroll lock: yes; reduced motion: Remove movement; keep the state change. Web: OpenVibeNavbar menu and You home. Android: SurfaceContainerHigh — Use ModalNavigationDrawer with a You header and app rows. iOS: Use a sheet with a NavigationStack and You header.
you-home — The personal starting view inside the menu. Parts: identity, shortcuts, settings. Props: person:person?, shortcuts:link[]. States: signed-in, signed-out, loading. Tokens: color.bg.raised, color.text.secondary, size.tap. Keyboard-aware: yes; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: Menu You panel. Android: SurfaceContainerHigh — Use a Column of ListItem shortcuts under the account identity. iOS: Use a List with account identity and destination sections.
dock — Persistent place for the current task, clear of the phone app bar and keyboard. Parts: surface, content, action. Props: content:string, action:action, busy:boolean. States: ready, busy, disabled. Tokens: color.bg.raised, color.line.strong, size.tap. Keyboard-aware: yes; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: kit.dock({ action, name, placeholder, label }). Android: SurfaceContainer — Use Scaffold.bottomBar and imePadding; keep the primary action in a 48 dp control. iOS: Use safeAreaInset(edge: .bottom) with keyboard avoidance.
dock-tabs — The phone destinations attached to the bottom app bar. Parts: tab, selection. Props: items:link[], active:string. States: default, selected, pressed. Tokens: color.accent.strong, color.text.muted, size.tap. Keyboard-aware: yes; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: OpenVibeAppbar from the site navigation. Android: SurfaceContainer — Reference: OvTabs in OpenVibe.Link's Android app (android/app/src/main/java/network/openvibe/kit/OvKit.kt). Use NavigationBar with NavigationBarItem and selected state. iOS: Use TabView with system tab items.
form-controls — OpenVibe's own checkbox, radio, switch, field and button on every site: drawn by the system, in the site's colours, with motion that follows the person. Parts: box, ring, switch, field, button. Props: checked:boolean, indeterminate:boolean, disabled:boolean, role:"switch"?. States: off, on, mixed, hover, pressed, focused, disabled. Tokens: color.accent, color.bg.raised, size.tap. Keyboard-aware: no; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: <input type="checkbox" role="switch"> (ov-forms.css draws every box, radio, switch, field and button; data-ov-native keeps the browser's). Android: Checkbox / RadioButton / Switch — Use Material 3 Checkbox, RadioButton and Switch with the theme's primary colour; animate the state change. iOS: Use Toggle with .switch or .checkbox style and the accent tint; keep the default state animation.
search-field — One search field for every site: a pill with suggestions, recent searches and a ghost completion. Parts: mark, field, ghost, clear, key, list. Props: action:url, name:string, source:url, examples:string[], recent:boolean. States: idle, focused, typing, suggesting, empty. Tokens: color.bg.raised, color.accent, size.tap. Keyboard-aware: yes; outside tap closes: yes; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: <input name="q" data-ov-searchbox="/api/v1/suggest" data-ov-examples="streams|clips">. Android: SearchBar — Use SearchBar with SearchBarDefaults.InputField; suggestions in the expanded view and recent searches while it is empty. iOS: Use .searchable with searchSuggestions; recent searches as suggestions while the field is empty.
thread-composer — A multiline message field with Options, attachments and send or stop. Parts: field, options, send. Props: action:url, placeholder:string, options:action[], attach:boolean, busy:boolean. States: empty, composing, uploading, busy. Tokens: color.bg.raised, color.text.primary, size.tap. Keyboard-aware: yes; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: thread.composer({ action, placeholder, attach }). Android: SurfaceContainerHigh — Use an OutlinedTextField, Options icon button and send or stop button; imePadding on the dock. iOS: Use TextEditor with an Options Menu and send or stop Button above the keyboard.
chat — A conversation: messages as room lines or bubbles, each with its actions in one cluster at its corner, and the box that sends, replies and edits. Parts: messages, actions, edited, bar, composer. Props: messages:message[], view:"room" | "bubbles", me:id, actions:id[] | (message, { mine }) => id[], onAction:function. States: default, hover, acting, replying, editing, edited. Tokens: color.bg.raised, color.text.muted, color.accent, size.tap. Keyboard-aware: yes; outside tap closes: yes; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: OVMessages.render(list, { messages, view, me, actions, onAction }); OpenVibeComposer.mount(box, { preset: 'chat' }) with .reply() and .edit(). Android: SurfaceContainerHigh — A LazyColumn of messages; a long press opens the actions as a menu anchored at the message; the composer sits on the bottom bar with a reply or edit strip above it (imePadding). iOS: A List of messages with a contextMenu for the actions; the composer above the keyboard with a reply or edit strip.
sheet — A modal task surface: one heading, one close action and scrollable content. Parts: handle, header, body. Props: title:string, open:boolean, body:content. States: closed, opening, open, closing. Tokens: color.bg.raised, color.line.strong, radius.lg. Keyboard-aware: yes; outside tap closes: yes; scroll lock: yes; reduced motion: Remove movement; keep the state change. Web: kit.sheet({ id, title, body }). Android: SurfaceContainerHigh — Use ModalBottomSheet with a heading, close control and sheet state. iOS: Use .sheet with a NavigationStack and a toolbar close button.
popover — A small anchored set of choices that closes on outside tap. Parts: trigger, choices. Props: label:string, items:action[], open:boolean. States: closed, open, selected. Tokens: color.bg.raised, color.line.strong, size.tap. Keyboard-aware: yes; outside tap closes: yes; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: kit.more({ label, items }). Android: SurfaceContainerHigh — Use DropdownMenu anchored to the trigger. iOS: Use Menu attached to the trigger Button.
keyboard — Shared focus, Escape and inset rules for controls near the screen edge. Parts: focus, inset, dismiss. Props: focused:boolean, returnFocus:string?. States: idle, keyboard-open, dismissed. Tokens: size.tap, space.md. Keyboard-aware: yes; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: Shared focus and form handling. Android: Surface — Use WindowInsets.ime and bringIntoViewRequester for focused fields. iOS: Use safeAreaInset and FocusState; scroll the focused field into view.
kit-row — One tappable item with identity, supporting text and a trailing fact or action. Parts: mark, text, trail. Props: title:string, sub:string?, href:url?, mark:string?, trail:string?. States: default, hover, focused, unread. Tokens: color.bg.raised, color.text.primary, size.tap. Keyboard-aware: no; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: kit.row({ title, sub, href, mark, trail }). Android: SurfaceContainer — Reference: OvRow in OpenVibe.Link's Android app (android/app/src/main/java/network/openvibe/kit/OvKit.kt). Use ListItem with headlineContent, supportingContent and trailingContent. iOS: Use an HStack row inside a List with a full-row tap target.
kit-card — One content object with media, title and context. Parts: media, title, meta. Props: title:string, href:url, image:url?, badge:string?. States: default, hover, focused, loading. Tokens: color.bg.raised, color.text.primary, radius.md. Keyboard-aware: no; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: kit.card({ title, href, image, badge }). Android: SurfaceContainer — Reference: OvCard in OpenVibe.Link's Android app (android/app/src/main/java/network/openvibe/kit/OvKit.kt). Use Card with a single onClick and semantic title. iOS: Use a Button wrapping a card-shaped VStack.
kit-section — A named group with an optional note and count. Parts: heading, note, body. Props: title:string, note:string?, body:content. States: default, empty. Tokens: color.bg.raised, color.text.primary, space.lg. Keyboard-aware: no; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: kit.section({ title, note, body }). Android: Surface — Reference: OvSection in OpenVibe.Link's Android app (android/app/src/main/java/network/openvibe/kit/OvKit.kt). Use a Column with a heading and grouped content. iOS: Use a Section with a header and optional footer note.
empty-state — A truthful explanation and one next action when a group has no items. Parts: glyph, title, action. Props: title:string, text:string?, action:action?. States: empty, loading-resolved. Tokens: color.text.muted, color.accent.strong, size.tap. Keyboard-aware: no; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: kit.empty({ title, text, action }). Android: Surface — Reference: OvEmpty in OpenVibe.Link's Android app (android/app/src/main/java/network/openvibe/kit/OvKit.kt). Use a Column with icon, title and one Button. iOS: Use ContentUnavailableView with one action Button.
switch-row — One setting with a label, explanation and on or off control. Parts: label, hint, switch. Props: name:string, label:string, hint:string?, on:boolean. States: off, on, disabled. Tokens: color.bg.raised, color.text.primary, size.tap. Keyboard-aware: no; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: kit.switchRow({ name, label, hint, on }). Android: Surface — Use a ListItem with a Material 3 Switch trailing control. iOS: Use Toggle with a supporting text label.
segmented-control — A small exclusive choice set with a visible current value. Parts: label, segments. Props: name:string, label:string, options:choice[], value:string. States: default, selected, focused. Tokens: color.accent.strong, color.text.primary, size.tap. Keyboard-aware: no; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: kit.seg({ name, label, options, value }). Android: SecondaryContainer — Use SingleChoiceSegmentedButtonRow. iOS: Use Picker with .segmented style.
upload-progress — A file transfer with a truthful determinate meter and cancel action. Parts: file, meter, cancel. Props: name:string, totalBytes:number, sentBytes:number, cancellable:boolean. States: queued, uploading, complete, failed, cancelled. Tokens: color.accent.strong, color.text.primary, size.tap. Keyboard-aware: no; outside tap closes: no; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: Shared upload control and progress meter. Android: SurfaceContainer — Use LinearProgressIndicator(progress) with state text and cancel IconButton. iOS: Use ProgressView(value:total:) with a cancel Button.
ai-choice — The selected AI model as a compact choice that opens the model picker. Parts: icon, name, chevron. Props: model:string, options:choice[], disabled:boolean. States: default, open, disabled. Tokens: color.bg.raised, color.accent.strong, size.tap. Keyboard-aware: yes; outside tap closes: yes; scroll lock: no; reduced motion: Remove movement; keep the state change. Web: .ov-ai-choice model chip. Android: SecondaryContainer — Use an AssistChip that opens a ModalBottomSheet with model choices. iOS: Use a Menu with a Label and selected model checkmark.
motion-tokens — The four shared durations and curves that give movement one pace. Parts: duration, curve. Props: duration:token, curve:token. States: auto, reduced. Tokens: --ov-dur-1, --ov-dur-2, --ov-dur-3, --ov-dur-4, --ov-ease-out, --ov-ease-spring, --ov-ease-in-out. Keyboard-aware: no; outside tap closes: no; scroll lock: no; reduced motion: Duration becomes zero for decorative motion. Web: --ov-dur-1..4 and --ov-ease-out/-spring/-in-out. Android: Surface — Use MotionDuration tokens with reducedMotion from accessibility settings. iOS: Use the same durations with accessibilityReduceMotion.
pop-motion — The shared small-scale entrance for a menu or affordance. Parts: object, origin. Props: open:boolean. States: closed, open. Tokens: --ov-dur-2, --ov-ease-spring. Keyboard-aware: no; outside tap closes: no; scroll lock: no; reduced motion: Crossfade without scale. Web: OpenVibeNavbar.pop. Android: Surface — Animate scale and alpha with the spring token; reduced motion uses alpha only. iOS: Use scale and opacity with the spring token; reduced motion uses opacity only.
sheet-motion — The bottom sheet entrance and exit without moving underlying content. Parts: surface, scrim. Props: open:boolean. States: closed, opening, open, closing. Tokens: --ov-dur-3, --ov-ease-out. Keyboard-aware: no; outside tap closes: no; scroll lock: yes; reduced motion: Crossfade the sheet and scrim. Web: kit.sheet and ovk-sheet motion. Android: SurfaceContainerHigh — Use ModalBottomSheet sheetState animation with reduced-motion fallback. iOS: Use native sheet presentation; respect accessibilityReduceMotion.
menu-motion — The navigation menu entrance tied to its trigger. Parts: panel, trigger. Props: open:boolean. States: closed, opening, open, closing. Tokens: --ov-dur-2, --ov-ease-out. Keyboard-aware: no; outside tap closes: yes; scroll lock: no; reduced motion: Reveal immediately without translation. Web: OpenVibeNavbar menu motion. Android: SurfaceContainerHigh — Use ModalNavigationDrawer animation; reduce motion when requested. iOS: Use a sheet presentation with reduced-motion support.

You draw icons for OpenVibe's glyph set. Every glyph is the inside of an SVG with viewBox "0 0 24 24":
strokes only (the page draws them 2 units wide, round caps and joins, in the text colour), at most 6 shapes from
path, circle, ellipse, rect, line and polyline, every coordinate between 1 and 23, nothing filled, no transforms.
Simple, centred on (12, 12), filling about 3 to 21 of the box, with at least 2.5 units between parallel lines so it
reads at 16 px, in the hand of a clean line icon set. A dot is a zero-length line ("M12 12h.01"). Each candidate is a
different idea, not the same drawing moved. Each candidate also has its solid twin for small sizes (16 px): the same
idea as filled shapes, a hole cut with fill-rule="evenodd" on a path, a part that has to stay a line (a handle, a
stem, a slash) as class="ln"; no other attributes, at most 6 shapes. Answer with JSON only:
{"candidates": [{"line": "<path d=\"…\"/>", "solid": "<path d=\"…\"/>"}, …]} with 4 different candidates.

The set you are drawing for (match this hand: weights, corner radii, how much of the 24 box it fills, how few lines):
user: <circle cx="12" cy="7.4" r="3.8"/><path d="M4.3 20.5c0-3.9 3.4-6.6 7.7-6.6s7.7 2.6 7.7 6.6"/>
camera: <path d="M3.5 8h3.4l1.8-2.8h6.6L17.1 8h3.4v11.5h-17Z"/><circle cx="12" cy="13.3" r="3.4"/>
bell: <path d="M6 14.6V9.5a6.1 6.1 0 0 1 12.2 0v5.1l1.5 2.1h-15.3ZM10 18.7a2.1 2.1 0 0 0 4 0"/>
search: <circle cx="10.6" cy="10.6" r="7"/><path d="M20.4 20.4l-4.5-4.5"/>
heart: <path d="M11.9 20.3s-8.1-5.1-8.1-11.6a4.6 4.6 0 0 1 8.1-3A4.6 4.6 0 0 1 20 9.2c0 6.5-8.1 11.6-8.1 11.6Z"/>
gear: <circle cx="12" cy="12.1" r="2.3"/><path d="M17.6 14.3a1.3 1.3 0 0 0 0.2 1.5l0.1 0.1a1.5 1.5 0 1 1-2.4 2.4l-0.1-0.1a1.3 1.3 0 0 0-1.5-0.2a1.3 1.3 0 0 0-0.8 1.3V18.8a1.5 1.5 0 1 1-3.4 0v-0.1a1.3 1.3 0 0 0-0.9-1.3a1.3 1.3 0 0 0-1.5 0.2l-0.1 0.1a1.5 1.5 0 1 1-2.4-2.4l0.1-0.1a1.3 1.3 0 0 0 0.2-1.5a1.3 1.3 0 0 0-1.3-0.8H5.4a1.5 1.5 0 1 1 0-3.4h0.1a1.3 1.3 0 0 0 1.3-0.9a1.3 1.3 0 0 0-0.2-1.5l-0.1-0.1a1.5 1.5 0 1 1 2.4-2.4l0.1 0.1a1.3 1.3 0 0 0 1.5 0.2H9.8a1.3 1.3 0 0 0 0.8-1.3V5.4a1.5 1.5 0 1 1 3.4 0v0.1a1.3 1.3 0 0 0 0.8 1.3a1.3 1.3 0 0 0 1.5-0.2l0.1-0.1a1.5 1.5 0 1 1 2.4 2.4l-0.1 0.1a1.3 1.3 0 0 0-0.2 1.5V9.8a1.3 1.3 0 0 0 1.3 0.8H18.7a1.5 1.5 0 1 1 0 3.4h-0.1a1.3 1.3 0 0 0-1.3 0.8Z"/>
calendar: <rect x="4" y="5.5" width="16" height="15" rx="2"/><path d="M4 10.5h16M9 3.5v4M15 3.5v4"/>
megaphone: <path d="M3.6 9.5v4a1 1 0 0 0 1 1H7.1l9 4.5v-15L7.1 8.5H4.5a1 1 0 0 0-1 1Z"/><path d="M7.1 14.5l1.3 5h2.4L10.1 15.1M19.1 9a3.2 3.2 0 0 1 0 5"/>
compass: <circle cx="12" cy="12" r="8.5"/><path d="m15.6 8.4-2.1 5.1-5.1 2.1 2.1-5.1Z"/>
mug: <path d="M4.8 9.1h11v7a4 4 0 0 1-4 4h-3a4 4 0 0 1-4-4Z"/><path d="M15.8 10.5H17.3a2.5 2.5 0 0 1 0 5h-1.5M8.3 3.5c-0.8 1 0.8 2 0 3M11.8 3.5c-0.8 1 0.8 2 0 3"/>
thumbs-up: <path d="M7.3 10.4v9.6H4.8a1 1 0 0 1-1-1v-7.6a1 1 0 0 1 1-1Z"/><path d="M7.3 10.4L10.9 3.3a2.2 2.2 0 0 1 2.5 2.6L12.7 9.4H18.5a2 2 0 0 1 2 2.4l-1.3 6.6a2 2 0 0 1-2 1.6H7.3"/>
link-off: <path d="M10 13.8a4 4 0 0 0 5.6 0l2.9-2.9a4 4 0 0 0-5.6-5.6l-1 1M13.8 10a4 4 0 0 0-5.6 0l-2.9 2.9a4 4 0 0 0 5.6 5.6l1-1"/><path d="M3.6 3.6l16.7 16.7"/>

Their solid twins, the way to draw yours (filled shapes, holes cut with fill-rule="evenodd", a part that must stay a line as class="ln"):
bell: <path d="M5.2 15.4V9.6a6.8 6.8 0 0 1 13.7 0v5.7l1.9 2.6H3.3ZM9.7 19.3h4.6a2.3 2.3 0 0 1-4.6 0Z"/>
user: <circle cx="12" cy="6.7" r="4.5"/><path d="M3.5 21c0-4.7 3.8-7.8 8.5-7.8s8.5 3.2 8.5 7.8Z"/>
calendar: <path fill-rule="evenodd" d="M4.1 8.1a2 2 0 0 1 2-2h11.8a2 2 0 0 1 2 2V19.5a2 2 0 0 1-2 2H6.1a2 2 0 0 1-2-2Zm2.2 3.9V19.3h11.4v-7.3Z"/><path class="ln" d="M9 3.9v3.5M15 3.9v3.5"/>
mic: <path d="M8.9 5.8a3.1 3.1 0 0 1 6.2 0V10.8a3.1 3.1 0 0 1-6.2 0Z"/><path class="ln" d="M5.9 10.8a6.1 6.1 0 0 0 12.3 0M12 16.9V20.2"/>
info: <path fill-rule="evenodd" d="M12.9 2.6a9.4 9.4 0 1 0 0 18.7a9.4 9.4 0 0 0 0-18.7ZM11.7 10.5h2.5V16.9h-2.5ZM12.9 6.4a1.5 1.5 0 1 1 0 3a1.5 1.5 0 0 1 0-3Z"/>
pin: <path fill-rule="evenodd" d="M12 2.8a7.1 7.1 0 0 0-7.1 7.1c0 5.5 7.1 11.8 7.1 11.8s7.1-6.3 7.1-11.8A7.1 7.1 0 0 0 12 2.8Zm0 4.5a2.5 2.5 0 1 1 0 5.1a2.5 2.5 0 0 1 0-5.1Z"/>

The icon: "{name}". What it stands for: {what it is for}