diff --git a/public/typography.css b/public/typography.css
index 108809277..95bc22fec 100644
--- a/public/typography.css
+++ b/public/typography.css
@@ -92,8 +92,11 @@ html {
    * otherwise Safari breaks. */
   font-size: var(--font-size);
   font-weight: var(--font-weight-regular);
+}
+
+body {
   /* On Safari this aligns text with different font-faces properly vertically. */
-  line-height: 22px;
+  line-height: 1.375rem;
 }
 
 p {
diff --git a/src/components/Button.svelte b/src/components/Button.svelte
index 9c863fee6..8a85f7426 100644
--- a/src/components/Button.svelte
+++ b/src/components/Button.svelte
@@ -311,7 +311,7 @@
   .p3-3 {
     grid-area: p3-3;
     background-color: var(--button-color-1);
-    padding: 0 8px;
+    padding: 0 0.5rem;
     display: flex;
     align-items: center;
     gap: 0.5rem;
diff --git a/src/components/Changes.svelte b/src/components/Changes.svelte
index fe5e36055..de05b9904 100644
--- a/src/components/Changes.svelte
+++ b/src/components/Changes.svelte
@@ -80,8 +80,8 @@
     border-left: 4px solid var(--color-background-default);
   }
   .commit-dot {
-    width: 4px;
-    height: 4px;
+    width: 0.25rem;
+    height: 0.25rem;
     position: absolute;
     top: 0.625rem;
     left: -18.5px;
diff --git a/src/components/CobCommitTeaser.svelte b/src/components/CobCommitTeaser.svelte
index 963ba938d..cd46b9d9a 100644
--- a/src/components/CobCommitTeaser.svelte
+++ b/src/components/CobCommitTeaser.svelte
@@ -48,7 +48,7 @@
     align-items: center;
     gap: 1rem;
     margin-left: auto;
-    height: 21px;
+    height: 1.3125rem;
   }
   .commit-message {
     font-size: var(--font-size-tiny);
@@ -57,7 +57,7 @@
     user-select: text;
   }
   .commit-expand-button {
-    height: 21px;
+    height: 1.3125rem;
     display: flex;
     align-items: center;
   }
@@ -81,7 +81,7 @@
       {#if commit.message.trim() !== commit.summary.trim()}
         <div class="commit-expand-button">
           <NakedButton
-            stylePadding="0 4px"
+            stylePadding="0 0.25rem"
             variant="ghost"
             onclick={e => {
               e.stopPropagation();
diff --git a/src/components/CommitsContainer.svelte b/src/components/CommitsContainer.svelte
index 486a7de5d..0e04991d9 100644
--- a/src/components/CommitsContainer.svelte
+++ b/src/components/CommitsContainer.svelte
@@ -48,7 +48,7 @@
   <div class="header" class:collapsed={!expanded}>
     <div class="left">
       <NakedButton
-        stylePadding="0 4px"
+        stylePadding="0 0.25rem"
         variant="ghost"
         onclick={async () => {
           expanded = !expanded;
diff --git a/src/components/ConfirmClear.svelte b/src/components/ConfirmClear.svelte
index af14f7ca8..a7e10b157 100644
--- a/src/components/ConfirmClear.svelte
+++ b/src/components/ConfirmClear.svelte
@@ -20,7 +20,7 @@
 
 <Popover popoverPositionRight="0" popoverPositionTop="2.5rem">
   {#snippet toggle(onclick)}
-    <NakedButton stylePadding="0 4px" variant="ghost" {onclick}>
+    <NakedButton stylePadding="0 0.25rem" variant="ghost" {onclick}>
       <Icon name="broom-double" />
     </NakedButton>
   {/snippet}
diff --git a/src/components/Diff.svelte b/src/components/Diff.svelte
index 2fc542259..75d79c41b 100644
--- a/src/components/Diff.svelte
+++ b/src/components/Diff.svelte
@@ -222,7 +222,7 @@
   .container {
     /* Make space for the box-shadow border, otherwise it gets cut off due to
        overflow: hide on the container. */
-    padding: 8px 1px;
+    padding: 0.5rem 0.0625rem;
     font-size: var(--font-size-small);
     font-family: var(--font-family-monospace);
   }
@@ -315,7 +315,7 @@
     display: flex;
     background-color: var(--color-fill-ghost);
     clip-path: var(--1px-corner-fill);
-    padding: 0 8px;
+    padding: 0 0.5rem;
     width: fit-content;
   }
 </style>
diff --git a/src/components/HomeSidebar.svelte b/src/components/HomeSidebar.svelte
index f9028ebf5..411c80f5d 100644
--- a/src/components/HomeSidebar.svelte
+++ b/src/components/HomeSidebar.svelte
@@ -37,7 +37,7 @@
     display: flex;
     font-size: var(--font-size-small);
     justify-content: space-between;
-    padding: 8px 4px 8px 8px;
+    padding: 0.5rem 0.25rem 0.5rem 0.5rem;
     width: 100%;
   }
   .tab:not(.active) {
diff --git a/src/components/IssueStateButton.svelte b/src/components/IssueStateButton.svelte
index a218c043f..4371471a0 100644
--- a/src/components/IssueStateButton.svelte
+++ b/src/components/IssueStateButton.svelte
@@ -34,8 +34,8 @@
     font-size: var(--font-size-small);
   }
   .badge {
-    gap: 6px;
-    padding-right: 10px;
+    gap: 0.375rem;
+    padding-right: 0.625rem;
   }
 </style>
 
diff --git a/src/components/IssuesSecondColumn.svelte b/src/components/IssuesSecondColumn.svelte
index a76bf63d5..796c0fd7f 100644
--- a/src/components/IssuesSecondColumn.svelte
+++ b/src/components/IssuesSecondColumn.svelte
@@ -32,7 +32,7 @@
     display: flex;
     font-size: var(--font-size-small);
     justify-content: space-between;
-    padding: 8px 4px 8px 8px;
+    padding: 0.5rem 0.25rem 0.5rem 0.5rem;
     width: 100%;
   }
   .tab:not(.active) {
@@ -128,7 +128,7 @@
         <div
           class="tab"
           style:color="var(--color-foreground-contrast)"
-          style:padding-left="12px">
+          style:padding-left="0.75rem">
           <div class="global-flex"><Icon name="patch" />Patches</div>
           <div class="global-counter">
             {project.meta.patches.draft +
diff --git a/src/components/NakedButton.svelte b/src/components/NakedButton.svelte
index 75da0a0e9..503d24f1b 100644
--- a/src/components/NakedButton.svelte
+++ b/src/components/NakedButton.svelte
@@ -20,7 +20,7 @@
     variant,
     onclick,
     styleHeight = "2rem",
-    stylePadding = "0 8px",
+    stylePadding = "0 0.5rem",
     active = false,
     keyShortcuts,
   }: Props = $props();
diff --git a/src/components/NotificationTeaser.svelte b/src/components/NotificationTeaser.svelte
index ca3df7026..1f8b4f21e 100644
--- a/src/components/NotificationTeaser.svelte
+++ b/src/components/NotificationTeaser.svelte
@@ -212,7 +212,7 @@
     </div>
     <div class="clear-icon">
       <NakedButton
-        stylePadding="0 4px"
+        stylePadding="0 0.25rem"
         variant="ghost"
         onclick={e => {
           e.stopPropagation();
diff --git a/src/components/OutlineButton.svelte b/src/components/OutlineButton.svelte
index 6d845a6a5..89adebc08 100644
--- a/src/components/OutlineButton.svelte
+++ b/src/components/OutlineButton.svelte
@@ -79,7 +79,7 @@
   }
   .p3-3 {
     grid-area: p3-3;
-    padding: 0 8px;
+    padding: 0 0.5rem;
     display: flex;
     align-items: center;
     gap: 0.5rem;
diff --git a/src/components/PatchStateButton.svelte b/src/components/PatchStateButton.svelte
index 8de7b8c95..d7cf81f85 100644
--- a/src/components/PatchStateButton.svelte
+++ b/src/components/PatchStateButton.svelte
@@ -37,8 +37,8 @@
   }
 
   .badge {
-    gap: 6px;
-    padding-right: 10px;
+    gap: 0.375rem;
+    padding-right: 0.625rem;
   }
 </style>
 
diff --git a/src/components/PatchTeaser.svelte b/src/components/PatchTeaser.svelte
index 46fe3d10b..d41ae8ade 100644
--- a/src/components/PatchTeaser.svelte
+++ b/src/components/PatchTeaser.svelte
@@ -84,7 +84,7 @@
     class="patch-teaser"
     style:align-items="flex-start"
     style:clip-path={focussed ? "none" : undefined}
-    style:padding={focussed ? "1rem" : "20px"}
+    style:padding={focussed ? "1rem" : "1.25rem"}
     onclick={async () => {
       if (loadPatch) {
         await loadPatch(patch.id);
diff --git a/src/components/PatchTimeline.svelte b/src/components/PatchTimeline.svelte
index cbfc53f05..292e15095 100644
--- a/src/components/PatchTimeline.svelte
+++ b/src/components/PatchTimeline.svelte
@@ -90,7 +90,7 @@
     gap: 0.25rem;
   }
   .icon {
-    padding-top: 3px;
+    padding-top: 0.1875rem;
   }
 </style>
 
diff --git a/src/components/PatchesSecondColumn.svelte b/src/components/PatchesSecondColumn.svelte
index 2c0c80c17..b24605b84 100644
--- a/src/components/PatchesSecondColumn.svelte
+++ b/src/components/PatchesSecondColumn.svelte
@@ -31,7 +31,7 @@
     display: flex;
     font-size: var(--font-size-small);
     justify-content: space-between;
-    padding: 8px 4px 8px 8px;
+    padding: 0.5rem 0.25rem 0.5rem 0.5rem;
     width: 100%;
   }
   .tab:not(.active) {
@@ -75,7 +75,7 @@
         <div
           class="tab"
           style:color="var(--color-foreground-contrast)"
-          style:padding-left="12px">
+          style:padding-left="0.75rem">
           <div class="global-flex"><Icon name="issue" />Issues</div>
           <div class="global-counter">
             {project.meta.issues.open + project.meta.issues.closed}
diff --git a/src/components/ReactionSelector.svelte b/src/components/ReactionSelector.svelte
index 8f08701e0..cfed3c58f 100644
--- a/src/components/ReactionSelector.svelte
+++ b/src/components/ReactionSelector.svelte
@@ -36,7 +36,7 @@
     cursor: pointer;
     border: 0;
     background: none;
-    height: 24px;
+    height: 1.5rem;
     clip-path: var(--1px-corner-fill);
     margin: 0;
     font-size: var(--font-size-small);
diff --git a/src/components/RepoCard.svelte b/src/components/RepoCard.svelte
index ff563dbb4..ea69e5bc3 100644
--- a/src/components/RepoCard.svelte
+++ b/src/components/RepoCard.svelte
@@ -27,7 +27,7 @@
   }
   .description {
     color: var(--color-fill-gray);
-    margin-top: 4px;
+    margin-top: 0.25rem;
   }
   .container {
     width: 100%;
@@ -38,7 +38,7 @@
   variant={focussed ? "secondary" : "ghost"}
   styleCursor="pointer"
   styleWidth="100%"
-  stylePadding="8px 12px"
+  stylePadding="0.5rem 0.75rem"
   styleOverflow="hidden"
   hoverable
   {onclick}>
@@ -61,10 +61,10 @@
 
     <div class="global-flex footer">
       <div class="global-flex">
-        <div class="global-flex" style:gap="4px">
+        <div class="global-flex" style:gap="0.25rem">
           <Icon name="issue" />{project.meta.issues.open}
         </div>
-        <div class="global-flex" style:gap="4px">
+        <div class="global-flex" style:gap="0.25rem">
           <Icon name="patch" />{project.meta.patches.open}
         </div>
       </div>
diff --git a/src/components/RepoHeader.svelte b/src/components/RepoHeader.svelte
index 6ed37b5a6..2e1684572 100644
--- a/src/components/RepoHeader.svelte
+++ b/src/components/RepoHeader.svelte
@@ -60,9 +60,9 @@
     <div class="global-flex">
       <div
         class="global-counter"
-        style:padding="0 6px"
+        style:padding="0 0.375rem"
         style:background-color="var(--color-fill-ghost)"
-        style:gap="4px">
+        style:gap="0.25rem">
         <Icon name="seedling" />
         {repo.seeding}
       </div>
diff --git a/src/components/RepoTeaser.svelte b/src/components/RepoTeaser.svelte
index d25b584d6..9146df71d 100644
--- a/src/components/RepoTeaser.svelte
+++ b/src/components/RepoTeaser.svelte
@@ -17,9 +17,9 @@
 
   .seeding {
     margin-left: auto;
-    padding: 0 6px;
+    padding: 0 0.375rem;
     background-color: var(--color-fill-ghost);
-    gap: 4px;
+    gap: 0.25rem;
   }
 </style>
 
diff --git a/src/components/RevisionBadges.svelte b/src/components/RevisionBadges.svelte
index 5f9af5e2d..283a30218 100644
--- a/src/components/RevisionBadges.svelte
+++ b/src/components/RevisionBadges.svelte
@@ -14,7 +14,7 @@
 {#if revision.id === revisions.slice(-1)[0].id}
   <span
     class="global-counter"
-    style:height="22px"
+    style:height="1.375rem"
     style:color="var(--color-foreground-contrast)">
     Latest
   </span>
@@ -22,7 +22,7 @@
 {#if revision.id === revisions[0].id}
   <span
     class="global-counter"
-    style:height="22px"
+    style:height="1.375rem"
     style:color="var(--color-foreground-contrast)">
     Initial
   </span>
diff --git a/src/components/RevisionSelector.svelte b/src/components/RevisionSelector.svelte
index a1f5eadcb..5027cfa64 100644
--- a/src/components/RevisionSelector.svelte
+++ b/src/components/RevisionSelector.svelte
@@ -50,7 +50,7 @@
     margin-bottom: 1rem;
   }
   .icon {
-    min-width: 16px;
+    min-width: 1rem;
   }
 </style>
 
@@ -63,7 +63,7 @@
         e.preventDefault();
         onclick();
       }}
-      stylePadding="0 4px">
+      stylePadding="0 0.25rem">
       <div style:color="var(--color-foreground-contrast)">
         <Icon name="chevron-down" />
       </div>
diff --git a/src/components/Tab.svelte b/src/components/Tab.svelte
index 8c9fd453e..bc807d497 100644
--- a/src/components/Tab.svelte
+++ b/src/components/Tab.svelte
@@ -30,14 +30,14 @@
     display: flex;
     flex-direction: row;
     font-size: var(--font-size-small);
-    height: 38px;
+    height: 2.375rem;
   }
 
   .wrapper {
     position: relative;
     display: flex;
     gap: 0.5rem;
-    padding: 3px 0;
+    padding: 0.1875rem 0;
     align-items: center;
   }
 
diff --git a/src/components/TextInput.svelte b/src/components/TextInput.svelte
index f0ddc20a5..a421133c1 100644
--- a/src/components/TextInput.svelte
+++ b/src/components/TextInput.svelte
@@ -83,7 +83,7 @@
     width: 100%;
     height: 100%;
     margin: 0;
-    height: 32px;
+    height: 2rem;
     border: 0;
   }
   input::placeholder {
diff --git a/src/components/VerdictBadge.svelte b/src/components/VerdictBadge.svelte
index b1140f1bf..c26bf137a 100644
--- a/src/components/VerdictBadge.svelte
+++ b/src/components/VerdictBadge.svelte
@@ -18,8 +18,8 @@
 
 <style>
   .badge {
-    gap: 6px;
-    padding-right: 10px;
+    gap: 0.375rem;
+    padding-right: 0.625rem;
   }
   .no-verdict {
     background-color: var(--color-fill-ghost);
diff --git a/src/views/home/Inbox.svelte b/src/views/home/Inbox.svelte
index 02b8d2f77..e848e4721 100644
--- a/src/views/home/Inbox.svelte
+++ b/src/views/home/Inbox.svelte
@@ -204,7 +204,7 @@
         styleJustifyContent="center">
         <div
           class="global-flex"
-          style:height="74px"
+          style:height="4.625rem"
           style:justify-content="center">
           <div class="txt-missing txt-small global-flex" style:gap="0.25rem">
             <Icon name="none" />
diff --git a/src/views/home/Onboarding.svelte b/src/views/home/Onboarding.svelte
index 07312a65b..db868e5c0 100644
--- a/src/views/home/Onboarding.svelte
+++ b/src/views/home/Onboarding.svelte
@@ -71,7 +71,7 @@
     gap: 1.5rem;
   }
   .tab {
-    height: 24px;
+    height: 1.5rem;
     color: var(--color-foreground-contrast);
   }
   .hint {
diff --git a/src/views/home/Repos.svelte b/src/views/home/Repos.svelte
index 90b064f2e..06e3667d5 100644
--- a/src/views/home/Repos.svelte
+++ b/src/views/home/Repos.svelte
@@ -175,7 +175,7 @@
           styleJustifyContent="center">
           <div
             class="global-flex"
-            style:height="126px"
+            style:height="7.875rem"
             style:justify-content="center">
             <div class="txt-missing txt-small global-flex" style:gap="0.25rem">
               <Icon name="none" />
diff --git a/src/views/repo/Issues.svelte b/src/views/repo/Issues.svelte
index fcb0bacd9..8d5d7df46 100644
--- a/src/views/repo/Issues.svelte
+++ b/src/views/repo/Issues.svelte
@@ -165,7 +165,7 @@
           styleJustifyContent="center">
           <div
             class="global-flex"
-            style:height="84px"
+            style:height="5.25rem"
             style:justify-content="center">
             <div class="txt-missing txt-small global-flex" style:gap="0.25rem">
               <Icon name="none" />
diff --git a/src/views/repo/Patch.svelte b/src/views/repo/Patch.svelte
index fe04479b9..319b81b78 100644
--- a/src/views/repo/Patch.svelte
+++ b/src/views/repo/Patch.svelte
@@ -649,7 +649,7 @@
               {formatOid(patch.id)}
               <span
                 class="global-counter"
-                style:height="24px"
+                style:height="1.5rem"
                 style:color="var(--color-foreground-contrast)">
                 Initial
               </span>