diff --git a/apps/mobile/app/index.tsx b/apps/mobile/app/index.tsx
index 9af0370..c0715a2 100644
--- a/apps/mobile/app/index.tsx
+++ b/apps/mobile/app/index.tsx
@@ -46,7 +46,7 @@ import {
selectInitialSpace,
selectSpace,
} from "../lib/api";
-import { mobileTokens, resolveMobileAppearance } from "../lib/appearance";
+import { mobileShellIconSizes, mobileTokens, resolveMobileAppearance } from "../lib/appearance";
import { autopilotSummary } from "../lib/autopilot";
import { allowFocusPrompt, scheduleFocusPrompt } from "../lib/focus-prompt";
import { t, useI18n } from "../lib/i18n";
@@ -461,7 +461,7 @@ export default function Home() {
@@ -475,7 +475,7 @@ export default function Home() {
})
}
>
-
+
-
+
@@ -610,7 +610,11 @@ export default function Home() {
}}
style={({ pressed }) => [styles.spaceActions, pressed && styles.rowPressed]}
>
-
+
) : null}
@@ -1058,9 +1062,9 @@ function createHomeStyles() {
gap: 12,
},
circleButton: {
- width: 40,
- height: 40,
- borderRadius: 20,
+ width: 44,
+ height: 44,
+ borderRadius: 22,
backgroundColor: native.fillPressed,
alignItems: "center",
justifyContent: "center",
diff --git a/apps/mobile/app/thread.tsx b/apps/mobile/app/thread.tsx
index 086c3ae..4153099 100644
--- a/apps/mobile/app/thread.tsx
+++ b/apps/mobile/app/thread.tsx
@@ -101,7 +101,7 @@ import {
shouldApplyMobileThreadRefresh,
subscribeThread,
} from "../lib/api";
-import { mobileTokens } from "../lib/appearance";
+import { mobileShellIconSizes, mobileTokens } from "../lib/appearance";
import { type MobileArtifactTarget, openMobileArtifact } from "../lib/artifact-open";
import { confirmDeleteBot } from "../lib/bot-lifecycle";
import { cancelFocusPrompt, focusPromptThreadActive } from "../lib/focus-prompt";
@@ -585,7 +585,7 @@ function Thread() {
@@ -594,7 +594,7 @@ function Thread() {
diff --git a/apps/mobile/lib/appearance.ts b/apps/mobile/lib/appearance.ts
index 97232ab..48f9de0 100644
--- a/apps/mobile/lib/appearance.ts
+++ b/apps/mobile/lib/appearance.ts
@@ -60,6 +60,12 @@ export function mobileTokens(
return tokensForAppearance(resolveMobileAppearance(preference, scheme));
}
+/** Header and inbox nav glyphs — aligned with web `--icon-*` scale (~25% larger). */
+export const mobileShellIconSizes = {
+ md: 22,
+ lg: 26,
+} as const;
+
export function subscribeAppearance(listener: () => void): () => void {
listeners.add(listener);
return () => {
diff --git a/apps/web/src/pages/SettingsOverlay.tsx b/apps/web/src/pages/SettingsOverlay.tsx
index d757994..1236e3a 100644
--- a/apps/web/src/pages/SettingsOverlay.tsx
+++ b/apps/web/src/pages/SettingsOverlay.tsx
@@ -195,7 +195,7 @@ export function SettingsOverlay({
: "text-muted-foreground hover:bg-accent hover:text-foreground"
}`}
>
-
+
{item.label}
);
diff --git a/apps/web/src/pages/Shell.tsx b/apps/web/src/pages/Shell.tsx
index 3262b28..ddec27f 100644
--- a/apps/web/src/pages/Shell.tsx
+++ b/apps/web/src/pages/Shell.tsx
@@ -3232,7 +3232,7 @@ export function ShellPage() {
aria-label={t`Browser`}
onClick={() => setPanel(panel === "browser" ? null : "browser")}
data-active={panel === "browser" ? "" : undefined}
- className="app-no-drag rk-touch-target grid h-[30px] w-[34px] place-items-center rounded-[9px] hover:bg-accent data-active:bg-accent"
+ className="app-no-drag rk-touch-target grid size-control-sm min-h-control-sm min-w-control-sm place-items-center rounded-[9px] hover:bg-accent data-active:bg-accent"
>
@@ -3251,7 +3251,7 @@ export function ShellPage() {
}
}}
data-active={panel === "computer" ? "" : undefined}
- className="app-no-drag rk-touch-target grid h-[30px] w-[34px] place-items-center rounded-[9px] hover:bg-accent data-active:bg-accent"
+ className="app-no-drag rk-touch-target grid size-control-sm min-h-control-sm min-w-control-sm place-items-center rounded-[9px] hover:bg-accent data-active:bg-accent"
>
diff --git a/packages/ui-tokens/src/index.ts b/packages/ui-tokens/src/index.ts
index 459745e..e8daadc 100644
--- a/packages/ui-tokens/src/index.ts
+++ b/packages/ui-tokens/src/index.ts
@@ -165,9 +165,9 @@ export const scaleTokens = {
lineHeightBody: "1.5",
lineHeightReading: "1.65",
lineHeightTight: "1.3",
- iconSm: "1rem",
- iconMd: "1.125rem",
- iconLg: "1.25rem",
+ iconSm: "1.25rem",
+ iconMd: "1.375rem",
+ iconLg: "1.5rem",
controlHeightXs: "1.75rem",
controlHeightSm: "2.25rem",
controlHeightMd: "2.5rem",
diff --git a/packages/ui-tokens/src/tokens.css b/packages/ui-tokens/src/tokens.css
index cb1e40f..8644d88 100644
--- a/packages/ui-tokens/src/tokens.css
+++ b/packages/ui-tokens/src/tokens.css
@@ -46,9 +46,9 @@
--line-height-body: 1.5;
--line-height-reading: 1.65;
--line-height-tight: 1.3;
- --icon-sm: 1rem;
- --icon-md: 1.125rem;
- --icon-lg: 1.25rem;
+ --icon-sm: 1.25rem;
+ --icon-md: 1.375rem;
+ --icon-lg: 1.5rem;
--control-height-xs: 1.75rem;
--control-height-sm: 2.25rem;
--control-height-md: 2.5rem;
@@ -108,9 +108,9 @@
--line-height-body: 1.5;
--line-height-reading: 1.65;
--line-height-tight: 1.3;
- --icon-sm: 1rem;
- --icon-md: 1.125rem;
- --icon-lg: 1.25rem;
+ --icon-sm: 1.25rem;
+ --icon-md: 1.375rem;
+ --icon-lg: 1.5rem;
--control-height-xs: 1.75rem;
--control-height-sm: 2.25rem;
--control-height-md: 2.5rem;