From 8a90cc0c88de8372389834718db366d7b6bc795c Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Thu, 17 Sep 2026 14:43:32 +0000
Subject: [PATCH] Update design token names (#40569)

---
 .../theme_playground.module.scss              | 38 +++++-----
 .../components/autosuggest/styles.module.scss | 16 ++--
 .../components/badge/redesign.module.scss     |  2 +-
 .../components/badge/styles.module.scss       |  8 +-
 .../bottom_sheet/styles.module.scss           |  4 +-
 .../components/button/redesign.module.scss    | 22 +++---
 .../components/callout/redesign.module.scss   | 12 +--
 .../components/card/styles.module.scss        | 32 ++++----
 .../column_header/styles.module.scss          | 14 ++--
 .../form_fields/redesign.module.scss          | 24 +++---
 .../components/menu/styles.module.scss        | 28 +++----
 .../modal_shell/redesign.module.scss          | 14 ++--
 .../components/status/attachments.module.scss | 10 +--
 .../components/status/header.module.scss      |  4 +-
 .../components/status/prepend.module.scss     | 12 +--
 .../components/status/quote.module.scss       | 28 +++----
 .../components/status/styles.module.scss      | 24 +++---
 .../compose/redesign/attachments.module.scss  | 74 +++++++++----------
 .../compose/redesign/modals.module.scss       | 14 ++--
 .../compose/redesign/styles.module.scss       | 46 ++++++------
 .../compose/redesign/trigger.module.scss      | 18 ++---
 .../account_card_and_menu.module.scss         |  8 +-
 .../redesign/footer_links.module.scss         |  8 +-
 .../redesign/header.module.scss               | 12 +--
 .../redesign/list_section.module.scss         | 12 +--
 .../redesign/logged_out_info.module.scss      |  4 +-
 .../redesign/mobile_nav.module.scss           | 12 +--
 .../redesign/navigation_link.module.scss      | 24 +++---
 .../redesign/styles.module.scss               | 12 +--
 .../column_loading/styles.module.scss         |  4 +-
 .../columns_area/redesign.module.scss         |  6 +-
 .../redesign_multicol.module.scss             |  2 +-
 app/javascript/styles/mastodon/_mixins.scss   | 40 +++++-----
 app/javascript/styles/mastodon/basics.scss    |  4 +-
 .../styles/mastodon/components.scss           |  4 +-
 .../styles/mastodon/tokens/_border.scss       | 12 +--
 .../styles/mastodon/tokens/_shape.scss        | 34 +++++----
 .../styles/mastodon/tokens/_type.scss         | 18 ++---
 38 files changed, 331 insertions(+), 329 deletions(-)

diff --git a/app/javascript/mastodon/components/_theme_playground/theme_playground.module.scss b/app/javascript/mastodon/components/_theme_playground/theme_playground.module.scss
index 4329ede4f4a..d7c96184504 100644
--- a/app/javascript/mastodon/components/_theme_playground/theme_playground.module.scss
+++ b/app/javascript/mastodon/components/_theme_playground/theme_playground.module.scss
@@ -4,10 +4,10 @@
   position: relative;
   display: grid;
   grid-template-columns: 250px 1fr;
-  gap: var(--space-md);
-  padding: var(--space-3xl);
+  gap: var(--space-4);
+  padding: var(--space-8);
   font-family: Inter, sans-serif;
-  font-size: var(--fs-lg);
+  font-size: var(--fs-16);
   line-height: var(--lh-normal);
   overflow-wrap: break-word;
   color: var(--color-text-primary);
@@ -32,18 +32,18 @@
   nav {
     display: block;
     grid-template-rows: min-content;
-    font-size: var(--fs-sm);
+    font-size: var(--fs-14);
 
     input {
       display: block;
       box-sizing: border-box;
       width: 100%;
-      margin-block-end: var(--space-md);
-      padding: var(--space-xs) var(--space-md);
+      margin-block-end: var(--space-4);
+      padding: var(--space-2) var(--space-4);
       color: var(--color-text-primary);
       background: transparent;
       border: 1px solid var(--color-border-primary);
-      border-radius: var(--radius-xs);
+      border-radius: var(--radius-2);
       font: inherit;
 
       &:focus {
@@ -54,8 +54,8 @@
 
     a {
       display: block;
-      padding: var(--space-xs) var(--space-md);
-      border-radius: var(--radius-xs);
+      padding: var(--space-2) var(--space-4);
+      border-radius: var(--radius-2);
       color: var(--color-text-secondary);
       @include mixins.type-body-compact;
 
@@ -72,10 +72,10 @@
         'subtitle button';
       grid-template-columns: 1fr min-content;
       align-items: center;
-      gap: var(--space-3xs) var(--space-xs);
-      margin-block-start: var(--space-md);
-      padding: var(--space-sm) var(--space-md);
-      border-radius: var(--radius-md);
+      gap: var(--space-half) var(--space-2);
+      margin-block-start: var(--space-4);
+      padding: var(--space-3) var(--space-4);
+      border-radius: var(--radius-4);
       border: 1px solid var(--color-border-primary);
 
       h2 {
@@ -87,7 +87,7 @@
 
       .subtitle {
         grid-area: subtitle;
-        @include mixins.type-label-sm;
+        @include mixins.type-caption;
 
         color: var(--color-text-secondary);
         overflow: hidden;
@@ -113,19 +113,19 @@
   }
 
   main {
-    padding: var(--space-3xl);
+    padding: var(--space-8);
     background-color: var(--color-bg-primary);
-    border-radius: var(--radius-md);
+    border-radius: var(--radius-4);
   }
 
   .overlay {
     position: absolute;
-    inset: auto var(--space-md) var(--space-md) auto;
+    inset: auto var(--space-4) var(--space-4) auto;
     width: 30%;
     height: 35%;
-    padding: var(--space-md);
+    padding: var(--space-4);
     background-color: var(--color-bg-primary);
-    border-radius: var(--radius-xl);
+    border-radius: var(--radius-6);
 
     @include mixins.elevation-2;
   }
diff --git a/app/javascript/mastodon/components/autosuggest/styles.module.scss b/app/javascript/mastodon/components/autosuggest/styles.module.scss
index cd3553caf31..6831c1de462 100644
--- a/app/javascript/mastodon/components/autosuggest/styles.module.scss
+++ b/app/javascript/mastodon/components/autosuggest/styles.module.scss
@@ -29,13 +29,13 @@
 
 .item {
   display: flex;
-  gap: var(--space-xs);
-  min-height: var(--space-3xl);
+  gap: var(--space-2);
+  min-height: var(--space-8);
 }
 
 .itemIcon {
-  width: var(--space-3xl);
-  height: var(--space-3xl);
+  width: var(--space-8);
+  height: var(--space-8);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -47,19 +47,19 @@
 .itemHashUses {
   color: var(--color-text-tertiary);
   margin-inline-start: auto;
-  font-size: var(--fs-xs);
+  font-size: var(--fs-13);
 }
 
 .itemAccountName {
-  @include mixins.type-label-lg;
+  @include mixins.type-label;
 
   display: flex;
   align-items: stretch;
-  gap: var(--space-2xs);
+  gap: var(--space-1);
 }
 
 .itemAccountHandle {
-  @include mixins.type-label-sm;
+  @include mixins.type-caption;
 
   color: var(--color-text-tertiary);
 }
diff --git a/app/javascript/mastodon/components/badge/redesign.module.scss b/app/javascript/mastodon/components/badge/redesign.module.scss
index 43639d64341..a47d86fa160 100644
--- a/app/javascript/mastodon/components/badge/redesign.module.scss
+++ b/app/javascript/mastodon/components/badge/redesign.module.scss
@@ -6,6 +6,6 @@
   line-height: 1.1;
 
   &:not(.badgeWithoutIcon) {
-    padding-inline: var(--space-3xs) var(--space-2xs);
+    padding-inline: var(--space-half) var(--space-1);
   }
 }
diff --git a/app/javascript/mastodon/components/badge/styles.module.scss b/app/javascript/mastodon/components/badge/styles.module.scss
index 8cb0b78409b..fb2075f0c5d 100644
--- a/app/javascript/mastodon/components/badge/styles.module.scss
+++ b/app/javascript/mastodon/components/badge/styles.module.scss
@@ -6,15 +6,15 @@
   justify-content: center;
   max-width: 100%;
   min-width: 1lh;
-  padding: var(--space-2xs);
-  gap: var(--space-2xs);
-  border-radius: var(--radius-xs);
+  padding: var(--space-1);
+  gap: var(--space-1);
+  border-radius: var(--radius-2);
   color: var(--color-text-primary);
   font-size: 13px;
   font-weight: 400;
 
   &:not(.badgeWithoutIcon) {
-    padding-inline-end: var(--space-xs);
+    padding-inline-end: var(--space-2);
   }
 
   > svg {
diff --git a/app/javascript/mastodon/components/bottom_sheet/styles.module.scss b/app/javascript/mastodon/components/bottom_sheet/styles.module.scss
index 288f8bf5fff..9db793c0baf 100644
--- a/app/javascript/mastodon/components/bottom_sheet/styles.module.scss
+++ b/app/javascript/mastodon/components/bottom_sheet/styles.module.scss
@@ -31,8 +31,8 @@
 }
 
 .sheet {
-  padding: var(--space-md);
-  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  padding: var(--space-4);
+  border-radius: var(--radius-5) var(--radius-5) 0 0;
   background: var(--color-bg-primary);
   overflow: hidden;
   text-align: start;
diff --git a/app/javascript/mastodon/components/button/redesign.module.scss b/app/javascript/mastodon/components/button/redesign.module.scss
index 720232c7313..605ac00db83 100644
--- a/app/javascript/mastodon/components/button/redesign.module.scss
+++ b/app/javascript/mastodon/components/button/redesign.module.scss
@@ -4,9 +4,9 @@
   --bg: transparent;
   --bg-hover: color-mix(in srgb, var(--bg) 90%, var(--fg));
   --fg: var(--color-text-primary);
-  --inline-padding: var(--space-xs);
+  --inline-padding: var(--space-2);
 
-  @include mixins.type-label-lg;
+  @include mixins.type-label;
 
   background-color: var(--bg);
   border-radius: var(--radius-round);
@@ -21,7 +21,7 @@
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  column-gap: var(--space-2xs);
+  column-gap: var(--space-1);
   padding-inline: var(--inline-padding);
   box-sizing: border-box;
 
@@ -74,23 +74,23 @@ a.base {
 }
 
 .sm {
-  --inline-padding: var(--space-sm);
+  --inline-padding: var(--space-3);
 
-  padding-block: var(--space-2xs);
+  padding-block: var(--space-1);
   min-height: 32px;
 }
 
 .md {
-  --inline-padding: var(--space-md);
+  --inline-padding: var(--space-4);
 
-  padding-block: var(--space-xs);
+  padding-block: var(--space-2);
   min-height: 40px;
 }
 
 .lg {
-  --inline-padding: var(--space-lg);
+  --inline-padding: var(--space-5);
 
-  padding-block: var(--space-sm);
+  padding-block: var(--space-3);
   min-height: 48px;
 }
 
@@ -215,8 +215,8 @@ a.base {
 
 .icon,
 .loading {
-  width: var(--fs-xl);
-  height: var(--fs-xl);
+  width: var(--fs-20);
+  height: var(--fs-20);
 }
 
 .iconCustom {
diff --git a/app/javascript/mastodon/components/callout/redesign.module.scss b/app/javascript/mastodon/components/callout/redesign.module.scss
index 08917807b14..e0dbbb3daf3 100644
--- a/app/javascript/mastodon/components/callout/redesign.module.scss
+++ b/app/javascript/mastodon/components/callout/redesign.module.scss
@@ -4,18 +4,18 @@
 .rootSmall {
   align-items: center;
   background-color: var(--color-bg-highlight);
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-3);
   box-sizing: border-box;
   display: flex;
-  gap: var(--space-xs);
+  gap: var(--space-2);
 }
 
 .rootLarge {
-  padding: var(--space-sm);
+  padding: var(--space-3);
 }
 
 .rootSmall {
-  padding: var(--space-xs);
+  padding: var(--space-2);
 }
 
 .textWrapper {
@@ -23,6 +23,6 @@
 }
 
 .icon {
-  width: var(--space-lg);
-  height: var(--space-lg);
+  width: var(--space-5);
+  height: var(--space-5);
 }
diff --git a/app/javascript/mastodon/components/card/styles.module.scss b/app/javascript/mastodon/components/card/styles.module.scss
index 4304f3951d7..1140c534187 100644
--- a/app/javascript/mastodon/components/card/styles.module.scss
+++ b/app/javascript/mastodon/components/card/styles.module.scss
@@ -2,17 +2,17 @@
 
 .root {
   border: 0.5px solid var(--color-border-primary);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-4);
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  padding: var(--space-sm);
+  padding: var(--space-3);
   position: relative;
   transition: background 200ms ease-in-out;
 
   &:has(.image) {
-    column-gap: var(--space-sm);
+    column-gap: var(--space-3);
     display: grid;
     grid-template-columns: minmax(0, 1fr) 120px;
     padding-inline-end: 0;
@@ -30,14 +30,14 @@ a.root {
 
   &:focus,
   &:focus-visible {
-    border-radius: var(--radius-md);
+    border-radius: var(--radius-4);
     outline: var(--outline-focus-default);
     outline-offset: 2px;
   }
 }
 
 .title {
-  @include mixins.type-label-md;
+  @include mixins.type-meta;
 
   color: var(--color-text-secondary);
   display: flex;
@@ -56,20 +56,20 @@ a.root {
 .titleImage {
   border-radius: var(--radius-round);
   display: block;
-  height: var(--space-lg);
-  margin-inline-end: var(--space-xs);
+  height: var(--space-5);
+  margin-inline-end: var(--space-2);
   overflow: hidden;
-  width: var(--space-lg);
+  width: var(--space-5);
 }
 
 .body {
-  @include mixins.type-label-lg;
+  @include mixins.type-label;
 
   overflow-wrap: break-word;
   flex-grow: 1;
 
   * + & {
-    padding-block-start: var(--space-xs);
+    padding-block-start: var(--space-2);
   }
 
   a {
@@ -85,8 +85,8 @@ a.root {
 
 // Linked body
 a.body {
-  padding-inline: var(--space-sm);
-  margin-inline: calc(-1 * var(--space-sm));
+  padding-inline: var(--space-3);
+  margin-inline: calc(-1 * var(--space-3));
   color: inherit;
   text-decoration: none;
 
@@ -103,7 +103,7 @@ a.body {
   contain: size;
   grid-column: 2;
   grid-row: 1 / span 9999; // Handles unlimited space
-  margin-block: calc(-1 * var(--space-sm));
+  margin-block: calc(-1 * var(--space-3));
 
   > img {
     height: 100%;
@@ -113,7 +113,7 @@ a.body {
 }
 
 .actions {
-  margin-block-start: var(--space-sm);
+  margin-block-start: var(--space-3);
 }
 
 .clamp {
@@ -122,6 +122,6 @@ a.body {
 
 .delete {
   position: absolute;
-  top: var(--space-xs);
-  right: var(--space-xs);
+  top: var(--space-2);
+  right: var(--space-2);
 }
diff --git a/app/javascript/mastodon/components/column_header/styles.module.scss b/app/javascript/mastodon/components/column_header/styles.module.scss
index 6bc600b8da7..7fdd3849731 100644
--- a/app/javascript/mastodon/components/column_header/styles.module.scss
+++ b/app/javascript/mastodon/components/column_header/styles.module.scss
@@ -9,7 +9,7 @@
 
   // Make bottom half of column header transparent to make the
   // overlay gradient on the `.layout` class work
-  --column-header-gradient-start: calc(100% - var(--space-sm));
+  --column-header-gradient-start: calc(100% - var(--space-3));
 
   background: linear-gradient(
     to bottom,
@@ -47,7 +47,7 @@
 
   // Ensure that a header without buttons is as tall as one with buttons
   min-height: 32px;
-  padding: var(--space-sm);
+  padding: var(--space-3);
   text-align: center;
   color: var(--color-text-primary);
   background: linear-gradient(
@@ -61,16 +61,16 @@
   }
 
   @media (width >= variables.$mobile-menu-breakpoint) {
-    border-top-left-radius: var(--radius-xl);
-    border-top-right-radius: var(--radius-xl);
+    border-top-left-radius: var(--radius-6);
+    border-top-right-radius: var(--radius-6);
   }
 
   &[data-has-unread='true']::after {
     content: '';
     grid-row: 1;
     grid-column: 2;
-    width: var(--space-xs);
-    height: var(--space-xs);
+    width: var(--space-2);
+    height: var(--space-2);
     background-color: var(--color-text-brand);
     border-radius: var(--radius-round);
     justify-self: center;
@@ -93,7 +93,7 @@
     border: none;
     font: inherit;
     background: transparent;
-    border-radius: var(--radius-xs);
+    border-radius: var(--radius-2);
 
     &:focus-visible {
       outline: var(--outline-focus-default);
diff --git a/app/javascript/mastodon/components/form_fields/redesign.module.scss b/app/javascript/mastodon/components/form_fields/redesign.module.scss
index d8543ad32b3..69b69c9fd8b 100644
--- a/app/javascript/mastodon/components/form_fields/redesign.module.scss
+++ b/app/javascript/mastodon/components/form_fields/redesign.module.scss
@@ -23,42 +23,42 @@
   }
 
   label {
-    font-size: var(--fs-sm);
+    font-size: var(--fs-14);
   }
 }
 
 .icon {
-  width: var(--space-lg);
-  height: var(--space-lg);
+  width: var(--space-5);
+  height: var(--space-5);
 }
 
 // Text Input
 
 .inputWrapper {
   label {
-    font-size: var(--fs-sm);
+    font-size: var(--fs-14);
   }
 
   span {
     color: var(--color-text-tertiary);
-    font-size: var(--fs-2xs);
-    line-height: var(--fs-lg);
+    font-size: var(--fs-12);
+    line-height: var(--fs-16);
   }
 }
 
 input.input {
-  font-size: var(--fs-lg);
+  font-size: var(--fs-16);
   background: none;
-  border-radius: var(--space-xs);
+  border-radius: var(--space-2);
   border: 0.5px solid var(--color-text-tertiary);
-  padding: var(--space-xs);
+  padding: var(--space-2);
   transition:
     background 200ms,
     border 200ms,
     opacity 200ms;
 
   &:hover:not(:disabled) {
-    box-shadow: 0 1px var(--space-2xs) 0
+    box-shadow: 0 1px var(--space-1) 0
       rgb(from var(--color-text-primary) r g b / 10%);
     background: var(--color-bg-highlight);
   }
@@ -77,8 +77,8 @@ input.input {
   svg {
     width: 20px;
     height: 20px;
-    inset-inline-start: var(--space-xs);
-    inset-block-start: var(--space-xs);
+    inset-inline-start: var(--space-2);
+    inset-block-start: var(--space-2);
   }
 }
 
diff --git a/app/javascript/mastodon/components/menu/styles.module.scss b/app/javascript/mastodon/components/menu/styles.module.scss
index f43abfb4062..a5bf0ce0ea5 100644
--- a/app/javascript/mastodon/components/menu/styles.module.scss
+++ b/app/javascript/mastodon/components/menu/styles.module.scss
@@ -6,9 +6,9 @@
 
   display: flex;
   flex-direction: column;
-  padding: var(--space-2xs);
+  padding: var(--space-1);
   inset: unset; // override default [popover] UA styles
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-4);
   background: var(--color-bg-primary);
   overflow: hidden;
   z-index: calc(infinity);
@@ -25,16 +25,16 @@
 }
 
 .itemGroupLabel {
-  @include mixins.type-label-sm;
+  @include mixins.type-caption;
 
   color: var(--color-text-tertiary);
-  padding: var(--space-xs) var(--space-sm) 0;
+  padding: var(--space-2) var(--space-3) 0;
 }
 
 .itemDivider {
   height: 1px;
   background-color: var(--color-border-primary);
-  margin: var(--space-2xs) var(--space-sm);
+  margin: var(--space-1) var(--space-3);
   border: none;
 }
 
@@ -46,9 +46,9 @@
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  border-radius: var(--radius-sm);
-  gap: var(--space-xs);
-  padding: var(--space-xs) var(--space-sm);
+  border-radius: var(--radius-3);
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
   color: var(--color-text-primary);
   text-decoration: none;
   cursor: var(--cursor);
@@ -78,7 +78,7 @@
 
   &:focus {
     // Override overeager global styles
-    border-radius: var(--radius-sm);
+    border-radius: var(--radius-3);
   }
 
   &:focus-visible {
@@ -109,10 +109,10 @@
 }
 
 .itemDescription {
-  @include mixins.type-label-sm;
+  @include mixins.type-caption;
 
   display: block;
-  margin-top: var(--space-3xs);
+  margin-top: var(--space-half);
   color: var(--color-text-secondary);
 
   .item[aria-disabled='true'] &,
@@ -124,13 +124,13 @@
 }
 
 .itemIcon {
-  width: var(--space-lg);
-  height: var(--space-lg);
+  width: var(--space-5);
+  height: var(--space-5);
 }
 
 .itemTrailingContent {
   margin-inline-start: auto;
 
   // Add additional space after the text.
-  padding-inline-start: var(--space-xs);
+  padding-inline-start: var(--space-2);
 }
diff --git a/app/javascript/mastodon/components/modal_shell/redesign.module.scss b/app/javascript/mastodon/components/modal_shell/redesign.module.scss
index ab695da9d97..af133357ad2 100644
--- a/app/javascript/mastodon/components/modal_shell/redesign.module.scss
+++ b/app/javascript/mastodon/components/modal_shell/redesign.module.scss
@@ -3,13 +3,13 @@
 .modal {
   @include mixins.elevation-1;
 
-  border-radius: var(--radius-xl);
+  border-radius: var(--radius-6);
   box-sizing: border-box;
   background: var(--color-bg-primary);
   display: flex;
   flex-direction: column;
-  gap: var(--space-md);
-  padding: var(--space-md);
+  gap: var(--space-4);
+  padding: var(--space-4);
   pointer-events: auto;
   user-select: text;
   overflow: hidden;
@@ -22,7 +22,7 @@
 .titleWrapper {
   display: flex;
   align-items: start;
-  gap: var(--space-md);
+  gap: var(--space-4);
 }
 
 .title {
@@ -33,15 +33,15 @@
 
 .closeButton {
   // Prevent close button from increasing spacing around title
-  margin-block: calc(-1 * var(--space-xs));
-  margin-inline-end: calc(-1 * var(--space-xs));
+  margin-block: calc(-1 * var(--space-2));
+  margin-inline-end: calc(-1 * var(--space-2));
 }
 
 .actions {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--space-md);
+  gap: var(--space-4);
 }
 
 .actionsLeft {
diff --git a/app/javascript/mastodon/components/status/attachments.module.scss b/app/javascript/mastodon/components/status/attachments.module.scss
index 867f1c64030..cdd69265949 100644
--- a/app/javascript/mastodon/components/status/attachments.module.scss
+++ b/app/javascript/mastodon/components/status/attachments.module.scss
@@ -4,7 +4,7 @@
   > :global(.status-card) {
     margin-top: 0;
     border: var(--border-thin);
-    border-radius: var(--radius-md);
+    border-radius: var(--radius-4);
 
     > a {
       transition: background 200ms ease-in-out;
@@ -14,14 +14,14 @@
       }
 
       :global(.status-card__host) {
-        @include mixins.type-label-md;
+        @include mixins.type-meta;
 
         // Overrides hover styles.
         color: var(--color-text-secondary);
       }
 
       :global(.status-card__title) {
-        @include mixins.type-label-lg;
+        @include mixins.type-label;
 
         // Overrides hover styles.
         color: var(--color-text-primary);
@@ -38,6 +38,6 @@
 }
 
 .cardAuthor {
-  padding-inline-start: var(--space-xs);
-  gap: var(--space-2xs);
+  padding-inline-start: var(--space-2);
+  gap: var(--space-1);
 }
diff --git a/app/javascript/mastodon/components/status/header.module.scss b/app/javascript/mastodon/components/status/header.module.scss
index e692396522f..fcb4f616226 100644
--- a/app/javascript/mastodon/components/status/header.module.scss
+++ b/app/javascript/mastodon/components/status/header.module.scss
@@ -38,7 +38,7 @@
   @include mixins.type-body;
 
   display: flex;
-  gap: var(--space-2xs);
+  gap: var(--space-1);
 }
 
 // Overrides .header a
@@ -54,5 +54,5 @@ a.headerNameLink {
 }
 
 .headerHandle {
-  @include mixins.type-label-md;
+  @include mixins.type-meta;
 }
diff --git a/app/javascript/mastodon/components/status/prepend.module.scss b/app/javascript/mastodon/components/status/prepend.module.scss
index 3645d2d518a..8b5676c5149 100644
--- a/app/javascript/mastodon/components/status/prepend.module.scss
+++ b/app/javascript/mastodon/components/status/prepend.module.scss
@@ -1,7 +1,7 @@
 @use '@/styles/mastodon/mixins';
 
 .root {
-  @include mixins.type-label-md;
+  @include mixins.type-meta;
 
   display: grid;
   grid-template-columns: subgrid;
@@ -34,18 +34,18 @@
 .replyIcon {
   border-block-start: 2px solid var(--color-border-primary);
   border-inline-start: 2px solid var(--color-border-primary);
-  border-top-left-radius: var(--radius-md);
+  border-top-left-radius: var(--radius-4);
   box-sizing: border-box;
-  margin: var(--space-xs) var(--col-gap) 0 var(--space-2xs);
+  margin: var(--space-2) var(--col-gap) 0 var(--space-1);
   width: calc(var(--avatar-size) / 2 + 1px);
-  height: calc(100% - var(--space-xs));
+  height: calc(100% - var(--space-2));
   justify-self: end;
 }
 
 .contents {
   display: flex;
   align-items: center;
-  gap: var(--space-2xs);
+  gap: var(--space-1);
 }
 
 // Add a tag to override .root a
@@ -58,5 +58,5 @@ a.account {
   @include mixins.line-clamp(1);
 
   display: block;
-  margin-block-start: var(--space-2xs);
+  margin-block-start: var(--space-1);
 }
diff --git a/app/javascript/mastodon/components/status/quote.module.scss b/app/javascript/mastodon/components/status/quote.module.scss
index 7fc95604f78..1d6cd4864ad 100644
--- a/app/javascript/mastodon/components/status/quote.module.scss
+++ b/app/javascript/mastodon/components/status/quote.module.scss
@@ -9,9 +9,9 @@
 
 .spoiler {
   background: var(--color-bg-highlight);
-  border-radius: var(--radius-sm);
-  margin: var(--space-2xs) 0;
-  padding: var(--space-xs);
+  border-radius: var(--radius-3);
+  margin: var(--space-1) 0;
+  padding: var(--space-2);
 }
 
 .body {
@@ -36,17 +36,17 @@
 
 .reply {
   color: var(--color-text-tertiary);
-  margin-bottom: var(--space-xs);
+  margin-bottom: var(--space-2);
 }
 
 .media {
-  margin-top: var(--space-2xs);
+  margin-top: var(--space-1);
 }
 
 .mediaGrid {
   display: grid;
   height: 260px;
-  gap: var(--space-3xs);
+  gap: var(--space-half);
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 1fr);
   aspect-ratio: 3/2;
@@ -68,21 +68,21 @@
 
 .image {
   max-height: 260px;
-  border-radius: var(--radius-xs);
+  border-radius: var(--radius-2);
 }
 
 .videoDuration {
-  @include mixins.type-label-md;
+  @include mixins.type-meta;
 
   display: flex;
-  gap: var(--space-2xs);
+  gap: var(--space-1);
   align-items: center;
   position: absolute;
-  inset-block-end: var(--space-xs);
-  inset-inline-start: var(--space-xs);
-  padding: var(--space-2xs) var(--space-3xs);
+  inset-block-end: var(--space-2);
+  inset-inline-start: var(--space-2);
+  padding: var(--space-1) var(--space-half);
   background: var(--color-bg-highlight);
-  border-radius: var(--radius-xs);
+  border-radius: var(--radius-2);
   color: var(--color-text-primary);
 
   svg {
@@ -104,5 +104,5 @@
 }
 
 .infoPopup {
-  padding: var(--space-sm);
+  padding: var(--space-3);
 }
diff --git a/app/javascript/mastodon/components/status/styles.module.scss b/app/javascript/mastodon/components/status/styles.module.scss
index 403c0a4d5ea..7fd3d9a0369 100644
--- a/app/javascript/mastodon/components/status/styles.module.scss
+++ b/app/javascript/mastodon/components/status/styles.module.scss
@@ -1,7 +1,7 @@
 @use '@/styles/mastodon/mixins';
 
 .root {
-  --col-gap: var(--space-xs);
+  --col-gap: var(--space-2);
   --avatar-size: 40px;
   --content-col: 2;
 
@@ -9,14 +9,14 @@
   grid-template-columns: calc(var(--avatar-size) + var(--col-gap)) auto;
   grid-template-rows: minmax(calc(var(--avatar-size) + var(--col-gap)), auto);
   grid-auto-rows: auto;
-  row-gap: var(--space-xs);
-  padding: var(--space-md);
+  row-gap: var(--space-2);
+  padding: var(--space-4);
 }
 
 .variantThread {
   --avatar-size: 32px;
 
-  padding: var(--space-xs) 0;
+  padding: var(--space-2) 0;
 }
 
 .variantPage {
@@ -24,7 +24,7 @@
 }
 
 .isQuote {
-  padding: var(--space-sm);
+  padding: var(--space-3);
 }
 
 .isMessage {
@@ -73,7 +73,7 @@
 }
 
 .translateInfo {
-  @include mixins.type-label-md;
+  @include mixins.type-meta;
 
   color: var(--color-text-secondary);
   margin-inline-start: auto;
@@ -95,7 +95,7 @@
 .content {
   display: flex;
   flex-direction: column;
-  gap: var(--space-xs);
+  gap: var(--space-2);
   position: relative;
 }
 
@@ -103,7 +103,7 @@
   --fade-time: 100ms;
 
   overflow: clip;
-  border-radius: var(--radius-xs);
+  border-radius: var(--radius-2);
 
   &::after {
     content: '';
@@ -113,7 +113,7 @@
       var(--color-bg-highlight) 1px,
       transparent 0
     );
-    background-size: var(--space-xs) var(--space-xs);
+    background-size: var(--space-2) var(--space-2);
     background-repeat: repeat;
 
     // See: https://css-tricks.com/snippets/css/toggle-visibility-when-hiding-elements/
@@ -170,7 +170,7 @@
 }
 
 .contentImage {
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-4);
   position: relative;
   background-size: cover;
   background-position: center;
@@ -190,12 +190,12 @@
 .hashtagsWrapper,
 .hashtags {
   display: flex;
-  gap: var(--space-2xs);
+  gap: var(--space-1);
   flex-wrap: nowrap;
 }
 
 .hashtagsWrapper {
-  padding: var(--space-2xs) 0;
+  padding: var(--space-1) 0;
 }
 
 .hashtags {
diff --git a/app/javascript/mastodon/features/compose/redesign/attachments.module.scss b/app/javascript/mastodon/features/compose/redesign/attachments.module.scss
index e6a27a403ab..d196c5df5c6 100644
--- a/app/javascript/mastodon/features/compose/redesign/attachments.module.scss
+++ b/app/javascript/mastodon/features/compose/redesign/attachments.module.scss
@@ -11,7 +11,7 @@
 
 .mediaGrid {
   display: grid;
-  gap: var(--space-3xs);
+  gap: var(--space-half);
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 1fr);
   aspect-ratio: 3/2;
@@ -26,7 +26,7 @@
 }
 
 .mediaUpload {
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-4);
   position: relative;
   background-size: cover;
   background-position: center;
@@ -51,21 +51,21 @@
 
 .mediaMenuButton {
   position: absolute;
-  top: var(--space-xs);
-  right: var(--space-xs);
+  top: var(--space-2);
+  right: var(--space-2);
 }
 
 .mediaAlt {
   @include mixins.type-micro;
 
   display: block;
-  padding: var(--space-2xs);
-  border-radius: var(--radius-xs);
+  padding: var(--space-1);
+  border-radius: var(--radius-2);
   background: var(--color-bg-inverted);
   color: var(--color-text-inverted);
   position: absolute;
-  bottom: var(--space-xs);
-  right: var(--space-xs);
+  bottom: var(--space-2);
+  right: var(--space-2);
   text-transform: uppercase;
 }
 
@@ -76,26 +76,26 @@
 // Audio
 
 .audioWrapper {
-  --height: var(--space-5xl);
+  --height: var(--space-10);
 
   display: flex;
   align-items: center;
-  border-radius: var(--radius-md);
-  gap: var(--space-2xs);
+  border-radius: var(--radius-4);
+  gap: var(--space-1);
   border: 0.5px solid var(--color-text-tertiary);
-  padding: var(--space-xs);
+  padding: var(--space-2);
 }
 
 .audioCover {
   height: var(--height);
   width: auto;
   aspect-ratio: 1;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-3);
 }
 
 .audioControl {
   overflow: hidden;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-3);
   display: block;
   box-sizing: border-box;
   flex-grow: 1;
@@ -107,27 +107,27 @@
 .poll {
   display: flex;
   flex-direction: column;
-  gap: var(--space-sm);
+  gap: var(--space-3);
   border: 0.5px solid var(--color-text-tertiary);
-  border-radius: var(--radius-md);
-  padding: var(--space-xs);
+  border-radius: var(--radius-4);
+  padding: var(--space-2);
 
   ol {
     display: flex;
     flex-direction: column;
-    gap: var(--space-xs);
+    gap: var(--space-2);
     counter-reset: poll;
     width: 100%;
   }
 
   label {
-    @include mixins.type-label-sm;
+    @include mixins.type-caption;
   }
 }
 
 .pollOption {
   display: flex;
-  gap: var(--space-sm);
+  gap: var(--space-3);
   align-items: center;
   counter-increment: poll;
 
@@ -135,18 +135,18 @@
     @include mixins.type-micro;
 
     content: counter(poll, upper-alpha);
-    width: var(--space-lg);
-    height: var(--space-lg);
+    width: var(--space-5);
+    height: var(--space-5);
     flex-shrink: 0;
-    line-height: var(--space-lg);
+    line-height: var(--space-5);
     text-align: center;
-    border-radius: var(--radius-xs);
+    border-radius: var(--radius-2);
     background: var(--color-bg-highlight);
   }
 }
 
 .pollAddNew {
-  margin-left: var(--space-lg);
+  margin-left: var(--space-5);
 }
 
 .pollMultipleToggle {
@@ -173,9 +173,9 @@
 
 .quoteSpoiler {
   background: var(--color-bg-highlight);
-  border-radius: var(--radius-sm);
-  margin: var(--space-2xs) 0;
-  padding: var(--space-xs);
+  border-radius: var(--radius-3);
+  margin: var(--space-1) 0;
+  padding: var(--space-2);
 }
 
 .quoteBody {
@@ -194,11 +194,11 @@
 
 .quoteReply {
   color: var(--color-text-tertiary);
-  margin-bottom: var(--space-xs);
+  margin-bottom: var(--space-2);
 }
 
 .quoteMedia {
-  margin-top: var(--space-2xs);
+  margin-top: var(--space-1);
 
   &.mediaGrid {
     height: 260px;
@@ -206,22 +206,22 @@
 
   .mediaUpload {
     max-height: 260px;
-    border-radius: var(--radius-xs);
+    border-radius: var(--radius-2);
   }
 }
 
 .quoteVideoDuration {
-  @include mixins.type-label-md;
+  @include mixins.type-meta;
 
   display: flex;
-  gap: var(--space-2xs);
+  gap: var(--space-1);
   align-items: center;
   position: absolute;
-  inset-block-end: var(--space-xs);
-  inset-inline-start: var(--space-xs);
-  padding: var(--space-2xs) var(--space-3xs);
+  inset-block-end: var(--space-2);
+  inset-inline-start: var(--space-2);
+  padding: var(--space-1) var(--space-half);
   background: var(--color-bg-highlight);
-  border-radius: var(--radius-xs);
+  border-radius: var(--radius-2);
   color: var(--color-text-primary);
 
   svg {
diff --git a/app/javascript/mastodon/features/compose/redesign/modals.module.scss b/app/javascript/mastodon/features/compose/redesign/modals.module.scss
index d2c6b0d91e2..0a58399d93c 100644
--- a/app/javascript/mastodon/features/compose/redesign/modals.module.scss
+++ b/app/javascript/mastodon/features/compose/redesign/modals.module.scss
@@ -4,20 +4,20 @@
 
 .attachmentRoot {
   min-width: 400px;
-  padding: var(--space-md) 0;
+  padding: var(--space-4) 0;
 
   .title,
   .footer {
-    padding: 0 var(--space-md);
+    padding: 0 var(--space-4);
   }
 }
 
 .attachmentItem {
   display: flex;
   align-items: center;
-  gap: var(--space-sm);
-  padding: var(--space-xs) var(--space-xs);
-  margin: 0 var(--space-xs);
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-2);
+  margin: 0 var(--space-2);
   transition:
     opacity 200ms,
     var(--transition, none);
@@ -32,12 +32,12 @@
     height: 60px;
     width: 90px;
     object-fit: cover;
-    border-radius: var(--radius-md);
+    border-radius: var(--radius-4);
   }
 }
 
 .attachmentHandle {
-  padding: var(--space-xs) 0;
+  padding: var(--space-2) 0;
   aspect-ratio: auto;
   cursor: inherit;
 }
diff --git a/app/javascript/mastodon/features/compose/redesign/styles.module.scss b/app/javascript/mastodon/features/compose/redesign/styles.module.scss
index 1082406c02e..5c35cfa9aa6 100644
--- a/app/javascript/mastodon/features/compose/redesign/styles.module.scss
+++ b/app/javascript/mastodon/features/compose/redesign/styles.module.scss
@@ -6,14 +6,14 @@
   background: var(--color-bg-primary);
   display: flex;
   flex-direction: column;
-  gap: var(--space-xs);
-  padding: var(--space-md);
+  gap: var(--space-2);
+  padding: var(--space-4);
   z-index: 1; // To cover the sidebar
 
   @media (width >= #{variables.$mobile-menu-breakpoint}) {
     @include mixins.elevation-2;
 
-    border-radius: var(--radius-xl);
+    border-radius: var(--radius-6);
     overflow: hidden;
   }
 }
@@ -44,9 +44,9 @@
 }
 
 .toolbar {
-  margin-top: var(--space-xs);
+  margin-top: var(--space-2);
   display: flex;
-  gap: var(--space-xs);
+  gap: var(--space-2);
   align-items: center;
   flex-wrap: wrap;
 
@@ -58,7 +58,7 @@
 .flexGrowWrap {
   display: flex;
   align-items: center;
-  gap: var(--space-xs);
+  gap: var(--space-2);
   flex-grow: 1;
 
   @container (width < 310px) {
@@ -72,18 +72,18 @@
 
 .toolbarMessage {
   display: flex;
-  gap: var(--space-2xs);
+  gap: var(--space-1);
   align-items: center;
   color: var(--color-text-secondary);
 
   svg {
-    width: var(--space-lg);
-    height: var(--space-lg);
+    width: var(--space-5);
+    height: var(--space-5);
   }
 }
 
 .textareaWrapper {
-  --fade-size: var(--space-xl);
+  --fade-size: var(--space-6);
 
   overflow-y: auto;
   flex-grow: 1;
@@ -119,13 +119,13 @@
 .textareaMirror {
   @include mixins.type-body-lg;
 
-  padding: var(--space-xs);
+  padding: var(--space-2);
 }
 
 .textarea {
   flex-grow: 1;
   flex-shrink: 0;
-  border-radius: var(--radius-xs);
+  border-radius: var(--radius-2);
   transition: border 200ms;
   cursor: text;
   border: none;
@@ -160,21 +160,21 @@ textarea.textarea {
 .attachments {
   display: flex;
   flex-direction: column;
-  gap: var(--space-xs);
-  margin-top: var(--space-md);
+  gap: var(--space-2);
+  margin-top: var(--space-4);
 }
 
 .footer {
   display: flex;
   align-items: center;
-  gap: var(--space-2xs);
+  gap: var(--space-1);
   flex-wrap: wrap;
 }
 
 .counter {
   display: flex;
   align-items: center;
-  gap: var(--space-3xs);
+  gap: var(--space-half);
   font-family: var(--font-monospace);
   color: var(--color-text-tertiary);
   margin-inline-start: auto;
@@ -187,10 +187,10 @@ textarea.textarea {
 // Language selector
 
 .languageMenu {
-  padding: var(--space-xs);
+  padding: var(--space-2);
 
   input {
-    margin-bottom: var(--space-xs);
+    margin-bottom: var(--space-2);
 
     &:focus::placeholder {
       color: transparent;
@@ -214,7 +214,7 @@ textarea.textarea {
 // Reply
 
 .reply {
-  column-gap: var(--space-2xs);
+  column-gap: var(--space-1);
   display: grid;
   grid-template-columns: auto 1fr;
   grid-template-rows: auto auto;
@@ -222,12 +222,12 @@ textarea.textarea {
   &::before {
     border-block-start: 2px solid var(--color-border-primary);
     border-inline-start: 2px solid var(--color-border-primary);
-    border-top-left-radius: var(--radius-md);
+    border-top-left-radius: var(--radius-4);
     box-sizing: border-box;
     content: '';
     display: block;
     grid-row: span 2;
-    margin: var(--space-xs) var(--space-2xs) 0;
+    margin: var(--space-2) var(--space-1) 0;
     width: 20px;
   }
 
@@ -240,7 +240,7 @@ textarea.textarea {
 .replyAccount {
   display: flex;
   align-items: center;
-  margin-bottom: var(--space-2xs);
+  margin-bottom: var(--space-1);
 
   > a,
   > span {
@@ -249,7 +249,7 @@ textarea.textarea {
 }
 
 .replyAvatar {
-  margin-inline-end: var(--space-xs);
+  margin-inline-end: var(--space-2);
   border-radius: var(--radius-round);
   overflow: hidden;
 }
diff --git a/app/javascript/mastodon/features/compose/redesign/trigger.module.scss b/app/javascript/mastodon/features/compose/redesign/trigger.module.scss
index 06ae4e072e8..0a056c74f7f 100644
--- a/app/javascript/mastodon/features/compose/redesign/trigger.module.scss
+++ b/app/javascript/mastodon/features/compose/redesign/trigger.module.scss
@@ -3,8 +3,8 @@
 .button {
   &:not(.buttonInline) {
     position: fixed;
-    bottom: var(--space-md);
-    right: var(--space-md);
+    bottom: var(--space-4);
+    right: var(--space-4);
     z-index: 2;
   }
 }
@@ -29,20 +29,20 @@
     bottom: 0;
     min-height: 270px;
     height: auto;
-    max-height: calc(100vh - (var(--space-md) * 2));
+    max-height: calc(100vh - (var(--space-4) * 2));
     min-width: 300px;
-    width: calc(100vw - var(--space-md) * 2);
+    width: calc(100vw - var(--space-4) * 2);
     max-width: 500px;
-    margin: var(--space-md);
+    margin: var(--space-4);
   }
 }
 
 .composerMinimized {
   bottom: 0;
-  width: min(320px, calc(100vw - var(--space-md) * 2));
-  padding: var(--space-md);
-  margin: var(--space-md);
-  border-radius: var(--radius-xl);
+  width: min(320px, calc(100vw - var(--space-4) * 2));
+  padding: var(--space-4);
+  margin: var(--space-4);
+  border-radius: var(--radius-6);
 
   @media (width < #{variables.$mobile-menu-breakpoint}) {
     bottom: var(--mobile-bottom-nav-height);
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/account_card_and_menu.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/account_card_and_menu.module.scss
index 48bcc6be61c..7094e9a9862 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/account_card_and_menu.module.scss
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/account_card_and_menu.module.scss
@@ -1,9 +1,9 @@
 .root {
   display: flex;
   align-items: center;
-  padding: var(--space-xs);
+  padding: var(--space-2);
   border: 1px solid var(--color-border-primary);
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-3);
 
   & > :global(.account) {
     flex-grow: 1;
@@ -12,9 +12,9 @@
     --account-outer-spacing: 0;
     --avatar-border-radius: var(--radius-round);
     --account-name-color: var(--color-text-primary);
-    --account-name-size: var(--fs-sm);
+    --account-name-size: var(--fs-14);
     --account-handle-color: var(--color-text-secondary);
-    --account-handle-size: var(--fs-2xs);
+    --account-handle-size: var(--fs-12);
   }
 
   & :global(.display-name) {
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/footer_links.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/footer_links.module.scss
index 016a048a2c3..0d6ba88380a 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/footer_links.module.scss
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/footer_links.module.scss
@@ -4,10 +4,10 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--space-xs);
-  margin-top: var(--space-xl);
+  gap: var(--space-2);
+  margin-top: var(--space-6);
 
-  @include mixins.type-label-sm;
+  @include mixins.type-caption;
 }
 
 .heading {
@@ -18,7 +18,7 @@
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
-  gap: var(--space-xs);
+  gap: var(--space-2);
 
   a {
     color: var(--color-text-secondary);
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/header.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/header.module.scss
index 1e27f829604..57fcdc3e9c9 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/header.module.scss
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/header.module.scss
@@ -9,9 +9,9 @@
 
   // We're distributing the bottom spacing between padding and margin so that
   // not too much of it overlaps the navigation links when scrolled down
-  --half-bottom-spacing: calc(var(--space-xl) / 2);
+  --half-bottom-spacing: calc(var(--space-6) / 2);
 
-  padding: var(--space-xl) var(--space-lg) var(--half-bottom-spacing);
+  padding: var(--space-6) var(--space-5) var(--half-bottom-spacing);
   margin-bottom: var(--half-bottom-spacing);
   background: var(--navigation-background-color);
 
@@ -32,11 +32,11 @@
 
   display: flex;
   align-items: center;
-  column-gap: var(--space-xs);
+  column-gap: var(--space-2);
   min-width: 0;
   color: inherit;
   text-decoration: none;
-  outline-offset: var(--space-3xs);
+  outline-offset: var(--space-half);
 
   &:hover {
     text-decoration: none;
@@ -64,7 +64,7 @@
 }
 
 .poweredBy {
-  @include mixins.type-label-sm;
+  @include mixins.type-caption;
 
   grid-column: 2;
   text-wrap: balance;
@@ -73,7 +73,7 @@
   svg {
     width: 1em;
     height: 1em;
-    margin-inline-end: var(--space-3xs);
+    margin-inline-end: var(--space-half);
     vertical-align: middle;
     color: inherit;
   }
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/list_section.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/list_section.module.scss
index 0afbe64b065..abc82c9e391 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/list_section.module.scss
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/list_section.module.scss
@@ -3,7 +3,7 @@
 
 .root {
   &:not(:last-child) {
-    margin-bottom: var(--space-md);
+    margin-bottom: var(--space-4);
   }
 
   :any-link {
@@ -20,10 +20,10 @@
   @include navigation-link.link-base;
 
   min-height: 32px;
-  padding: var(--space-2xs) var(--space-xs);
-  margin-bottom: var(--space-3xs);
+  padding: var(--space-1) var(--space-2);
+  margin-bottom: var(--space-half);
 
-  @include mixins.type-label-md;
+  @include mixins.type-meta;
 
   color: var(--color-text-secondary);
 }
@@ -40,7 +40,7 @@
 }
 
 .emptyState {
-  @include mixins.type-label-sm;
+  @include mixins.type-caption;
 
-  padding-inline: var(--space-xs);
+  padding-inline: var(--space-2);
 }
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/logged_out_info.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/logged_out_info.module.scss
index 5954538d100..e60f21f2c0d 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/logged_out_info.module.scss
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/logged_out_info.module.scss
@@ -1,7 +1,7 @@
 @use '@/styles/mastodon/mixins';
 
 .description {
-  margin-bottom: var(--space-md);
+  margin-bottom: var(--space-4);
 
   @include mixins.type-body-compact;
 
@@ -11,5 +11,5 @@
 .buttons {
   display: flex;
   flex-direction: column;
-  gap: var(--space-xs);
+  gap: var(--space-2);
 }
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/mobile_nav.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/mobile_nav.module.scss
index b9daa70a049..6c20b521181 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/mobile_nav.module.scss
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/mobile_nav.module.scss
@@ -5,7 +5,7 @@
   position: fixed;
   bottom: env(safe-area-inset-bottom);
   inset-inline: 0;
-  padding: 0 var(--space-md) var(--space-md);
+  padding: 0 var(--space-4) var(--space-4);
   z-index: 100;
   display: flex;
 
@@ -13,7 +13,7 @@
   // which somehow makes more sense for the focus order
   flex-direction: column-reverse;
   align-items: end;
-  gap: var(--space-xs);
+  gap: var(--space-2);
 
   // Allow clicking through this container
   pointer-events: none;
@@ -38,7 +38,7 @@
 }
 
 .list {
-  padding: var(--space-2xs);
+  padding: var(--space-1);
 
   > li {
     flex-grow: 1;
@@ -46,8 +46,8 @@
 }
 
 .loggedOutInfo {
-  gap: var(--space-xs);
-  padding: var(--space-xs) var(--space-md);
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-4);
 }
 
 .logoLockup {
@@ -92,7 +92,7 @@
   inset-block: 0;
   inset-inline-start: calc(-1 * var(--pull-tolerance));
   width: var(--navigation-max-width);
-  max-width: calc(100vw - var(--space-3xl));
+  max-width: calc(100vw - var(--space-8));
   padding-inline-start: var(--pull-tolerance);
   touch-action: pan-y;
   background: var(--color-bg-primary);
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/navigation_link.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/navigation_link.module.scss
index 96f162766c0..b6c8df7719d 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/navigation_link.module.scss
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/navigation_link.module.scss
@@ -2,24 +2,24 @@
 @use '@/styles/mastodon/variables';
 
 .wrapper {
-  padding-bottom: var(--space-3xs);
+  padding-bottom: var(--space-half);
 }
 
 .wrapperWithSpace {
-  padding-bottom: var(--space-md);
+  padding-bottom: var(--space-4);
 }
 
 @mixin link-base {
   --icon-size: 20px;
-  --border-radius: var(--radius-sm);
+  --border-radius: var(--radius-3);
 
   position: relative;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   width: 100%;
-  padding: var(--space-xs);
-  column-gap: var(--space-sm);
+  padding: var(--space-2);
+  column-gap: var(--space-3);
   border-radius: var(--border-radius);
   border: none;
   color: var(--color-text-primary);
@@ -64,7 +64,7 @@
   --icon-size: 24px;
 
   flex-direction: column;
-  row-gap: var(--space-2xs);
+  row-gap: var(--space-1);
   padding-inline: 0;
   @include mixins.type-micro;
 }
@@ -76,7 +76,7 @@
   width: 100%;
   justify-content: center;
   gap: 0;
-  padding-block: var(--space-sm);
+  padding-block: var(--space-3);
   transition:
     background-color 200ms,
     color 200ms;
@@ -105,9 +105,9 @@
     content: '';
     position: absolute;
     top: var(--space-4xs);
-    left: calc(50% + var(--space-3xs));
-    width: var(--space-xs);
-    height: var(--space-xs);
+    left: calc(50% + var(--space-half));
+    width: var(--space-2);
+    height: var(--space-2);
     border-radius: var(--radius-round);
     background-color: var(--color-bg-brand-base);
     border: 1px solid var(--color-bg-primary);
@@ -130,7 +130,7 @@
 .badge {
   .linkStacked & {
     position: absolute;
-    top: var(--space-3xs);
-    inset-inline-start: calc(50% + var(--space-3xs));
+    top: var(--space-half);
+    inset-inline-start: calc(50% + var(--space-half));
   }
 }
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/styles.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/styles.module.scss
index f2ba64c11fc..5e7d69d4f82 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/styles.module.scss
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/styles.module.scss
@@ -24,16 +24,16 @@
 }
 
 .list {
-  margin-top: var(--space-xl);
-  margin-inline: var(--space-md);
+  margin-top: var(--space-6);
+  margin-inline: var(--space-4);
 }
 
 .footer {
   position: sticky;
   bottom: 0;
   margin-top: auto;
-  padding: var(--space-xl);
-  padding-top: var(--space-2xs);
+  padding: var(--space-6);
+  padding-top: var(--space-1);
   background-color: var(--navigation-background-color);
 
   &::before {
@@ -51,6 +51,6 @@
 .footerNav {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: var(--space-2xs);
-  margin-bottom: var(--space-xs);
+  gap: var(--space-1);
+  margin-bottom: var(--space-2);
 }
diff --git a/app/javascript/mastodon/features/ui/components/column_loading/styles.module.scss b/app/javascript/mastodon/features/ui/components/column_loading/styles.module.scss
index cbb6afb00ea..4204c492782 100644
--- a/app/javascript/mastodon/features/ui/components/column_loading/styles.module.scss
+++ b/app/javascript/mastodon/features/ui/components/column_loading/styles.module.scss
@@ -1,13 +1,13 @@
 @use '@/styles/mastodon/mixins';
 
 .loadingWrapper {
-  @include mixins.type-label-md;
+  @include mixins.type-meta;
 
   display: grid;
   justify-items: center;
   align-content: center;
   height: 100%;
-  gap: var(--space-sm);
+  gap: var(--space-3);
   opacity: 0;
   animation: fade-in 300ms ease-in 1.2s forwards;
 }
diff --git a/app/javascript/mastodon/features/ui/components/columns_area/redesign.module.scss b/app/javascript/mastodon/features/ui/components/columns_area/redesign.module.scss
index 29c47562a1d..b4a85caa54c 100644
--- a/app/javascript/mastodon/features/ui/components/columns_area/redesign.module.scss
+++ b/app/javascript/mastodon/features/ui/components/columns_area/redesign.module.scss
@@ -15,7 +15,7 @@
   padding-bottom: env(safe-area-inset-bottom);
 
   @media (min-width: $no-gap-breakpoint) {
-    padding-inline: var(--space-2xs);
+    padding-inline: var(--space-1);
   }
 
   @media (min-width: $mobile-menu-breakpoint) {
@@ -24,7 +24,7 @@
       minmax(var(--navigation-min-width), 1fr)
       minmax(0, var(--main-column-max-width))
       minmax(0, 1fr);
-    gap: var(--space-xs);
+    gap: var(--space-2);
   }
 }
 
@@ -36,7 +36,7 @@
 
 .multiColumnRoot {
   --multi-column-navigation-width: 320px;
-  --multi-column-gap: var(--space-xs);
+  --multi-column-gap: var(--space-2);
 
   position: relative;
   display: flex;
diff --git a/app/javascript/mastodon/features/ui/components/columns_area/redesign_multicol.module.scss b/app/javascript/mastodon/features/ui/components/columns_area/redesign_multicol.module.scss
index 33aa871dbac..a23e9d53b87 100644
--- a/app/javascript/mastodon/features/ui/components/columns_area/redesign_multicol.module.scss
+++ b/app/javascript/mastodon/features/ui/components/columns_area/redesign_multicol.module.scss
@@ -2,7 +2,7 @@
 
 .root {
   --multi-column-navigation-width: 320px;
-  --multi-column-gap: var(--space-xs);
+  --multi-column-gap: var(--space-2);
 
   position: relative;
   display: flex;
diff --git a/app/javascript/styles/mastodon/_mixins.scss b/app/javascript/styles/mastodon/_mixins.scss
index 75b3a993bac..32b937510c5 100644
--- a/app/javascript/styles/mastodon/_mixins.scss
+++ b/app/javascript/styles/mastodon/_mixins.scss
@@ -4,7 +4,7 @@
 
 @mixin type-heading-lg {
   font-family: var(--font-heading);
-  font-size: var(--fs-3xl);
+  font-size: var(--fs-26);
   font-weight: 500;
   font-variation-settings: 'GEOM' 50;
   line-height: var(--lh-tighter);
@@ -13,7 +13,7 @@
 
 @mixin type-heading-md {
   font-family: var(--font-heading);
-  font-size: var(--fs-2xl);
+  font-size: var(--fs-22);
   font-weight: 500;
   font-variation-settings: 'GEOM' 50;
   line-height: var(--lh-tighter);
@@ -22,7 +22,7 @@
 
 @mixin type-heading-sm {
   font-family: var(--font-heading);
-  font-size: var(--fs-xl);
+  font-size: var(--fs-20);
   font-weight: 500;
   font-variation-settings: 'GEOM' 50;
   line-height: var(--lh-tight);
@@ -31,7 +31,7 @@
 
 @mixin type-body-lg {
   font-family: var(--font-body);
-  font-size: var(--fs-lg);
+  font-size: var(--fs-16);
   font-weight: normal;
   line-height: var(--lh-normal);
   letter-spacing: var(--ls-normal);
@@ -39,7 +39,7 @@
 
 @mixin type-body-strong {
   font-family: var(--font-body);
-  font-size: var(--fs-md);
+  font-size: var(--fs-15);
   font-weight: bold;
   line-height: var(--lh-normal);
   letter-spacing: var(--ls-normal);
@@ -47,7 +47,7 @@
 
 @mixin type-body {
   font-family: var(--font-body);
-  font-size: var(--fs-md);
+  font-size: var(--fs-15);
   font-weight: normal;
   line-height: var(--lh-normal);
   letter-spacing: var(--ls-normal);
@@ -55,31 +55,31 @@
 
 @mixin type-body-compact {
   font-family: var(--font-body);
-  font-size: var(--fs-sm);
+  font-size: var(--fs-14);
   font-weight: normal;
   line-height: var(--lh-tight);
   letter-spacing: var(--ls-normal);
 }
 
-@mixin type-label-lg {
+@mixin type-label {
   font-family: var(--font-body);
-  font-size: var(--fs-sm);
+  font-size: var(--fs-14);
   font-weight: bold;
   line-height: var(--lh-tight);
   letter-spacing: var(--ls-normal);
 }
 
-@mixin type-label-md {
+@mixin type-meta {
   font-family: var(--font-body);
-  font-size: var(--fs-xs);
+  font-size: var(--fs-13);
   font-weight: normal;
   line-height: var(--lh-tighter);
   letter-spacing: var(--ls-loose);
 }
 
-@mixin type-label-sm {
+@mixin type-caption {
   font-family: var(--font-body);
-  font-size: var(--fs-2xs);
+  font-size: var(--fs-12);
   font-weight: normal;
   line-height: var(--lh-tighter);
   letter-spacing: var(--ls-loose);
@@ -87,7 +87,7 @@
 
 @mixin type-micro {
   font-family: var(--font-body);
-  font-size: var(--fs-3xs);
+  font-size: var(--fs-11);
   font-weight: normal;
   line-height: var(--lh-tighter);
   letter-spacing: var(--ls-looser);
@@ -98,12 +98,12 @@
  */
 
 @mixin elevation-1 {
-  border: var(--border-w-normal) solid var(--color-border-strong);
+  border: var(--bw-default) solid var(--color-border-strong);
   box-shadow: 0 1px 0 var(--color-border-strong);
 }
 
 @mixin elevation-2 {
-  border: var(--border-w-normal) solid var(--color-border-strong);
+  border: var(--bw-default) solid var(--color-border-strong);
   box-shadow: 1px 2px 0 var(--color-border-strong);
 }
 
@@ -112,10 +112,10 @@
  */
 
 @mixin focus($offset: false) {
-  outline: var(--border-w-strong) solid var(--color-border-brand);
+  outline: var(--bw-thick) solid var(--color-border-brand);
 
   @if $offset not false {
-    outline-offset: var(--border-w-strong);
+    outline-offset: var(--bw-thick);
   }
 }
 
@@ -133,7 +133,7 @@
   }
 
   inset-inline: 0;
-  height: calc(var(--space-4xl) * 2);
+  height: calc(var(--space-10) * 2);
   background: linear-gradient(to $position, transparent, $background-color);
   pointer-events: none;
 }
@@ -150,7 +150,7 @@
   background: var(--color-bg-secondary);
   color: var(--color-text-primary);
   border-radius: 4px;
-  border: var(--border-w-normal) solid var(--color-border-primary);
+  border: var(--bw-default) solid var(--color-border-primary);
   font-size: 17px;
   line-height: normal;
   margin: 0;
diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss
index 36e98abfff4..2f7b88090be 100644
--- a/app/javascript/styles/mastodon/basics.scss
+++ b/app/javascript/styles/mastodon/basics.scss
@@ -23,7 +23,7 @@ html {
   &[data-redesign='true'] {
     --font-body: Inter, sans-serif;
     --avatar-border-radius: var(--radius-round);
-    --mobile-bottom-nav-height: calc(58px + var(--space-md));
+    --mobile-bottom-nav-height: calc(58px + var(--space-4));
 
     // Compensate for column header height when scrolling elements into view
     --column-header-height: 74px;
@@ -191,7 +191,7 @@ body {
         font-size: 20px;
         line-height: 28px;
         font-weight: 400;
-        margin-bottom: var(--space-md);
+        margin-bottom: var(--space-4);
       }
     }
   }
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 19f593bd233..eab19f5f825 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -6087,7 +6087,7 @@ a.status-card {
   height: 100%;
   max-width: 100vw;
   max-height: 100vh;
-  padding: var(--space-lg);
+  padding: var(--space-5);
   box-sizing: border-box;
   display: flex;
   z-index: 9999;
@@ -6098,7 +6098,7 @@ a.status-card {
 
   @media screen and (width <= $mobile-breakpoint) {
     padding-bottom: 0;
-    padding-inline: var(--space-xs);
+    padding-inline: var(--space-2);
   }
 
   > * {
diff --git a/app/javascript/styles/mastodon/tokens/_border.scss b/app/javascript/styles/mastodon/tokens/_border.scss
index c5264a8e3bb..07860a3ef2d 100644
--- a/app/javascript/styles/mastodon/tokens/_border.scss
+++ b/app/javascript/styles/mastodon/tokens/_border.scss
@@ -1,11 +1,11 @@
 @mixin border-widths {
-  --border-w-thin: 0.5px;
-  --border-w-normal: 1px;
-  --border-w-strong: 2px;
+  --bw-thin: 0.5px;
+  --bw-default: 1px;
+  --bw-thick: 2px;
 }
 
 @mixin borders {
-  --border-thin: var(--border-w-thin) solid var(--color-border-primary);
-  --border-normal: var(--border-w-normal) solid var(--color-border-primary);
-  --border-strong: var(--border-w-strong) solid var(--color-border-strong);
+  --border-thin: var(--bw-thin) solid var(--color-border-primary);
+  --border-default: var(--bw-default) solid var(--color-border-primary);
+  --border-thick: var(--bw-thick) solid var(--color-border-strong);
 }
diff --git a/app/javascript/styles/mastodon/tokens/_shape.scss b/app/javascript/styles/mastodon/tokens/_shape.scss
index 66f1cb96b9c..36363e2f0f9 100644
--- a/app/javascript/styles/mastodon/tokens/_shape.scss
+++ b/app/javascript/styles/mastodon/tokens/_shape.scss
@@ -1,22 +1,24 @@
 @mixin space {
-  --space-3xs: 2px;
-  --space-2xs: 4px;
-  --space-xs: 8px;
-  --space-sm: 12px;
-  --space-md: 16px;
-  --space-lg: 20px;
-  --space-xl: 24px;
-  --space-2xl: 28px;
-  --space-3xl: 32px;
-  --space-4xl: 36px;
-  --space-5xl: 40px;
+  --space-half: 2px;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-7: 28px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+  --space-20: 80px;
 }
 
 @mixin radius {
-  --radius-xs: 8px;
-  --radius-sm: 12px;
-  --radius-md: 16px;
-  --radius-lg: 20px;
-  --radius-xl: 28px;
+  --radius-2: 8px;
+  --radius-3: 12px;
+  --radius-4: 16px;
+  --radius-5: 20px;
+  --radius-6: 24px;
   --radius-round: calc(1px * infinity);
 }
diff --git a/app/javascript/styles/mastodon/tokens/_type.scss b/app/javascript/styles/mastodon/tokens/_type.scss
index 99865d5d6ff..03e98b12caa 100644
--- a/app/javascript/styles/mastodon/tokens/_type.scss
+++ b/app/javascript/styles/mastodon/tokens/_type.scss
@@ -1,13 +1,13 @@
 @mixin font-size {
-  --fs-3xs: 0.6875rem; // 11px
-  --fs-2xs: 0.75rem; // 12px
-  --fs-xs: 0.8125rem; // 13px
-  --fs-sm: 0.875rem; // 14px
-  --fs-md: 0.9375rem; // 15px
-  --fs-lg: 1rem; // 16px
-  --fs-xl: 1.25rem; // 20px
-  --fs-2xl: 1.375rem; // 22px
-  --fs-3xl: 1.625rem; // 26px
+  --fs-11: 0.6875rem;
+  --fs-12: 0.75rem;
+  --fs-13: 0.8125rem;
+  --fs-14: 0.875rem;
+  --fs-15: 0.9375rem;
+  --fs-16: 1rem;
+  --fs-20: 1.25rem;
+  --fs-22: 1.375rem;
+  --fs-26: 1.625rem;
 }
 
 @mixin line-height {