From f7fa93e0db566d5213bbc6816612ce950cfa2b44 Mon Sep 17 00:00:00 2001
From: Kirtan Thakkar <kirtan@kiara.tech>
Date: Mon, 2 Nov 2026 19:16:45 +0530
Subject: [PATCH] fix(web): unify toolbar and component sizing, spacing and
 contrast

Toolbars: sm-toolbar and icon-toolbar are now one 34px box with 10px
padding, per-page overrides are gone, and controls sit 8px apart across
Logs, Metrics and Traces.

Contrast: darken the default primary to #5A64DB so white labels pass
4.5:1, use primary-700 for active tabs, raise label and muted text, log
punctuation and dark pagination, and replace opacity on text with tokens.

Components: 28px table footer and row actions, matching button and input
borders, stat tile padding, one-row Alerts tiles with stacked labels,
centred header checkbox, and aligned Settings fields.
---
 web/src/assets/styles/log-highlighting.css    |  7 +-
 web/src/components/DateTime.vue               |  4 +-
 web/src/components/alerts/AddAlert.vue        |  2 +-
 web/src/components/alerts/AlertHistory.vue    |  4 +-
 web/src/components/alerts/AlertList.vue       |  9 +-
 web/src/components/alerts/AlertSummary.vue    |  2 +-
 .../alerts/AlertsDestinationList.vue          |  6 +-
 .../alerts/ExternalAlertSourcesList.vue       |  8 +-
 .../alerts/IncidentDetailDrawer.vue           |  1 -
 web/src/components/alerts/IncidentList.vue    |  6 +-
 .../alerts/PipelinesDestinationList.vue       |  4 +-
 web/src/components/alerts/PreviewAlert.vue    |  2 +-
 .../components/alerts/QueryEditorDialog.vue   | 14 +--
 web/src/components/alerts/TemplateList.vue    |  8 +-
 .../alerts/downtimes/DowntimeList.vue         | 10 +--
 web/src/components/alerts/steps/Advanced.vue  |  4 +-
 .../dashboards/PublicLinksTable.vue           | 12 +--
 .../dashboards/VariablesValueSelector.vue     | 11 +--
 .../functions/EnrichmentTableList.vue         |  8 +-
 web/src/components/functions/FunctionList.vue |  8 +-
 .../serviceAccounts/ServiceAccountsList.vue   |  6 +-
 .../components/iam/users/InvitationList.vue   |  2 +-
 web/src/components/iam/users/User.vue         |  8 +-
 web/src/components/oncall/OnCallCoverList.vue |  2 +-
 .../components/oncall/OnCallRoutingList.vue   |  2 +-
 web/src/components/pipeline/PipelinesList.vue | 14 +--
 .../components/pipelines/BackfillJobsList.vue | 14 +--
 web/src/components/queries/QueryList.vue      |  2 +-
 .../components/queries/RunningQueriesList.vue |  6 +-
 web/src/components/queries/SummaryList.vue    |  4 +-
 web/src/components/reports/ReportList.vue     | 10 +--
 .../settings/AnnouncementBannerList.vue       |  6 +-
 web/src/components/settings/General.vue       | 34 ++++---
 .../settings/ModelPricingEditor.vue           | 14 +--
 .../components/settings/ModelPricingList.vue  | 27 +++---
 .../components/settings/RegexPatternList.vue  |  6 +-
 .../settings/ServiceIdentitySetup.vue         |  4 +-
 .../settings/SyntheticsLocationsList.vue      |  8 +-
 .../settings/TestModelMatchDialog.vue         | 24 ++---
 .../synthetic-monitoring/MonitorTable.vue     | 10 +--
 .../variables/SyntheticsVariablesList.vue     | 12 +--
 .../components/workflows/WorkflowsList.vue    | 10 +--
 web/src/constants/themes.ts                   |  2 +-
 web/src/lib/core/Button/OButton.vue           |  8 +-
 web/src/lib/core/Code/OCodeBlock.vue          |  4 +-
 web/src/lib/core/PageHeader/OPageHeader.vue   |  4 +-
 .../lib/core/RefreshButton/ORefreshButton.vue |  2 -
 .../sub-components/OTableColumnToggle.vue     |  4 +-
 .../Table/sub-components/OTablePagination.vue | 10 +--
 .../sub-components/OTableSelectCheckbox.vue   |  1 +
 .../lib/core/ToggleGroup/OToggleGroupItem.vue |  8 +-
 web/src/lib/data/StatStrip/OStatCard.vue      |  9 +-
 web/src/lib/data/StatStrip/OStatStrip.vue     |  3 +
 web/src/lib/styles/tokens/component.css       |  4 +-
 .../lib/styles/tokens/contrast-manifest.ts    | 12 ---
 web/src/lib/styles/tokens/dark.css            |  6 +-
 web/src/lib/styles/tokens/semantic.css        |  4 +-
 web/src/plugins/logs/IndexList.vue            |  2 +-
 .../logs/SearchBar.drillDownToggle.spec.ts    |  4 +-
 .../logs/SearchBar.savedViewsPinned.spec.ts   | 18 ++--
 .../logs/SearchBar.toolbarHeight.spec.ts      | 17 ++--
 .../logs/SearchBar.toolbarSpacing.spec.ts     | 14 ++-
 web/src/plugins/logs/SearchBar.vue            | 88 +++++++++----------
 web/src/plugins/logs/SearchResult.vue         | 17 ++--
 web/src/plugins/logs/SyntaxGuide.spec.ts      |  6 +-
 web/src/plugins/logs/SyntaxGuide.vue          |  4 +-
 .../metrics/explorer/LabelFilterBar.vue       |  4 +-
 .../metrics/explorer/MetricsExplorer.vue      |  6 +-
 web/src/plugins/traces/SearchBar.spec.ts      |  9 +-
 web/src/plugins/traces/SearchBar.vue          | 48 +++++-----
 web/src/plugins/traces/SearchResult.vue       |  7 +-
 web/src/plugins/traces/SpanBlock.spec.ts      |  7 +-
 web/src/plugins/traces/SpanBlock.vue          |  4 +-
 web/src/plugins/traces/TraceDAG.vue           |  9 +-
 web/src/plugins/traces/TraceDetails.vue       |  4 +-
 web/src/views/About.vue                       |  6 +-
 web/src/views/Dashboards/Dashboards.vue       |  6 +-
 web/src/views/Dashboards/ViewDashboard.vue    |  6 +-
 web/src/views/Error404.vue                    |  2 +-
 web/src/views/HomeView.vue                    |  4 +-
 web/src/views/Ingestion.vue                   | 10 +--
 web/src/views/LogStream.vue                   | 12 +--
 web/src/views/OverviewTab.vue                 |  8 +-
 web/src/views/slos/SloList.vue                | 12 +--
 .../status-pages/StatusPagesList.vue          |  6 +-
 85 files changed, 396 insertions(+), 380 deletions(-)

diff --git a/web/src/assets/styles/log-highlighting.css b/web/src/assets/styles/log-highlighting.css
index 462eb228c2..d68df0ee83 100644
--- a/web/src/assets/styles/log-highlighting.css
+++ b/web/src/assets/styles/log-highlighting.css
@@ -30,7 +30,7 @@
 
 }
 .log-separator {
-  color: #9ca3af;
+  color: #6b7280;
 
 }
 /* `.log-key`/`.log-separator` are applied to generated log HTML injected via
@@ -41,7 +41,7 @@
   font-weight: normal;
 }
 .log-object-brace {
-  color: #9ca3af;
+  color: #6b7280;
 
 }
 
@@ -100,7 +100,8 @@
   color: #6EE7B7; /* Soft mint green */
 
 }
-.dark .log-separator {
+.dark .log-separator,
+.dark .log-object-brace {
   color: #999;
 }
 .dark .log-number {
diff --git a/web/src/components/DateTime.vue b/web/src/components/DateTime.vue
index 3edd152d1f..f5dd2e4b7a 100644
--- a/web/src/components/DateTime.vue
+++ b/web/src/components/DateTime.vue
@@ -298,7 +298,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       @update:pending-date="pendingDay = $event"
                     />
                   </div>
-                  <div class="text-3xs ps-6 pe-6">{{ t("common.datetimeMessage") }}</div>
+                  <div class="text-text-secondary ps-6 pe-6 text-xs">
+                    {{ t("common.datetimeMessage") }}
+                  </div>
                   <OSeparator v-if="!disableRelative" class="my-2" />
 
                   <table
diff --git a/web/src/components/alerts/AddAlert.vue b/web/src/components/alerts/AddAlert.vue
index b7a3cfb41d..bfe0ca9094 100644
--- a/web/src/components/alerts/AddAlert.vue
+++ b/web/src/components/alerts/AddAlert.vue
@@ -499,7 +499,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       : t("alerts.wouldNotTrigger")
                   }}
                 </span>
-                <span class="text-xs opacity-60">{{ activeEvaluationStatus.reason }}</span>
+                <span class="text-text-secondary text-xs">{{ activeEvaluationStatus.reason }}</span>
               </template>
             </div>
             <div class="min-h-0 flex-1 overflow-hidden">
diff --git a/web/src/components/alerts/AlertHistory.vue b/web/src/components/alerts/AlertHistory.vue
index 8d56088880..393d479f26 100644
--- a/web/src/components/alerts/AlertHistory.vue
+++ b/web/src/components/alerts/AlertHistory.vue
@@ -521,7 +521,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <OIcon name="error" size="sm" class="text-status-error-text" />
       </template>
       <template #header-right>
-        <div class="text-compact ms-9 flex items-center text-xs opacity-70">
+        <div class="text-compact text-text-secondary ms-9 flex items-center text-xs">
           <span class="me-1">{{ t("alerts.lastError") }}</span>
           <OIcon name="schedule" size="xs" class="me-1" />
           {{
@@ -532,7 +532,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </template>
 
       <div class="mb-4">
-        <div class="mb-2 text-sm font-semibold tracking-[0.02em] opacity-80">
+        <div class="text-text-secondary mb-2 text-sm font-semibold tracking-[0.02em]">
           {{ t("alerts.errorSummary") }}
         </div>
         <div
diff --git a/web/src/components/alerts/AlertList.vue b/web/src/components/alerts/AlertList.vue
index a875cdacf8..c2a8965973 100644
--- a/web/src/components/alerts/AlertList.vue
+++ b/web/src/components/alerts/AlertList.vue
@@ -163,6 +163,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     :items="summaryStats"
                     :loading="loading"
                     compact
+                    stacked
                     selectable
                     :selected-key="stateFilter"
                     default-key="total"
@@ -592,7 +593,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     :data-test="`alert-list-${row.name}-pause-start-alert`"
                     class="ms-1 max-md:hidden"
                     :variant="row.enabled ? 'ghost-destructive' : 'ghost-success'"
-                    size="icon-sm"
+                    size="icon-xs-sq"
                     :icon-left="row.enabled ? 'pause' : 'play-arrow'"
                     @click.stop="toggleAlertState(row)"
                   >
@@ -606,7 +607,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     data-row-action="edit"
                     :data-test="`alert-list-${row.name}-update-alert`"
                     variant="ghost"
-                    size="icon-sm"
+                    size="icon-xs-sq"
                     icon-left="edit"
                     class="max-md:hidden"
                     @click.stop="editAlert(row)"
@@ -631,7 +632,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <OButton
                       data-row-action="duplicate"
                       variant="ghost"
-                      size="icon-sm"
+                      size="icon-xs-sq"
                       icon-left="content-copy"
                       :disabled="isSloRow(row)"
                       :aria-label="isSloRow(row) ? t('alerts.sloCloneDisabled') : t('alerts.clone')"
@@ -669,7 +670,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <template #trigger>
                       <OButton
                         variant="ghost"
-                        size="icon-sm"
+                        size="icon-xs-sq"
                         icon-left="more-vert"
                         :aria-label="t('alerts.moreActions')"
                         @click.stop="openMenu($event, row)"
diff --git a/web/src/components/alerts/AlertSummary.vue b/web/src/components/alerts/AlertSummary.vue
index 059fe82716..c0385411e3 100644
--- a/web/src/components/alerts/AlertSummary.vue
+++ b/web/src/components/alerts/AlertSummary.vue
@@ -35,7 +35,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         class="flex h-full min-h-30 flex-col items-center justify-center gap-2 p-4"
       >
         <OIcon name="article" size="lg" class="opacity-20" />
-        <span class="text-compact text-center font-medium opacity-50">{{
+        <span class="text-compact text-text-secondary text-center font-medium">{{
           t("alerts.summary.configureAlert")
         }}</span>
       </div>
diff --git a/web/src/components/alerts/AlertsDestinationList.vue b/web/src/components/alerts/AlertsDestinationList.vue
index 726caf70b2..c8dc6e4180 100644
--- a/web/src/components/alerts/AlertsDestinationList.vue
+++ b/web/src/components/alerts/AlertsDestinationList.vue
@@ -300,7 +300,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 data-test="destination-export"
                 data-row-action="export"
                 variant="ghost"
-                size="icon-sm"
+                size="icon-xs-sq"
                 class="max-md:hidden"
                 :title="t('alert_destinations.exportDestination')"
                 @click.stop="exportDestination(row)"
@@ -311,7 +311,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :data-test="`alert-destination-list-${row.name}-update-destination`"
                 data-row-action="edit"
                 variant="ghost"
-                size="icon-sm"
+                size="icon-xs-sq"
                 class="max-md:hidden"
                 :title="t('alert_destinations.edit')"
                 @click="editDestination(row)"
@@ -322,7 +322,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :data-test="`alert-destination-list-${row.name}-delete-destination`"
                 data-row-action="delete"
                 variant="ghost"
-                size="icon-sm"
+                size="icon-xs-sq"
                 class="max-md:hidden"
                 :title="t('alert_destinations.delete')"
                 :loading="deletingDestinations.has(row.name)"
diff --git a/web/src/components/alerts/ExternalAlertSourcesList.vue b/web/src/components/alerts/ExternalAlertSourcesList.vue
index 603ea3a9ca..664221242f 100644
--- a/web/src/components/alerts/ExternalAlertSourcesList.vue
+++ b/web/src/components/alerts/ExternalAlertSourcesList.vue
@@ -191,7 +191,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <div v-if="row.integration" class="flex items-center gap-1">
               <OButton
                 variant="ghost"
-                size="icon-sm"
+                size="icon-xs-sq"
                 icon-left="edit"
                 class="max-md:hidden"
                 :title="t('alert_sources.edit')"
@@ -200,7 +200,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               />
               <OButton
                 variant="ghost"
-                size="icon-sm"
+                size="icon-xs-sq"
                 icon-left="autorenew"
                 class="max-md:hidden"
                 :title="t('alert_sources.rotateToken')"
@@ -209,7 +209,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               />
               <OButton
                 :variant="row.integration.enabled ? 'ghost-destructive' : 'ghost-success'"
-                size="icon-sm"
+                size="icon-xs-sq"
                 :icon-left="row.integration.enabled ? 'pause' : 'play-arrow'"
                 class="max-md:hidden"
                 :title="
@@ -220,7 +220,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               />
               <OButton
                 variant="ghost-destructive"
-                size="icon-sm"
+                size="icon-xs-sq"
                 icon-left="delete"
                 class="max-md:hidden"
                 :disabled="row.integration.name === 'default'"
diff --git a/web/src/components/alerts/IncidentDetailDrawer.vue b/web/src/components/alerts/IncidentDetailDrawer.vue
index 1136b2777f..ba13f85870 100644
--- a/web/src/components/alerts/IncidentDetailDrawer.vue
+++ b/web/src/components/alerts/IncidentDetailDrawer.vue
@@ -363,7 +363,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </div>
                 </div>
 
-                <!-- SECTION 2: Main Content (2:1 Ratio Layout) with calc(100vh - 236px) height (was 276px) -->
                 <div class="flex h-[calc(100vh-23.75rem)] flex-1 gap-3">
                   <!-- PART 1: Primary Content (66.67% width) -->
                   <div class="flex w-2/3 flex-col gap-3">
diff --git a/web/src/components/alerts/IncidentList.vue b/web/src/components/alerts/IncidentList.vue
index edaa2703b9..fdca3f4e33 100644
--- a/web/src/components/alerts/IncidentList.vue
+++ b/web/src/components/alerts/IncidentList.vue
@@ -274,7 +274,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <OButton
               v-if="row.status === 'open'"
               variant="ghost-warning"
-              size="icon-sm"
+              size="icon-xs-sq"
               :aria-label="t('alerts.incidents.acknowledgeAriaLabel')"
               class="max-md:hidden"
               @click.stop="acknowledgeIncident(row)"
@@ -285,7 +285,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <OButton
               v-if="row.status !== 'resolved'"
               variant="ghost-primary"
-              size="icon-sm"
+              size="icon-xs-sq"
               class="max-md:hidden"
               @click.stop="resolveIncident(row)"
               data-test="incident-resolve-btn"
@@ -295,7 +295,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <OButton
               v-if="row.status === 'resolved'"
               variant="ghost-warning"
-              size="icon-sm"
+              size="icon-xs-sq"
               class="max-md:hidden"
               @click.stop="reopenIncident(row)"
               data-test="incident-reopen-btn"
diff --git a/web/src/components/alerts/PipelinesDestinationList.vue b/web/src/components/alerts/PipelinesDestinationList.vue
index 52fc2c60e2..44e4d1449a 100644
--- a/web/src/components/alerts/PipelinesDestinationList.vue
+++ b/web/src/components/alerts/PipelinesDestinationList.vue
@@ -111,7 +111,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :data-test="`alert-destination-list-${row.name}-update-destination`"
               data-row-action="edit"
               variant="ghost"
-              size="icon-sm"
+              size="icon-xs-sq"
               class="max-md:hidden"
               :title="t('alert_destinations.edit')"
               @click="editDestination(row)"
@@ -122,7 +122,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :data-test="`alert-destination-list-${row.name}-delete-destination`"
               data-row-action="delete"
               variant="ghost"
-              size="icon-sm"
+              size="icon-xs-sq"
               class="max-md:hidden"
               :title="t('alert_destinations.delete')"
               @click="conformDeleteDestination(row)"
diff --git a/web/src/components/alerts/PreviewAlert.vue b/web/src/components/alerts/PreviewAlert.vue
index 21ee673af5..6718a6b6d1 100644
--- a/web/src/components/alerts/PreviewAlert.vue
+++ b/web/src/components/alerts/PreviewAlert.vue
@@ -24,7 +24,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         class="flex h-full flex-col items-center justify-center gap-2"
       >
         <OIcon name="edit" size="xl" class="opacity-20" />
-        <span class="text-sm opacity-40">{{ t("alerts.writeQueryToSeePreview") }}</span>
+        <span class="text-text-secondary text-sm">{{ t("alerts.writeQueryToSeePreview") }}</span>
       </div>
       <PanelSchemaRenderer
         ref="panelRendererRef"
diff --git a/web/src/components/alerts/QueryEditorDialog.vue b/web/src/components/alerts/QueryEditorDialog.vue
index 5c5183f8d3..1e2e6c30db 100644
--- a/web/src/components/alerts/QueryEditorDialog.vue
+++ b/web/src/components/alerts/QueryEditorDialog.vue
@@ -48,7 +48,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             class="rounded-default border-info/28 bg-info/10 inline-flex flex-row items-center gap-1.25 border px-2.5 py-0.75"
           >
             <span class="text-2xs text-text-label font-semibold">{{ t("alerts.streamType") }}</span>
-            <span class="text-2xs text-text-label opacity-30">:</span>
+            <span class="text-2xs text-text-label">:</span>
             <span class="text-text-link text-xs font-bold">{{ streamType }}</span>
           </div>
           <span v-if="streamType && streamName" class="opacity-20 select-none">|</span>
@@ -58,11 +58,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <span class="text-2xs text-text-label font-semibold">{{
               t("alerts.stream_name")
             }}</span>
-            <span class="text-2xs text-text-label opacity-30">:</span>
+            <span class="text-2xs text-text-label">:</span>
             <span v-if="streamName" class="text-sql-accent text-xs font-bold">{{
               streamName
             }}</span>
-            <span v-else class="text-sql-accent text-xs font-bold italic opacity-40">{{
+            <span v-else class="text-text-muted text-xs font-bold italic">{{
               t("alerts.queryEditor.noStream")
             }}</span>
           </div>
@@ -395,7 +395,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     class="flex h-full flex-col items-center justify-center gap-2"
                   >
                     <OSpinner size="md" />
-                    <span class="text-sm opacity-60">{{ t("search.fetchingResults") }}</span>
+                    <span class="text-text-secondary text-sm">{{
+                      t("search.fetchingResults")
+                    }}</span>
                   </div>
                   <!-- Results -->
                   <QueryEditor
@@ -472,7 +474,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     class="flex h-full flex-col items-center justify-center gap-2"
                   >
                     <OSpinner size="md" />
-                    <span class="text-sm opacity-60">{{ t("search.fetchingResults") }}</span>
+                    <span class="text-text-secondary text-sm">{{
+                      t("search.fetchingResults")
+                    }}</span>
                   </div>
                   <!-- Results -->
                   <QueryEditor
diff --git a/web/src/components/alerts/TemplateList.vue b/web/src/components/alerts/TemplateList.vue
index 6901206594..9458e72239 100644
--- a/web/src/components/alerts/TemplateList.vue
+++ b/web/src/components/alerts/TemplateList.vue
@@ -189,7 +189,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :title="t('alert_templates.exportTemplate')"
               class="ms-1 max-md:hidden"
               variant="ghost"
-              size="icon-sm"
+              size="icon-xs-sq"
               @click.stop="exportTemplate(row)"
               data-test="destination-export"
               data-row-action="export"
@@ -200,7 +200,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :data-test="`alert-template-list-${row.name}-update-template`"
               class="ms-1 max-md:hidden"
               variant="ghost"
-              size="icon-sm"
+              size="icon-xs-sq"
               :title="
                 row.isPrebuilt ? t('alert_templates.systemReadOnlyEdit') : t('alert_templates.edit')
               "
@@ -214,7 +214,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :data-test="`alert-template-list-${row.name}-clone-template`"
               class="ms-1 max-md:hidden"
               variant="ghost"
-              size="icon-sm"
+              size="icon-xs-sq"
               :aria-label="cloneActionLabel(row, t('alert_templates.clone'))"
               @click="cloneTemplate(row)"
               data-row-action="duplicate"
@@ -235,7 +235,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :data-test="`alert-template-list-${row.name}-delete-template`"
               class="ms-1 max-md:hidden"
               variant="ghost"
-              size="icon-sm"
+              size="icon-xs-sq"
               :title="
                 row.isPrebuilt
                   ? t('alert_templates.systemReadOnlyDelete')
diff --git a/web/src/components/alerts/downtimes/DowntimeList.vue b/web/src/components/alerts/downtimes/DowntimeList.vue
index 0ca65e9936..e476888a3e 100644
--- a/web/src/components/alerts/downtimes/DowntimeList.vue
+++ b/web/src/components/alerts/downtimes/DowntimeList.vue
@@ -341,7 +341,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <OButton
                       v-if="row.status === 'scheduled'"
                       variant="ghost-destructive"
-                      size="icon-sm"
+                      size="icon-xs-sq"
                       icon-left="cancel"
                       :data-test="`downtime-list-${row.id}-cancel`"
                       @click.stop="askCancel([row.id])"
@@ -351,7 +351,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <OButton
                       v-else
                       variant="ghost-destructive"
-                      size="icon-sm"
+                      size="icon-xs-sq"
                       icon-left="stop-circle"
                       :disabled="row.status !== 'active'"
                       :aria-label="t('alerts.downtimes.actions.endNow')"
@@ -369,7 +369,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <OButton
                       v-if="isEditable(row)"
                       variant="ghost"
-                      size="icon-sm"
+                      size="icon-xs-sq"
                       icon-left="edit"
                       :data-test="`downtime-list-${row.id}-edit`"
                       @click.stop="editDowntime(row)"
@@ -380,7 +380,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <span class="inline-flex size-8 max-md:hidden">
                     <OButton
                       variant="ghost"
-                      size="icon-sm"
+                      size="icon-xs-sq"
                       icon-left="content-copy"
                       :data-test="`downtime-list-${row.id}-duplicate`"
                       :aria-label="
@@ -415,7 +415,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <template #trigger>
                       <OButton
                         variant="ghost"
-                        size="icon-sm"
+                        size="icon-xs-sq"
                         icon-left="more-vert"
                         :aria-label="moreActionsLabel(row)"
                         :data-test="`downtime-list-${row.id}-more`"
diff --git a/web/src/components/alerts/steps/Advanced.vue b/web/src/components/alerts/steps/Advanced.vue
index 09c5f27c8e..315950c012 100644
--- a/web/src/components/alerts/steps/Advanced.vue
+++ b/web/src/components/alerts/steps/Advanced.vue
@@ -247,7 +247,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </OButton>
               </div>
               <div class="flex items-center gap-2">
-                <span class="text-xs opacity-60">{{ t("alerts.advanced.templateType") }}</span>
+                <span class="text-text-secondary text-xs">{{
+                  t("alerts.advanced.templateType")
+                }}</span>
                 <OFormToggleGroup
                   data-test="add-alert-row-template-type-toggle"
                   name="row_template_type"
diff --git a/web/src/components/dashboards/PublicLinksTable.vue b/web/src/components/dashboards/PublicLinksTable.vue
index 358a5168f2..a220920a31 100644
--- a/web/src/components/dashboards/PublicLinksTable.vue
+++ b/web/src/components/dashboards/PublicLinksTable.vue
@@ -198,7 +198,7 @@
           <OButton
             v-if="row.slug"
             variant="ghost"
-            size="icon-sm"
+            size="icon-xs-sq"
             icon-left="content-copy"
             class="max-md:hidden"
             :aria-label="t('dashboard.publicDashboard.copyLink')"
@@ -210,7 +210,7 @@
           <OButton
             v-if="row.slug"
             variant="ghost"
-            size="icon-sm"
+            size="icon-xs-sq"
             icon-left="open-in-new"
             class="max-md:hidden"
             :aria-label="t('dashboard.publicLinks.openPublicPage')"
@@ -228,7 +228,7 @@
             />
             <OButton
               variant="ghost"
-              size="icon-sm"
+              size="icon-xs-sq"
               icon-left="edit"
               :aria-label="t('dashboard.publicLinks.editSettings')"
               :disabled="!hasDashboard(row)"
@@ -245,7 +245,7 @@
           <OButton
             v-if="!noDashboardAccess(row) && takeOverReplacesResume(row, userId)"
             variant="ghost-success"
-            size="icon-sm"
+            size="icon-xs-sq"
             icon-left="how-to-reg"
             class="max-md:hidden"
             :aria-label="t('dashboard.publicLinks.takeOver')"
@@ -261,7 +261,7 @@
             <OTooltip v-if="!canPause(row)" side="bottom" :content="pauseBlockedReason(row, t)" />
             <OButton
               :variant="row.enabled ? 'ghost-destructive' : 'ghost-success'"
-              size="icon-sm"
+              size="icon-xs-sq"
               :icon-left="row.enabled ? 'pause' : 'play-arrow'"
               :aria-label="
                 row.enabled ? t('dashboard.publicLinks.pause') : t('dashboard.publicLinks.resume')
@@ -285,7 +285,7 @@
               <OButton
                 icon-left="more-vert"
                 variant="ghost"
-                size="icon-sm"
+                size="icon-xs-sq"
                 :title="t('dashboard.moreActions')"
                 :aria-label="t('dashboard.moreActions')"
                 :loading="busyRows.get(row.id) === 'menu'"
diff --git a/web/src/components/dashboards/VariablesValueSelector.vue b/web/src/components/dashboards/VariablesValueSelector.vue
index 79692fdde4..1240590445 100644
--- a/web/src/components/dashboards/VariablesValueSelector.vue
+++ b/web/src/components/dashboards/VariablesValueSelector.vue
@@ -14,7 +14,7 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <div v-if="variablesData.values?.length > 0" class="mt-1 flex flex-wrap gap-y-1">
+  <div v-if="variablesData.values?.length > 0" class="mt-2 flex flex-wrap gap-x-4 gap-y-2">
     <div
       v-for="(item, index) in variablesData.values"
       v-show="!isVariableOffTab(item)"
@@ -27,7 +27,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         v-show="!isVariableOmitted(item)"
       >
         <VariableQueryValueSelector
-          class="me-4 mt-1"
           v-show="!item.hideOnDashboard"
           v-model="item.value"
           :variableItem="item"
@@ -53,7 +52,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div v-else-if="item.type == 'constant'" class="max-w-[40rem] min-w-37.5">
         <OInput
           v-show="!item.hideOnDashboard"
-          class="me-4 mt-1 max-w-37.5!"
+          class="max-w-37.5!"
           v-model="item.value"
           :label="item.label || item.name"
           label-position="inside"
@@ -65,7 +64,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div v-else-if="item.type == 'textbox'" class="max-w-[40rem] min-w-37.5">
         <OInput
           v-show="!item.hideOnDashboard"
-          class="me-4 mt-1 max-w-37.5!"
+          class="max-w-37.5!"
           :debounce="textboxDebounce"
           v-model="item.value"
           :label="item.label || item.name"
@@ -90,7 +89,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div v-else-if="item.type == 'custom'" class="max-w-[40rem] min-w-37.5">
         <VariableCustomValueSelector
           v-show="!item.hideOnDashboard"
-          class="me-4 mt-1"
           v-model="item.value"
           :variableItem="item"
           @update:model-value="onVariablesValueUpdated(Number(index))"
@@ -99,7 +97,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
       <div v-else-if="item.type == 'dynamic_filters'" class="max-w-max">
         <VariableAdHocValueSelector
-          class="me-4 mt-1"
           v-model="item.value"
           :variableItem="item"
           @update:model-value="onVariablesValueUpdated(Number(index))"
@@ -108,7 +105,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
     </div>
     <!-- Add Variable Button -->
-    <div v-if="showAddVariableButton" class="ms-1 mt-1">
+    <div v-if="showAddVariableButton">
       <OButton
         variant="outline"
         size="sm"
diff --git a/web/src/components/functions/EnrichmentTableList.vue b/web/src/components/functions/EnrichmentTableList.vue
index b7432636d3..d5a5299ea6 100644
--- a/web/src/components/functions/EnrichmentTableList.vue
+++ b/web/src/components/functions/EnrichmentTableList.vue
@@ -234,7 +234,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :data-test="`${row.name}-explore-btn`"
                   :title="t('logStream.explore')"
                   variant="ghost"
-                  size="icon-sm"
+                  size="icon-xs-sq"
                   class="max-md:hidden"
                   @click="exploreEnrichmentTable(row)"
                   icon-left="search"
@@ -249,7 +249,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :data-test="`${row.name}-schema-btn`"
                   :title="t('logStream.schemaHeader')"
                   variant="ghost"
-                  size="icon-sm"
+                  size="icon-xs-sq"
                   class="max-md:hidden"
                   @click="listSchema(row)"
                   icon-left="format-list-bulleted"
@@ -267,7 +267,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :data-test="`${row.name}-edit-btn`"
                   :title="t('function.enrichmentTables')"
                   variant="ghost"
-                  size="icon-sm"
+                  size="icon-xs-sq"
                   class="max-md:hidden"
                   @click="showAddUpdateFn(row)"
                   icon-left="edit"
@@ -279,7 +279,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :data-test="`${row.name}-delete-btn`"
                   :title="t('function.delete')"
                   variant="ghost-destructive"
-                  size="icon-sm"
+                  size="icon-xs-sq"
                   class="max-md:hidden"
                   @click="showDeleteDialogFn(row)"
                   icon-left="delete"
diff --git a/web/src/components/functions/FunctionList.vue b/web/src/components/functions/FunctionList.vue
index f35a32ed17..0bb12b617e 100644
--- a/web/src/components/functions/FunctionList.vue
+++ b/web/src/components/functions/FunctionList.vue
@@ -151,7 +151,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <div class="actions-container flex items-center">
                 <OButton
                   variant="ghost"
-                  size="icon-sm"
+                  size="icon-xs-sq"
                   :title="t('function.updateTitle')"
                   data-test="function-list-edit-function-btn"
                   data-row-action="edit"
@@ -161,7 +161,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 />
                 <OButton
                   variant="ghost"
-                  size="icon-sm"
+                  size="icon-xs-sq"
                   icon-left="account-tree"
                   :title="t('function.associatedPipelines')"
                   data-row-action="view"
@@ -170,7 +170,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 />
                 <OButton
                   variant="ghost"
-                  size="icon-sm"
+                  size="icon-xs-sq"
                   icon-left="download"
                   :title="t('common.export')"
                   data-test="function-list-export-function-btn"
@@ -180,7 +180,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 />
                 <OButton
                   variant="ghost-destructive"
-                  size="icon-sm"
+                  size="icon-xs-sq"
                   :title="t('function.delete')"
                   data-test="function-list-delete-function-btn"
                   data-row-action="delete"
diff --git a/web/src/components/iam/serviceAccounts/ServiceAccountsList.vue b/web/src/components/iam/serviceAccounts/ServiceAccountsList.vue
index 3b0b7576f7..803aefcf9d 100644
--- a/web/src/components/iam/serviceAccounts/ServiceAccountsList.vue
+++ b/web/src/components/iam/serviceAccounts/ServiceAccountsList.vue
@@ -185,7 +185,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 data-test="service-accounts-refresh"
                 :title="t('serviceAccounts.rotate')"
                 variant="ghost"
-                size="icon-sm"
+                size="icon-xs-sq"
                 icon-left="refresh"
                 class="max-md:hidden"
                 @click="confirmRefreshAction(row)"
@@ -195,7 +195,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 data-row-action="edit"
                 :title="t('serviceAccounts.update')"
                 variant="ghost"
-                size="icon-sm"
+                size="icon-xs-sq"
                 icon-left="edit"
                 class="max-md:hidden"
                 @click="addRoutePush(row)"
@@ -205,7 +205,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 data-row-action="delete"
                 :title="t('serviceAccounts.deleteServiceAccount')"
                 variant="ghost"
-                size="icon-sm"
+                size="icon-xs-sq"
                 icon-left="delete"
                 class="max-md:hidden"
                 @click="confirmDeleteAction(row)"
diff --git a/web/src/components/iam/users/InvitationList.vue b/web/src/components/iam/users/InvitationList.vue
index a9132f8ebc..606105a043 100644
--- a/web/src/components/iam/users/InvitationList.vue
+++ b/web/src/components/iam/users/InvitationList.vue
@@ -54,7 +54,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <template #toolbar-trailing>
             <OButton
               variant="outline"
-              size="icon-sm"
+              size="icon-xs-sq"
               icon-left="refresh"
               :loading="loading"
               data-test="invitation-list-refresh-btn"
diff --git a/web/src/components/iam/users/User.vue b/web/src/components/iam/users/User.vue
index cefdf2b64a..eadbbf0e19 100644
--- a/web/src/components/iam/users/User.vue
+++ b/web/src/components/iam/users/User.vue
@@ -177,7 +177,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               v-if="row.enableDelete && row.status != 'pending' && !row.isDomainMapped"
               :title="t('user.delete')"
               variant="ghost"
-              size="icon-sm"
+              size="icon-xs-sq"
               class="max-md:hidden"
               :data-test="`delete-basic-user-${row.email}`"
               data-row-action="delete"
@@ -189,7 +189,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               v-if="row.enableDelete && row.status != 'pending' && row.isDomainMapped"
               :title="t('user.block')"
               variant="ghost"
-              size="icon-sm"
+              size="icon-xs-sq"
               class="max-md:hidden"
               :data-test="`block-basic-user-${row.email}`"
               data-row-action="delete"
@@ -201,7 +201,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               v-if="row.status == 'pending' && row.token"
               :title="t('user.revoke_invite')"
               variant="ghost"
-              size="icon-sm"
+              size="icon-xs-sq"
               class="max-md:hidden"
               :data-test="`revoke-invite-${row.email}`"
               data-row-action="delete"
@@ -213,7 +213,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               v-if="row.enableEdit && row.status != 'pending'"
               :title="t('user.update')"
               variant="ghost"
-              size="icon-sm"
+              size="icon-xs-sq"
               class="max-md:hidden"
               :data-test="`edit-basic-user-${index}`"
               data-row-action="edit"
diff --git a/web/src/components/oncall/OnCallCoverList.vue b/web/src/components/oncall/OnCallCoverList.vue
index b661187be3..9129bf02b6 100644
--- a/web/src/components/oncall/OnCallCoverList.vue
+++ b/web/src/components/oncall/OnCallCoverList.vue
@@ -80,7 +80,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <template #cell-actions="{ row }">
         <OButton
           variant="ghost"
-          size="icon-sm"
+          size="icon-xs-sq"
           icon-left="delete-outline"
           :aria-label="t('oncall.coverRemove')"
           :data-test="`oncall-cover-remove-${row.id}`"
diff --git a/web/src/components/oncall/OnCallRoutingList.vue b/web/src/components/oncall/OnCallRoutingList.vue
index d1fb775e94..440026cdcb 100644
--- a/web/src/components/oncall/OnCallRoutingList.vue
+++ b/web/src/components/oncall/OnCallRoutingList.vue
@@ -157,7 +157,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
             <OButton
               variant="ghost"
-              size="icon-sm"
+              size="icon-xs-sq"
               icon-left="edit"
               class="shrink-0"
               :aria-label="t('oncall.edit')"
diff --git a/web/src/components/pipeline/PipelinesList.vue b/web/src/components/pipeline/PipelinesList.vue
index aaaa824721..ca5c885ae6 100644
--- a/web/src/components/pipeline/PipelinesList.vue
+++ b/web/src/components/pipeline/PipelinesList.vue
@@ -86,15 +86,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 data-test="pipeline-list-tabs"
               >
                 <OToggleGroupItem value="all" size="sm" data-test="tab-all">
-                  <template #icon-left><OIcon name="format-list-bulleted" size="sm" /></template>
+                  <template #icon-left><OIcon name="format-list-bulleted" size="xs" /></template>
                   {{ t("pipeline_list.tab_all") }}
                 </OToggleGroupItem>
                 <OToggleGroupItem value="scheduled" size="sm" data-test="tab-scheduled">
-                  <template #icon-left><OIcon name="schedule" size="sm" /></template>
+                  <template #icon-left><OIcon name="schedule" size="xs" /></template>
                   {{ t("pipeline_list.tab_scheduled") }}
                 </OToggleGroupItem>
                 <OToggleGroupItem value="realtime" size="sm" data-test="tab-realtime">
-                  <template #icon-left><OIcon name="bolt" size="sm" /></template>
+                  <template #icon-left><OIcon name="bolt" size="xs" /></template>
                   {{ t("pipeline_list.tab_realtime") }}
                 </OToggleGroupItem>
               </OToggleGroup>
@@ -173,7 +173,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :data-test="`pipeline-list-${row.name}-pause-start-action`"
                 :data-row-action="row.enabled ? 'pause' : 'resume'"
                 :variant="row.enabled ? 'ghost-destructive' : 'ghost'"
-                size="icon-sm"
+                size="icon-xs-sq"
                 :icon-left="row.enabled ? 'pause' : 'play-arrow'"
                 class="max-md:hidden"
                 @click.stop="togglePipeline(row)"
@@ -188,7 +188,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <OButton
                 :data-test="`pipeline-list-${row.name}-view-pipeline`"
                 variant="ghost"
-                size="icon-sm"
+                size="icon-xs-sq"
                 :title="t('pipeline.view')"
                 class="max-md:hidden"
                 icon-left="visibility"
@@ -201,7 +201,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :data-test="`pipeline-list-${row.name}-update-pipeline`"
                 data-row-action="edit"
                 variant="ghost"
-                size="icon-sm"
+                size="icon-xs-sq"
                 class="max-md:hidden"
                 @click.stop="editPipeline(row)"
                 icon-left="edit"
@@ -235,7 +235,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   <OButton
                     :aria-label="t('common.moreActions')"
                     variant="ghost"
-                    size="icon-sm"
+                    size="icon-xs-sq"
                     @click.stop
                     :data-test="`pipeline-list-${row.name}-more-options`"
                     icon-left="more-vert"
diff --git a/web/src/components/pipelines/BackfillJobsList.vue b/web/src/components/pipelines/BackfillJobsList.vue
index a400d3b246..7e16066fd5 100644
--- a/web/src/components/pipelines/BackfillJobsList.vue
+++ b/web/src/components/pipelines/BackfillJobsList.vue
@@ -61,7 +61,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         />
         <OButton
           variant="outline"
-          size="icon-sm"
+          size="icon-xs-sq"
           class="shrink-0"
           @click="refreshJobs"
           :disabled="loading"
@@ -175,7 +175,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <OButton
                 v-if="canPauseJob(row)"
                 variant="ghost-destructive"
-                size="icon-sm"
+                size="icon-xs-sq"
                 class="max-md:hidden"
                 @click="confirmPauseJob(row)"
                 data-test="pause-job-btn"
@@ -186,7 +186,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <OButton
                 v-if="canResumeJob(row)"
                 variant="ghost-success"
-                size="icon-sm"
+                size="icon-xs-sq"
                 class="max-md:hidden"
                 @click="confirmResumeJob(row)"
                 data-test="resume-job-btn"
@@ -197,7 +197,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <OButton
                 v-if="canEditJob(row.status)"
                 variant="ghost"
-                size="icon-sm"
+                size="icon-xs-sq"
                 class="max-md:hidden"
                 @click="editJob(row)"
                 data-test="edit-job-btn"
@@ -207,7 +207,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </OButton>
               <OButton
                 variant="ghost"
-                size="icon-sm"
+                size="icon-xs-sq"
                 class="max-md:hidden"
                 @click="viewJob(row)"
                 data-test="view-job-btn"
@@ -218,7 +218,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <OButton
                 v-if="canDeleteJob(row.status)"
                 variant="ghost-destructive"
-                size="icon-sm"
+                size="icon-xs-sq"
                 class="max-md:hidden"
                 @click="confirmDeleteJob(row)"
                 data-test="delete-job-btn"
@@ -229,7 +229,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <OButton
                 v-if="row.error"
                 variant="ghost-destructive"
-                size="icon-sm"
+                size="icon-xs-sq"
                 class="max-md:hidden"
                 @click="showErrorDialog(row)"
                 data-test="error-indicator-btn"
diff --git a/web/src/components/queries/QueryList.vue b/web/src/components/queries/QueryList.vue
index 1a771d7f69..772583c23b 100644
--- a/web/src/components/queries/QueryList.vue
+++ b/web/src/components/queries/QueryList.vue
@@ -10,7 +10,7 @@
           <OButton
             :aria-label="t('common.close')"
             variant="ghost"
-            size="icon-sm"
+            size="icon-xs-sq"
             data-test="queryList-cancel"
             @click="$emit('close')"
             icon-left="close"
diff --git a/web/src/components/queries/RunningQueriesList.vue b/web/src/components/queries/RunningQueriesList.vue
index 25f85cdc30..c92c9f5531 100644
--- a/web/src/components/queries/RunningQueriesList.vue
+++ b/web/src/components/queries/RunningQueriesList.vue
@@ -67,7 +67,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <template #toolbar-trailing>
         <OButton
           variant="outline"
-          size="icon-sm"
+          size="icon-xs-sq"
           class="shrink-0"
           icon-left="refresh"
           data-test="running-queries-refresh-btn"
@@ -89,7 +89,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <OButton
           icon-left="format-list-bulleted"
           variant="ghost"
-          size="icon-sm"
+          size="icon-xs-sq"
           class="max-md:hidden"
           :title="t('queries.queryList')"
           data-test="queryList-btn"
@@ -98,7 +98,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <OButton
           icon-left="close"
           variant="ghost-destructive"
-          size="icon-sm"
+          size="icon-xs-sq"
           class="max-md:hidden"
           :title="t('queries.cancelQuery')"
           data-test="cancelQuery-btn"
diff --git a/web/src/components/queries/SummaryList.vue b/web/src/components/queries/SummaryList.vue
index aa4cff8eca..4d43c5c2f0 100644
--- a/web/src/components/queries/SummaryList.vue
+++ b/web/src/components/queries/SummaryList.vue
@@ -44,7 +44,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <template #toolbar-trailing>
       <OButton
         variant="outline"
-        size="icon-sm"
+        size="icon-xs-sq"
         class="shrink-0"
         icon-left="refresh"
         data-test="summary-list-refresh-btn"
@@ -65,7 +65,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <template #cell-actions="{ row }">
       <OButton
         variant="ghost-destructive"
-        size="icon-sm"
+        size="icon-xs-sq"
         :title="t('queries.cancelQuery')"
         data-test="cancelQuery-btn"
         @click.stop="confirmDeleteAction({ row })"
diff --git a/web/src/components/reports/ReportList.vue b/web/src/components/reports/ReportList.vue
index 2b529c3933..90c29fc71e 100644
--- a/web/src/components/reports/ReportList.vue
+++ b/web/src/components/reports/ReportList.vue
@@ -280,7 +280,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :data-test="`report-list-${row.name}-pause-start-report`"
                   :data-row-action="row.enabled ? 'pause' : 'resume'"
                   :variant="row.enabled ? 'ghost-destructive' : 'ghost'"
-                  size="icon-sm"
+                  size="icon-xs-sq"
                   :icon-left="row.enabled ? 'pause' : 'play-arrow'"
                   :title="row.enabled ? t('alerts.pause') : t('alerts.start')"
                   class="max-md:hidden"
@@ -293,7 +293,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   data-row-action="run-now"
                   icon-left="send"
                   variant="ghost"
-                  size="icon-sm"
+                  size="icon-xs-sq"
                   :loading="runningReportId === row.report_id"
                   :disabled="!!runningReportId"
                   :title="t('reports.history.runNow')"
@@ -307,7 +307,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   data-row-action="edit"
                   icon-left="edit"
                   variant="ghost"
-                  size="icon-sm"
+                  size="icon-xs-sq"
                   :title="t('alerts.edit')"
                   class="max-md:hidden"
                   @click.stop="editReport(row)"
@@ -318,7 +318,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :data-test="`report-list-${row.name}-move-report`"
                   icon-left="drive-file-move"
                   variant="ghost"
-                  size="icon-sm"
+                  size="icon-xs-sq"
                   :title="t('reports.moveToFolder')"
                   class="max-md:hidden"
                   @click.stop="openMoveDialog(row)"
@@ -330,7 +330,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   data-row-action="delete"
                   icon-left="delete"
                   variant="ghost-destructive"
-                  size="icon-sm"
+                  size="icon-xs-sq"
                   :title="t('alerts.delete')"
                   class="max-md:hidden"
                   @click.stop="confirmDeleteReport(row)"
diff --git a/web/src/components/settings/AnnouncementBannerList.vue b/web/src/components/settings/AnnouncementBannerList.vue
index 68334f9954..5888115656 100644
--- a/web/src/components/settings/AnnouncementBannerList.vue
+++ b/web/src/components/settings/AnnouncementBannerList.vue
@@ -138,7 +138,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <div class="flex items-center justify-center gap-1">
               <OButton
                 variant="ghost"
-                size="icon-sm"
+                size="icon-xs-sq"
                 icon-left="edit"
                 :title="t('announcements.card.edit')"
                 :aria-label="t('announcements.card.edit')"
@@ -147,7 +147,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               />
               <OButton
                 variant="ghost"
-                size="icon-sm"
+                size="icon-xs-sq"
                 icon-left="content-copy"
                 :aria-label="duplicateLabel(row)"
                 :data-test="`announcement-list-duplicate-${row.index}`"
@@ -163,7 +163,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </OButton>
               <OButton
                 variant="ghost-destructive"
-                size="icon-sm"
+                size="icon-xs-sq"
                 icon-left="delete"
                 :title="t('announcements.card.remove')"
                 :aria-label="t('announcements.card.remove')"
diff --git a/web/src/components/settings/General.vue b/web/src/components/settings/General.vue
index 163d5d603b..626677fdf8 100644
--- a/web/src/components/settings/General.vue
+++ b/web/src/components/settings/General.vue
@@ -42,10 +42,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :aria-label="t('settings.scrapintervalLabel')"
               type="number"
               min="0"
-              class="ms-2 w-30!"
+              class="w-52!"
               data-test="general-settings-scrape-interval"
             />
-            <span class="individual-setting-description text-compact opacity-70">
+            <span class="individual-setting-description text-compact text-text-secondary">
               {{ t("settings.scrapeIntervalDescription") }}
             </span>
           </div>
@@ -62,8 +62,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               type="number"
               :min="1000"
               :max="1000000"
-              class="ms-2 w-52!"
-              :placeholder="raw('40000 (' + t('settings.systemDefault') + ')')"
+              class="w-52!"
+              :placeholder="raw('40000')"
               :aria-label="t('settings.maxSeriesPerQueryLabel')"
               data-test="general-settings-max-series-per-query"
             >
@@ -73,7 +73,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </OIcon>
               </template>
             </OFormInput>
-            <span class="individual-setting-description text-compact opacity-70">
+            <span class="individual-setting-description text-compact text-text-secondary">
               {{ t("settings.maxSeriesPerQueryDescription") }}
             </span>
           </div>
@@ -85,7 +85,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <span class="individual-setting-title text-sm leading-5 font-medium">
               {{ t("settings.manageTheme") }}
             </span>
-            <div class="-ms-15 flex items-center gap-2 max-lg:ms-0 max-lg:flex-wrap">
+            <div class="flex items-center gap-2 max-lg:flex-wrap">
               <!-- Light Mode Theme -->
               <div
                 class="group/chip bg-surface-subtle border-border-default hover:bg-surface-subtle-hover hover:border-accent inline-flex cursor-pointer items-center gap-2 rounded-full border py-1.5 ps-1.5 pe-3 transition-all duration-200 hover:-translate-y-px hover:shadow-md"
@@ -104,10 +104,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   />
                   <!-- eslint-enable local/no-hardcoded-px -->
                 </div>
-                <span class="chip-label text-2xs font-semibold tracking-wider opacity-50">{{
+                <span class="chip-label text-text-body text-xs font-semibold">{{
                   t("settings.light")
                 }}</span>
-                <span class="chip-value text-2xs font-mono font-medium tracking-tight opacity-70">{{
+                <span class="chip-value text-text-body font-mono text-xs font-medium">{{
                   customLightColor
                 }}</span>
               </div>
@@ -130,10 +130,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   />
                   <!-- eslint-enable local/no-hardcoded-px -->
                 </div>
-                <span class="chip-label text-2xs font-semibold tracking-wider opacity-50">{{
+                <span class="chip-label text-text-body text-xs font-semibold">{{
                   t("settings.dark")
                 }}</span>
-                <span class="chip-value text-2xs font-mono font-medium tracking-tight opacity-70">{{
+                <span class="chip-value text-text-body font-mono text-xs font-medium">{{
                   customDarkColor
                 }}</span>
               </div>
@@ -152,7 +152,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <OTooltip :content="t('settings.resetToDefaultColors')" side="top" />
               </div>
             </div>
-            <span class="individual-setting-description text-compact self-start opacity-70">
+            <span
+              class="individual-setting-description text-compact text-text-secondary self-start"
+            >
               {{ t("settings.themeManagementDescription") }}
             </span>
           </div>
@@ -255,7 +257,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               />
             </div>
           </template>
-          <span class="individual-setting-description text-compact opacity-70">
+          <span class="individual-setting-description text-compact text-text-secondary">
             {{ t("settings.customLogoTextDescription") }}
           </span>
         </div>
@@ -343,7 +345,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
             </div>
           </template>
-          <span class="individual-setting-description text-compact -translate-y-1.25 opacity-70">
+          <span
+            class="individual-setting-description text-compact text-text-secondary -translate-y-1.25"
+          >
             {{ t("settings.customLogoLightDescription") }}
           </span>
         </div>
@@ -432,7 +436,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
             </div>
           </template>
-          <span class="individual-setting-description text-compact -translate-y-1.25 opacity-70">
+          <span
+            class="individual-setting-description text-compact text-text-secondary -translate-y-1.25"
+          >
             {{ t("settings.customLogoDarkDescription") }}
           </span>
         </div>
diff --git a/web/src/components/settings/ModelPricingEditor.vue b/web/src/components/settings/ModelPricingEditor.vue
index 1804e1008a..8ccf2c0944 100644
--- a/web/src/components/settings/ModelPricingEditor.vue
+++ b/web/src/components/settings/ModelPricingEditor.vue
@@ -152,7 +152,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               class="examples-table border-card-glass-border rounded-default overflow-hidden border"
             >
               <div
-                class="bg-surface-subtle border-card-glass-border text-3xs grid grid-cols-[11.25rem_1fr_auto] gap-3 border-b px-3 py-1.5 font-bold tracking-[0.06em] uppercase opacity-45"
+                class="bg-surface-subtle border-card-glass-border text-2xs text-text-secondary grid grid-cols-[11.25rem_1fr_auto] gap-3 border-b px-3 py-1.5 font-bold tracking-[0.06em] uppercase"
               >
                 <span>{{ t("modelPricing.patternExamplesModelCol") }}</span>
                 <span>{{ t("modelPricing.patternExamplesPatternCol") }}</span>
@@ -240,7 +240,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 >
                   <div class="flex items-center gap-2">
                     <span
-                      class="tier-name-label shrink-0 text-xs font-medium whitespace-nowrap opacity-50"
+                      class="tier-name-label text-text-secondary shrink-0 text-xs font-medium whitespace-nowrap"
                       >{{ t("modelPricing.tierName") }}</span
                     >
                     <OFormInput
@@ -331,7 +331,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <OText variant="section">
                       {{ t("modelPricing.timeWindows") }}
                     </OText>
-                    <div class="text-2xs mt-px mb-2 opacity-55">
+                    <div class="text-2xs text-text-secondary mt-px mb-2">
                       {{ t("modelPricing.timeWindowsDesc") }}
                     </div>
                     <!-- Key by INDEX to match the index-based field names — see the
@@ -370,7 +370,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           </OButton>
                           <span
                             v-if="windowWraps(win)"
-                            class="text-2xs whitespace-nowrap opacity-55"
+                            class="text-2xs text-text-secondary whitespace-nowrap"
                             :data-test="`model-pricing-tier-window-wrap-hint-${idx}-${winIdx}`"
                           >
                             {{ t("modelPricing.timeWindowWrapsHint") }}
@@ -380,7 +380,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       <!-- The same window in the viewer's timezone -->
                       <div
                         v-if="windowLocalHint(win)"
-                        class="text-2xs mt-1 opacity-55"
+                        class="text-2xs text-text-secondary mt-1"
                         :data-test="`model-pricing-tier-window-local-hint-${idx}-${winIdx}`"
                       >
                         {{ t("modelPricing.localTimeHint", { range: windowLocalHint(win) }) }}
@@ -403,7 +403,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <OText variant="section">
                       {{ t("modelPricing.attributeRules") }}
                     </OText>
-                    <div class="text-2xs mt-px mb-2 opacity-55">
+                    <div class="text-2xs text-text-secondary mt-px mb-2">
                       {{ t("modelPricing.attributeRulesDesc") }}
                     </div>
                     <!-- Index keys: form fields bind to their name once, see the price-row note below. -->
@@ -582,7 +582,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                       <!-- Column headers (only when rows exist) -->
                       <div
                         v-if="tier.prices.length"
-                        class="price-table-head text-2xs grid grid-cols-[1fr_10rem_auto] gap-2 px-3 py-1.5 font-semibold tracking-[0.01em] opacity-45 max-lg:grid-cols-[1fr_6rem_auto]"
+                        class="price-table-head text-2xs text-text-secondary grid grid-cols-[1fr_10rem_auto] gap-2 px-3 py-1.5 font-semibold tracking-[0.01em] max-lg:grid-cols-[1fr_6rem_auto]"
                       >
                         <span>{{ t("modelPricing.usageKeyCol") }}</span>
                         <span>{{ t("modelPricing.colPrice") }}</span>
diff --git a/web/src/components/settings/ModelPricingList.vue b/web/src/components/settings/ModelPricingList.vue
index 0b92a02406..76eae13934 100644
--- a/web/src/components/settings/ModelPricingList.vue
+++ b/web/src/components/settings/ModelPricingList.vue
@@ -37,7 +37,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     >
       <template #title>
         {{ t("modelPricing.header") }}
-        <OButton variant="ghost" size="icon-sm" class="-ms-1" data-test="model-pricing-info-btn">
+        <OButton variant="ghost" size="icon-xs-sq" class="-ms-1" data-test="model-pricing-info-btn">
           <OIcon name="info-outline" size="sm" />
           <OTooltip :content="t('modelPricing.matchingPriorityTooltip')" />
         </OButton>
@@ -333,21 +333,24 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           </div>
                           <div
                             v-if="tier.utc_windows?.length"
-                            class="text-2xs font-mono opacity-70"
+                            class="text-2xs text-text-secondary font-mono"
                           >
                             {{ formatUtcWindows(tier.utc_windows) }}
                           </div>
-                          <div v-if="tierWindowsLocal(tier)" class="text-2xs font-mono opacity-70">
+                          <div
+                            v-if="tierWindowsLocal(tier)"
+                            class="text-2xs text-text-secondary font-mono"
+                          >
                             {{ t("modelPricing.localTimeHint", { range: tierWindowsLocal(tier) }) }}
                           </div>
                           <div
                             v-for="(rule, rIdx) in tier.rules ?? []"
                             :key="rIdx"
-                            class="text-2xs font-mono opacity-70"
+                            class="text-2xs text-text-secondary font-mono"
                           >
                             {{ formatTierRule(rule, t) }}
                           </div>
-                          <div v-if="isUnrestrictedTier(tier)" class="text-2xs opacity-70">
+                          <div v-if="isUnrestrictedTier(tier)" class="text-2xs text-text-secondary">
                             {{ t("modelPricing.tierAlwaysActive") }}
                           </div>
                           <table class="mt-0.5 w-full border-collapse">
@@ -377,7 +380,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <template v-if="!isReadOnly(row)">
                 <OButton
                   :variant="row.enabled ? 'ghost-destructive' : 'ghost-success'"
-                  size="icon-sm"
+                  size="icon-xs-sq"
                   class="max-md:hidden"
                   :title="
                     row.enabled ? t('modelPricing.actionDisable') : t('modelPricing.actionEnable')
@@ -389,7 +392,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 />
                 <OButton
                   variant="ghost"
-                  size="icon-sm"
+                  size="icon-xs-sq"
                   class="max-md:hidden"
                   :title="t('modelPricing.actionEdit')"
                   @click.stop="openEditor(row)"
@@ -419,7 +422,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <OButton
                       icon-left="more-vert"
                       variant="ghost"
-                      size="icon-sm"
+                      size="icon-xs-sq"
                       :aria-label="duplicateActionLabel(row, t('modelPricing.moreActions'))"
                       data-test="model-pricing-row-more-actions"
                       @click.stop
@@ -475,7 +478,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <template v-else>
                 <OButton
                   variant="ghost"
-                  size="icon-sm"
+                  size="icon-xs-sq"
                   :aria-label="duplicateActionLabel(row, t('modelPricing.actionClone'))"
                   @click.stop="duplicateModel(row)"
                   data-test="model-pricing-clone-btn"
@@ -621,13 +624,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     >
                   </div>
                   <div v-if="tier.utc_windows?.length" class="mt-2">
-                    <div class="text-2xs mb-1.5 opacity-55">
+                    <div class="text-2xs text-text-secondary mb-1.5">
                       {{ t("modelPricing.timeWindows") }}
                       <span class="ms-1 font-mono">{{ formatUtcWindows(tier.utc_windows) }}</span>
                     </div>
                     <div
                       v-if="tierWindowsLocal(tier)"
-                      class="text-2xs mb-1.5 opacity-55"
+                      class="text-2xs text-text-secondary mb-1.5"
                       data-test="model-pricing-drawer-tier-local-hint"
                     >
                       {{ t("modelPricing.localTimeHint", { range: tierWindowsLocal(tier) }) }}
@@ -642,7 +645,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   >
                     <OCode>{{ formatTierRule(rule, t) }}</OCode>
                   </div>
-                  <div v-if="isUnrestrictedTier(tier)" class="text-2xs mt-0.5 opacity-55">
+                  <div v-if="isUnrestrictedTier(tier)" class="text-2xs text-text-secondary mt-0.5">
                     {{ t("modelPricing.tierAlwaysActive") }}
                   </div>
                 </div>
diff --git a/web/src/components/settings/RegexPatternList.vue b/web/src/components/settings/RegexPatternList.vue
index 2078cc619c..3ea4ef5dc1 100644
--- a/web/src/components/settings/RegexPatternList.vue
+++ b/web/src/components/settings/RegexPatternList.vue
@@ -141,7 +141,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :data-test="`regex-pattern-list-${row.id}-export-regex-pattern`"
                   data-row-action="export"
                   variant="ghost"
-                  size="icon-sm"
+                  size="icon-xs-sq"
                   class="max-md:hidden"
                   :title="t('settings.regexPatternList.exportTitle')"
                   @click.stop="exportRegexPattern(row)"
@@ -151,7 +151,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :data-test="`regex-pattern-list-${row.id}-update-regex-pattern`"
                   data-row-action="edit"
                   variant="ghost"
-                  size="icon-sm"
+                  size="icon-xs-sq"
                   class="max-md:hidden"
                   :title="t('regex_patterns.edit')"
                   @click.stop="editRegexPattern(row)"
@@ -161,7 +161,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :data-test="`regex-pattern-list-${row.id}-delete-regex-pattern`"
                   data-row-action="delete"
                   variant="ghost-destructive"
-                  size="icon-sm"
+                  size="icon-xs-sq"
                   class="max-md:hidden"
                   :title="t('regex_patterns.delete')"
                   @click.stop="confirmDeleteRegexPattern(row)"
diff --git a/web/src/components/settings/ServiceIdentitySetup.vue b/web/src/components/settings/ServiceIdentitySetup.vue
index 98026448f6..3ce04e2d08 100644
--- a/web/src/components/settings/ServiceIdentitySetup.vue
+++ b/web/src/components/settings/ServiceIdentitySetup.vue
@@ -55,7 +55,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     t("settings.correlation.service")
                   }}</span>
                   {{ t("settings.serviceIdentitySetup.fieldAlias") }}
-                  <span class="text-xs opacity-60"
+                  <span class="text-text-secondary text-xs"
                     >({{ detectedServiceFields.length + unseenServiceFields.length }})</span
                   >
                 </template>
@@ -438,7 +438,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <OIcon name="check-circle" size="sm" />
             <div class="text-compact min-w-0 flex-1 leading-tight">
               {{ t("settings.serviceIdentitySetup.workloadDetectedUsingFields") }}
-              <span class="text-xs opacity-60">({{ trackedAliasIds.length }})</span>
+              <span class="text-text-secondary text-xs">({{ trackedAliasIds.length }})</span>
             </div>
             <OIcon
               :name="trackedAliasExpanded ? 'keyboard-arrow-up' : 'keyboard-arrow-down'"
diff --git a/web/src/components/settings/SyntheticsLocationsList.vue b/web/src/components/settings/SyntheticsLocationsList.vue
index 6293464fe0..ffc4930939 100644
--- a/web/src/components/settings/SyntheticsLocationsList.vue
+++ b/web/src/components/settings/SyntheticsLocationsList.vue
@@ -88,7 +88,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <template #toolbar-trailing>
               <OButton
                 variant="outline"
-                size="icon-sm"
+                size="icon-xs-sq"
                 icon-left="refresh"
                 :loading="listLoading"
                 data-test="synthetics-locations-refresh-btn"
@@ -127,7 +127,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <OButton
                   v-else
                   :variant="row.enabled ? 'ghost-destructive' : 'ghost'"
-                  size="icon-sm"
+                  size="icon-xs-sq"
                   class="max-md:hidden"
                   :icon-left="row.enabled ? 'pause' : 'play-arrow'"
                   :data-test="`synthetics-locations-${row.id}-${row.enabled ? 'disable' : 'enable'}-btn`"
@@ -148,7 +148,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :data-test="`synthetics-locations-${row.id}-edit-btn`"
                   data-row-action="edit"
                   variant="ghost"
-                  size="icon-sm"
+                  size="icon-xs-sq"
                   class="max-md:hidden"
                   :title="t('common.edit')"
                   @click.stop="openEditDialog(row)"
@@ -162,7 +162,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :data-test="`synthetics-locations-${row.id}-delete-btn`"
                   data-row-action="delete"
                   variant="ghost-destructive"
-                  size="icon-sm"
+                  size="icon-xs-sq"
                   class="max-md:hidden"
                   :title="t('common.delete')"
                   @click.stop="confirmDelete(row)"
diff --git a/web/src/components/settings/TestModelMatchDialog.vue b/web/src/components/settings/TestModelMatchDialog.vue
index 95c464fd7a..2545871b00 100644
--- a/web/src/components/settings/TestModelMatchDialog.vue
+++ b/web/src/components/settings/TestModelMatchDialog.vue
@@ -154,7 +154,7 @@
               <div class="text-compact font-bold">
                 {{ t("modelPricing.noMatchFound") }}
               </div>
-              <div class="mt-0.5 text-xs opacity-70">
+              <div class="text-text-secondary mt-0.5 text-xs">
                 {{
                   t("modelPricing.noMatchDesc", {
                     modelName: testModelName,
@@ -165,10 +165,10 @@
             <div
               class="rounded-default bg-surface-panel border-card-glass-border border px-3.5 py-3"
             >
-              <div class="text-2xs mb-1.5 font-semibold opacity-55">
+              <div class="text-2xs text-text-secondary mb-1.5 font-semibold">
                 {{ t("modelPricing.troubleshootingTitle") }}
               </div>
-              <ul class="m-0 ps-4 text-xs leading-[1.9] opacity-60">
+              <ul class="text-text-secondary m-0 ps-4 text-xs leading-[1.9]">
                 <li>{{ t("modelPricing.tip1") }}</li>
                 <li>{{ t("modelPricing.tip2") }}</li>
                 <li>{{ t("modelPricing.tip3") }}</li>
@@ -191,12 +191,12 @@
                     : t("modelPricing.matchFound")
                 }}
               </div>
-              <div class="mt-0.5 text-xs opacity-70">
+              <div class="text-text-secondary mt-0.5 text-xs">
                 <OCode truncate>{{ testResult.matched.name }}</OCode>
               </div>
               <div
                 v-if="isApproximateMatch"
-                class="mt-0.5 text-xs opacity-70"
+                class="text-text-secondary mt-0.5 text-xs"
                 data-test="test-match-approximate"
               >
                 {{ t("modelPricing.approximateMatchDesc", { modelName: testModelName }) }}
@@ -216,7 +216,7 @@
             <div
               class="border-card-glass-border rounded-default bg-surface-panel border px-3.5 py-3"
             >
-              <div class="text-3xs mb-2 font-semibold opacity-40">
+              <div class="text-2xs text-text-secondary mb-2 font-semibold">
                 {{ t("modelPricing.matchPriority") }}
               </div>
               <div class="flex flex-wrap items-center gap-1.5">
@@ -252,7 +252,7 @@
                   <div class="text-compact font-bold">
                     {{ testResult.tier || t("settings.testModelMatchDialog.defaultTier") }}
                   </div>
-                  <div class="text-2xs mt-0.5 opacity-50" v-if="matchedTierDef?.condition">
+                  <div class="text-2xs text-text-secondary mt-0.5" v-if="matchedTierDef?.condition">
                     {{ t("settings.testModelMatchDialog.condition") }}
                     <OCode
                       >{{ matchedTierDef.condition.usage_key }}
@@ -261,7 +261,7 @@
                     >
                   </div>
                   <div
-                    class="text-2xs mt-0.5 flex items-center gap-1 opacity-50"
+                    class="text-2xs text-text-secondary mt-0.5 flex items-center gap-1"
                     v-if="matchedTierWindows.length"
                     data-test="test-match-tier-windows"
                   >
@@ -274,13 +274,13 @@
                   <div
                     v-for="(rule, rIdx) in matchedTierRules"
                     :key="rIdx"
-                    class="text-2xs mt-0.5 opacity-50"
+                    class="text-2xs text-text-secondary mt-0.5"
                     data-test="test-match-tier-rule"
                   >
                     <OCode>{{ formatTierRule(rule, t) }}</OCode>
                   </div>
                   <div
-                    class="text-2xs mt-0.5 opacity-50"
+                    class="text-2xs text-text-secondary mt-0.5"
                     v-if="
                       !matchedTierDef?.condition &&
                       !matchedTierWindows.length &&
@@ -296,10 +296,10 @@
                 <div
                   class="border-card-glass-border bg-surface-panel grid grid-cols-[1.5fr_1fr] gap-2 border-b px-3.5 py-1.75"
                 >
-                  <span class="text-3xs font-semibold opacity-40">{{
+                  <span class="text-2xs text-text-secondary font-semibold">{{
                     t("modelPricing.usageType")
                   }}</span>
-                  <span class="text-3xs text-right font-semibold opacity-40">{{
+                  <span class="text-2xs text-text-secondary text-right font-semibold">{{
                     t("modelPricing.pricePerMTokens")
                   }}</span>
                 </div>
diff --git a/web/src/components/synthetic-monitoring/MonitorTable.vue b/web/src/components/synthetic-monitoring/MonitorTable.vue
index 661377d5dd..112bf35b8c 100644
--- a/web/src/components/synthetic-monitoring/MonitorTable.vue
+++ b/web/src/components/synthetic-monitoring/MonitorTable.vue
@@ -292,7 +292,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <OButton
           v-else
           :variant="(row as any).enabled ? 'ghost-destructive' : 'ghost'"
-          size="icon-sm"
+          size="icon-xs-sq"
           :icon-left="(row as any).enabled ? 'pause' : 'play-arrow'"
           class="max-md:hidden"
           :data-test="`${dataTest}-${(row as any).enabled ? 'pause' : 'enable'}-btn`"
@@ -309,7 +309,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Edit -->
         <OButton
           variant="ghost"
-          size="icon-sm"
+          size="icon-xs-sq"
           icon-left="edit"
           class="max-md:hidden"
           :data-test="`${dataTest}-edit-btn`"
@@ -321,7 +321,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Duplicate -->
         <OButton
           variant="ghost"
-          size="icon-sm"
+          size="icon-xs-sq"
           icon-left="content-copy"
           class="max-md:hidden"
           :data-test="`${dataTest}-duplicate-btn`"
@@ -332,7 +332,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
         <OButton
           variant="ghost"
-          size="icon-sm"
+          size="icon-xs-sq"
           icon-left="drive-file-move"
           class="max-md:hidden"
           :data-test="`${dataTest}-move-btn`"
@@ -356,7 +356,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <OButton
               v-else
               variant="ghost"
-              size="icon-sm"
+              size="icon-xs-sq"
               icon-left="more-vert"
               :data-test="`${dataTest}-more-btn`"
               @click.stop
diff --git a/web/src/components/synthetics/variables/SyntheticsVariablesList.vue b/web/src/components/synthetics/variables/SyntheticsVariablesList.vue
index 174883263c..e1575a942a 100644
--- a/web/src/components/synthetics/variables/SyntheticsVariablesList.vue
+++ b/web/src/components/synthetics/variables/SyntheticsVariablesList.vue
@@ -56,7 +56,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <template #toolbar-trailing>
         <OButton
           variant="outline"
-          size="icon-sm"
+          size="icon-xs-sq"
           icon-left="refresh"
           :loading="loading"
           data-test="synthetics-variables-refresh-btn"
@@ -127,14 +127,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <OButton
           :aria-label="t('common.edit')"
           variant="ghost"
-          size="icon-sm"
+          size="icon-xs-sq"
           icon-left="edit"
           data-test="synthetics-variable-edit-btn"
           @click="openEdit(row)"
         />
         <OButton
           variant="ghost"
-          size="icon-sm"
+          size="icon-xs-sq"
           icon-left="content-copy"
           data-test="synthetics-variable-duplicate-btn"
           @click="openDuplicate(row)"
@@ -154,7 +154,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <OButton
               :aria-label="t('synthetics.promote.toGlobal')"
               variant="ghost"
-              size="icon-sm"
+              size="icon-xs-sq"
               icon-left="drive-file-move"
               :disabled="row.kind === 'secret'"
               data-test="synthetics-variable-promote-btn"
@@ -165,7 +165,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <OButton
           v-if="!environment && environments.length > 0"
           variant="ghost"
-          size="icon-sm"
+          size="icon-xs-sq"
           icon-left="drive-file-move"
           data-test="synthetics-variable-split-btn"
           @click="openSplit(row)"
@@ -175,7 +175,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <OButton
           :aria-label="t('common.delete')"
           variant="ghost"
-          size="icon-sm"
+          size="icon-xs-sq"
           icon-left="delete"
           data-test="synthetics-variable-delete-btn"
           @click="removeVariable(row)"
diff --git a/web/src/components/workflows/WorkflowsList.vue b/web/src/components/workflows/WorkflowsList.vue
index 54618f3f7d..a1d1b0dd3f 100644
--- a/web/src/components/workflows/WorkflowsList.vue
+++ b/web/src/components/workflows/WorkflowsList.vue
@@ -219,7 +219,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :data-test="`workflow-list-${row.name}-pause-start-action`"
                   :data-row-action="row.enabled ? 'pause' : 'resume'"
                   :variant="row.enabled ? 'ghost-destructive' : 'ghost-success'"
-                  size="icon-sm"
+                  size="icon-xs-sq"
                   :icon-left="row.enabled ? 'pause' : 'play-arrow'"
                   class="max-md:hidden"
                   @click.stop="toggleWorkflow(row)"
@@ -232,7 +232,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <OButton
                   :data-test="`workflow-list-${row.name}-view`"
                   variant="ghost"
-                  size="icon-sm"
+                  size="icon-xs-sq"
                   icon-left="visibility"
                   :title="t('workflow.view')"
                 >
@@ -243,7 +243,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <OButton
                   :data-test="`workflow-list-${row.name}-edit`"
                   variant="ghost"
-                  size="icon-sm"
+                  size="icon-xs-sq"
                   icon-left="edit"
                   class="max-md:hidden"
                   @click.stop="editWorkflow(row)"
@@ -254,7 +254,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   v-if="!row.is_draft"
                   :data-test="`workflow-list-${row.name}-move`"
                   variant="ghost"
-                  size="icon-sm"
+                  size="icon-xs-sq"
                   icon-left="drive-file-move"
                   :title="t('workflow.moveToFolder')"
                   @click.stop="openMoveDialog(row)"
@@ -266,7 +266,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <OButton
                       :aria-label="t('common.moreActions')"
                       variant="ghost"
-                      size="icon-sm"
+                      size="icon-xs-sq"
                       icon-left="more-vert"
                       :data-test="`workflow-list-${row.name}-more-options`"
                       @click.stop
diff --git a/web/src/constants/themes.ts b/web/src/constants/themes.ts
index d05d55923c..9275324a25 100644
--- a/web/src/constants/themes.ts
+++ b/web/src/constants/themes.ts
@@ -73,7 +73,7 @@ export const PREDEFINED_THEMES: PredefinedTheme[] = [
     id: 10,
     name: raw("O2 Signature"),
     light: {
-      themeColor: "#6B76E3",
+      themeColor: "#5A64DB",
     },
     dark: {
       themeColor: "#8B8DF0",
diff --git a/web/src/lib/core/Button/OButton.vue b/web/src/lib/core/Button/OButton.vue
index 9f5d2ec228..4ca0691c09 100644
--- a/web/src/lib/core/Button/OButton.vue
+++ b/web/src/lib/core/Button/OButton.vue
@@ -390,8 +390,8 @@ const sizeClasses: Record<NonNullable<ButtonProps["size"]>, string> = {
   // 34px control height — the workhorse compact button that pairs with 34px
   // inputs in toolbars/headers. (radius 8 = rounded-default.)
   sm: "h-[2.125rem] ps-3 pe-3 text-sm gap-2 rounded-default",
-  // 30px labeled — matches icon-toolbar height for labeled outline buttons in toolbars
-  "sm-toolbar": "h-[1.875rem] ps-2 pe-2 text-xs gap-1.5 rounded-default",
+  // Every toolbar control shares this box so a bar never mixes heights or padding.
+  "sm-toolbar": "h-8.5 ps-2.5 pe-2.5 text-xs gap-1.5 rounded-default",
   "xs-grouped": "h-6.5 ps-2 pe-2 text-xs gap-1.5 rounded-default",
   // Compact labeled size for inline field chips (axis items) — ~28px, matches the dense button size
   // Extra-compact chip size — 24px height for axis field chips in query builder
@@ -418,8 +418,8 @@ const sizeClasses: Record<NonNullable<ButtonProps["size"]>, string> = {
   "icon-lg": "h-12 w-12 shrink-0 p-0 rounded-default gap-x-0",
   "icon-circle": "size-8 shrink-0 p-0 rounded-full gap-x-0",
   "icon-circle-sm": "size-7 shrink-0 p-0 rounded-full gap-x-0",
-  // 30×30px square — for toolbar icon buttons (auto-refresh, share, hamburger)
-  "icon-toolbar": "size-[1.875rem] shrink-0 p-0 rounded-default gap-x-0",
+  // Square twin of sm-toolbar for icon-only toolbar controls.
+  "icon-toolbar": "size-8.5 shrink-0 p-0 rounded-default gap-x-0",
   // 26px rounded-default — compact modern icon button for panel header collapse/expand
   "icon-panel": "size-6.5 shrink-0 p-0 rounded-default gap-x-0",
   // Tall narrow vertical rectangle — 32px × 20px for splitter collapse/expand buttons
diff --git a/web/src/lib/core/Code/OCodeBlock.vue b/web/src/lib/core/Code/OCodeBlock.vue
index 8087c5e25a..e92b0f3c2d 100644
--- a/web/src/lib/core/Code/OCodeBlock.vue
+++ b/web/src/lib/core/Code/OCodeBlock.vue
@@ -182,7 +182,7 @@ const onNativeCopy = () => {
           <i class="bg-warning block size-2.5 rounded-full" />
           <i class="bg-status-positive block size-2.5 rounded-full" />
         </span>
-        <span class="o2-code-lang text-2xs font-mono opacity-55">{{
+        <span class="o2-code-lang text-text-body font-mono text-xs">{{
           t("components.codeBlock.terminal")
         }}</span>
       </span>
@@ -195,7 +195,7 @@ const onNativeCopy = () => {
           filename || lang || t("common.plainText")
         }}</span>
       </span>
-      <span v-else class="o2-code-lang text-2xs font-mono opacity-55">{{
+      <span v-else class="o2-code-lang text-text-body font-mono text-xs">{{
         lang || t("common.plainText")
       }}</span>
       <div class="flex items-center gap-1">
diff --git a/web/src/lib/core/PageHeader/OPageHeader.vue b/web/src/lib/core/PageHeader/OPageHeader.vue
index b1c95f7b14..a974e0ec18 100644
--- a/web/src/lib/core/PageHeader/OPageHeader.vue
+++ b/web/src/lib/core/PageHeader/OPageHeader.vue
@@ -141,9 +141,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           >
             <slot name="title">{{ title }}</slot>
           </OTruncatedText>
-          <!-- Fixed-height subtitle band: keeps the <h1> at an identical Y whether
-             the subtitle is present or not, so the title doesn't appear to shift
-             when navigating between views. Content is vertically centered. -->
+          <!-- A page without a subtitle centres its title lower than one with a subtitle. -->
           <OText
             v-if="hasSubtitle()"
             variant="meta"
diff --git a/web/src/lib/core/RefreshButton/ORefreshButton.vue b/web/src/lib/core/RefreshButton/ORefreshButton.vue
index df27d7e35a..55ad3eb7ec 100644
--- a/web/src/lib/core/RefreshButton/ORefreshButton.vue
+++ b/web/src/lib/core/RefreshButton/ORefreshButton.vue
@@ -95,12 +95,10 @@ function handleClick(e: MouseEvent) {
 </script>
 
 <template>
-  <!-- `h-8!` beats sm-toolbar's own 30px, so this matches the 32px icon-sm buttons beside it. -->
   <OButton
     v-if="layout === 'inline'"
     :variant="variant"
     size="sm-toolbar"
-    class="h-8!"
     icon-left="refresh"
     :loading="loading"
     :disabled="disabled"
diff --git a/web/src/lib/core/Table/sub-components/OTableColumnToggle.vue b/web/src/lib/core/Table/sub-components/OTableColumnToggle.vue
index 7d9f70a436..19d9ace9f0 100644
--- a/web/src/lib/core/Table/sub-components/OTableColumnToggle.vue
+++ b/web/src/lib/core/Table/sub-components/OTableColumnToggle.vue
@@ -61,7 +61,7 @@ function resetToDefault(): void {
       <div class="relative inline-flex">
         <OButton
           variant="outline"
-          size="icon-sm"
+          size="icon-toolbar"
           :aria-label="
             hiddenCount > 0
               ? t('common.manageColumnsHidden', { count: hiddenCount })
@@ -83,7 +83,7 @@ function resetToDefault(): void {
         </OButton>
         <span
           v-if="hiddenCount > 0"
-          class="bg-count-badge-bg text-3xs pointer-events-none absolute -top-1 -right-1 inline-flex h-4 w-4 items-center justify-center rounded-full leading-none font-medium text-white"
+          class="bg-count-badge-bg text-2xs pointer-events-none absolute -top-1 -right-1 inline-flex h-4 w-4 items-center justify-center rounded-full leading-none font-medium text-white"
           data-test="o2-table-column-toggle-hidden-badge"
         >
           {{ hiddenCount }}
diff --git a/web/src/lib/core/Table/sub-components/OTablePagination.vue b/web/src/lib/core/Table/sub-components/OTablePagination.vue
index 982ac2c45d..6c77b03a42 100644
--- a/web/src/lib/core/Table/sub-components/OTablePagination.vue
+++ b/web/src/lib/core/Table/sub-components/OTablePagination.vue
@@ -137,7 +137,7 @@ const selectionLabel = computed(() => {
           v-model="pageSizeModel"
           :options="pageSizeSelectOptions"
           :searchable="false"
-          size="sm"
+          size="xs"
           :aria-label="t('search.recordsPerPage')"
           data-test="o2-table-page-size-select"
         />
@@ -146,7 +146,7 @@ const selectionLabel = computed(() => {
       <nav class="flex items-center gap-1" :aria-label="t('components.pagination.pagination')">
         <OButton
           variant="outline"
-          size="icon"
+          size="icon-xs-sq"
           :disabled="isFirstPage"
           :aria-label="t('search.firstPage')"
           data-test="o2-table-first-page-btn"
@@ -156,7 +156,7 @@ const selectionLabel = computed(() => {
         </OButton>
         <OButton
           variant="outline"
-          size="icon"
+          size="icon-xs-sq"
           :disabled="isFirstPage"
           :aria-label="t('components.pagination.previousPage')"
           data-test="o2-table-prev-page-btn"
@@ -166,7 +166,7 @@ const selectionLabel = computed(() => {
         </OButton>
         <OButton
           variant="outline"
-          size="icon"
+          size="icon-xs-sq"
           :disabled="isLastPage"
           :aria-label="t('components.pagination.nextPage')"
           data-test="o2-table-next-page-btn"
@@ -177,7 +177,7 @@ const selectionLabel = computed(() => {
         <OButton
           v-if="totalCountExact"
           variant="outline"
-          size="icon"
+          size="icon-xs-sq"
           :disabled="isLastPage"
           :aria-label="t('search.lastPage')"
           data-test="o2-table-last-page-btn"
diff --git a/web/src/lib/core/Table/sub-components/OTableSelectCheckbox.vue b/web/src/lib/core/Table/sub-components/OTableSelectCheckbox.vue
index 91a6b4027c..be6d977529 100644
--- a/web/src/lib/core/Table/sub-components/OTableSelectCheckbox.vue
+++ b/web/src/lib/core/Table/sub-components/OTableSelectCheckbox.vue
@@ -38,6 +38,7 @@ function handleUpdate(val: CheckboxModelValue) {
     :model-value="checkboxModel"
     :data-test="`o2-table-select-${rowId ?? 'header'}`"
     size="sm"
+    class="align-middle"
     :aria-label="label"
     :disabled="disabled"
     @update:model-value="handleUpdate"
diff --git a/web/src/lib/core/ToggleGroup/OToggleGroupItem.vue b/web/src/lib/core/ToggleGroup/OToggleGroupItem.vue
index c961c70939..9c49da198f 100644
--- a/web/src/lib/core/ToggleGroup/OToggleGroupItem.vue
+++ b/web/src/lib/core/ToggleGroup/OToggleGroupItem.vue
@@ -74,9 +74,9 @@ const dropIndicatorClass = computed<string>(() => {
 });
 
 const sizeClasses: Record<NonNullable<ToggleGroupItemProps["size"]>, string> = {
-  md: "h-9 px-3 text-sm max-md:px-2",
-  sm: "h-7 px-2.5 text-xs max-md:px-1.5",
-  xs: "h-5 px-1.5 text-xs max-md:px-1",
+  md: "h-9 gap-2 px-3 text-sm max-md:px-2",
+  sm: "h-7 gap-1.5 px-2.5 text-xs max-md:px-1.5",
+  xs: "h-5 gap-2 px-1.5 text-xs max-md:px-1",
 };
 
 // Icon size mirrors the toggle size
@@ -138,7 +138,7 @@ const iconSize: Record<NonNullable<ToggleGroupItemProps["size"]>, "xs" | "sm" |
       :aria-hidden="unavailable || undefined"
       :class="[
         // Layout
-        'inline-flex items-center justify-center gap-2',
+        'inline-flex items-center justify-center',
         sizeClasses[props.size],
         // Base state - inactive (transparent on track)
         'bg-toggle-item-bg text-toggle-item-text font-medium whitespace-nowrap',
diff --git a/web/src/lib/data/StatStrip/OStatCard.vue b/web/src/lib/data/StatStrip/OStatCard.vue
index c4d0060cbf..08bb923caa 100644
--- a/web/src/lib/data/StatStrip/OStatCard.vue
+++ b/web/src/lib/data/StatStrip/OStatCard.vue
@@ -31,6 +31,8 @@ const { lgUp } = useBreakpoint();
 
 const props = withDefaults(
   defineProps<{
+    /** Puts the label under the value, so a narrow tile keeps its full label. */
+    stacked?: boolean;
     label?: I18nText;
     value?: string | number;
     /**
@@ -154,7 +156,7 @@ const trendClass = computed(() =>
     :is="clickable ? 'button' : 'div'"
     :type="clickable ? 'button' : undefined"
     :aria-pressed="clickable ? String(selected) : undefined"
-    class="rounded-default bg-surface-base flex min-w-0 flex-col justify-center gap-1 overflow-hidden border px-2.5 py-1 text-left transition-colors max-lg:px-1.5"
+    class="rounded-default bg-surface-base flex min-w-0 flex-col justify-center gap-1.5 overflow-hidden border px-2.5 py-2 text-left transition-colors max-lg:px-1.5"
     :class="[
       selected ? 'border-accent' : 'border-border-default',
       clickable ? 'cursor-pointer' : '',
@@ -164,7 +166,10 @@ const trendClass = computed(() =>
     :data-test="dataTest"
   >
     <div class="flex min-w-0 items-center justify-between gap-2">
-      <div class="flex min-w-0 items-baseline gap-1.5">
+      <div
+        class="flex min-w-0"
+        :class="stacked ? 'flex-col items-start gap-1' : 'items-baseline gap-1.5'"
+      >
         <!-- The VALUE never shrinks: it is the payload, and a clipped "499.51…" is
              a useless number. When the tile is too narrow (5 tiles on a laptop),
              the squeeze is absorbed by the label, which truncates but stays: a
diff --git a/web/src/lib/data/StatStrip/OStatStrip.vue b/web/src/lib/data/StatStrip/OStatStrip.vue
index 6a0523c172..7c260c80a0 100644
--- a/web/src/lib/data/StatStrip/OStatStrip.vue
+++ b/web/src/lib/data/StatStrip/OStatStrip.vue
@@ -41,6 +41,8 @@ const props = withDefaults(
      * Leave off for the standard strip — long labels need the wider basis.
      */
     compact?: boolean;
+    /** Puts each label under its value, for strips too narrow to fit them side by side. */
+    stacked?: boolean;
   }>(),
   {
     items: () => [],
@@ -86,6 +88,7 @@ const onCardClick = (item: StatItem) => {
       :key="item.key"
       class="grow max-lg:shrink-0 max-lg:basis-auto"
       :class="compact ? 'basis-36' : 'basis-52'"
+      :stacked="stacked"
       :label="item.label"
       :value="item.value"
       :sub="item.sub"
diff --git a/web/src/lib/styles/tokens/component.css b/web/src/lib/styles/tokens/component.css
index 1eb1abb6f1..b84652ebd2 100644
--- a/web/src/lib/styles/tokens/component.css
+++ b/web/src/lib/styles/tokens/component.css
@@ -38,7 +38,7 @@
 
   /* Button — outline */
   --color-button-outline-text: var(--color-text-heading);
-  --color-button-outline-border: var(--color-border-default);
+  --color-button-outline-border: var(--color-border-control);
   --color-button-outline-hover-bg: var(--color-interactive-hover-bg);
   --color-button-outline-hover-border: var(--color-primary-300);
   --color-button-outline-active-bg: var(--color-surface-accent-active);
@@ -191,7 +191,7 @@
 
   /* Tabs */
   --color-tabs-indicator: var(--color-primary-600);
-  --color-tabs-active-text: var(--color-primary-600);
+  --color-tabs-active-text: var(--color-primary-700);
   --color-tabs-active-bg: var(--color-surface-accent-active);
   --color-tabs-inactive-text: var(--color-text-heading);
   --color-tabs-hover-text: var(--color-text-heading);
diff --git a/web/src/lib/styles/tokens/contrast-manifest.ts b/web/src/lib/styles/tokens/contrast-manifest.ts
index e92945e208..8917d91e54 100644
--- a/web/src/lib/styles/tokens/contrast-manifest.ts
+++ b/web/src/lib/styles/tokens/contrast-manifest.ts
@@ -897,18 +897,6 @@ export const CONTRAST_PAIRS: readonly ContrastPair[] = [
     issue: "WCAG-AA colour remediation (follow-up PR)",
     themes: ["dark"],
   },
-  {
-    fg: "--color-text-label",
-    category: "pending",
-    why: "fails the threshold against the page surface it is painted on",
-    issue: "WCAG-AA colour remediation (follow-up PR)",
-  },
-  {
-    fg: "--color-text-muted",
-    category: "pending",
-    why: "fails the threshold against the page surface it is painted on",
-    issue: "WCAG-AA colour remediation (follow-up PR)",
-  },
   {
     fg: "--color-thread-tool-link",
     category: "pending",
diff --git a/web/src/lib/styles/tokens/dark.css b/web/src/lib/styles/tokens/dark.css
index 7a0a8336b5..bc82850691 100644
--- a/web/src/lib/styles/tokens/dark.css
+++ b/web/src/lib/styles/tokens/dark.css
@@ -76,8 +76,8 @@
   --color-text-soft: var(--color-grey-200); /* feeds --color-select-text (OSelect trigger value) */
   --color-text-body: var(--color-grey-300); /* paragraphs, default body */
   --color-text-secondary: var(--color-grey-400); /* supporting text, descriptions */
-  --color-text-label: var(--color-grey-500); /* form labels, metadata */
-  --color-text-muted: var(--color-grey-500); /* de-emphasized */
+  --color-text-label: var(--color-grey-400); /* form labels, metadata */
+  --color-text-muted: var(--color-grey-400); /* de-emphasized */
   --color-text-disabled: var(--color-grey-600); /* dimmer than labels so disabled reads disabled */
   /* Between grey-500 and grey-400: the lowest grey that clears 4.5:1 on the dark canvas without matching secondary text. */
   --color-text-placeholder: #7c7c7c;
@@ -525,7 +525,7 @@
   --color-dialog-close-active-bg: var(--d-border);
 
   /* Pagination */
-  --color-pagination-item-active-bg: var(--color-primary-500);
+  --color-pagination-item-active-bg: var(--color-primary-800);
 
   /* Timeline */
   --color-timeline-dot-primary: var(--color-primary-500);
diff --git a/web/src/lib/styles/tokens/semantic.css b/web/src/lib/styles/tokens/semantic.css
index fe4162fa91..7854870790 100644
--- a/web/src/lib/styles/tokens/semantic.css
+++ b/web/src/lib/styles/tokens/semantic.css
@@ -15,8 +15,8 @@
   --color-text-heading: var(--color-grey-800); /* h1-h6, modal titles, page/panel titles */
   --color-text-body: var(--color-grey-700); /* paragraphs, default body */
   --color-text-secondary: var(--color-grey-500); /* supporting text, descriptions, captions */
-  --color-text-label: var(--color-grey-400); /* form labels, metadata, badges */
-  --color-text-muted: var(--color-grey-300); /* disabled, placeholder, de-emphasized */
+  --color-text-label: var(--color-grey-500); /* form labels, metadata, badges */
+  --color-text-muted: var(--color-grey-500); /* disabled, absent, de-emphasized */
   /* label, disabled, border-strong and scrollbar-thumb-hover share grey-400 but stay separate tokens so each can diverge. */
   --color-text-disabled: var(--color-grey-400);
   /* grey-500, not grey-400: placeholder text must clear 4.5:1 on white. */
diff --git a/web/src/plugins/logs/IndexList.vue b/web/src/plugins/logs/IndexList.vue
index 3b0cfdca3d..ea7f680c1d 100644
--- a/web/src/plugins/logs/IndexList.vue
+++ b/web/src/plugins/logs/IndexList.vue
@@ -97,7 +97,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <span
                 v-else
                 :data-test="`logs-search-stream-group-label-${group.id}`"
-                class="text-text-secondary mb-0.5 text-center text-xs font-medium"
+                class="text-text-secondary mb-0.5 text-left text-xs font-medium"
               >
                 {{ group.label }}
               </span>
diff --git a/web/src/plugins/logs/SearchBar.drillDownToggle.spec.ts b/web/src/plugins/logs/SearchBar.drillDownToggle.spec.ts
index d8df6bfab6..a6958f63c9 100644
--- a/web/src/plugins/logs/SearchBar.drillDownToggle.spec.ts
+++ b/web/src/plugins/logs/SearchBar.drillDownToggle.spec.ts
@@ -51,7 +51,9 @@ describe("SearchBar — Drill down mode toggle", () => {
       vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(function (
         this: HTMLElement,
       ) {
-        const isToolbarBar = this.classList.contains("border-b-card-glass-border");
+        const isToolbarBar =
+          this.classList.contains("border-border-default") &&
+          this.classList.contains("overflow-hidden");
         return { width: isToolbarBar ? toolbarWidth : 0 } as DOMRect;
       });
     }
diff --git a/web/src/plugins/logs/SearchBar.savedViewsPinned.spec.ts b/web/src/plugins/logs/SearchBar.savedViewsPinned.spec.ts
index a959823fe0..95a35d8475 100644
--- a/web/src/plugins/logs/SearchBar.savedViewsPinned.spec.ts
+++ b/web/src/plugins/logs/SearchBar.savedViewsPinned.spec.ts
@@ -38,7 +38,9 @@ describe("SearchBar — pinned saved views", () => {
       vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(function (
         this: HTMLElement,
       ) {
-        const isToolbarBar = this.classList.contains("border-b-card-glass-border");
+        const isToolbarBar =
+          this.classList.contains("border-border-default") &&
+          this.classList.contains("overflow-hidden");
         return { width: isToolbarBar ? toolbarWidth : 0 } as DOMRect;
       });
     }
@@ -66,14 +68,14 @@ describe("SearchBar — pinned saved views", () => {
     vi.restoreAllMocks();
   });
 
-  it("gives the list trigger the grouped xs size with an icon and a caret", async () => {
+  it("gives the list trigger the toolbar size with an icon and a caret", async () => {
     wrapper = mountSearchBar(1600);
     await flushPromises();
 
     const trigger = group()
       .findAllComponents({ name: "OButton" })
       .find((b) => b.attributes("data-test") === "logs-search-bar-saved-views-pinned-list-btn")!;
-    expect(trigger.props("size")).toBe("xs-grouped");
+    expect(trigger.props("size")).toBe("sm-toolbar");
     const icons = trigger.findAllComponents({ name: "OIcon" }).map((c) => c.props("name"));
     expect(icons).toEqual(["saved-search", "arrow-drop-down"]);
   });
@@ -104,7 +106,7 @@ describe("SearchBar — pinned saved views", () => {
       group().find('[data-test="logs-search-bar-saved-views-pinned-create-btn"]').classes(),
     ).toContain("size-8!");
     expect(wrapper!.find('[data-test="logs-search-bar-reset-filters-btn"]').classes()).toContain(
-      "h-[2.125rem]!",
+      "h-8.5",
     );
   });
 
@@ -255,12 +257,12 @@ describe("SearchBar — pinned saved views", () => {
     expect(group().exists()).toBe(false);
   });
 
-  // 89px = 1px border + 54px list trigger + 1px separator + 32px create button + 1px border.
+  // 93px = 1px border + 58px list trigger + 1px separator + 32px create button + 1px border.
   it.each([
-    [698, false],
-    [699, true],
+    [680, false],
+    [681, true],
   ])(
-    "budgets the group at its rendered 89px width (toolbar %ipx → shown: %s)",
+    "budgets the group at its rendered 93px width (toolbar %ipx → shown: %s)",
     async (width, shown) => {
       const otherPins = (["histogram", "sqlMode", "quickMode", "syntaxGuide"] as const).filter(
         (key) => isPinned(key),
diff --git a/web/src/plugins/logs/SearchBar.toolbarHeight.spec.ts b/web/src/plugins/logs/SearchBar.toolbarHeight.spec.ts
index c223c3fcd2..4b81925812 100644
--- a/web/src/plugins/logs/SearchBar.toolbarHeight.spec.ts
+++ b/web/src/plugins/logs/SearchBar.toolbarHeight.spec.ts
@@ -28,7 +28,7 @@ const router = createRouter({
 });
 
 // The view-mode OToggleGroup is 34px tall (28px sm items + 2px track padding each side + 1px border each side).
-const TOGGLE_GROUP_HEIGHT_CLASS = "h-[2.125rem]!";
+const TOGGLE_GROUP_HEIGHT_CLASS = "h-8.5";
 
 describe("SearchBar — toolbar controls match the view-mode toggle height", () => {
   let wrapper: VueWrapper<any> | undefined;
@@ -41,7 +41,9 @@ describe("SearchBar — toolbar controls match the view-mode toggle height", ()
       vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(function (
         this: HTMLElement,
       ) {
-        const isToolbarBar = this.classList.contains("border-b-card-glass-border");
+        const isToolbarBar =
+          this.classList.contains("border-border-default") &&
+          this.classList.contains("overflow-hidden");
         return { width: isToolbarBar ? toolbarWidth : 0 } as DOMRect;
       });
     }
@@ -121,20 +123,19 @@ describe("SearchBar — toolbar controls match the view-mode toggle height", ()
         "logs-search-bar-more-options-btn",
         "logs-search-bar-share-link-btn",
       ]) {
-        expect(classesOf(dataTest)).toContain("size-[2.125rem]!");
+        expect(classesOf(dataTest)).toContain("h-8.5");
       }
       for (const dataTest of [
         "logs-search-bar-function-editor-pinned-btn",
-        "logs-search-bar-date-time-dropdown",
         "logs-search-bar-refresh-btn",
-        "logs-search-bar-refresh-cache-dropdown-trigger",
       ]) {
         expect(classesOf(dataTest)).toContain(TOGGLE_GROUP_HEIGHT_CLASS);
       }
+      expect(classesOf("logs-search-bar-refresh-cache-dropdown-trigger")).toContain("size-8.5");
+      expect(classesOf("logs-search-bar-date-time-dropdown")).toContain("h-8.5!");
       const runButton = wrapper.get('[data-test="logs-search-bar-refresh-btn"]').element;
-      expect(runButton.nextElementSibling!.classList).toContain(TOGGLE_GROUP_HEIGHT_CLASS);
-      const interval = wrapper.get('[data-test="logs-search-bar-refresh-interval-btn"]').element;
-      expect(interval.parentElement!.classList).toContain("*:size-[2.125rem]!");
+      expect(runButton.nextElementSibling!.classList).toContain("h-8.5!");
+      expect(classesOf("logs-search-bar-refresh-interval-btn")).toContain("size-8.5");
       // A 1px group border around 2rem buttons makes the function selector 34px.
       for (const dataTest of [
         "logs-search-bar-function-dropdown",
diff --git a/web/src/plugins/logs/SearchBar.toolbarSpacing.spec.ts b/web/src/plugins/logs/SearchBar.toolbarSpacing.spec.ts
index a63018c6a7..f81508ed92 100644
--- a/web/src/plugins/logs/SearchBar.toolbarSpacing.spec.ts
+++ b/web/src/plugins/logs/SearchBar.toolbarSpacing.spec.ts
@@ -51,7 +51,13 @@ describe("SearchBar — toolbar controls are spaced only by the row gap", () =>
     vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(function (
       this: HTMLElement,
     ) {
-      return { width: this.classList.contains("border-b-card-glass-border") ? 1600 : 0 } as DOMRect;
+      return {
+        width:
+          this.classList.contains("border-border-default") &&
+          this.classList.contains("overflow-hidden")
+            ? 1600
+            : 0,
+      } as DOMRect;
     });
   });
 
@@ -65,7 +71,7 @@ describe("SearchBar — toolbar controls are spaced only by the row gap", () =>
   const marginClassesOf = (el: Element) =>
     [...el.classList].filter((c) => UNPREFIXED_HORIZONTAL_MARGIN.test(c));
 
-  it("adds no horizontal margin on top of the gap-1 between adjacent controls", async () => {
+  it("adds no horizontal margin on top of the row gap between adjacent controls", async () => {
     wrapper = mount(SearchBar, {
       attachTo: document.body,
       global: {
@@ -78,8 +84,8 @@ describe("SearchBar — toolbar controls are spaced only by the row gap", () =>
 
     const left = wrapper.vm.$refs.toolbarLeftRef as HTMLElement;
     const collapsible = left.firstElementChild as HTMLElement;
-    expect(left.classList).toContain("gap-1");
-    expect(collapsible.classList).toContain("gap-1");
+    expect(left.classList).toContain("gap-2");
+    expect(collapsible.classList).toContain("gap-2");
 
     const more = wrapper.get('[data-test="logs-search-bar-utilities-menu-btn"]');
     expect(marginClassesOf(more.element)).toEqual([]);
diff --git a/web/src/plugins/logs/SearchBar.vue b/web/src/plugins/logs/SearchBar.vue
index fa041b13ed..cd8c50f49e 100644
--- a/web/src/plugins/logs/SearchBar.vue
+++ b/web/src/plugins/logs/SearchBar.vue
@@ -17,11 +17,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div class="logs-search-bar-component" id="searchBarComponent">
     <div
-      class="solid border-b-card-glass-border m-0! flex w-full items-center! overflow-hidden border-b p-1.5! max-md:flex-wrap max-md:gap-y-1 max-md:overflow-visible"
+      class="solid border-border-default m-0! flex w-full items-center! overflow-hidden border-b p-1.5! max-md:flex-wrap max-md:gap-y-1 max-md:overflow-visible"
     >
       <div
         ref="toolbarLeftRef"
-        class="flex min-w-0 flex-1 flex-nowrap items-center gap-1 max-md:w-full max-md:flex-none"
+        class="flex min-w-0 flex-1 flex-nowrap items-center gap-2 max-md:w-full max-md:flex-none"
       >
         <!-- Collapsible region — clips its overflow so the More button (a
              shrink-0 sibling below) always stays visible. Pinned items hide via
@@ -30,15 +30,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
              sits right after the pinned items instead of being pushed to the
              far right; it still shrinks + clips when content overflows. -->
         <div
-          class="-my-1 flex min-w-0 flex-initial flex-nowrap items-center gap-1 overflow-hidden py-1"
+          class="-my-1 flex min-w-0 flex-initial flex-nowrap items-center gap-2 overflow-hidden py-1"
         >
           <!-- View Mode: Dropdown when very narrow, Toggle Group otherwise -->
           <ODropdown v-if="toolbarToggleAsDropdown" side="bottom" align="start">
             <template #trigger>
               <OButton
                 data-test="logs-view-mode-dropdown-btn"
-                size="xs"
-                class="h-[2.125rem]!"
+                size="sm-toolbar"
                 variant="outline"
                 icon-right="arrow-drop-down"
               >
@@ -153,8 +152,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <OButton
             v-if="!toolbarMoveResetToMenu"
             data-test="logs-search-bar-reset-filters-btn"
-            size="xs"
-            class="h-[2.125rem]!"
+            :size="shouldHideToolbarButtonText ? 'icon-toolbar' : 'sm-toolbar'"
             variant="outline"
             @click="resetFilters"
           >
@@ -173,9 +171,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             v-if="showPinnedHistogram"
             as="div"
             data-test="logs-search-bar-histogram-btn"
-            size="xs"
+            size="sm-toolbar"
             variant="outline"
-            class="h-[2.125rem]! gap-1.5"
             @click="searchObj.meta.showHistogram = !searchObj.meta.showHistogram"
           >
             <OSwitch
@@ -200,9 +197,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             v-if="showPinnedSqlMode"
             as="div"
             data-test="logs-search-bar-sql-mode-pinned-btn"
-            size="xs"
+            size="sm-toolbar"
             variant="outline"
-            class="h-[2.125rem]! gap-1.5"
             @click="!isSqlModeDisabled && (searchObj.meta.sqlMode = !searchObj.meta.sqlMode)"
           >
             <OSwitch
@@ -221,9 +217,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             v-if="showPinnedQuickMode"
             as="div"
             data-test="logs-search-bar-quick-mode-pinned-btn"
-            size="xs"
+            size="sm-toolbar"
             variant="outline"
-            class="h-[2.125rem]! gap-1.5"
             @click="handleQuickMode"
           >
             <OSwitch
@@ -259,7 +254,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <OButton
                   data-test="logs-search-bar-saved-views-pinned-list-btn"
                   variant="ghost"
-                  size="xs-grouped"
+                  size="sm-toolbar"
                   class="h-8!"
                 >
                   <OIcon name="saved-search" size="sm" />
@@ -320,10 +315,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <template #trigger>
             <OButton
               data-test="logs-search-bar-utilities-menu-btn"
-              class="rounded-default hover:bg-button-outline-hover-bg h-[2.125rem]! p-1! text-xs font-medium [border:0.0625rem_solid_var(--color-button-outline-border)]! [transition:all_0.2s_ease] max-md:ms-auto"
+              class="max-md:ms-auto"
               icon-left="more-horiz"
               variant="outline"
-              size="xs"
+              size="sm-toolbar"
             >
               {{ t("search.menuMore") }}
             </OButton>
@@ -566,7 +561,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
       <div
         ref="toolbarRightRef"
-        class="flex flex-shrink-0 items-center gap-1 max-md:w-full max-md:justify-end"
+        class="flex flex-shrink-0 items-center gap-2 max-md:w-full max-md:justify-end"
       >
         <OPageHeaderStatus />
         <template v-if="searchObj.meta.showTransformEditor && !shouldMoveShareToMenu">
@@ -589,9 +584,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <template #trigger>
             <OButton
               data-test="logs-search-bar-more-options-btn"
-              class="download-logs-btn hover:bg-interactive-hover-bg! order-4 size-[2.125rem]!"
+              class="download-logs-btn hover:bg-interactive-hover-bg! order-4"
               variant="outline"
-              size="icon-toolbar"
+              size="icon-md"
             >
               <OIcon name="menu" size="sm" />
               <OTooltip max-width="7rem" :content="t('search.moreActions')" />
@@ -852,19 +847,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           data-test="logs-search-bar-share-link-btn"
           :url="shareURL"
           variant="outline"
-          size="icon-toolbar"
+          size="icon-md"
           :disabled="!!shareReason"
           :tooltip="shareReason || undefined"
-          class="order-3 size-[2.125rem]!"
+          class="order-3"
         />
         <!-- Function Editor (pinned) — sits to the left of the date picker -->
         <OButton
           v-if="showPinnedFunctionEditor"
           as="div"
           data-test="logs-search-bar-function-editor-pinned-btn"
-          size="xs"
+          size="sm-toolbar"
           variant="outline"
-          class="order-1 me-1 h-[2.125rem]! gap-1.5"
+          class="order-1"
           @click="searchObj.meta.showTransformEditor = !searchObj.meta.showTransformEditor"
         >
           <OSwitch
@@ -877,7 +872,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <OTooltip :content="t('search.functionEditorLabel')" />
         </OButton>
 
-        <div class="order-1 me-1 max-md:me-auto">
+        <div class="order-1 max-md:me-auto">
           <DateTime
             ref="dateTimeRef"
             auto-apply
@@ -895,14 +890,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             @on:date-change="updateDateTime"
             @on:timezone-change="updateTimezone"
             :disable="disable"
-            class="h-[2.125rem]!"
+            class="h-8.5!"
           />
         </div>
 
         <div class="search-time order-2">
-          <div class="flex">
+          <div class="flex gap-2">
             <OButtonGroup
-              class="border-card-glass-border me-1 border p-0"
+              class="border-card-glass-border border p-0"
               v-if="
                 config.isEnterprise == 'true' &&
                 Object.keys(store.state.regionInfo).length > 0 &&
@@ -961,7 +956,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :title="t('search.cancel')"
                   variant="ghost"
                   size="sm-toolbar"
-                  class="bg-cancel-query-bg! text-button-primary-foreground! rounded-s-default! h-[2.125rem]! w-[5.875rem]! rounded-e-none! p-0 px-1! text-center leading-4! font-medium! break-words whitespace-normal [transition:box-shadow_0.3s_ease,opacity_0.2s_ease]"
+                  class="bg-cancel-query-bg! text-button-primary-foreground! rounded-s-default! min-w-[5.875rem] rounded-e-none! [transition:box-shadow_0.3s_ease,opacity_0.2s_ease]"
                   @click="cancelVisualizeQueries"
                   >{{ t("search.cancel") }}</OButton
                 >
@@ -972,18 +967,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :title="t('search.runQuery')"
                   :disabled="buildRunBlocked"
                   size="sm-toolbar"
-                  class="bg-button-primary! text-button-primary-foreground! hover:shadow-button-primary/70 rounded-s-default! h-[2.125rem]! w-[5.875rem]! rounded-e-none! p-0 px-1! text-center leading-4! font-medium! break-words whitespace-normal [transition:box-shadow_0.3s_ease,opacity_0.2s_ease] hover:opacity-90 hover:shadow-md"
+                  class="bg-button-primary! text-button-primary-foreground! hover:shadow-button-primary/70 rounded-s-default! min-w-[5.875rem] rounded-e-none! [transition:box-shadow_0.3s_ease,opacity_0.2s_ease] hover:opacity-90 hover:shadow-md"
                   @click="handleRunQueryFn()"
                 >
                   {{ t("search.runQuery") }}
                 </OButton>
-                <OSeparator class="h-[2.125rem]! w-px" vertical />
+                <OSeparator class="h-8.5! w-px" vertical />
                 <ODropdown align="end" side="bottom">
                   <template #trigger>
                     <OButton
                       variant="ghost"
-                      size="icon-xs"
-                      class="h-[2.125rem]!"
+                      size="icon-toolbar"
                       :aria-label="t('search.refreshCacheAndRunQuery')"
                       data-test="logs-search-bar-refresh-cache-dropdown-trigger"
                       :class="[
@@ -1018,7 +1012,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   variant="ghost"
                   :title="t('search.cancel')"
                   size="sm-toolbar"
-                  class="bg-cancel-query-bg! text-button-primary-foreground! rounded-s-default! h-[2.125rem]! w-[5.875rem]! rounded-e-none! p-0 px-1! text-center leading-4! font-medium! break-words whitespace-normal [transition:box-shadow_0.3s_ease,opacity_0.2s_ease]"
+                  class="bg-cancel-query-bg! text-button-primary-foreground! rounded-s-default! min-w-[5.875rem] rounded-e-none! [transition:box-shadow_0.3s_ease,opacity_0.2s_ease]"
                   @click="cancelVisualizeQueries"
                   >{{ t("search.cancel") }}</OButton
                 >
@@ -1030,18 +1024,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   :title="t('search.runQuery')"
                   :disabled="buildRunBlocked || disable"
                   size="sm-toolbar"
-                  class="bg-button-primary! text-button-primary-foreground! hover:shadow-button-primary/70 rounded-s-default! h-[2.125rem]! w-[5.875rem]! rounded-e-none! p-0 px-1! text-center leading-4! font-medium! break-words whitespace-normal [transition:box-shadow_0.3s_ease,opacity_0.2s_ease] hover:opacity-90 hover:shadow-md"
+                  class="bg-button-primary! text-button-primary-foreground! hover:shadow-button-primary/70 rounded-s-default! min-w-[5.875rem] rounded-e-none! [transition:box-shadow_0.3s_ease,opacity_0.2s_ease] hover:opacity-90 hover:shadow-md"
                   @click="handleRunQueryFn()"
                 >
                   {{ t("search.runQuery") }}
                 </OButton>
-                <OSeparator class="h-[2.125rem]! w-px" vertical />
+                <OSeparator class="h-8.5! w-px" vertical />
                 <ODropdown align="end" side="bottom">
                   <template #trigger>
                     <OButton
                       variant="ghost"
-                      size="icon-xs"
-                      class="h-[2.125rem]!"
+                      size="icon-toolbar"
                       :aria-label="t('search.refreshCacheAndRunQuery')"
                       data-test="logs-search-bar-refresh-cache-dropdown-trigger"
                       :class="[
@@ -1078,7 +1071,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 variant="ghost"
                 :title="t('search.cancel')"
                 size="sm-toolbar"
-                class="bg-cancel-query-bg! text-button-primary-foreground! rounded-default h-[2.125rem]! w-[5.875rem]! p-0 px-1! text-center leading-4! font-medium! break-words whitespace-normal [transition:box-shadow_0.3s_ease,opacity_0.2s_ease]"
+                class="bg-cancel-query-bg! text-button-primary-foreground! rounded-default min-w-[5.875rem] [transition:box-shadow_0.3s_ease,opacity_0.2s_ease]"
                 @click="autoRun.engine.cancelGeneration(null, { cause: 'user' })"
                 >{{ t("search.cancel") }}</OButton
               >
@@ -1089,7 +1082,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 variant="primary"
                 :title="t('search.cancel')"
                 size="sm-toolbar"
-                class="bg-cancel-query-bg! text-button-primary-foreground! rounded-s-default! h-[2.125rem]! w-[5.875rem]! rounded-e-none! p-0 px-1! text-center leading-4! font-medium! break-words whitespace-normal [transition:box-shadow_0.3s_ease,opacity_0.2s_ease]"
+                class="bg-cancel-query-bg! text-button-primary-foreground! rounded-s-default! min-w-[5.875rem] rounded-e-none! [transition:box-shadow_0.3s_ease,opacity_0.2s_ease]"
                 @click="cancelRun"
                 >{{ t("search.cancel") }}</OButton
               >
@@ -1102,7 +1095,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 :variant="showRunQueryPending ? 'pending' : 'primary'"
                 :title="t('search.runQuery')"
                 size="sm-toolbar"
-                class="rounded-s-default! relative h-[2.125rem]! w-[5.875rem]! rounded-e-none! p-0 px-1! text-center leading-4! font-medium! break-words whitespace-normal [transition:box-shadow_0.3s_ease,opacity_0.2s_ease]"
+                class="rounded-s-default! relative min-w-[5.875rem] rounded-e-none! [transition:box-shadow_0.3s_ease,opacity_0.2s_ease]"
                 :class="[
                   showRunQueryPending
                     ? ''
@@ -1136,15 +1129,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </OButton>
               <OSeparator
                 v-if="!showRunQueryPending || isRunQueryCancelShown"
-                class="h-[2.125rem]! w-px"
+                class="h-8.5! w-px"
                 vertical
               />
               <ODropdown align="end" side="bottom">
                 <template #trigger>
                   <OButton
                     :variant="showRunQueryPending && !isRunQueryCancelShown ? 'pending' : 'ghost'"
-                    size="icon-xs"
-                    class="h-[2.125rem]!"
+                    size="icon-toolbar"
                     :aria-label="t('search.refreshCacheAndRunQuery')"
                     data-test="logs-search-bar-refresh-cache-dropdown-trigger"
                     :class="[
@@ -1202,7 +1194,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </ODropdown>
               <!-- Compact Auto Refresh Button -->
               <AutoRefreshInterval
-                class="ms-1 *:size-[2.125rem]!"
+                class="ms-2"
                 v-model="searchObj.meta.refreshInterval"
                 :trigger="true"
                 :is-compact="true"
@@ -2432,10 +2424,10 @@ export default defineComponent({
     // Approximate rendered widths (px) of each pinned control and of the fixed
     // left-section content, used only to decide how many pinned items fit before
     // they would clip. Hidden pinned items stay reachable inside the More menu.
-    const PIN_ITEM_WIDTH = { histogram: 46, sqlMode: 46, quickMode: 46, savedViews: 89 };
+    const PIN_ITEM_WIDTH = { histogram: 72, sqlMode: 72, quickMode: 72, savedViews: 93 };
     const SYNTAX_GUIDE_LABEL_WIDTH = 108;
     const SYNTAX_GUIDE_ICON_WIDTH = 40;
-    const PIN_ITEM_GAP = 4;
+    const PIN_ITEM_GAP = 8;
 
     // Width consumed by the always-present left content (toggle group in its
     // current collapse state, reset) plus the reserved More button.
@@ -2444,8 +2436,8 @@ export default defineComponent({
       if (toolbarToggleAsDropdown.value) w += 120;
       else if (toolbarToggleIconOnly.value) w += 230;
       else w += 440;
-      if (!toolbarMoveResetToMenu.value) w += shouldHideToolbarButtonText.value ? 40 : 88;
-      w += 92; // More button (always visible)
+      if (!toolbarMoveResetToMenu.value) w += shouldHideToolbarButtonText.value ? 34 : 80;
+      w += 76; // More button (always visible)
       w += 24; // inter-item gaps / padding buffer
       return w;
     });
diff --git a/web/src/plugins/logs/SearchResult.vue b/web/src/plugins/logs/SearchResult.vue
index 14061a4e37..ae8fb7e679 100644
--- a/web/src/plugins/logs/SearchResult.vue
+++ b/web/src/plugins/logs/SearchResult.vue
@@ -26,7 +26,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Field panel toggle — same style as add-panel config sidebar -->
         <OButton
           variant="outline"
-          size="icon-xs-sq"
+          size="icon-chip"
           class="ms-1.5 shrink-0"
           data-test="logs-search-field-list-collapse-btn"
           @click="isMobile ? $emit('open-mobile-fields') : toggleFieldList()"
@@ -64,8 +64,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
         <div
           v-else
-          class="text-warning flex min-w-0 flex-1 flex-wrap items-center gap-1.5 ps-2 text-left transition-opacity max-md:min-w-32"
-          :class="{ 'opacity-60': summaryDimmed }"
+          class="text-warning flex min-w-0 flex-1 flex-wrap items-center gap-1.5 ps-2 text-left max-md:min-w-32"
           data-test="logs-search-result-title"
           :data-search-state="
             searchObj.loading || searchObj.loadingCounter ? 'loading' : 'complete'
@@ -78,14 +77,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <OTag
                 type="logsResultChip"
                 value="neutral"
-                class="min-w-[26ch] tabular-nums"
+                class="tabular-nums transition-opacity"
+                :class="{ 'opacity-60': summaryDimmed }"
                 data-test="logs-result-records-chip"
                 >{{ recordsChips.records }}</OTag
               >
               <OTag
                 type="logsResultChip"
                 value="info"
-                class="min-w-[10ch] tabular-nums max-md:hidden"
+                class="tabular-nums transition-opacity max-md:hidden"
+                :class="{ 'opacity-60': summaryDimmed }"
                 data-test="logs-result-time-chip"
                 >{{ recordsChips.time }}</OTag
               >
@@ -93,7 +94,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 v-if="recordsChips.scan"
                 type="logsResultChip"
                 value="warn"
-                class="max-md:hidden"
+                class="transition-opacity max-md:hidden"
+                :class="{ 'opacity-60': summaryDimmed }"
                 data-test="logs-result-scan-chip"
                 >{{ recordsChips.scan }}</OTag
               >
@@ -457,7 +459,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             @keydown.esc="closePinnedTooltip"
             tabindex="-1"
           >
-            <div class="oo-pin-tooltip__time">
+            <div class="oo-pin-tooltip__time text-text-secondary">
               {{ pinnedTooltip.timestamp }}
             </div>
             <div v-for="row in pinnedTooltip.rows" :key="row.rawValue" class="oo-pin-tooltip__row">
@@ -3435,7 +3437,6 @@ export default defineComponent({
 .oo-pin-tooltip__time {
   font-size: var(--text-2xs);
   font-weight: 500;
-  opacity: 0.65;
   padding: 0 0.625rem 0.25rem;
   margin-bottom: 0;
   /* eslint-disable-next-line local/no-hardcoded-px -- hairline: a 1-device-pixel rule must not scale with text or it smears at fractional zoom */
diff --git a/web/src/plugins/logs/SyntaxGuide.spec.ts b/web/src/plugins/logs/SyntaxGuide.spec.ts
index d6c50e1d2c..663c004222 100644
--- a/web/src/plugins/logs/SyntaxGuide.spec.ts
+++ b/web/src/plugins/logs/SyntaxGuide.spec.ts
@@ -411,15 +411,15 @@ describe("SyntaxGuide.vue", () => {
     wrapper = createWrapper({ toolbar: true, label: "Syntax Guide" });
     const button = wrapper.findComponent({ name: "OButton" });
     expect(button.props("variant")).toBe("outline");
-    expect(button.classes()).toContain("h-[2.125rem]!");
+    expect(button.classes()).toContain("h-8.5");
     expect(button.classes()).toContain("text-xs");
   });
 
   // Test 42: non-toolbar variants keep their own height
   it("should not apply the toolbar height to the default or menu-item variants", () => {
     wrapper = createWrapper();
-    expect(wrapper.findComponent({ name: "OButton" }).classes()).not.toContain("h-[2.125rem]!");
+    expect(wrapper.findComponent({ name: "OButton" }).props("size")).not.toBe("sm-toolbar");
     wrapper = createWrapper({ menuItem: true });
-    expect(wrapper.findComponent({ name: "OButton" }).classes()).not.toContain("h-[2.125rem]!");
+    expect(wrapper.findComponent({ name: "OButton" }).props("size")).not.toBe("sm-toolbar");
   });
 });
diff --git a/web/src/plugins/logs/SyntaxGuide.vue b/web/src/plugins/logs/SyntaxGuide.vue
index 89ae2c444e..7476d16f78 100644
--- a/web/src/plugins/logs/SyntaxGuide.vue
+++ b/web/src/plugins/logs/SyntaxGuide.vue
@@ -40,8 +40,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-else-if="toolbar"
           data-cy="syntax-guide-button"
           variant="outline"
-          size="xs"
-          :class="['h-[2.125rem]!', sqlmode ? 'sql-mode' : 'normal-mode']"
+          :size="label ? 'sm-toolbar' : 'icon-toolbar'"
+          :class="sqlmode ? 'sql-mode' : 'normal-mode'"
         >
           <OIcon name="help" size="sm" />
           <span v-if="label">{{ label }}</span>
diff --git a/web/src/plugins/metrics/explorer/LabelFilterBar.vue b/web/src/plugins/metrics/explorer/LabelFilterBar.vue
index 9443befc32..1f01558f8c 100644
--- a/web/src/plugins/metrics/explorer/LabelFilterBar.vue
+++ b/web/src/plugins/metrics/explorer/LabelFilterBar.vue
@@ -53,7 +53,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <template v-for="section in sections" :key="section.group">
       <span
         v-if="section.group > 0"
-        class="text-3xs text-text-secondary shrink-0 tracking-wide uppercase select-none"
+        class="text-2xs text-text-secondary shrink-0 tracking-wide uppercase select-none"
         :data-test="`metrics-explorer-label-group-join-${section.group}`"
         >{{
           section.position > 0
@@ -87,7 +87,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <!-- Said, not inferred: two adjacent chips read as either one, but they are always AND. -->
           <span
             v-if="i > 0"
-            class="text-3xs text-text-secondary shrink-0 tracking-wide uppercase select-none"
+            class="text-2xs text-text-secondary shrink-0 tracking-wide uppercase select-none"
             :title="t('metrics.explorer.labels.andSeparatorTitle')"
             data-test="metrics-explorer-label-and"
             >{{ t("metrics.explorer.labels.andSeparator") }}</span
diff --git a/web/src/plugins/metrics/explorer/MetricsExplorer.vue b/web/src/plugins/metrics/explorer/MetricsExplorer.vue
index 4683b562a3..105e00e174 100644
--- a/web/src/plugins/metrics/explorer/MetricsExplorer.vue
+++ b/web/src/plugins/metrics/explorer/MetricsExplorer.vue
@@ -105,6 +105,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           ref="dateTimePickerRef"
           v-model="selectedDate"
           data-test="metrics-date-picker"
+          class="h-8.5!"
           :auto-apply-dashboard="mode === 'visualize'"
           calendar-presets
           @on:date-change="onDateChange"
@@ -136,7 +137,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <OButton
               :variant="isVisualizePending ? 'pending' : 'primary'"
               size="sm-toolbar"
-              class="w-[5.875rem]! px-1!"
+              class="min-w-[5.875rem]"
               data-test="metrics-explorer-run"
               :data-run-pending="isVisualizePending ? 'true' : undefined"
               :aria-label="isVisualizePending ? t('search.runQueryPendingLabel') : undefined"
@@ -150,7 +151,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <OButton
                   :variant="isVisualizePending ? 'pending' : 'primary'"
                   size="icon-toolbar"
-                  class="w-5"
                   icon-left="arrow-drop-down"
                   :aria-label="t('metrics.runQueryOptions')"
                   data-test="metrics-explorer-run-options"
@@ -204,7 +204,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-if="shareUrl"
           :url="shareUrl"
           variant="outline"
-          size="icon-toolbar"
+          size="icon-md"
           data-test="metrics-explorer-share-btn"
           shortcut-id="metricsCopyUrl"
         />
diff --git a/web/src/plugins/traces/SearchBar.spec.ts b/web/src/plugins/traces/SearchBar.spec.ts
index 30dca56fd4..1078832b9d 100644
--- a/web/src/plugins/traces/SearchBar.spec.ts
+++ b/web/src/plugins/traces/SearchBar.spec.ts
@@ -2341,24 +2341,25 @@ describe("SearchBar", () => {
       expect(separator.props("vertical")).toBe(true);
     });
 
-    it("is as tall as Reset and More: a hairline border around 1.625rem children", async () => {
+    it("is as tall as Reset and More: a hairline border around full-height children", async () => {
       wrapper = mountSearchBar();
       await flushPromises();
 
       const group = wrapper.find('[data-test="traces-search-bar-saved-views"]');
       expect(group.classes()).toContain("border");
       expect(group.classes()).toContain("p-0");
+      expect(group.classes()).toContain("h-8.5");
       expect(group.find('[data-test="traces-search-bar-saved-views-btn"]').classes()).toContain(
-        "h-6.5",
+        "h-full!",
       );
       expect(
         group.find('[data-test="traces-search-bar-saved-views-create-btn"]').classes(),
-      ).toContain("size-6.5");
+      ).toContain("h-full!");
       for (const neighbour of [
         "traces-search-bar-reset-filters-btn",
         "traces-search-bar-more-menu-btn",
       ]) {
-        expect(wrapper.find(`[data-test="${neighbour}"]`).classes()).toContain("h-7");
+        expect(wrapper.find(`[data-test="${neighbour}"]`).classes()).toContain("h-8.5");
       }
     });
 
diff --git a/web/src/plugins/traces/SearchBar.vue b/web/src/plugins/traces/SearchBar.vue
index a562de4993..5bfe468259 100644
--- a/web/src/plugins/traces/SearchBar.vue
+++ b/web/src/plugins/traces/SearchBar.vue
@@ -21,11 +21,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     >
       <div
         ref="toolbarLeftRef"
-        class="flex min-w-0 flex-1 flex-row items-center gap-1.5 max-lg:w-full max-lg:flex-none max-lg:flex-wrap max-lg:gap-y-1"
+        class="flex min-w-0 flex-1 flex-row items-center gap-2 max-lg:w-full max-lg:flex-none max-lg:flex-wrap max-lg:gap-y-1"
       >
         <!-- Clips its overflow so More, a shrink-0 sibling, is never clipped. -->
         <div
-          class="flex min-w-0 flex-initial flex-row items-center gap-1.5 overflow-hidden max-lg:flex-wrap max-lg:gap-y-1 max-lg:overflow-visible"
+          class="flex min-w-0 flex-initial flex-row items-center gap-2 overflow-hidden max-lg:flex-wrap max-lg:gap-y-1 max-lg:overflow-visible"
         >
           <!-- Unified View Toggle: Service Graph / Traces / Spans -->
           <OToggleGroup
@@ -104,7 +104,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               v-if="!toolbarMoveResetToMenu"
               data-test="traces-search-bar-reset-filters-btn"
               variant="outline"
-              size="xs"
+              size="sm-toolbar"
               @click="resetFilters"
             >
               <template #icon-left>
@@ -117,9 +117,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <OButton
             v-if="showPinnedMetrics"
             data-test="traces-search-bar-metrics-pinned-btn"
-            size="xs"
+            size="sm-toolbar"
             variant="outline"
-            class="gap-1.5"
             @click="searchObj.meta.showHistogram = !searchObj.meta.showHistogram"
           >
             <OSwitch v-model="searchObj.meta.showHistogram" size="md" @click.stop />
@@ -130,7 +129,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <OButtonGroup
             v-if="showPinnedSavedViews"
             data-test="traces-search-bar-saved-views"
-            class="border-button-outline-border shrink-0 border p-0"
+            class="border-button-outline-border h-8.5 shrink-0 border p-0"
           >
             <ODropdown
               :open="savedViewsDropdownOpen"
@@ -143,6 +142,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   data-test="traces-search-bar-saved-views-btn"
                   variant="ghost"
                   size="xs-grouped"
+                  class="h-full!"
                 >
                   <OIcon name="saved-search" size="sm" />
                   <OIcon name="arrow-drop-down" size="sm" />
@@ -167,6 +167,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               data-test="traces-search-bar-saved-views-create-btn"
               variant="ghost"
               size="icon-panel"
+              class="h-full!"
               @click="openSaveViewDialog"
             >
               <OIcon name="save" size="sm" />
@@ -185,7 +186,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <OButton
               data-test="traces-search-bar-more-menu-btn"
               variant="outline"
-              size="xs"
+              size="sm-toolbar"
               icon-left="more-horiz"
               class="shrink-0 max-lg:ms-auto"
             >
@@ -295,7 +296,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             searchObj.meta.searchMode !== 'service-graph' &&
             searchObj.meta.searchMode !== 'services-catalog'
           "
-          class="flex items-center gap-1.5 max-lg:w-full max-lg:flex-wrap max-lg:justify-end max-lg:gap-y-1"
+          class="flex items-center gap-2 max-lg:w-full max-lg:flex-wrap max-lg:justify-end max-lg:gap-y-1"
         >
           <OPageHeaderStatus />
           <DateTime
@@ -312,7 +313,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             calendar-presets
             :queryRangeRestrictionInHour="searchObj.data.datetime.queryRangeRestrictionInHour"
             :queryRangeRestrictionMsg="searchObj.data.datetime.queryRangeRestrictionMsg"
-            class="h-8 max-lg:me-auto max-md:[&_.date-time-label]:hidden"
+            class="h-8.5! max-lg:me-auto max-md:[&_.date-time-label]:hidden"
             @on:date-change="updateDateTime"
             @on:timezone-change="updateTimezone"
           />
@@ -326,8 +327,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 v-if="config.isEnterprise == 'true' && isLoading"
                 variant="ghost"
                 data-test="traces-search-bar-cancel-btn"
+                size="sm-toolbar"
                 :title="t('search.cancel')"
-                class="bg-cancel-query-bg! text-button-primary-foreground! h-[1.875rem]! w-[5.875rem]! ![border-radius:0.375rem_0_0_0.375rem] p-0 px-1! py-0! text-center text-xs! leading-4! font-medium! break-words whitespace-normal [transition:box-shadow_0.3s_ease,_opacity_0.2s_ease]"
+                class="bg-cancel-query-bg! text-button-primary-foreground! rounded-s-default! min-w-[5.875rem] rounded-e-none! [transition:box-shadow_0.3s_ease,_opacity_0.2s_ease]"
                 @click="cancelQueryData"
                 >{{ t("search.cancel") }}</OButton
               >
@@ -338,11 +340,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 data-cy="search-bar-refresh-button"
                 :data-run-pending="showRunQueryPending ? 'true' : undefined"
                 :aria-label="showRunQueryPending ? t('search.runQueryPendingLabel') : undefined"
+                size="sm-toolbar"
                 :title="t('search.runQuery')"
-                class="h-[1.875rem]! w-[5.875rem]! p-0 px-1! py-0! text-center text-xs! leading-4! font-medium! break-words whitespace-normal [transition:box-shadow_0.3s_ease,_opacity_0.2s_ease]"
+                class="min-w-[5.875rem] [transition:box-shadow_0.3s_ease,_opacity_0.2s_ease]"
                 :class="[
                   store.state.zoConfig.auto_query_enabled
-                    ? '![border-radius:0.375rem_0_0_0.375rem]'
+                    ? 'rounded-s-default! rounded-e-none!'
                     : 'rounded-default',
                   showRunQueryPending
                     ? ''
@@ -368,13 +371,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 />
                 {{ t("search.runQuery") }}
               </OButton>
-              <OSeparator v-if="!showRunQueryPending" class="h-[1.875rem]! w-px" vertical />
+              <OSeparator
+                v-if="!showRunQueryPending && store.state.zoConfig.auto_query_enabled"
+                class="h-8.5! w-px"
+                vertical
+              />
               <ODropdown v-if="store.state.zoConfig.auto_query_enabled" side="bottom" align="end">
                 <template #trigger>
                   <OButton
                     :aria-label="t('common.moreOptions')"
                     :variant="showRunQueryPending && !isLoading ? 'pending' : 'ghost'"
-                    size="icon-xs"
+                    size="icon-toolbar"
                     :disabled="isLoading"
                     :class="[
                       config.isEnterprise == 'true' && isLoading
@@ -382,7 +389,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         : showRunQueryPending
                           ? 'border-s-0'
                           : 'bg-button-primary! text-button-primary-foreground! hover:ring-button-primary/70 hover:opacity-90 hover:ring-2',
-                      '![border-radius:0_0.375rem_0.375rem_0]',
+                      'rounded-e-default! rounded-s-none!',
                     ]"
                   >
                     <OIcon name="arrow-drop-down" size="sm" />
@@ -422,7 +429,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             data-test="logs-search-bar-share-link-btn"
             :url="tracesShareURL"
             variant="outline"
-            size="icon-toolbar"
+            size="icon-md"
             shortcut-id="tracesCopyUrl"
           />
           <ODropdown side="bottom" align="end">
@@ -521,14 +528,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :default-relative-time="searchObj.data.datetime.relativeTimePeriod"
               data-test="service-graph-date-time-picker"
               calendar-presets
-              class="h-8!"
+              class="h-8.5!"
               @on:date-change="updateDateTime"
             />
             <OButton
               data-test="service-graph-refresh-btn"
               variant="outline"
-              size="icon-toolbar"
-              class="min-w-[1.875rem]!"
+              size="icon-md"
               @click="$emit('service-graph-refresh')"
             >
               <OIcon name="refresh" size="sm" />
@@ -553,7 +559,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               v-model="searchObj.meta.serviceGraphLayoutType"
               :options="serviceGraphLayoutOptions"
               :searchable="false"
-              class="h-8! min-h-8! w-[7.5rem] max-lg:w-24!"
+              class="h-[2.125rem]! min-h-[2.125rem]! w-[7.5rem] max-lg:w-24!"
               :disabled="searchObj.meta.serviceGraphVisualizationType === 'graph'"
               @update:model-value="onServiceGraphLayoutChange"
             />
@@ -576,7 +582,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :default-relative-time="searchObj.data.datetime.relativeTimePeriod"
               data-test="services-catalog-date-time-picker"
               calendar-presets
-              class="me-1.5 h-8!"
+              class="h-8.5!"
               @on:date-change="updateDateTime"
             />
           </div>
diff --git a/web/src/plugins/traces/SearchResult.vue b/web/src/plugins/traces/SearchResult.vue
index edca15a8d0..f99f553fd8 100644
--- a/web/src/plugins/traces/SearchResult.vue
+++ b/web/src/plugins/traces/SearchResult.vue
@@ -67,7 +67,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             data-test="traces-count-badge"
             type="logsResultChip"
             value="neutral"
-            class="me-[0.6rem] tabular-nums"
+            class="me-2.5 tabular-nums"
             :aria-busy="countPending"
           >
             <template v-if="searchObj.meta.searchMode === 'spans'">
@@ -103,11 +103,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               searchObj.data.queryResults.errorCount > 0
             "
             data-test="traces-error-count-badge"
-            variant="error"
+            type="logsResultChip"
+            value="error"
             :clickable="true"
             :disabled="countPending"
             :aria-busy="countPending"
-            class="rounded-default! px-2.5! py-[0.4rem]! text-xs text-xs! tabular-nums"
+            class="tabular-nums"
             :class="[
               showErrorOnly
                 ? 'bg-badge-error-solid-bg! text-badge-error-solid-text!'
diff --git a/web/src/plugins/traces/SpanBlock.spec.ts b/web/src/plugins/traces/SpanBlock.spec.ts
index 54c51e9c68..654bdee34f 100644
--- a/web/src/plugins/traces/SpanBlock.spec.ts
+++ b/web/src/plugins/traces/SpanBlock.spec.ts
@@ -286,8 +286,8 @@ describe("SpanBlock", () => {
 
     it("should apply defocus class when span is not selected", async () => {
       await flushPromises();
-      const spanBlock = newWrapper.find('[data-test="span-block-select-trigger"]');
-      expect(spanBlock.classes()).toContain("opacity-30");
+      const bar = newWrapper.find('[data-test="span-marker"]');
+      expect(bar.classes()).toContain("opacity-30");
     });
 
     it("Should not show border when span is not selected", async () => {
@@ -1191,8 +1191,7 @@ describe("SpanBlock critical path", () => {
     await flushPromises();
   };
 
-  const isDimmed = () =>
-    wrapper.find('[data-test="span-block-select-trigger"]').classes().includes("opacity-30");
+  const isDimmed = () => wrapper.find('[data-test="span-marker"]').classes().includes("opacity-30");
 
   afterEach(() => {
     wrapper.vm.searchObj.data.traceDetails.selectedSpanId = null;
diff --git a/web/src/plugins/traces/SpanBlock.vue b/web/src/plugins/traces/SpanBlock.vue
index 6faf8f67af..cd70b9a85f 100644
--- a/web/src/plugins/traces/SpanBlock.vue
+++ b/web/src/plugins/traces/SpanBlock.vue
@@ -17,7 +17,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div
     class="wrap bg-surface-base flex items-center justify-start"
-    :class="dimmed ? 'opacity-30' : ''"
     :style="{
       zIndex: 2,
     }"
@@ -53,7 +52,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
            the bar itself — that would rebase them onto the span. -->
       <div
         class="relative flex w-full cursor-pointer flex-nowrap items-center"
-        :class="dimmed ? 'opacity-30' : ''"
         @click="selectSpan(span.spanId)"
         data-test="span-block-select-trigger"
       >
@@ -64,7 +62,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             left: leftPosition + '%',
           }"
           class="relative flex flex-nowrap items-center justify-start"
-          :class="startsInWindow ? 'min-w-0.5' : ''"
+          :class="[startsInWindow ? 'min-w-0.5' : '', dimmed ? 'opacity-30' : '']"
           ref="spanMarkerRef"
           data-test="span-marker"
         >
diff --git a/web/src/plugins/traces/TraceDAG.vue b/web/src/plugins/traces/TraceDAG.vue
index bc307da596..63efe12918 100644
--- a/web/src/plugins/traces/TraceDAG.vue
+++ b/web/src/plugins/traces/TraceDAG.vue
@@ -57,7 +57,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :fit-view-options="{ padding: 0.3, minZoom: 0.3, maxZoom: 0.7 }"
         class="trace-dag-flow bg-surface-panel! h-full w-full"
       >
-        <Background pattern-color="#aaa" :gap="16" />
+        <Background :gap="16" />
         <Controls />
 
         <template #node-custom="{ data }">
@@ -397,7 +397,7 @@ export default defineComponent({
         markerEnd: MarkerType.ArrowClosed,
         style: {
           strokeWidth: 2,
-          stroke: "#94a3b8",
+          stroke: "var(--color-border-strong)",
         },
       }));
     });
@@ -560,6 +560,11 @@ export default defineComponent({
   background-color: var(--color-surface-panel) !important;
 }
 
+/* keep: lib-override:vue-flow — the library sets the dot colour as an SVG attribute, which cannot hold a var(). */
+.trace-dag-flow :deep(.vue-flow__background circle) {
+  fill: var(--color-border-strong);
+}
+
 /* keep: lib-override:vue-flow — the controls stylesheet hard-codes light-only button colours. */
 .trace-dag-flow :deep(.vue-flow__controls-button) {
   background: var(--color-surface-base);
diff --git a/web/src/plugins/traces/TraceDetails.vue b/web/src/plugins/traces/TraceDetails.vue
index a1b8747cf5..ebf90893f3 100644
--- a/web/src/plugins/traces/TraceDetails.vue
+++ b/web/src/plugins/traces/TraceDetails.vue
@@ -716,7 +716,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <!-- DAG View - only for LLM traces -->
             <div v-if="hasLLMSpans && activeTab === 'dag'" class="flex min-h-0 flex-1">
               <div
-                class="h-[calc(100vh-12.5rem)] min-w-[12.5rem] overflow-hidden p-4"
+                class="h-full min-h-0 min-w-[12.5rem] overflow-hidden p-4"
                 :style="{
                   width:
                     isSidebarOpen && (selectedSpanId || showTraceDetails)
@@ -746,7 +746,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
               <div
                 v-if="isSidebarOpen && (selectedSpanId || showTraceDetails)"
-                class="h-[calc(100vh-12.5rem)] min-h-0 min-w-[18.75rem] overflow-x-hidden overflow-y-auto"
+                class="h-full min-h-0 min-w-[18.75rem] overflow-x-hidden overflow-y-auto"
                 :style="{
                   width: `${100 - dagLeftWidth}%`,
                 }"
diff --git a/web/src/views/About.vue b/web/src/views/About.vue
index 67dfc8ca5a..ffaff71a14 100644
--- a/web/src/views/About.vue
+++ b/web/src/views/About.vue
@@ -58,7 +58,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 class="text-text-body rounded-default border-info/28 bg-card-glass-tint-info-soft inline-flex items-center gap-1.5 border px-3.5 py-2 text-sm whitespace-nowrap max-md:min-w-0"
               >
                 <OIcon name="code" size="sm" class="text-info shrink-0" />
-                <span class="text-info text-xs font-semibold tracking-wide uppercase">{{
+                <span class="text-text-body text-xs font-semibold">{{
                   t("about.commit_lbl")
                 }}</span>
                 <OText variant="mono" class="max-md:max-w-28 max-md:truncate">{{
@@ -77,9 +77,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 class="text-text-body rounded-default border-warning/28 bg-card-glass-tint-warning inline-flex items-center gap-1.5 border px-3.5 py-2 text-sm whitespace-nowrap"
               >
                 <OIcon name="event" size="sm" class="text-warning shrink-0" />
-                <span class="text-warning text-xs font-semibold tracking-wide uppercase">{{
-                  t("about.build_lbl")
-                }}</span>
+                <span class="text-text-body text-xs font-semibold">{{ t("about.build_lbl") }}</span>
                 {{
                   store.state.zoConfig.build_date ? formatDate(store.state.zoConfig.build_date) : ""
                 }}
diff --git a/web/src/views/Dashboards/Dashboards.vue b/web/src/views/Dashboards/Dashboards.vue
index 2578763f6c..815f6b4f04 100644
--- a/web/src/views/Dashboards/Dashboards.vue
+++ b/web/src/views/Dashboards/Dashboards.vue
@@ -75,7 +75,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <ODropdownItem @select="importDashboard" data-test="dashboard-import-custom">
           <div class="flex flex-col">
             <span>{{ t("dashboard.importCustom") }}</span>
-            <span class="text-dropdown-item-text text-xs opacity-60 max-md:mt-0.5">{{
+            <span class="text-text-secondary text-xs max-md:mt-0.5">{{
               t("dashboard.importCustomDesc")
             }}</span>
           </div>
@@ -86,7 +86,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         >
           <div class="flex flex-col">
             <span>{{ t("dashboard.importTemplates") }}</span>
-            <span class="text-dropdown-item-text text-xs opacity-60 max-md:mt-0.5">{{
+            <span class="text-text-secondary text-xs max-md:mt-0.5">{{
               t("dashboard.importTemplatesDesc")
             }}</span>
           </div>
@@ -101,7 +101,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div class="flex w-full items-center gap-2">
             <div class="flex min-w-0 flex-1 flex-col">
               <span>{{ t(`dashboard.${migration.labelKey}`) }}</span>
-              <span class="text-dropdown-item-text text-xs opacity-60 max-md:mt-0.5">{{
+              <span class="text-text-secondary text-xs max-md:mt-0.5">{{
                 t(`dashboard.${migration.descKey}`)
               }}</span>
             </div>
diff --git a/web/src/views/Dashboards/ViewDashboard.vue b/web/src/views/Dashboards/ViewDashboard.vue
index 30de6d857e..549631c4b3 100644
--- a/web/src/views/Dashboards/ViewDashboard.vue
+++ b/web/src/views/Dashboards/ViewDashboard.vue
@@ -112,7 +112,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             v-if="selectedDate"
             v-show="store.state.printMode === false"
             ref="dateTimePicker"
-            class="dashboard-icons h-7.5 [transition:all_0.2s_ease] max-md:[&_.date-time-label]:hidden"
+            class="dashboard-icons max-md:[&_.date-time-label]:hidden"
             size="sm"
             :modelValue="pickedDate ?? selectedDate"
             :auto-apply-dashboard="true"
@@ -132,7 +132,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             trigger
             :min-refresh-interval="store.state?.zoConfig?.min_auto_refresh_interval || 5"
             @trigger="onAutoRefreshTick"
-            class="dashboard-icons hideOnPrintMode h-7.5 [transition:all_0.2s_ease]"
+            class="dashboard-icons hideOnPrintMode"
             size="sm"
           />
           <OButtonGroup v-show="store.state.printMode !== true">
@@ -314,7 +314,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             trigger
             :min-refresh-interval="store.state?.zoConfig?.min_auto_refresh_interval || 5"
             @trigger="onAutoRefreshTick"
-            class="dashboard-icons hideOnPrintMode h-7.5 [transition:all_0.2s_ease]"
+            class="dashboard-icons hideOnPrintMode"
             size="sm"
           />
           <!-- These save, print or reload outside the draft, so edit mode hides them until Save or Discard. -->
diff --git a/web/src/views/Error404.vue b/web/src/views/Error404.vue
index 55278b6c98..eb9af2ab06 100644
--- a/web/src/views/Error404.vue
+++ b/web/src/views/Error404.vue
@@ -59,7 +59,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         >
       </div>
 
-      <p class="text-compact text-text-secondary m-0 opacity-70">
+      <p class="text-compact text-text-secondary m-0">
         {{ t("common.redirectingHome", { countdown }) }}
       </p>
     </div>
diff --git a/web/src/views/HomeView.vue b/web/src/views/HomeView.vue
index 60fc7ef732..44947e0f37 100644
--- a/web/src/views/HomeView.vue
+++ b/web/src/views/HomeView.vue
@@ -65,14 +65,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <template v-if="tab.id.startsWith('dash:')" #trailing>
               <button
                 type="button"
-                class="rounded-default text-text-secondary hover:bg-surface-subtle-hover hover:text-text-body inline-flex h-4 w-4 cursor-pointer items-center justify-center border-none bg-transparent text-sm leading-none opacity-60 transition-all duration-200 ease-[ease] hover:opacity-100 max-md:h-6 max-md:w-6"
+                class="rounded-default text-text-secondary hover:bg-surface-subtle-hover hover:text-text-body inline-flex h-5 w-5 cursor-pointer items-center justify-center border-none bg-transparent opacity-60 transition-all duration-200 ease-[ease] hover:opacity-100 max-md:h-6 max-md:w-6"
                 :data-test="`home-tab-close-${tab.id}`"
                 :aria-label="t('home.removeHomeDashboard')"
                 @mousedown.stop.prevent
                 @pointerdown.stop.prevent
                 @click.stop.prevent="onCloseTab(tab.id)"
               >
-                {{ "×" }}
+                <OIcon name="close" size="xs" />
               </button>
               <OTooltip side="bottom" :content="t('home.removeHomeDashboard')" />
             </template>
diff --git a/web/src/views/Ingestion.vue b/web/src/views/Ingestion.vue
index fdb17c60dc..63699402c4 100644
--- a/web/src/views/Ingestion.vue
+++ b/web/src/views/Ingestion.vue
@@ -45,14 +45,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :options="tokenOptions"
         label-key="label"
         value-key="value"
-        class="max-w-xs max-md:order-last max-md:max-w-full max-md:min-w-0! max-md:basis-full"
-        style="min-width: 13.75rem"
+        class="max-w-xs min-w-55 max-md:order-last max-md:max-w-full max-md:min-w-0! max-md:basis-full"
         @update:model-value="onTokenSelected"
       />
       <OButton
         v-if="!isRUMPage"
         variant="primary"
-        size="sm"
+        size="sm-action"
+        class="shrink-0"
         icon-left="key"
         :title="isMobile ? t('ingestion.manageTokensBtnLabel') : undefined"
         @click="navigateToIngestionTokens"
@@ -66,7 +66,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           store.state.organizationData.rumToken.rum_token != ''
         "
         variant="primary"
-        size="sm"
+        size="sm-action"
         data-test="ingestion-reset-token-btn"
         @click="showRUMUpdateDialogFn"
       >
@@ -79,7 +79,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           store.state.organizationData.rumToken.rum_token == ''
         "
         variant="primary"
-        size="sm"
+        size="sm-action"
         data-test="ingestion-reset-token-btn"
         @click="generateRUMToken"
       >
diff --git a/web/src/views/LogStream.vue b/web/src/views/LogStream.vue
index b30b1ae105..e3ebf80e01 100644
--- a/web/src/views/LogStream.vue
+++ b/web/src/views/LogStream.vue
@@ -37,11 +37,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </OButton>
       </template>
 
-      <!-- Org-wide stream footprint. Deliberately OUTSIDE the table: these totals
-           come from the org summary endpoint and cover every stream type, so they
-           must not sit in the table's #subheader where they would read as a
-           summary of the (server-paginated, type-filtered) rows below. Read-only
-           for the same reason — they are page context, not a facet. -->
+      <!-- Outside the table: these totals cover every stream type, not the paginated rows. -->
       <template #subnav>
         <div class="px-page-edge py-1.5" data-test="log-stream-summary">
           <OStatStrip :items="summaryStats" :loading="summaryLoading" />
@@ -188,7 +184,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 data-test="log-stream-explore-btn"
                 data-row-action="view"
                 variant="ghost"
-                size="icon-sm"
+                size="icon-xs-sq"
                 class="max-md:hidden"
                 @click="exploreStream({ row })"
               />
@@ -198,7 +194,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 data-test="log-stream-schema-btn"
                 data-row-action="view"
                 variant="ghost"
-                size="icon-sm"
+                size="icon-xs-sq"
                 class="max-md:hidden"
                 @click="listSchema({ row })"
               />
@@ -208,7 +204,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 data-test="log-stream-delete-btn"
                 data-row-action="delete"
                 variant="ghost-destructive"
-                size="icon-sm"
+                size="icon-xs-sq"
                 class="max-md:hidden"
                 @click="confirmDeleteAction({ row })"
               />
diff --git a/web/src/views/OverviewTab.vue b/web/src/views/OverviewTab.vue
index 8d093275d3..fdb4569472 100644
--- a/web/src/views/OverviewTab.vue
+++ b/web/src/views/OverviewTab.vue
@@ -57,7 +57,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           >
         </div>
         <button
-          class="text-text-link cursor-pointer border-none bg-none p-0 text-xs font-medium whitespace-nowrap opacity-80 transition-opacity duration-150 hover:underline hover:opacity-100"
+          class="text-text-link cursor-pointer border-none bg-none p-0 text-xs font-medium whitespace-nowrap hover:underline"
           @click="goToIncidentList"
         >
           {{ t("overview.viewAll") }} {{ "→" }}
@@ -169,7 +169,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </span>
         </div>
         <button
-          class="text-text-link cursor-pointer border-none bg-none p-0 text-xs font-medium whitespace-nowrap opacity-80 transition-opacity duration-150 hover:underline hover:opacity-100"
+          class="text-text-link cursor-pointer border-none bg-none p-0 text-xs font-medium whitespace-nowrap hover:underline"
           @click="goToServiceGraph"
         >
           {{ t("overview.viewAll") }} {{ "→" }}
@@ -353,7 +353,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <OTag type="countChip" value="warning">{{ anomalies.length }}</OTag>
         </div>
         <button
-          class="text-text-link cursor-pointer border-none bg-none p-0 text-xs font-medium whitespace-nowrap opacity-80 transition-opacity duration-150 hover:underline hover:opacity-100"
+          class="text-text-link cursor-pointer border-none bg-none p-0 text-xs font-medium whitespace-nowrap hover:underline"
           @click="goToAnomalies"
         >
           {{ t("overview.viewAll") }} {{ "→" }}
@@ -410,7 +410,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <OTag type="countChip" value="warning">{{ recentEvents.length }}</OTag>
         </div>
         <button
-          class="text-text-link cursor-pointer border-none bg-none p-0 text-xs font-medium whitespace-nowrap opacity-80 transition-opacity duration-150 hover:underline hover:opacity-100"
+          class="text-text-link cursor-pointer border-none bg-none p-0 text-xs font-medium whitespace-nowrap hover:underline"
           @click="goToAlertList"
         >
           {{ t("overview.viewAll") }} {{ "→" }}
diff --git a/web/src/views/slos/SloList.vue b/web/src/views/slos/SloList.vue
index 6c0d379191..642127788e 100644
--- a/web/src/views/slos/SloList.vue
+++ b/web/src/views/slos/SloList.vue
@@ -275,7 +275,7 @@
         <div class="flex items-center gap-1" @click.stop>
           <OButton
             variant="ghost"
-            size="icon-sm"
+            size="icon-xs-sq"
             icon-left="edit"
             class="max-md:hidden"
             :title="t('slos.edit')"
@@ -284,7 +284,7 @@
           />
           <OButton
             variant="ghost"
-            size="icon-sm"
+            size="icon-xs-sq"
             icon-left="drive-file-move"
             class="max-md:hidden"
             :title="t('slos.move')"
@@ -293,7 +293,7 @@
           />
           <OButton
             variant="ghost"
-            size="icon-sm"
+            size="icon-xs-sq"
             :icon-left="row.enabled ? 'pause' : 'play-arrow'"
             class="max-md:hidden"
             :title="row.enabled ? t('slos.pause') : t('slos.resume')"
@@ -302,7 +302,7 @@
           />
           <OButton
             variant="ghost"
-            size="icon-sm"
+            size="icon-xs-sq"
             icon-left="download"
             class="max-md:hidden"
             :title="t('common.export')"
@@ -312,7 +312,7 @@
           <OButton
             v-if="downtimesEnabled"
             variant="ghost"
-            size="icon-sm"
+            size="icon-xs-sq"
             icon-left="notifications-paused"
             class="max-md:hidden"
             :title="t('alerts.downtimes.mute.exclude')"
@@ -321,7 +321,7 @@
           />
           <OButton
             variant="ghost"
-            size="icon-sm"
+            size="icon-xs-sq"
             icon-left="delete"
             class="max-md:hidden"
             :title="t('slos.delete')"
diff --git a/web/src/views/synthetics/status-pages/StatusPagesList.vue b/web/src/views/synthetics/status-pages/StatusPagesList.vue
index ee75be8513..c7d696cfe1 100644
--- a/web/src/views/synthetics/status-pages/StatusPagesList.vue
+++ b/web/src/views/synthetics/status-pages/StatusPagesList.vue
@@ -52,7 +52,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <template #toolbar-trailing>
         <OButton
           variant="outline"
-          size="icon-sm"
+          size="icon-xs-sq"
           icon-left="refresh"
           :loading="loading"
           data-test="status-pages-refresh-btn"
@@ -134,7 +134,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <div class="flex items-center gap-0.5" @click.stop>
           <OButton
             variant="ghost"
-            size="icon-sm"
+            size="icon-xs-sq"
             icon-left="edit"
             class="max-md:hidden"
             :data-test="`status-pages-edit-btn-${(row as any).id}`"
@@ -147,7 +147,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <template #trigger>
               <OButton
                 variant="ghost"
-                size="icon-sm"
+                size="icon-xs-sq"
                 icon-left="more-vert"
                 :data-test="`status-pages-more-btn-${(row as any).id}`"
                 @click.stop