diff --git a/ui/atproto/viewers/atproto_byline.js b/ui/atproto/viewers/atproto_byline.js
index 23abf5a..4055de4 100644
--- a/ui/atproto/viewers/atproto_byline.js
+++ b/ui/atproto/viewers/atproto_byline.js
@@ -49,8 +49,8 @@ export class AtprotoByline extends LitElement {
       color: inherit;
     }
     .byline-avatar {
-      width: 22px;
-      height: 22px;
+      width: var(--size-md);
+      height: var(--size-md);
       border-radius: 50%;
       object-fit: cover;
       background: var(--bg-icon, #e8e2d8);
diff --git a/ui/settings/index.css b/ui/settings/index.css
index 35f989a..c3d4f64 100644
--- a/ui/settings/index.css
+++ b/ui/settings/index.css
@@ -240,7 +240,7 @@ summary lucide-icon {
 }
 
 .theme-preview-header {
-  height: 18px;
+  height: var(--size-sm);
   background: var(--bg-header);
 }
 
@@ -341,8 +341,8 @@ summary lucide-icon {
 .toggle-slider::before {
   position: absolute;
   content: "";
-  height: 18px;
-  width: 18px;
+  height: var(--size-sm);
+  width: var(--size-sm);
   left: 3px;
   bottom: 3px;
   background-color: var(--bg-webview);
@@ -747,7 +747,7 @@ wifi-signal {
   display: inline-flex;
   align-items: flex-end;
   gap: 2px;
-  height: 18px;
+  height: var(--size-sm);
   flex-shrink: 0;
 }
 
@@ -789,7 +789,7 @@ wifi-signal span.on {
 }
 
 .wifi-active wifi-signal {
-  height: 22px;
+  height: var(--size-md);
 }
 
 .wifi-active-info {
diff --git a/ui/system/color_picker.css b/ui/system/color_picker.css
index caaf37a..4c62fa4 100644
--- a/ui/system/color_picker.css
+++ b/ui/system/color_picker.css
@@ -121,7 +121,7 @@
 
 .input-group label {
   color: var(--color-text);
-  min-width: 14px;
+  min-width: var(--size-xs);
 }
 
 .input-group input {
diff --git a/ui/system/desktop/desk_swatches.css b/ui/system/desktop/desk_swatches.css
index de2d3ed..2acebab 100644
--- a/ui/system/desktop/desk_swatches.css
+++ b/ui/system/desktop/desk_swatches.css
@@ -10,8 +10,8 @@
 }
 
 .swatch {
-  width: 22px;
-  height: 22px;
+  width: var(--size-md);
+  height: var(--size-md);
   border-radius: 7px 8px 7px 8px;
   border: 1px solid oklch(35% 0.03 105 / 0.18);
   background: var(--swatch);
diff --git a/ui/system/desktop/dock.css b/ui/system/desktop/dock.css
index 611bf59..670b06c 100644
--- a/ui/system/desktop/dock.css
+++ b/ui/system/desktop/dock.css
@@ -226,8 +226,8 @@ body[data-dock-hidden] .dock {
   position: absolute;
   top: 3px;
   right: 3px;
-  min-width: 14px;
-  height: 14px;
+  min-width: var(--size-xs);
+  height: var(--size-xs);
   padding: 0 4px;
   border-radius: 8px;
   background: oklch(66% 0.16 58);
diff --git a/ui/system/desktop/dock_view_chip.css b/ui/system/desktop/dock_view_chip.css
index 15a8be3..34c8388 100644
--- a/ui/system/desktop/dock_view_chip.css
+++ b/ui/system/desktop/dock_view_chip.css
@@ -41,8 +41,8 @@
 }
 
 .fav {
-  width: 14px;
-  height: 14px;
+  width: var(--size-xs);
+  height: var(--size-xs);
   border-radius: 3px;
   background-color: var(--view-fav, oklch(48% 0.12 155));
   background-size: cover;
diff --git a/ui/system/desktop/overview.css b/ui/system/desktop/overview.css
index f4b497e..c9fa48c 100644
--- a/ui/system/desktop/overview.css
+++ b/ui/system/desktop/overview.css
@@ -113,8 +113,8 @@ body[data-overview-open] .overview {
 }
 
 .overview-close {
-  width: 26px;
-  height: 26px;
+  width: var(--size-lg);
+  height: var(--size-lg);
   display: inline-flex;
   align-items: center;
   justify-content: center;
diff --git a/ui/system/desktop/overview_card.css b/ui/system/desktop/overview_card.css
index 35a2a96..04fab15 100644
--- a/ui/system/desktop/overview_card.css
+++ b/ui/system/desktop/overview_card.css
@@ -94,8 +94,8 @@
   position: absolute;
   top: 6px;
   right: 6px;
-  width: 22px;
-  height: 22px;
+  width: var(--size-md);
+  height: var(--size-md);
   border: none;
   border-radius: 50%;
   background: oklch(20% 0.02 105 / 0.55);
diff --git a/ui/system/desktop/palette_results.css b/ui/system/desktop/palette_results.css
index c6e4acb..9e2ccd1 100644
--- a/ui/system/desktop/palette_results.css
+++ b/ui/system/desktop/palette_results.css
@@ -63,8 +63,8 @@
 }
 
 .palette-item-icon {
-  width: 22px;
-  height: 22px;
+  width: var(--size-md);
+  height: var(--size-md);
   display: inline-flex;
   align-items: center;
   justify-content: center;
diff --git a/ui/system/desktop/peers_popover.css b/ui/system/desktop/peers_popover.css
index 5b98430..fbdf1a6 100644
--- a/ui/system/desktop/peers_popover.css
+++ b/ui/system/desktop/peers_popover.css
@@ -59,8 +59,8 @@
 }
 
 .peers-popover-dot {
-  width: 8px;
-  height: 8px;
+  width: var(--size-2xs);
+  height: var(--size-2xs);
   border-radius: 50%;
   background: var(--peer-color, oklch(48% 0.12 155));
   /* Echo the dock-desk-color "lit" treatment. */
diff --git a/ui/system/desktop/repos_popover.css b/ui/system/desktop/repos_popover.css
index a356aa0..22e5bee 100644
--- a/ui/system/desktop/repos_popover.css
+++ b/ui/system/desktop/repos_popover.css
@@ -49,8 +49,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 22px;
-  height: 22px;
+  width: var(--size-md);
+  height: var(--size-md);
   flex-shrink: 0;
   border: none;
   border-radius: 6px;
@@ -100,8 +100,8 @@
 }
 
 .repos-popover-avatar {
-  width: 26px;
-  height: 26px;
+  width: var(--size-lg);
+  height: var(--size-lg);
   flex-shrink: 0;
   color: var(--color-text-tertiary);
 }
diff --git a/ui/system/desktop/topbar.css b/ui/system/desktop/topbar.css
index cd98388..21c3f1a 100644
--- a/ui/system/desktop/topbar.css
+++ b/ui/system/desktop/topbar.css
@@ -114,8 +114,8 @@ body[data-focus="page"] .topbar-page {
 }
 
 .topbar-desk-color {
-  width: 8px;
-  height: 8px;
+  width: var(--size-2xs);
+  height: var(--size-2xs);
   border-radius: 50%;
   background: var(--desk-color, oklch(48% 0.12 155));
   box-shadow: 0 0 6px
@@ -133,7 +133,7 @@ body[data-focus="page"] .topbar-page {
 
 .topbar-divider {
   width: 1px;
-  height: 14px;
+  height: var(--size-xs);
   background: oklch(35% 0.03 105 / 0.18);
   margin: 0 4px;
   flex-shrink: 0;
@@ -144,8 +144,8 @@ body[data-focus="page"] .topbar-page {
 }
 
 .topbar-fav {
-  width: 14px;
-  height: 14px;
+  width: var(--size-xs);
+  height: var(--size-xs);
   border-radius: 3px;
   /* Color square as fallback; JS paints `background-image` with the live
      favicon when available. The color stays visible behind transparent
@@ -208,8 +208,8 @@ body[data-focus="page"] .topbar-page {
 }
 
 .topbar-nav {
-  width: 22px;
-  height: 22px;
+  width: var(--size-md);
+  height: var(--size-md);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -269,8 +269,8 @@ body[data-focus="page"] .topbar-page {
   position: absolute;
   top: 1px;
   right: 1px;
-  min-width: 14px;
-  height: 14px;
+  min-width: var(--size-xs);
+  height: var(--size-xs);
   padding: 0 4px;
   border-radius: 8px;
   background: var(--color-primary);
diff --git a/ui/system/desktop/url_records_popover.js b/ui/system/desktop/url_records_popover.js
index 9fa6074..75b066d 100644
--- a/ui/system/desktop/url_records_popover.js
+++ b/ui/system/desktop/url_records_popover.js
@@ -106,8 +106,8 @@ class UrlRecordsPopover extends LitElement {
       background: var(--bg-hover);
     }
     .avatar {
-      width: 26px;
-      height: 26px;
+      width: var(--size-lg);
+      height: var(--size-lg);
       flex-shrink: 0;
       color: var(--color-text-tertiary);
     }
diff --git a/ui/system/desktop/working.css b/ui/system/desktop/working.css
index 245b305..927c79d 100644
--- a/ui/system/desktop/working.css
+++ b/ui/system/desktop/working.css
@@ -187,7 +187,7 @@ body.popover-open web-view {
 .desk-tile-header {
   /* Hidden by default; only visible on a floating + active tile. */
   display: none;
-  height: 22px;
+  height: var(--size-md);
   align-items: center;
   gap: var(--spacing-md);
   padding: 0 4px 0 10px;
@@ -218,8 +218,8 @@ body.popover-open web-view {
 }
 
 .desk-tile-close {
-  width: 18px;
-  height: 18px;
+  width: var(--size-sm);
+  height: var(--size-sm);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -244,8 +244,8 @@ body.popover-open web-view {
   position: absolute;
   right: 0;
   bottom: 0;
-  width: 14px;
-  height: 14px;
+  width: var(--size-xs);
+  height: var(--size-xs);
   display: none;
   cursor: nwse-resize;
   background: linear-gradient(
diff --git a/ui/system/mediacenter/ambient_view.js b/ui/system/mediacenter/ambient_view.js
index 1dad8d6..445fa38 100644
--- a/ui/system/mediacenter/ambient_view.js
+++ b/ui/system/mediacenter/ambient_view.js
@@ -617,8 +617,8 @@ class AmbientView extends LitElement {
     }
 
     .now-playing-pill .pulse {
-      width: 8px;
-      height: 8px;
+      width: var(--size-2xs);
+      height: var(--size-2xs);
       border-radius: 50%;
       background: var(--color-primary);
       flex-shrink: 0;
diff --git a/ui/system/mobile/pebble.css b/ui/system/mobile/pebble.css
index d01f437..006c66e 100644
--- a/ui/system/mobile/pebble.css
+++ b/ui/system/mobile/pebble.css
@@ -214,8 +214,8 @@
 }
 
 .ambient-favicon {
-  width: 18px;
-  height: 18px;
+  width: var(--size-sm);
+  height: var(--size-sm);
   font-size: var(--font-size-xl);
   line-height: 1;
   object-fit: contain;
@@ -447,8 +447,8 @@
 }
 
 .tab-chip .tab-fav {
-  width: 14px;
-  height: 14px;
+  width: var(--size-xs);
+  height: var(--size-xs);
   object-fit: contain;
   border-radius: 3px;
   flex-shrink: 0;
@@ -645,8 +645,8 @@
 }
 
 .tab-card footer .tab-fav {
-  width: 14px;
-  height: 14px;
+  width: var(--size-xs);
+  height: var(--size-xs);
   object-fit: contain;
   border-radius: 3px;
   flex-shrink: 0;
@@ -662,8 +662,8 @@
   position: absolute;
   top: 6px;
   right: 6px;
-  width: 22px;
-  height: 22px;
+  width: var(--size-md);
+  height: var(--size-md);
   border: none;
   border-radius: 50%;
   background: oklch(20% 0.02 105 / 0.55);
diff --git a/ui/system/mobile/pebble_peek.css b/ui/system/mobile/pebble_peek.css
index 5b0e92e..360af21 100644
--- a/ui/system/mobile/pebble_peek.css
+++ b/ui/system/mobile/pebble_peek.css
@@ -49,8 +49,8 @@
 }
 
 .fav {
-  width: 18px;
-  height: 18px;
+  width: var(--size-sm);
+  height: var(--size-sm);
   object-fit: contain;
   border-radius: 4px;
 }
diff --git a/ui/system/web_view.css b/ui/system/web_view.css
index c856d7b..7ff7af4 100644
--- a/ui/system/web_view.css
+++ b/ui/system/web_view.css
@@ -138,8 +138,8 @@
   position: absolute;
   top: -4px;
   right: -2px;
-  min-width: 14px;
-  height: 14px;
+  min-width: var(--size-xs);
+  height: var(--size-xs);
   border-radius: 7px;
   background: var(--color-primary);
   color: var(--color-text-on-header);
diff --git a/ui/themes/default/index.css b/ui/themes/default/index.css
index e5ecefa..f0b7cbc 100644
--- a/ui/themes/default/index.css
+++ b/ui/themes/default/index.css
@@ -81,6 +81,13 @@
   --size-logo: 3em;
   --size-notification-icon: 2em;
 
+  /* Icon / control box sizes (square, fixed px so they don't scale with text) */
+  --size-2xs: 8px; /* status dots */
+  --size-xs: 14px; /* favicons, small icons */
+  --size-sm: 18px; /* small controls */
+  --size-md: 22px; /* icon buttons, swatches */
+  --size-lg: 26px; /* avatars */
+
   /* ===== Transitions ===== */
   --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --transition-fast: 0.18s var(--ease-out);
diff --git a/ui/themes/lcars/index.css b/ui/themes/lcars/index.css
index 718fc2a..a003b38 100644
--- a/ui/themes/lcars/index.css
+++ b/ui/themes/lcars/index.css
@@ -77,6 +77,13 @@
   --size-logo: 3em;
   --size-notification-icon: 2em;
 
+  /* Icon / control box sizes (square, fixed px so they don't scale with text) */
+  --size-2xs: 8px; /* status dots */
+  --size-xs: 14px; /* favicons, small icons */
+  --size-sm: 18px; /* small controls */
+  --size-md: 22px; /* icon buttons, swatches */
+  --size-lg: 26px; /* avatars */
+
   /* ===== Transitions ===== */
   --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --transition-fast: 0.1s ease;
diff --git a/ui/themes/meadow/index.css b/ui/themes/meadow/index.css
index 445a110..51dbc19 100644
--- a/ui/themes/meadow/index.css
+++ b/ui/themes/meadow/index.css
@@ -79,6 +79,13 @@
   --size-logo: 3em;
   --size-notification-icon: 2em;
 
+  /* Icon / control box sizes (square, fixed px so they don't scale with text) */
+  --size-2xs: 8px; /* status dots */
+  --size-xs: 14px; /* favicons, small icons */
+  --size-sm: 18px; /* small controls */
+  --size-md: 22px; /* icon buttons, swatches */
+  --size-lg: 26px; /* avatars */
+
   /* ===== Transitions ===== */
   --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --transition-fast: 0.2s ease-out;
diff --git a/ui/themes/ocean/index.css b/ui/themes/ocean/index.css
index f1d88cf..2b97436 100644
--- a/ui/themes/ocean/index.css
+++ b/ui/themes/ocean/index.css
@@ -92,6 +92,13 @@
   --size-logo: 3em;
   --size-notification-icon: 2em;
 
+  /* Icon / control box sizes (square, fixed px so they don't scale with text) */
+  --size-2xs: 8px; /* status dots */
+  --size-xs: 14px; /* favicons, small icons */
+  --size-sm: 18px; /* small controls */
+  --size-md: 22px; /* icon buttons, swatches */
+  --size-lg: 26px; /* avatars */
+
   /* ===== Transitions ===== */
   /* A slow tidal drift. */
   --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
diff --git a/ui/themes/winamp/index.css b/ui/themes/winamp/index.css
index 81eefb8..ae16fe3 100644
--- a/ui/themes/winamp/index.css
+++ b/ui/themes/winamp/index.css
@@ -77,6 +77,13 @@
   --size-logo: 3em;
   --size-notification-icon: 2em;
 
+  /* Icon / control box sizes (square, fixed px so they don't scale with text) */
+  --size-2xs: 8px; /* status dots */
+  --size-xs: 14px; /* favicons, small icons */
+  --size-sm: 18px; /* small controls */
+  --size-md: 22px; /* icon buttons, swatches */
+  --size-lg: 26px; /* avatars */
+
   /* ===== Transitions ===== */
   --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --transition-fast: 0.1s ease;