diff --git a/packages/apps/public/index.html b/packages/apps/public/index.html
index 8c6d02b603..5a0c2910a4 100644
--- a/packages/apps/public/index.html
+++ b/packages/apps/public/index.html
@@ -11,8 +11,8 @@
       :root {
         --font-mono: 0.9em Consolas, monaco, "Ubuntu Mono", "Liberation Mono", "Courier New", Courier, monospace;
         --font-sans: 1em "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-        --font-size-button: 0.925rem;
         --font-size-label: 0.75rem;
+        --font-size-medium: 0.925rem; /* 0.935 * 0.935 = 0.875 */
         --font-size-small: 0.875rem;
         --font-size-tiny: 0.71428571rem;
         --font-weight-bold: 700;
diff --git a/packages/apps/src/Menu/Grouping.tsx b/packages/apps/src/Menu/Grouping.tsx
index 0651bf6233..c71ce011d6 100644
--- a/packages/apps/src/Menu/Grouping.tsx
+++ b/packages/apps/src/Menu/Grouping.tsx
@@ -59,7 +59,7 @@ export default React.memo(styled(Grouping)`
   .groupHdr {
     border-radius: 0.25rem;
     padding: 0.857rem 1.375rem;
-    font-size: var(--font-size-button);
+    font-size: var(--font-size-medium);
     font-weight: 400;
     line-height: 1.214rem;
 
diff --git a/packages/apps/src/Menu/Item.tsx b/packages/apps/src/Menu/Item.tsx
index 7a9dbef342..f1c9b2039a 100644
--- a/packages/apps/src/Menu/Item.tsx
+++ b/packages/apps/src/Menu/Item.tsx
@@ -101,7 +101,7 @@ export default React.memo(styled(Item)`
     padding: 0.5rem 1.15rem 0.57rem;
     text-decoration: none;
     font-weight: 400;
-    font-size: var(--font-size-button);
+    font-size: var(--font-size-medium);
     line-height: 1.5rem;
   }
 
diff --git a/packages/react-components/src/Tabs/Tab.tsx b/packages/react-components/src/Tabs/Tab.tsx
index 610bfbf68e..a4516833dc 100644
--- a/packages/react-components/src/Tabs/Tab.tsx
+++ b/packages/react-components/src/Tabs/Tab.tsx
@@ -51,7 +51,7 @@ export default React.memo(styled(Tab)`
   align-items: center;
   display: flex;
   color: #8B8B8B;
-  font-size: var(--font-size-button);
+  font-size: var(--font-size-medium);
   height: 100%;
   padding: 0 1.5rem;
   position: relative;
diff --git a/packages/react-components/src/styles/components.ts b/packages/react-components/src/styles/components.ts
index bad223bf45..1b24a69972 100644
--- a/packages/react-components/src/styles/components.ts
+++ b/packages/react-components/src/styles/components.ts
@@ -46,7 +46,7 @@ export default (_theme: ThemeDef): string => `
 
   button.ui--Button {
     font: var(--font-sans);
-    font-size: var(--font-size-button);
+    font-size: var(--font-size-medium);
   }
 
   .editable {
diff --git a/packages/react-components/src/styles/index.ts b/packages/react-components/src/styles/index.ts
index 20b7b05908..8438236585 100644
--- a/packages/react-components/src/styles/index.ts
+++ b/packages/react-components/src/styles/index.ts
@@ -387,7 +387,7 @@ export default createGlobalStyle<Props & ThemeProps>(({ theme, uiHighlight }: Pr
     &.error,
     &.warning {
       border-left-width: 0.25rem;
-      font-size: var(--font-size-small);
+      font-size: var(--font-size-medium);
       line-height: 1.5;
       margin-left: 2.25rem;
       padding: 0.75rem 1rem;