diff --git a/qt/aqt/data/web/css/reviewer-bottom.scss b/qt/aqt/data/web/css/reviewer-bottom.scss
index 58da3bbf9..4be957291 100644
--- a/qt/aqt/data/web/css/reviewer-bottom.scss
+++ b/qt/aqt/data/web/css/reviewer-bottom.scss
@@ -63,7 +63,7 @@ button {
 .stattxt {
     position: absolute;
     white-space: nowrap;
-    font-size: medium;
+    font-size: small;
     top: -3px;
     left: 50%;
     transform: translate(-50%, -100%);
diff --git a/qt/aqt/webview.py b/qt/aqt/webview.py
index 477270a51..b634b1115 100644
--- a/qt/aqt/webview.py
+++ b/qt/aqt/webview.py
@@ -413,10 +413,10 @@ class AnkiWebView(QWebEngineView):
             button_style = f"""
 button {{ font-family: {family}; }}
             """
-            font = f"font-size:12px;font-family:{family};"
+            font = f"font-family:{family};"
         elif is_mac:
             family = "Helvetica"
-            font = f'font-size:14px;font-family:"{family}";'
+            font = f'font-family:"{family}";'
             button_style = """
 button {
     --canvas: #fff;
@@ -432,7 +432,7 @@ button {
 """
         else:
             family = self.font().family()
-            font = f'font-size:14px;font-family:"{family}", sans-serif;'
+            font = f'font-family:"{family}", sans-serif;'
             button_style = """
 /* Buttons */
 button{{ 
diff --git a/qt/tools/extract_sass_vars.py b/qt/tools/extract_sass_vars.py
index 5bb716087..9a9de37b5 100644
--- a/qt/tools/extract_sass_vars.py
+++ b/qt/tools/extract_sass_vars.py
@@ -25,6 +25,8 @@ for line in re.split(r"[;\{\}]|\*\/", open(root_vars_css).read()):
     if line.startswith("/*!"):
         if "props" in line:
             reached_props = True
+        elif "rest" in line:
+            break
         else:
             comment = re.match(r"\/\*!\s*(.*)$", line)[1]
         continue
diff --git a/sass/_root-vars.scss b/sass/_root-vars.scss
index 307a199dd..fe485a8f9 100644
--- a/sass/_root-vars.scss
+++ b/sass/_root-vars.scss
@@ -4,6 +4,7 @@
 @use "sass:map";
 @use "vars" as *;
 @use "functions" as *;
+@use "scrollbar";
 
 /*! colors */
 :root {
@@ -50,3 +51,15 @@
         }
     }
 }
+
+/*! rest */
+:root {
+    font-size: prop(font-size);
+    body {
+        overscroll-behavior: none;
+        &:not(.isMac),
+        &:not(.isMac) * {
+            @include scrollbar.custom;
+        }
+    }
+}
diff --git a/sass/_vars.scss b/sass/_vars.scss
index 869cd4014..e4d2ad8df 100644
--- a/sass/_vars.scss
+++ b/sass/_vars.scss
@@ -13,6 +13,11 @@
 
 $vars: (
     props: (
+        font: (
+            size: (
+                default: 15px,
+            ),
+        ),
         border-radius: (
             default: (
                 "Used to round corners of various UI elements",
@@ -177,8 +182,8 @@ $vars: (
                 bg: (
                     "Background color of primary button",
                     (
-                        light: palette(blue, 4),
-                        dark: color.scale(palette(blue, 6), $saturation: -10%),
+                        light: palette(blue, 5),
+                        dark: color.scale(palette(blue, 7), $saturation: -10%),
                     ),
                 ),
                 gradient: (
diff --git a/sass/base.scss b/sass/base.scss
index 266fdade1..4786b63d7 100644
--- a/sass/base.scss
+++ b/sass/base.scss
@@ -1,6 +1,5 @@
 @use "vars" as *;
 @use "root-vars";
-@use "scrollbar";
 @use "button-mixins" as button;
 
 $body-color: color(fg);
@@ -43,15 +42,6 @@ html {
     overflow-x: hidden;
 }
 
-body {
-    --base-font-size: 13px;
-    overscroll-behavior: none;
-    &:not(.isMac),
-    &:not(.isMac) * {
-        @include scrollbar.custom;
-    }
-}
-
 button {
     /* override transition for instant hover response */
     transition: color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
diff --git a/ts/components/ButtonToolbar.svelte b/ts/components/ButtonToolbar.svelte
index 279625545..17c800818 100644
--- a/ts/components/ButtonToolbar.svelte
+++ b/ts/components/ButtonToolbar.svelte
@@ -27,6 +27,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     {id}
     class="button-toolbar btn-toolbar {className}"
     class:nightMode={$pageTheme.isDark}
+    style:--icon-align="baseline"
     {style}
     role="toolbar"
     on:focusout
diff --git a/ts/components/CheckBox.svelte b/ts/components/CheckBox.svelte
index c88a5f5f4..aa5ddafa0 100644
--- a/ts/components/CheckBox.svelte
+++ b/ts/components/CheckBox.svelte
@@ -10,6 +10,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <style lang="scss">
     label {
-        line-height: 1;
+        line-height: inherit;
     }
 </style>
diff --git a/ts/components/DropdownItem.svelte b/ts/components/DropdownItem.svelte
index a0347eb2a..dbed7977c 100644
--- a/ts/components/DropdownItem.svelte
+++ b/ts/components/DropdownItem.svelte
@@ -49,7 +49,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         justify-content: start;
         width: 100%;
 
-        font-size: var(--dropdown-font-size, calc(0.8 * var(--base-font-size)));
+        font-size: var(--dropdown-font-size, var(--font-size));
 
         background: none;
         box-shadow: none !important;
diff --git a/ts/components/IconButton.svelte b/ts/components/IconButton.svelte
index deafe53ef..ec8dd1da7 100644
--- a/ts/components/IconButton.svelte
+++ b/ts/components/IconButton.svelte
@@ -47,7 +47,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         @include button.border-radius;
 
         padding: 0 var(--padding-inline, 0);
-        font-size: var(--base-font-size);
+        font-size: var(--font-size);
         height: var(--buttons-size);
         min-width: calc(var(--buttons-size) * 0.75);
     }
diff --git a/ts/components/LabelButton.svelte b/ts/components/LabelButton.svelte
index f0810e453..8dd978d0a 100644
--- a/ts/components/LabelButton.svelte
+++ b/ts/components/LabelButton.svelte
@@ -50,7 +50,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         overflow: hidden;
         text-overflow: ellipsis;
         padding: 0 calc(var(--buttons-size) / 3);
-        font-size: var(--base-font-size);
+        font-size: var(--font-size);
         width: auto;
         height: var(--buttons-size);
     }
diff --git a/ts/congrats/CongratsPage.svelte b/ts/congrats/CongratsPage.svelte
index 6362f7fcd..5c8bb3686 100644
--- a/ts/congrats/CongratsPage.svelte
+++ b/ts/congrats/CongratsPage.svelte
@@ -68,7 +68,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     .congrats {
         margin-top: 2em;
         max-width: 30em;
-        font-size: var(--base-font-size);
+        font-size: var(--font-size);
 
         :global(a) {
             color: var(--fg-link);
diff --git a/ts/editor/CollapseBadge.svelte b/ts/editor/CollapseBadge.svelte
index 42f7e1b17..608e1a1cc 100644
--- a/ts/editor/CollapseBadge.svelte
+++ b/ts/editor/CollapseBadge.svelte
@@ -11,7 +11,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <div class="collapse-badge" class:collapsed class:highlighted>
-    <Badge iconSize={80} --icon-align="text-bottom">{@html chevronDown}</Badge>
+    <Badge iconSize={80}>{@html chevronDown}</Badge>
 </div>
 
 <style lang="scss">
diff --git a/ts/editor/NoteEditor.svelte b/ts/editor/NoteEditor.svelte
index d133fdac9..ee5f29554 100644
--- a/ts/editor/NoteEditor.svelte
+++ b/ts/editor/NoteEditor.svelte
@@ -78,7 +78,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         return fontFamily;
     }
 
-    const size = 1.5;
+    const size = 1.6;
     const wrap = true;
 
     const fieldStores: Writable<string>[] = [];
@@ -457,6 +457,7 @@ the AddCards dialog) should be implemented in the user of this component.
                                         richTextsHidden[index] = true;
                                     }
                                 }}
+                                --icon-align="bottom"
                             >
                                 <svelte:fragment slot="field-name">
                                     <LabelName>
diff --git a/ts/editor/image-overlay/FloatButtons.svelte b/ts/editor/image-overlay/FloatButtons.svelte
index 9f8c5664c..f75d82ae6 100644
--- a/ts/editor/image-overlay/FloatButtons.svelte
+++ b/ts/editor/image-overlay/FloatButtons.svelte
@@ -27,7 +27,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const dispatch = createEventDispatcher();
 </script>
 
-<ButtonGroup size={1.5} wrap={false}>
+<ButtonGroup size={1.6} wrap={false}>
     <IconButton
         tooltip={tr.editingFloatLeft()}
         active={floatStyle === "left"}
diff --git a/ts/editor/image-overlay/SizeSelect.svelte b/ts/editor/image-overlay/SizeSelect.svelte
index f97c8328a..022b3aad5 100644
--- a/ts/editor/image-overlay/SizeSelect.svelte
+++ b/ts/editor/image-overlay/SizeSelect.svelte
@@ -22,7 +22,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const dispatch = createEventDispatcher();
 </script>
 
-<ButtonGroup size={1.5}>
+<ButtonGroup size={1.6}>
     <IconButton
         disabled={shrinkingDisabled}
         flipX={$direction === "rtl"}
diff --git a/ts/editor/mathjax-overlay/MathjaxButtons.svelte b/ts/editor/mathjax-overlay/MathjaxButtons.svelte
index 48df2bc60..b60259b76 100644
--- a/ts/editor/mathjax-overlay/MathjaxButtons.svelte
+++ b/ts/editor/mathjax-overlay/MathjaxButtons.svelte
@@ -17,7 +17,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const dispatch = createEventDispatcher();
 </script>
 
-<ButtonToolbar size={1.5} wrap={false}>
+<ButtonToolbar size={1.6} wrap={false}>
     <ButtonGroup>
         <IconButton
             tooltip={tr.editingMathjaxInline()}
diff --git a/ts/tag-editor/Tag.svelte b/ts/tag-editor/Tag.svelte
index 6b548676e..bfa7d0c8b 100644
--- a/ts/tag-editor/Tag.svelte
+++ b/ts/tag-editor/Tag.svelte
@@ -5,8 +5,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import { createEventDispatcher, onMount } from "svelte";
 
-    import { pageTheme } from "../sveltelib/theme";
-
     let className: string = "";
     export { className as class };
 
@@ -29,11 +27,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <button
     bind:this={button}
-    class="tag btn d-inline-flex align-items-center text-nowrap ps-2 pe-1 {className}"
+    class="tag d-inline-flex align-items-center text-nowrap ps-2 pe-1 {className}"
     class:selected
     class:flashing
-    class:btn-day={!$pageTheme.isDark}
-    class:btn-night={$pageTheme.isDark}
     tabindex="-1"
     title={tooltip}
     on:mousemove
@@ -60,7 +56,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     .tag {
         @include button.base($with-active: false, $with-disabled: false);
 
-        font-size: var(--base-font-size);
+        font-size: var(--font-size);
         padding: 0;
 
         --border-color: var(--border);
diff --git a/ts/tag-editor/TagInput.svelte b/ts/tag-editor/TagInput.svelte
index faec96aa3..7c401a060 100644
--- a/ts/tag-editor/TagInput.svelte
+++ b/ts/tag-editor/TagInput.svelte
@@ -267,7 +267,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         resize: none;
         appearance: none;
         font: inherit;
-        font-size: var(--base-font-size);
+        font-size: var(--font-size);
         outline: none;
         border: none;
         margin: 0;