fix(ui): calibrate compact indicators and launcher geometry

Use a full 24px badge surface, 14px keyboard hints, 18px status pills with opt-in short-label emphasis, and 72px launcher geometry with 11px monospace text. Align light switch, scrollbar, hint, badge and launcher surfaces while retaining other theme modes and legacy Appearance overrides. Add a real inline-controls Lab composition. The product's deliberate compact Hi-to-Hello interaction remains intact.

Validation: design-system:check; 19 focused Appearance regressions including old-payload round trips; check:web with all theme audits and type checking. Native visual checks pending desktop auto-rebuild. Four remote scenarios not interactively exercised.

Author: kev1n77

design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx

@@ -618,7 +618,7 @@ export function ComponentDetailPage({
       return `import { Icon, SegmentedControl } from "@openbitfun/ui";\n\n<SegmentedControl\n  size="md"\n  aria-label="${t("components.preview.segmentedLabel")}"\n  defaultValue="${defaultMode}"\n  onValueChange={setMode}\n  options={[\n    { icon: <Icon name="session" />, label: "${t("components.preview.segmentedChat")}", value: "chat" },\n    { label: "${t("components.preview.segmentedAgent")}", value: "agent" },\n  ]}\n/>`;
     }
     if (component.name === "StatusPill") {
-      return `import { Icon, StatusPill } from "@openbitfun/ui";\n\n<StatusPill leading={<Icon name="unselected" />} tone="${previewState}">\n  Ask\n</StatusPill>`;
+      return `import { Icon, StatusPill } from "@openbitfun/ui";\n\n<StatusPill emphasis leading={<Icon name="unselected" />} tone="${previewState}">\n  Ask\n</StatusPill>`;
     }
     if (component.name === "Disclosure") {
       const stateProps = previewState === "open" ? " defaultOpen" : previewState === "disabled" ? " disabled" : "";
@@ -1149,6 +1149,7 @@ export function ComponentDetailPage({
     if (component.name === "StatusPill") {
       return (
         <StatusPill
+          emphasis
           leading={<Icon name="unselected" />}
           tone={state as StatusPillTone}
         >

design-system/apps/design-lab/src/pages/PatternsPage.tsx

@@ -35,7 +35,7 @@ import {
   type TokenOverrides,
 } from "@openbitfun/ui";
 import { useI18n, type MessageKey } from "../i18n";
-import { FormTypographyPattern, NestedMenuPattern, ProviderConfigurationPattern, SceneToolbarPattern, WorkspaceConfigurationPattern } from "./ReferencePatterns";
+import { IndicatorsPattern, FormTypographyPattern, NestedMenuPattern, ProviderConfigurationPattern, SceneToolbarPattern, WorkspaceConfigurationPattern } from "./ReferencePatterns";
 
 interface PatternsPageProps {
   colorScheme: ColorScheme;
@@ -80,6 +80,8 @@ export function PatternsPage({ colorScheme, contrast, density, tokenOverrides }:
           <p>{t("patterns.description")}</p>
         </header>
 
+        <IndicatorsPattern />
+
         <PatternSection description={t("patterns.settings.description")} index="01" title={t("patterns.settings.title")}>
           <Card appearance="raised" className="pattern-settings" data-openbitfun-pattern="settings-form" padding="md" radius="md">
             <PageHeader description={t("components.preview.appearanceDescription")} level={3} size="md" title={t("components.preview.appearance")} />

design-system/apps/design-lab/src/pages/ReferencePatterns.tsx

@@ -16,6 +16,8 @@ import {
   MenuPopover,
   MultiSelect,
   NumberInput,
+  NumberBadge,
+  LauncherButton,
   PageHeader,
   SearchField,
   Select,
@@ -36,6 +38,17 @@ import {
 } from "@openbitfun/ui";
 import { useI18n } from "../i18n";
 
+export function IndicatorsPattern() {
+  const { t } = useI18n();
+  const [enabled, setEnabled] = useState(false);
+  return <Toolbar bordered={false} leadingOverflow="scroll" data-openbitfun-pattern="inline-indicators" leading={<>
+    <ToolbarGroup><NumberBadge value={0} /><NumberBadge value={18} /><NumberBadge value="1234" /></ToolbarGroup>
+    <ToolbarGroup><KeyHint icon="Ctrl">K</KeyHint><KeyHint icon={<Icon name="command-mac" />}>K</KeyHint></ToolbarGroup>
+    <ToolbarGroup><StatusPill emphasis leading={<Icon name="unselected" />}>Ask</StatusPill><StatusPill tone="success">{t("patterns.device.online")}</StatusPill></ToolbarGroup>
+    <ToolbarGroup><Switch aria-label={t("patterns.settings.pointer")} checked={enabled} onCheckedChange={setEnabled} /><LauncherButton leadingIcon={<Icon name="session" />}>Hello</LauncherButton></ToolbarGroup>
+  </>} />;
+}
+
 export function FormTypographyPattern() {
   const { t } = useI18n();
   return <Card appearance="subtle" padding="md" data-openbitfun-pattern="form-typography">

design-system/packages/design-tokens/src/system.tokens.json

@@ -180,6 +180,10 @@
       "lineHeight": { "$value": "{lineHeight.tight}" },
       "letterSpacing": { "$value": "{letterSpacing.normal}" }
     },
+    "statusPill": {
+      "$description": "Short status leading: 14px at 11px, scaling with typography.",
+      "lineHeight": { "$type": "number", "$value": 1.2727272727272727 }
+    },
     "fieldHelper": {
       "$description": "Field helper leading: 16px at the default 11px type size, scaling with user typography.",
       "lineHeight": { "$type": "number", "$value": 1.4545454545454546 }
@@ -291,6 +295,13 @@
       }
     },
     "code": {
+      "meta": {
+        "fontFamily": { "$value": "{font.family.mono}" },
+        "fontSize": { "$value": "{font.size.meta}" },
+        "fontWeight": { "$value": "{font.weight.regular}" },
+        "lineHeight": { "$value": "{lineHeight.tight}" },
+        "letterSpacing": { "$value": "{letterSpacing.normal}" }
+      },
       "sm": {
         "fontFamily": { "$value": "{font.family.mono}" },
         "fontSize": { "$value": "{font.size.xs}" },
@@ -618,11 +629,11 @@
     "launcherButton": {
       "$description": "Geometry for a shell-edge launcher with an icon and short label.",
       "$type": "dimension",
-      "minInlineSize": { "$value": "104px" },
+      "minInlineSize": { "$value": "72px" },
       "blockSize": { "$value": "{control.height.md}" },
-      "paddingInline": { "$value": "14px" },
-      "gap": { "$value": "{space.2}" },
-      "iconSize": { "$value": "16px" },
+      "paddingInline": { "$value": "10px" },
+      "gap": { "$value": "{space.1}" },
+      "iconSize": { "$value": "12px" },
       "radius": { "$value": "{radius.lg}" }
     },
     "changeCount": {
@@ -635,7 +646,7 @@
     "statusPill": {
       "$type": "dimension",
       "gap": { "$value": "2px" },
-      "paddingBlock": { "$value": "3px" },
+      "paddingBlock": { "$value": "2px" },
       "paddingInline": { "$value": "6px" },
       "radius": { "$value": "{radius.pill}" },
       "iconSize": { "$value": "14px" }

design-system/packages/design-tokens/tests/contract.test.mjs

@@ -114,7 +114,7 @@ test("StatusPill geometry preserves compact semantic status anatomy", async () =
   const systemDocument = await readSource("system.tokens.json");
 
   assert.equal(tokens["control.statusPill.gap"], "2px");
-  assert.equal(tokens["control.statusPill.paddingBlock"], "3px");
+  assert.equal(tokens["control.statusPill.paddingBlock"], "2px");
   assert.equal(tokens["control.statusPill.paddingInline"], "6px");
   assert.equal(tokens["control.statusPill.iconSize"], "14px");
   assert.equal(systemDocument.control.statusPill.radius.$value, "{radius.pill}");
@@ -145,11 +145,11 @@ test("ActionCard geometry preserves compact and descriptive entry compositions",
 test("LauncherButton geometry preserves the shell-edge action contract", async () => {
   const systemDocument = await readSource("system.tokens.json");
 
-  assert.equal(tokens["control.launcherButton.minInlineSize"], "104px");
+  assert.equal(tokens["control.launcherButton.minInlineSize"], "72px");
   assert.equal(tokens["control.launcherButton.blockSize"], "40px");
-  assert.equal(tokens["control.launcherButton.paddingInline"], "14px");
-  assert.equal(tokens["control.launcherButton.gap"], "8px");
-  assert.equal(tokens["control.launcherButton.iconSize"], "16px");
+  assert.equal(tokens["control.launcherButton.paddingInline"], "10px");
+  assert.equal(tokens["control.launcherButton.gap"], "4px");
+  assert.equal(tokens["control.launcherButton.iconSize"], "12px");
   assert.equal(
     systemDocument.control.launcherButton.radius.$value,
     "{radius.lg}",

design-system/packages/theme-openbitfun/README.md

@@ -79,3 +79,5 @@ in both root and chrome; generic palette projection previously reduced product
 menu labels to secondary text (60%). Explicit imported action colors still win.
 
 Action cards own `color.actionCard.background`: the light entry surface is black at 3% opacity. `surface.subtle` is a transient navy tint and `field.groupBackground` belongs to form groups, so neither represents this persistent action surface. Other modes retain their neutral action surface. Product Appearance preserves explicit legacy neutral-surface overrides in root and chrome.
+
+Compact indicators own `color.numberBadge.background` and `color.keyHint.content` so reference light values (8% fill and 60% text) can coexist with existing dark/contrast values and explicit legacy Appearance overrides. The light Switch off track and resting scrollbar thumb use 10% black; KeyHint and Launcher resting fills use 8%. Long status labels keep content colors; StatusPill emphasis is opt-in.

design-system/packages/theme-openbitfun/src/dark.tokens.json

@@ -19,6 +19,9 @@
     }
   },
   "color": {
+    "numberBadge": {
+      "background": { "$type": "color", "$value": "{color.action.neutral.surface}" }
+    },
     "actionCard": {
       "background": { "$type": "color", "$value": "{color.action.neutral.surface}" }
     },
@@ -60,6 +63,7 @@
       }
     },
     "keyHint": {
+      "content": { "$type": "color", "$value": "{color.content.muted}" },
       "background": { "$type": "color", "$value": "{color.action.neutral.surface}" }
     },
     "scrollbar": {

design-system/packages/theme-openbitfun/src/high-contrast-dark.tokens.json

@@ -19,6 +19,12 @@
     }
   },
   "color": {
+    "keyHint": {
+      "content": { "$type": "color", "$value": "{color.content.muted}" }
+    },
+    "numberBadge": {
+      "background": { "$type": "color", "$value": "{color.action.neutral.surface}" }
+    },
     "actionCard": {
       "background": { "$type": "color", "$value": "{color.action.neutral.surface}" }
     },

design-system/packages/theme-openbitfun/src/high-contrast-light.tokens.json

@@ -19,6 +19,12 @@
     }
   },
   "color": {
+    "keyHint": {
+      "content": { "$type": "color", "$value": "{color.content.muted}" }
+    },
+    "numberBadge": {
+      "background": { "$type": "color", "$value": "{color.action.neutral.surface}" }
+    },
     "actionCard": {
       "background": { "$type": "color", "$value": "{color.action.neutral.surface}" }
     },

design-system/packages/theme-openbitfun/src/light.tokens.json

@@ -19,6 +19,9 @@
     }
   },
   "color": {
+    "numberBadge": {
+      "background": { "$type": "color", "$value": "{color.action.neutral.surfaceHover}" }
+    },
     "actionCard": {
       "background": { "$type": "color", "$value": "rgba(0, 0, 0, 0.03)" }
     },
@@ -60,10 +63,11 @@
       }
     },
     "keyHint": {
-      "background": { "$type": "color", "$value": "{color.action.neutral.surface}" }
+      "content": { "$type": "color", "$value": "{color.content.secondary}" },
+      "background": { "$type": "color", "$value": "{color.action.neutral.surfaceHover}" }
     },
     "scrollbar": {
-      "thumb": { "$type": "color", "$value": "{color.action.neutral.surfaceHover}" },
+      "thumb": { "$type": "color", "$value": "{color.action.neutral.surfacePressed}" },
       "thumbHover": { "$type": "color", "$value": "{color.action.neutral.surfacePressed}" }
     },
     "content": {
@@ -196,7 +200,7 @@
       },
       "launcher": {
         "$description": "Shell-edge launcher states: neutral at rest, then cyan-tinted with cyan content on hover and press.",
-        "background": { "$type": "color", "$value": "{color.action.neutral.surfacePressed}" },
+        "background": { "$type": "color", "$value": "{color.action.neutral.surfaceHover}" },
         "backgroundHover": { "$type": "color", "$value": "color-mix(in srgb, {color.control.highlight.background} 20%, transparent)" },
         "backgroundPressed": { "$type": "color", "$value": "color-mix(in srgb, {color.control.highlight.background} 30%, transparent)" },
         "content": { "$type": "color", "$value": "{color.action.neutral.content}" },
@@ -205,7 +209,7 @@
         "contentDisabled": { "$type": "color", "$value": "{color.action.neutral.contentDisabled}" }
       },
       "switch": {
-        "track": { "$type": "color", "$value": "{ref.color.neutral.250}" },
+        "track": { "$type": "color", "$value": "{color.action.neutral.surfacePressed}" },
         "trackChecked": { "$type": "color", "$value": "{color.control.highlight.background}" },
         "thumb": { "$type": "color", "$value": "{ref.color.neutral.0}" }
       }