From 3639634caf0ad1e20f2a89ebb95dfe1cdbc5e39f Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Thu, 13 Nov 2025 12:15:27 -0500
Subject: [PATCH 1/3] boxel variables consolidation

---
 .../src/components/card-container/index.gts   |  29 +++--
 .../boxel-ui/addon/src/styles/variables.css   | 107 +++++++-----------
 2 files changed, 58 insertions(+), 78 deletions(-)

diff --git a/packages/boxel-ui/addon/src/components/card-container/index.gts b/packages/boxel-ui/addon/src/components/card-container/index.gts
index 1b61d0d728..b03ac28f82 100644
--- a/packages/boxel-ui/addon/src/components/card-container/index.gts
+++ b/packages/boxel-ui/addon/src/components/card-container/index.gts
@@ -82,35 +82,40 @@ const CardContainer: TemplateOnlyComponent<Signature> = <template>
 
       /*** code below this line is from "variables.css". values will be recalculated based on theming variable values ***/
       /* font-sizes */
-      --boxel-font-size-xxl: calc(var(--boxel-font-size) * 2.5);
+      --boxel-font-size-2xl: calc(var(--boxel-font-size) * 2.5);
       --boxel-font-size-xl: calc(var(--boxel-font-size) * 2);
       --boxel-font-size-lg: calc(var(--boxel-font-size) * 1.375);
-      --boxel-font-size-med: calc(var(--boxel-font-size) * 1.25);
+      --boxel-font-size-md: calc(var(--boxel-font-size) * 1.25);
       --boxel-font-size-sm: calc(var(--boxel-font-size) * 0.8125);
       --boxel-font-size-xs: calc(var(--boxel-font-size) * 0.6875);
       /* spacing */
       --boxel-sp-6xs: calc(var(--boxel-sp-5xs) / var(--boxel-ratio));
       --boxel-sp-5xs: calc(var(--boxel-sp-4xs) / var(--boxel-ratio));
-      --boxel-sp-4xs: calc(var(--boxel-sp-xxxs) / var(--boxel-ratio));
-      --boxel-sp-xxxs: calc(var(--boxel-sp-xxs) / var(--boxel-ratio));
-      --boxel-sp-xxs: calc(var(--boxel-sp-xs) / var(--boxel-ratio));
+      --boxel-sp-4xs: calc(var(--boxel-sp-3xs) / var(--boxel-ratio));
+      --boxel-sp-3xs: calc(var(--boxel-sp-2xs) / var(--boxel-ratio));
+      --boxel-sp-2xs: calc(var(--boxel-sp-xs) / var(--boxel-ratio));
       --boxel-sp-xs: calc(var(--boxel-sp-sm) / var(--boxel-ratio));
       --boxel-sp-sm: calc(var(--boxel-sp) / var(--boxel-ratio));
       --boxel-sp: var(--boxel-spacing); /* base */
       --boxel-sp-lg: calc(var(--boxel-sp) * var(--boxel-ratio));
       --boxel-sp-xl: calc(var(--boxel-sp-lg) * var(--boxel-ratio));
-      --boxel-sp-xxl: calc(var(--boxel-sp-xl) * var(--boxel-ratio));
-      --boxel-sp-xxxl: calc(var(--boxel-sp-xxl) * var(--boxel-ratio));
+      --boxel-sp-2xl: calc(var(--boxel-sp-xl) * var(--boxel-ratio));
+      --boxel-sp-3xl: calc(var(--boxel-sp-2xl) * var(--boxel-ratio));
       /* border-radius */
-      --boxel-border-radius-xxs: calc(var(--boxel-border-radius-xs) - 2.5px);
-      --boxel-border-radius-xs: calc(var(--boxel-border-radius-sm) - 3px);
-      --boxel-border-radius-sm: calc(var(--boxel-border-radius) - 3px);
+      --boxel-border-radius-2xs: calc(var(--boxel-border-radius) - 8.5px);
+      --boxel-border-radius-xs: calc(var(--boxel-border-radius) - 6px);
+      --boxel-border-radius-sm: calc(var(--boxel-border-radius) - 4px);
       --boxel-border-radius: var(--boxel-radius); /* base */
       --boxel-border-radius-lg: calc(var(--boxel-border-radius) + 2px);
-      --boxel-border-radius-xl: calc(var(--boxel-border-radius-lg) + 3px);
-      --boxel-border-radius-xxl: calc(var(--boxel-border-radius-xl) + 5px);
+      --boxel-border-radius-xl: calc(var(--boxel-border-radius) + 5px);
+      --boxel-border-radius-2xl: calc(var(--boxel-border-radius) + 10px);
       --boxel-form-control-border-radius: var(--boxel-border-radius);
 
+      --boxel-sp-xxxs: var(--boxel-sp-3xs);
+      --boxel-sp-xxs: var(--boxel-sp-2xs);
+      --boxel-sp-xxl: var(--boxel-sp-2xl);
+      --boxel-sp-xxxl: var(--boxel-sp-3xl);
+
       font-family: var(--font-family-base, var(--font-sans));
       font-size: var(--typescale-body);
       font-weight: var(--font-weight-body);
diff --git a/packages/boxel-ui/addon/src/styles/variables.css b/packages/boxel-ui/addon/src/styles/variables.css
index e82ed488c2..1219e43239 100644
--- a/packages/boxel-ui/addon/src/styles/variables.css
+++ b/packages/boxel-ui/addon/src/styles/variables.css
@@ -16,12 +16,12 @@
   --boxel-monospace-font-family:
     'Roboto Mono', 'Courier New', courier, monospace;
 
-  /* font shorthand */
+  /* font shorthand -- Note: opt for using --boxel-font-size and --boxel-lineheight */
   --boxel-font-xl: var(--boxel-font-size-xl) / var(--boxel-lineheight-xl)
     var(--boxel-font-family);
   --boxel-font-lg: var(--boxel-font-size-lg) / var(--boxel-lineheight-lg)
     var(--boxel-font-family);
-  --boxel-font-med: var(--boxel-font-size-med) / var(--boxel-lineheight-med)
+  --boxel-font-md: var(--boxel-font-size-md) / var(--boxel-lineheight-md)
     var(--boxel-font-family);
   --boxel-font: var(--boxel-font-size) / var(--boxel-lineheight)
     var(--boxel-font-family);
@@ -31,10 +31,10 @@
     var(--boxel-font-family);
 
   /* font-sizes */
-  --boxel-font-size-xxl: calc(var(--boxel-font-size) * 2.5); /* 40px */
+  --boxel-font-size-2xl: calc(var(--boxel-font-size) * 2.5); /* 40px */
   --boxel-font-size-xl: calc(var(--boxel-font-size) * 2); /* 32px */
   --boxel-font-size-lg: calc(var(--boxel-font-size) * 1.375); /* 22px */
-  --boxel-font-size-med: calc(var(--boxel-font-size) * 1.25); /* 20px */
+  --boxel-font-size-md: calc(var(--boxel-font-size) * 1.25); /* 20px */
   /* --boxel-font-size: 16px; (base - declared on line 10) */
   --boxel-font-size-sm: calc(var(--boxel-font-size) * 0.8125); /* 13px (body) */
   --boxel-font-size-xs: calc(var(--boxel-font-size) * 0.6875); /* 11px */
@@ -42,7 +42,7 @@
   /* line-height for corresponding font-size */
   --boxel-lineheight-xl: calc(43 / 32); /* 1.34375 */
   --boxel-lineheight-lg: calc(30 / 22); /* 1.3636 */
-  --boxel-lineheight-med: calc(28 / 20); /* 1.4 */
+  --boxel-lineheight-md: calc(28 / 20); /* 1.4 */
   --boxel-lineheight: calc(22 / 16); /* 1.375 */
   --boxel-lineheight-sm: calc(18 / 13); /* 1.3846 (body) */
   --boxel-lineheight-xs: calc(15 / 11); /* 1.3636 */
@@ -71,37 +71,37 @@
   /* letter-spacing */
   /* Note: the px conversion is using default font_size = 16px (1rem) */
   /* Formula: px = em * font_size */
-  --boxel-lsp-xxl: 0.1em; /* 1.6px */
+  --boxel-lsp-2xl: 0.1em; /* 1.6px */
   --boxel-lsp-xl: 0.05em; /* 0.8px */
   --boxel-lsp-lg: 0.035em; /* 0.56px */
   --boxel-lsp: 0.025em; /* 0.4px */
   --boxel-lsp-sm: 0.015em; /* 0.24px */
   --boxel-lsp-xs: 0.01em; /* 0.16px */
-  --boxel-lsp-xxs: 0.005em; /* 0.08px */
+  --boxel-lsp-2xs: 0.005em; /* 0.08px */
 
   /* Modular scale for spacing */
   --boxel-ratio: 1.333; /* scale (based on "Perfect Fourth" scale) */
   --boxel-sp-6xs: calc(var(--boxel-sp-5xs) / var(--boxel-ratio)); /* 2.17px */
   --boxel-sp-5xs: calc(var(--boxel-sp-4xs) / var(--boxel-ratio)); /* 2.88px */
-  --boxel-sp-4xs: calc(var(--boxel-sp-xxxs) / var(--boxel-ratio)); /* 3.827px */
-  --boxel-sp-xxxs: calc(var(--boxel-sp-xxs) / var(--boxel-ratio)); /* 5.09px */
-  --boxel-sp-xxs: calc(var(--boxel-sp-xs) / var(--boxel-ratio)); /* 6.78px */
+  --boxel-sp-4xs: calc(var(--boxel-sp-3xs) / var(--boxel-ratio)); /* 3.827px */
+  --boxel-sp-3xs: calc(var(--boxel-sp-2xs) / var(--boxel-ratio)); /* 5.09px */
+  --boxel-sp-2xs: calc(var(--boxel-sp-xs) / var(--boxel-ratio)); /* 6.78px */
   --boxel-sp-xs: calc(var(--boxel-sp-sm) / var(--boxel-ratio)); /* 9.05px */
   --boxel-sp-sm: calc(var(--boxel-sp) / var(--boxel-ratio)); /* 12px */
   --boxel-sp: var(--boxel-spacing); /* 16px */
   --boxel-sp-lg: calc(var(--boxel-sp) * var(--boxel-ratio)); /* 21.28px */
   --boxel-sp-xl: calc(var(--boxel-sp-lg) * var(--boxel-ratio)); /* 28.43px */
-  --boxel-sp-xxl: calc(var(--boxel-sp-xl) * var(--boxel-ratio)); /* 37.89px */
-  --boxel-sp-xxxl: calc(var(--boxel-sp-xxl) * var(--boxel-ratio)); /* 50.51px */
+  --boxel-sp-2xl: calc(var(--boxel-sp-xl) * var(--boxel-ratio)); /* 37.89px */
+  --boxel-sp-3xl: calc(var(--boxel-sp-2xl) * var(--boxel-ratio)); /* 50.51px */
 
   /* common icon sizes */
-  --boxel-icon-xxs: 0.75rem; /* 12px */
+  --boxel-icon-2xs: 0.75rem; /* 12px */
   --boxel-icon-xs: 1rem; /* 16px */
   --boxel-icon-sm: 1.25rem; /* 20px */
-  --boxel-icon-med: 1.875rem; /* 30px */
+  --boxel-icon-md: 1.875rem; /* 30px */
   --boxel-icon-lg: 2.5rem; /* 40px */
   --boxel-icon-xl: 3.75rem; /* 60px */
-  --boxel-icon-xxl: 5rem; /* 80px */
+  --boxel-icon-2xl: 5rem; /* 80px */
 
   /* button sizes */
   --boxel-button-mini: 1.25rem; /* 20px */
@@ -110,10 +110,6 @@
   --boxel-button-tall: 2.5rem; /* 40px */
   --boxel-button-touch: 3rem; /* 48px */
 
-  /* border-color */
-  --boxel-border-color: #d3d3d3;
-  --boxel-button-border-color: #acacac;
-
   /* border */
   --boxel-border: 1px solid var(--boxel-border-color);
   --boxel-border-dark: 1px solid var(--boxel-dark);
@@ -121,19 +117,13 @@
   --boxel-border-card: 1px solid rgba(0, 0, 0, 0.1);
 
   /* border-radius */
-  --boxel-border-radius-xxs: calc(
-    var(--boxel-border-radius-xs) - 2.5px
-  ); /* 1.5px */
-  --boxel-border-radius-xs: calc(var(--boxel-border-radius-sm) - 2px); /* 4px */
+  --boxel-border-radius-2xs: calc(var(--boxel-border-radius) - 8.5px); /*1.5px*/
+  --boxel-border-radius-xs: calc(var(--boxel-border-radius) - 6px); /* 4px */
   --boxel-border-radius-sm: calc(var(--boxel-border-radius) - 4px); /* 6px */
   --boxel-border-radius: var(--boxel-radius); /* 10px - base */
   --boxel-border-radius-lg: calc(var(--boxel-border-radius) + 2px); /* 12px */
-  --boxel-border-radius-xl: calc(
-    var(--boxel-border-radius-lg) + 3px
-  ); /* 15px */
-  --boxel-border-radius-xxl: calc(
-    var(--boxel-border-radius-xl) + 5px
-  ); /* 20px */
+  --boxel-border-radius-xl: calc(var(--boxel-border-radius) + 5px); /* 15px */
+  --boxel-border-radius-2xl: calc(var(--boxel-border-radius) + 10px); /* 20px */
 
   /* animations */
   --boxel-infinite-spin-animation: boxel-spin 6000ms linear infinite;
@@ -158,22 +148,22 @@
     var(--boxel-outline-color);
 
   /* Container sizes */
-  --boxel-xxs-container: 15.625rem; /* 250px */
+  --boxel-2xs-container: 15.625rem; /* 250px */
   --boxel-xs-container: 17.8125rem; /* 285px */
   --boxel-sm-container: 36.25rem; /* 580px */
   --boxel-md-container: 40.625rem; /* 650px */
   --boxel-lg-container: 43.75rem; /* 700px */
   --boxel-xl-container: 65rem; /* 1040px */
-  --boxel-xxl-container: 83.76rem; /* 1340px */
-
-  /* COLOR PALETTE */
+  --boxel-2xl-container: 83.76rem; /* 1340px */
 
-  /**** Revisited Colors BOXEL-UI ****/
-  --boxel-50: #f5f5f5;
+  /* BOXEL-UI Colors, in order from lightest to darkest */
   --boxel-100: #f8f7fa;
+  --boxel-150: #f4f4f4;
   --boxel-200: #e8e8e8;
+  --boxel-250: #d3d3d3;
   --boxel-300: #d1d1d1;
   --boxel-400: #afafb7;
+  --boxel-425: #acacac;
   --boxel-450: #919191;
   --boxel-500: #5a586a;
   --boxel-550: #525252;
@@ -181,6 +171,7 @@
   --boxel-650: #3b394b;
   --boxel-700: #272330;
 
+  /* Cardstack Brand Colors */
   --boxel-cyan: #00ebe5;
   --boxel-teal: #00ffba;
   --boxel-dark-teal: #00ebac;
@@ -197,47 +188,25 @@
   --boxel-blue: #0069f9;
   --boxel-navy: #281e78;
 
-  --boxel-label-color: currentColor;
-  /**** End of revisited colors ****/
-
-  /* Primary colors */
+  /* Functional colors */
   --boxel-light: #fff;
   --boxel-dark: #000;
   --boxel-dark-hover: rgba(0, 0, 0, 0.1);
   --boxel-darker-hover: rgba(0, 0, 0, 0.5);
-
   --boxel-highlight: var(--boxel-teal);
   --boxel-highlight-hover: var(--boxel-dark-teal);
-  --boxel-danger: var(
-    --boxel-red
-  ); /* formerly boxel-error-100: the latest design docs (8/16/2023) use this color for danger instead */
-  --boxel-danger-hover: #fa1521;
-
-  /* Boxel purples */
-  --boxel-purple-100: var(--boxel-100);
-  --boxel-purple-200: var(--boxel-400); /* formerly: #b3b1b8; */
-  --boxel-purple-300: var(--boxel-400);
-  --boxel-purple-400: var(--boxel-500); /* formerly: #6b6a80; */
-  --boxel-purple-500: var(--boxel-500);
-  --boxel-purple-600: var(--boxel-600); /* Cardspace bg */
-  --boxel-purple-700: var(--boxel-700); /* formerly: #393642; */
-  --boxel-purple-750: var(--boxel-700); /* formerly: #363441; */
-  --boxel-purple-800: var(--boxel-700); /* formerly: #2e2d38; */
-  --boxel-purple-900: var(--boxel-700); /* Card Wallet bg */
+  --boxel-border-color: var(--boxel-250);
 
-  /* Boxel neutrals */
-  --boxel-light-100: #f4f4f4;
-  --boxel-light-200: var(--boxel-200); /* formerly: #f0f0f0; */
-  --boxel-light-300: var(--boxel-200); /* formerly: #efefef; */
-  --boxel-light-400: var(--boxel-200);
-  --boxel-light-500: var(--boxel-300); /* formerly: #dedede; */
-  --boxel-light-600: var(--boxel-300);
+  /* Other UI colors */
+  --boxel-label-color: currentColor;
+  --boxel-button-border-color: var(--boxel-425);
 
   /* Status colors */
-  --boxel-error-100: #dc0202; /* alert - attention - error */
+  --boxel-danger: var(--boxel-red); /* alert - attention - error */
+  --boxel-danger-hover: #fa1521;
+  --boxel-error-100: #dc0202;
   --boxel-error-200: #ed0000;
   --boxel-error-300: #ff0000;
-  --boxel-error-400: #ff5050;
   --boxel-warning-100: var(--boxel-yellow); /* warning - notification */
   --boxel-warning-200: #ffba00;
   --boxel-success-100: var(--boxel-green);
@@ -254,6 +223,12 @@
   --boxel-form-control-placeholder-color: var(--boxel-400);
   --boxel-form-control-border-color: var(--boxel-border-color);
   --boxel-form-control-border-radius: var(--boxel-border-radius);
-  --boxel-form-control-dark-mode-placeholder-color: #acacac;
+  --boxel-form-control-dark-mode-placeholder-color: var(--boxel-425);
   --boxel-form-control-dark-mode-border: var(--boxel-border-flexible);
+
+  /* deprecated */
+  --boxel-sp-xxxs: var(--boxel-sp-3xs);
+  --boxel-sp-xxs: var(--boxel-sp-2xs);
+  --boxel-sp-xxl: var(--boxel-sp-2xl);
+  --boxel-sp-xxxl: var(--boxel-sp-3xl);
 }

From 4ac6c14e9cd3a8d77837bc282069e5da80395bef Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Thu, 13 Nov 2025 12:15:47 -0500
Subject: [PATCH 2/3] update variable usage

---
 packages/base/brand-guide.gts                 |  8 ++++----
 .../base/components/cards-grid-layout.gts     |  2 +-
 packages/base/default-templates/embedded.gts  |  2 +-
 packages/base/image.gts                       |  2 +-
 packages/base/join-the-community.gts          |  6 +++---
 packages/base/skill.gts                       |  4 ++--
 packages/base/spec.gts                        |  8 ++++----
 packages/base/structured-theme.gts            |  2 +-
 packages/base/style-reference.gts             |  4 ++--
 packages/base/welcome-to-boxel.gts            |  2 +-
 .../boxel-motion/test-app/vendor/card.css     |  6 +++---
 .../addon/src/components/alert/index.gts      |  6 +++---
 .../addon/src/components/button/index.gts     |  4 ++--
 .../src/components/card-header/index.gts      |  2 +-
 .../src/components/context-button/index.gts   |  2 +-
 .../addon/src/components/dropdown/index.gts   |  6 +++---
 .../src/components/dropdown/trigger/index.gts |  4 ++--
 .../addon/src/components/menu/index.gts       |  4 ++--
 .../addon/src/components/pill/index.gts       |  2 +-
 .../src/components/progress-bar/index.gts     |  2 +-
 .../src/components/progress-radial/index.gts  |  2 +-
 .../addon/src/components/radio-input/item.gts |  2 +-
 .../addon/src/components/select/index.gts     | 12 +++++------
 .../components/skeleton-placeholder/index.gts |  7 ++-----
 .../addon/src/components/tooltip/index.gts    |  4 ++--
 .../components/avatar-creator.gts             |  2 +-
 .../catalog-realm/beat-maker/beat-maker.gts   |  4 ++--
 packages/catalog-realm/blog-app/blog-app.gts  |  2 +-
 .../catalog-app/components/listing-fitted.gts |  4 ++--
 .../cocktail-recipe/cocktail-recipe.gts       |  2 +-
 .../cocktail-recipe/fields/garnish-field.gts  |  2 +-
 .../fields/ingredient-field.gts               |  4 ++--
 .../catalog-realm/components/card-list.gts    |  6 ++----
 .../catalog-realm/components/map-render.gts   |  2 +-
 packages/catalog-realm/crm-app/account.gts    | 14 ++++++-------
 packages/catalog-realm/crm-app/base-task.gts  |  4 ++--
 .../crm-app/components/account-header.gts     |  2 +-
 .../crm-app/components/avatar-group.gts       |  2 +-
 .../crm-app/components/summary-card.gts       |  2 +-
 packages/catalog-realm/crm-app/contact.gts    |  4 ++--
 packages/catalog-realm/crm-app/deal.gts       | 10 +++++-----
 packages/catalog-realm/crm-app/task.gts       |  2 +-
 .../fields-preview/number-fields.gts          |  4 ++--
 .../fields/cloudflare-image-url.gts           |  4 ++--
 .../fields/discrete-range-field.gts           |  2 +-
 .../fields/number/progress-circle.gts         |  4 ++--
 .../catalog-realm/fields/number/score.gts     |  4 ++--
 .../components/player-preview.gts             |  4 ++--
 .../components/profile-edit-button.gts        |  2 +-
 .../photo-collage/photo-collage.gts           |  2 +-
 packages/catalog-realm/player/player.gts      |  2 +-
 .../reward-card-program-tracker.gts           | 20 +++++++++----------
 .../reward-card-program.gts                   | 14 ++++++-------
 .../sprint-planner/sprint-task.gts            |  2 +-
 .../catalog-realm/sprint-planner/task.gts     |  4 ++--
 .../time-machine/year-range-field.gts         |  2 +-
 packages/catalog-realm/todo-mvc/todo-mvc.gts  |  4 ++--
 .../fields/visual-element.gts                 |  2 +-
 packages/experiments-realm/blog-app.gts       |  2 +-
 .../components/account-header.gts             |  2 +-
 .../components/avatar-group.gts               |  2 +-
 .../components/card-list.gts                  |  2 +-
 .../components/summary-card.gts               |  2 +-
 packages/experiments-realm/crm/account.gts    | 14 ++++++-------
 packages/experiments-realm/crm/contact.gts    |  4 ++--
 packages/experiments-realm/crm/deal.gts       | 10 +++++-----
 packages/experiments-realm/crm/task.gts       |  2 +-
 .../embedded-view-driver.gts                  |  2 +-
 .../experiments-realm/image-upload-tester.gts |  7 ++++---
 packages/experiments-realm/product.gts        |  2 +-
 packages/experiments-realm/sprint-task.gts    |  2 +-
 packages/experiments-realm/task.gts           |  4 ++--
 packages/experiments-realm/theme.gts          |  4 ++--
 .../update-room-skills-example.gts            |  2 +-
 .../ai-assistant/apply-button/index.gts       |  4 ++--
 .../ai-assistant/ask-ai-text-box.gts          |  2 +-
 .../ai-assistant/chat-input/index.gts         |  4 ++--
 .../ai-assistant/code-block/index.gts         |  2 +-
 .../ai-assistant/message/user-message.gts     |  2 +-
 .../app/components/card-catalog/filters.gts   |  2 +-
 .../app/components/matrix/forgot-password.gts |  2 +-
 packages/host/app/components/matrix/login.gts |  2 +-
 .../app/components/matrix/register-user.gts   |  2 +-
 packages/host/app/components/matrix/room.gts  |  4 ++--
 .../operator-mode/ask-ai-container.gts        |  2 +-
 .../operator-mode/binary-file-info.gts        |  2 +-
 .../components/operator-mode/card-url-bar.gts |  2 +-
 .../choose-subscription-plan-modal.gts        |  4 ++--
 .../components/operator-mode/code-submode.gts |  2 +-
 .../operator-mode/error-display.gts           |  2 +-
 .../host-submode/open-site-popover.gts        |  4 ++--
 .../host-submode/publishing-realm-popover.gts |  8 ++++----
 .../operator-mode/submode-layout.gts          |  2 +-
 .../app/components/search-sheet/index.gts     |  4 ++--
 packages/host/app/styles/app.css              |  2 +-
 .../components/card-basics-test.gts           |  2 +-
 .../tests/cards/chess-gallery.gts             |  2 +-
 97 files changed, 186 insertions(+), 190 deletions(-)

diff --git a/packages/base/brand-guide.gts b/packages/base/brand-guide.gts
index 41e33869aa..e6ca30827f 100644
--- a/packages/base/brand-guide.gts
+++ b/packages/base/brand-guide.gts
@@ -118,15 +118,15 @@ class BrandGuideIsolated extends Component<typeof BrandGuide> {
         letter-spacing: var(--boxel-lsp-xs);
       }
       h1 {
-        font-size: var(--brand-heading-font-size, var(--boxel-font-size-med));
+        font-size: var(--brand-heading-font-size, var(--boxel-font-size-md));
         line-height: var(
           --brand-heading-line-height,
-          var(--boxel-lineheight-med)
+          var(--boxel-lineheight-md)
         );
       }
       h2 {
-        font-size: var(--boxel-font-size-med);
-        line-height: var(--boxel-lineheight-med);
+        font-size: var(--boxel-font-size-md);
+        line-height: var(--boxel-lineheight-md);
       }
       p {
         margin-block: 0;
diff --git a/packages/base/components/cards-grid-layout.gts b/packages/base/components/cards-grid-layout.gts
index 37d682f1c1..fe9ab4ae18 100644
--- a/packages/base/components/cards-grid-layout.gts
+++ b/packages/base/components/cards-grid-layout.gts
@@ -310,7 +310,7 @@ export default class CardsGridLayout extends Component<Signature> {
         font-size: var(--typescale-h1, var(--boxel-font-size-lg));
         font-weight: 600;
         line-height: calc(30 / 22);
-        letter-spacing: var(--boxel-lsp-xxs);
+        letter-spacing: var(--boxel-lsp-2xs);
       }
 
       .highlights-layout {
diff --git a/packages/base/default-templates/embedded.gts b/packages/base/default-templates/embedded.gts
index e5c4a5632f..aae3148a66 100644
--- a/packages/base/default-templates/embedded.gts
+++ b/packages/base/default-templates/embedded.gts
@@ -54,7 +54,7 @@ export default class DefaultEmbeddedTemplate extends GlimmerComponent<{
       }
       .card-title {
         margin: 10px 0 0 0;
-        font: 500 var(--boxel-font-size-med);
+        font: 500 var(--boxel-font-size-md);
         line-height: 1.25;
         letter-spacing: 0.16px;
       }
diff --git a/packages/base/image.gts b/packages/base/image.gts
index 6a7d98dc6e..abf58cc839 100644
--- a/packages/base/image.gts
+++ b/packages/base/image.gts
@@ -19,7 +19,7 @@ class ImageCardView extends Component<typeof ImageCard> {
         padding: var(--boxel-sp);
         text-align: center;
         color: var(--boxel-500);
-        background-color: var(--boxel-50);
+        background-color: var(--boxel-150);
         border-radius: var(--boxel-form-control-border-radius);
       }
     </style>
diff --git a/packages/base/join-the-community.gts b/packages/base/join-the-community.gts
index 5556e290ca..d9cc475b44 100644
--- a/packages/base/join-the-community.gts
+++ b/packages/base/join-the-community.gts
@@ -178,7 +178,7 @@ export class SocialMediaLink extends FieldDef {
         .community-link {
           display: inline-block;
           padding: var(--boxel-sp-xs) var(--boxel-sp-sm);
-          background: var(--boxel-light-200);
+          background: var(--boxel-200);
           color: var(--boxel-blue);
           border-radius: var(--boxel-border-radius-sm);
           font: 500 var(--boxel-font-sm);
@@ -188,7 +188,7 @@ export class SocialMediaLink extends FieldDef {
         }
 
         .community-link:hover {
-          background: var(--boxel-light-300);
+          background: var(--boxel-200);
         }
       </style>
     </template>
@@ -217,7 +217,7 @@ export class JoinTheCommunity extends CardDef {
           gap: var(--boxel-sp);
           width: 100%;
           padding: var(--boxel-sp);
-          background-color: var(--boxel-light-100);
+          background-color: var(--boxel-150);
           border-radius: var(--boxel-border-radius);
         }
       </style>
diff --git a/packages/base/skill.gts b/packages/base/skill.gts
index ee2410faaf..b69e4e7ea1 100644
--- a/packages/base/skill.gts
+++ b/packages/base/skill.gts
@@ -71,11 +71,11 @@ export class CommandField extends FieldDef {
         }
         .command-data {
           flex-grow: 1;
-          border-left: var(--boxel-sp-4xs) solid var(--boxel-purple-300);
+          border-left: var(--boxel-sp-4xs) solid var(--boxel-400);
           padding-left: var(--boxel-sp-xxs);
         }
         .icon {
-          color: var(--boxel-purple-300);
+          color: var(--boxel-400);
           margin-top: var(--boxel-sp-xxs);
           width: 30px;
           height: 30px;
diff --git a/packages/base/spec.gts b/packages/base/spec.gts
index 5509e005cf..3e49ad3d83 100644
--- a/packages/base/spec.gts
+++ b/packages/base/spec.gts
@@ -322,8 +322,8 @@ class Isolated extends Component<typeof Spec> {
       }
       .header-icon-container {
         flex-shrink: 0;
-        height: var(--boxel-icon-xxl);
-        width: var(--boxel-icon-xxl);
+        height: var(--boxel-icon-2xl);
+        width: var(--boxel-icon-2xl);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -689,8 +689,8 @@ class Edit extends Component<typeof Spec> {
       }
       .header-icon-container {
         flex-shrink: 0;
-        height: var(--boxel-icon-xxl);
-        width: var(--boxel-icon-xxl);
+        height: var(--boxel-icon-2xl);
+        width: var(--boxel-icon-2xl);
         display: flex;
         align-items: center;
         justify-content: center;
diff --git a/packages/base/structured-theme.gts b/packages/base/structured-theme.gts
index d8f9743e3f..24e697c475 100644
--- a/packages/base/structured-theme.gts
+++ b/packages/base/structured-theme.gts
@@ -370,7 +370,7 @@ class Isolated extends Component<typeof StructuredTheme> {
           grid-template-columns: 1fr 1fr;
         }
         h2 {
-          font-size: var(--boxel-font-size-med);
+          font-size: var(--boxel-font-size-md);
         }
       }
     </style>
diff --git a/packages/base/style-reference.gts b/packages/base/style-reference.gts
index b5461399de..3f85cd5f0c 100644
--- a/packages/base/style-reference.gts
+++ b/packages/base/style-reference.gts
@@ -61,7 +61,7 @@ class Isolated extends Component<typeof StyleReference> {
       h2 {
         margin-top: 0;
         margin-bottom: var(--boxel-sp);
-        font-size: var(--boxel-font-size-med);
+        font-size: var(--boxel-font-size-md);
         font-weight: 500;
       }
       ul {
@@ -87,7 +87,7 @@ class Isolated extends Component<typeof StyleReference> {
         text-align: center;
       }
       .visual-dna {
-        font-size: var(--boxel-font-size-med);
+        font-size: var(--boxel-font-size-md);
         color: var(--muted-foreground);
         max-width: 600px;
         margin: 0 auto;
diff --git a/packages/base/welcome-to-boxel.gts b/packages/base/welcome-to-boxel.gts
index b1a2602888..75a2b3525a 100644
--- a/packages/base/welcome-to-boxel.gts
+++ b/packages/base/welcome-to-boxel.gts
@@ -253,7 +253,7 @@ export class WelcomeToBoxel extends CardDef {
         }
 
         .welcome-title {
-          font-size: var(--boxel-font-size-xxl);
+          font-size: var(--boxel-font-size-2xl);
           font-weight: normal;
           color: var(--boxel-light);
           font-stretch: normal;
diff --git a/packages/boxel-motion/test-app/vendor/card.css b/packages/boxel-motion/test-app/vendor/card.css
index 1674108385..8fc5388ef7 100644
--- a/packages/boxel-motion/test-app/vendor/card.css
+++ b/packages/boxel-motion/test-app/vendor/card.css
@@ -71,7 +71,7 @@
 
 .boxel-card__description {
   margin: 0;
-  color: var(--boxel-purple-400);
+  color: var(--boxel-500);
   font: var(--boxel-font-sm);
   overflow-wrap: break-word;
   word-break: break-word;
@@ -193,7 +193,7 @@
 }
 
 .boxel-card-field .field-renderer__title {
-  color: var(--boxel-purple-400);
+  color: var(--boxel-500);
   font: var(--boxel-font-xs);
   font-weight: 700;
   letter-spacing: var(--boxel-lsp-xl);
@@ -269,7 +269,7 @@
 }
 
 .card-placeholder {
-  background-color: var(--boxel-purple-200);
+  background-color: var(--boxel-400);
   border-radius: var(--boxel-border-radius);
   height: 122px;
 }
diff --git a/packages/boxel-ui/addon/src/components/alert/index.gts b/packages/boxel-ui/addon/src/components/alert/index.gts
index 5885b8e019..d2b6408877 100644
--- a/packages/boxel-ui/addon/src/components/alert/index.gts
+++ b/packages/boxel-ui/addon/src/components/alert/index.gts
@@ -67,10 +67,10 @@ const Messages: TemplateOnlyComponent<MessagesSignature> = <template>
     .alert-icon {
       min-width: 20px;
       height: 20px;
-      --icon-background-color: var(--boxel-error-400);
+      --icon-background-color: var(--boxel-danger);
     }
     .failure-icon {
-      --icon-background-color: var(--destructive, var(--boxel-error-400));
+      --icon-background-color: var(--destructive, var(--boxel-danger));
       --icon-color: var(--destructive-foreground, var(--boxel-light));
     }
     .message {
@@ -132,7 +132,7 @@ const Alert: TemplateOnlyComponent<Signature> = <template>
       padding: var(--boxel-sp-sm);
       font: 500 var(--boxel-font-xs);
       letter-spacing: var(--boxel-lsp-sm);
-      border-radius: var(--boxel-border-radius-xxl);
+      border-radius: var(--boxel-border-radius-2xl);
     }
     .error-container {
       background-color: var(--destructive-foreground, var(--boxel-650));
diff --git a/packages/boxel-ui/addon/src/components/button/index.gts b/packages/boxel-ui/addon/src/components/button/index.gts
index 9763e45361..9f68f67e59 100644
--- a/packages/boxel-ui/addon/src/components/button/index.gts
+++ b/packages/boxel-ui/addon/src/components/button/index.gts
@@ -285,7 +285,7 @@ const ButtonComponent: TemplateOnlyComponent<Signature> = <template>
         --boxel-button-color: var(--destructive, var(--boxel-danger));
         --boxel-button-text-color: var(
           --destructive-foreground,
-          var(--boxel-light-100)
+          var(--boxel-150)
         );
         --boxel-button-box-shadow: var(--shadow);
       }
@@ -369,7 +369,7 @@ const ButtonComponent: TemplateOnlyComponent<Signature> = <template>
         --boxel-button-padding: var(--boxel-sp-5xs) var(--boxel-sp-xs);
         --boxel-button-min-height: var(--boxel-button-xs);
         --boxel-button-min-width: 5rem;
-        --boxel-button-loading-icon-size: var(--boxel-icon-xxs);
+        --boxel-button-loading-icon-size: var(--boxel-icon-2xs);
         --boxel-button-font: 600 var(--boxel-font-xs);
         --boxel-button-letter-spacing: var(--boxel-lsp-lg);
       }
diff --git a/packages/boxel-ui/addon/src/components/card-header/index.gts b/packages/boxel-ui/addon/src/components/card-header/index.gts
index 1765b0f32c..c63b6f99bc 100644
--- a/packages/boxel-ui/addon/src/components/card-header/index.gts
+++ b/packages/boxel-ui/addon/src/components/card-header/index.gts
@@ -230,7 +230,7 @@ export default class CardHeader extends Component<Signature> {
           );
           --inner-boxel-card-header-realm-icon-size: var(
             --boxel-card-header-realm-icon-size,
-            var(--boxel-icon-med)
+            var(--boxel-icon-md)
           );
           --inner-boxel-card-header-card-type-icon-size: var(
             --boxel-card-header-card-type-icon-size,
diff --git a/packages/boxel-ui/addon/src/components/context-button/index.gts b/packages/boxel-ui/addon/src/components/context-button/index.gts
index 59ffeefcba..6358c4de1c 100644
--- a/packages/boxel-ui/addon/src/components/context-button/index.gts
+++ b/packages/boxel-ui/addon/src/components/context-button/index.gts
@@ -136,7 +136,7 @@ const DropdownButton: TemplateOnlyComponent<Signature> = <template>
       }
       .boxel-context-button--destructive:hover,
       .boxel-context-button--destructive-icon:hover {
-        color: var(--destructive-foreground, var(--boxel-light-100));
+        color: var(--destructive-foreground, var(--boxel-150));
         background-color: var(--destructive, var(--boxel-danger));
       }
 
diff --git a/packages/boxel-ui/addon/src/components/dropdown/index.gts b/packages/boxel-ui/addon/src/components/dropdown/index.gts
index bc95ea4453..b533bb708b 100644
--- a/packages/boxel-ui/addon/src/components/dropdown/index.gts
+++ b/packages/boxel-ui/addon/src/components/dropdown/index.gts
@@ -256,7 +256,7 @@ class BoxelDropdown extends Component<Signature> {
 
           --dropdown-hover-color: var(
             --boxel-dropdown-hover-color,
-            var(--theme-hover, var(--boxel-light-100))
+            var(--theme-hover, var(--boxel-150))
           );
 
           background-color: var(--dropdown-background-color);
@@ -297,7 +297,7 @@ class BoxelDropdown extends Component<Signature> {
           );
           --dropdown-hover-color: var(
             --boxel-dropdown-hover-color,
-            var(--theme-hover, var(--boxel-light-100))
+            var(--theme-hover, var(--boxel-150))
           );
         }
 
@@ -327,7 +327,7 @@ class BoxelDropdown extends Component<Signature> {
           );
           --dropdown-hover-color: var(
             --boxel-dropdown-hover-color,
-            var(--theme-hover, var(--boxel-light-100))
+            var(--theme-hover, var(--boxel-150))
           );
           --dropdown-selected-text-color: var(
             --secondary-foreground,
diff --git a/packages/boxel-ui/addon/src/components/dropdown/trigger/index.gts b/packages/boxel-ui/addon/src/components/dropdown/trigger/index.gts
index 61106b478d..5055275854 100644
--- a/packages/boxel-ui/addon/src/components/dropdown/trigger/index.gts
+++ b/packages/boxel-ui/addon/src/components/dropdown/trigger/index.gts
@@ -48,7 +48,7 @@ const BoxelDropdownTrigger: TemplateOnlyComponent<Signature> = <template>
       }
 
       .boxel-dropdown-trigger--showing-placeholder {
-        color: var(--boxel-purple-300);
+        color: var(--boxel-400);
       }
 
       .boxel-dropdown-trigger__icon {
@@ -60,7 +60,7 @@ const BoxelDropdownTrigger: TemplateOnlyComponent<Signature> = <template>
       }
 
       .boxel-dropdown-trigger__caret {
-        --icon-color: var(--boxel-purple-200);
+        --icon-color: var(--boxel-400);
         margin-left: var(--boxel-sp-xxs);
       }
     }
diff --git a/packages/boxel-ui/addon/src/components/menu/index.gts b/packages/boxel-ui/addon/src/components/menu/index.gts
index 90c1c3838c..ce5dd347c8 100644
--- a/packages/boxel-ui/addon/src/components/menu/index.gts
+++ b/packages/boxel-ui/addon/src/components/menu/index.gts
@@ -148,7 +148,7 @@ export default class Menu extends Component<Signature> {
           --boxel-menu-border-radius: var(--boxel-border-radius);
           --boxel-menu-color: var(--boxel-light);
           --boxel-menu-text-color: var(--boxel-dark);
-          --boxel-menu-current-color: var(--boxel-light-100);
+          --boxel-menu-current-color: var(--boxel-150);
           --boxel-menu-selected-color: var(--boxel-highlight);
           --boxel-menu-disabled-color: var(--boxel-highlight);
           --boxel-menu-font: 500 var(--boxel-font-sm);
@@ -238,7 +238,7 @@ export default class Menu extends Component<Signature> {
           margin: 0;
           border: 0;
           height: 0;
-          border-bottom: 1px solid var(--boxel-purple-300);
+          border-bottom: 1px solid var(--boxel-400);
         }
 
         .menu-item {
diff --git a/packages/boxel-ui/addon/src/components/pill/index.gts b/packages/boxel-ui/addon/src/components/pill/index.gts
index d4046e895b..830111ec78 100644
--- a/packages/boxel-ui/addon/src/components/pill/index.gts
+++ b/packages/boxel-ui/addon/src/components/pill/index.gts
@@ -170,7 +170,7 @@ const Pill: TemplateOnlyComponent<PillSignature> = <template>
         display: inline-flex;
         min-width: var(
           --boxel-pill-icon-size,
-          var(--pill-icon-size, var(--boxel-icon-xxs))
+          var(--pill-icon-size, var(--boxel-icon-2xs))
         );
         margin-block: 0;
         margin-inline: 0;
diff --git a/packages/boxel-ui/addon/src/components/progress-bar/index.gts b/packages/boxel-ui/addon/src/components/progress-bar/index.gts
index b52d12d13d..c347ac0cb5 100644
--- a/packages/boxel-ui/addon/src/components/progress-bar/index.gts
+++ b/packages/boxel-ui/addon/src/components/progress-bar/index.gts
@@ -57,7 +57,7 @@ export default class ProgressBar extends Component<Signature> {
         .boxel-progress-bar {
           --progress-bar-background-color: var(
             --boxel-progress-bar-background-color,
-            var(--muted, var(--boxel-light-200))
+            var(--muted, var(--boxel-200))
           );
           --progress-bar-border-radius: var(
             --boxel-progress-bar-border-radius,
diff --git a/packages/boxel-ui/addon/src/components/progress-radial/index.gts b/packages/boxel-ui/addon/src/components/progress-radial/index.gts
index b2fc144975..d352cba3a8 100644
--- a/packages/boxel-ui/addon/src/components/progress-radial/index.gts
+++ b/packages/boxel-ui/addon/src/components/progress-radial/index.gts
@@ -49,7 +49,7 @@ export default class ProgressRadial extends Component<Signature> {
           );
           --progress-radial-background-color: var(
             --boxel-progress-radial-background-color,
-            var(--muted, var(--boxel-light-200))
+            var(--muted, var(--boxel-200))
           );
           --progress-radial-font-weight: var(
             --boxel-progress-radial-font-weight,
diff --git a/packages/boxel-ui/addon/src/components/radio-input/item.gts b/packages/boxel-ui/addon/src/components/radio-input/item.gts
index fb894a2c1d..84dcf5c53e 100644
--- a/packages/boxel-ui/addon/src/components/radio-input/item.gts
+++ b/packages/boxel-ui/addon/src/components/radio-input/item.gts
@@ -58,7 +58,7 @@ const RadioInputItem: TemplateOnlyComponent<Signature> = <template>
           --boxel-radio-disabled-border-color,
           var(
             --radio-disabled-border-color,
-            var(--muted-foreground, var(--boxel-purple-300))
+            var(--muted-foreground, var(--boxel-400))
           )
         );
 
diff --git a/packages/boxel-ui/addon/src/components/select/index.gts b/packages/boxel-ui/addon/src/components/select/index.gts
index f2ac250bb6..22c0687eed 100644
--- a/packages/boxel-ui/addon/src/components/select/index.gts
+++ b/packages/boxel-ui/addon/src/components/select/index.gts
@@ -423,7 +423,7 @@ export default class BoxelSelect<ItemT> extends Component<Signature<ItemT>> {
         );
         --dropdown-hover-color: var(
           --boxel-dropdown-hover-color,
-          var(--theme-hover, var(--boxel-light-100))
+          var(--theme-hover, var(--boxel-150))
         );
         --dropdown-focus-border-color: var(
           --boxel-dropdown-focus-border-color,
@@ -545,7 +545,7 @@ export default class BoxelSelect<ItemT> extends Component<Signature<ItemT>> {
         );
         --dropdown-hover-color: var(
           --boxel-dropdown-hover-color,
-          var(--theme-hover, var(--boxel-light-100))
+          var(--theme-hover, var(--boxel-150))
         );
       }
 
@@ -583,7 +583,7 @@ export default class BoxelSelect<ItemT> extends Component<Signature<ItemT>> {
         );
         --dropdown-hover-color: var(
           --boxel-dropdown-hover-color,
-          var(--theme-hover, var(--boxel-light-100))
+          var(--theme-hover, var(--boxel-150))
         );
         --dropdown-selected-text-color: var(
           --secondary-foreground,
@@ -606,7 +606,7 @@ export default class BoxelSelect<ItemT> extends Component<Signature<ItemT>> {
         );
         --dropdown-hover-color: var(
           --boxel-dropdown-hover-color,
-          var(--theme-hover, var(--boxel-light-100))
+          var(--theme-hover, var(--boxel-150))
         );
         --dropdown-selected-text-color: var(
           --muted-foreground,
@@ -626,7 +626,7 @@ export default class BoxelSelect<ItemT> extends Component<Signature<ItemT>> {
         );
         --dropdown-hover-color: var(
           --boxel-dropdown-hover-color,
-          var(--theme-hover, var(--boxel-light-100))
+          var(--theme-hover, var(--boxel-150))
         );
         --dropdown-selected-text-color: var(
           --destructive-foreground,
@@ -835,7 +835,7 @@ export class BoxelSelectOptions extends PowerSelectOptions {
 
       .boxel-select-option-checkmark-container {
         /* maintain space for icon and keep content widths the same */
-        width: var(--boxel-icon-med);
+        width: var(--boxel-icon-md);
         height: 100%;
         display: flex;
         align-items: center;
diff --git a/packages/boxel-ui/addon/src/components/skeleton-placeholder/index.gts b/packages/boxel-ui/addon/src/components/skeleton-placeholder/index.gts
index 37a69a4943..cb24389efc 100644
--- a/packages/boxel-ui/addon/src/components/skeleton-placeholder/index.gts
+++ b/packages/boxel-ui/addon/src/components/skeleton-placeholder/index.gts
@@ -23,12 +23,9 @@ export default class SkeletonPlaceholder extends Component<Signature> {
       .boxel-skeleton-placeholder {
         --skeleton-background: var(
           --boxel-skeleton-background,
-          var(--boxel-light-200)
-        );
-        --skeleton-highlight: var(
-          --boxel-skeleton-highlight,
-          var(--boxel-light-100)
+          var(--boxel-200)
         );
+        --skeleton-highlight: var(--boxel-skeleton-highlight, var(--boxel-150));
         --skeleton-width: var(--boxel-skeleton-width, 100%);
         --skeleton-height: var(--boxel-skeleton-height, 1.5em);
         --skeleton-border-radius: var(
diff --git a/packages/boxel-ui/addon/src/components/tooltip/index.gts b/packages/boxel-ui/addon/src/components/tooltip/index.gts
index 7d0e98202c..0260955050 100644
--- a/packages/boxel-ui/addon/src/components/tooltip/index.gts
+++ b/packages/boxel-ui/addon/src/components/tooltip/index.gts
@@ -174,7 +174,7 @@ export default class Tooltip extends Component<Signature> {
         );
         --tooltip-border-color: var(
           --boxel-tooltip-border-color,
-          var(--border, var(--boxel-light-500))
+          var(--border, var(--boxel-300))
         );
 
         background-color: var(--tooltip-background-color);
@@ -207,7 +207,7 @@ export default class Tooltip extends Component<Signature> {
         );
         --tooltip-border-color: var(
           --boxel-tooltip-border-color,
-          var(--border, var(--boxel-light-500))
+          var(--border, var(--boxel-300))
         );
       }
 
diff --git a/packages/catalog-realm/avatar-creator/components/avatar-creator.gts b/packages/catalog-realm/avatar-creator/components/avatar-creator.gts
index 4e14e0bbab..9ea598461f 100644
--- a/packages/catalog-realm/avatar-creator/components/avatar-creator.gts
+++ b/packages/catalog-realm/avatar-creator/components/avatar-creator.gts
@@ -563,7 +563,7 @@ export default class AvatarCreatorComponent extends Component<AvatarCreatorArgs>
         align-items: center;
         justify-content: center;
         position: relative;
-        background: var(--boxel-50);
+        background: var(--boxel-150);
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
         transition: all 0.3s ease;
       }
diff --git a/packages/catalog-realm/beat-maker/beat-maker.gts b/packages/catalog-realm/beat-maker/beat-maker.gts
index 5a41075737..6a0511779d 100644
--- a/packages/catalog-realm/beat-maker/beat-maker.gts
+++ b/packages/catalog-realm/beat-maker/beat-maker.gts
@@ -443,7 +443,7 @@ export class BeatPatternField extends FieldDef {
           width: 12px;
           height: 8px;
           background: #f3f4f6;
-          border-radius: var(--radius-xxs, var(--boxel-border-radius-xxs));
+          border-radius: var(--radius-xxs, var(--boxel-border-radius-2xs));
         }
 
         .pattern-step.has-kick {
@@ -3038,7 +3038,7 @@ export class BeatMakerCard extends CardDef {
           width: 2px;
           height: 6px;
           background: #f59e0b;
-          border-radius: var(--radius-xxs, var(--boxel-border-radius-xxs));
+          border-radius: var(--radius-xxs, var(--boxel-border-radius-2xs));
         }
 
         .card-grid {
diff --git a/packages/catalog-realm/blog-app/blog-app.gts b/packages/catalog-realm/blog-app/blog-app.gts
index 8b93e9f9c2..db7ea33824 100644
--- a/packages/catalog-realm/blog-app/blog-app.gts
+++ b/packages/catalog-realm/blog-app/blog-app.gts
@@ -273,7 +273,7 @@ class BlogAppTemplate extends Component<typeof BlogApp> {
         flex-grow: 1;
         margin: 0;
         font: 600 var(--boxel-font-lg);
-        letter-spacing: var(--boxel-lsp-xxs);
+        letter-spacing: var(--boxel-lsp-2xs);
       }
       .blog-app-card-list {
         --embedded-card-max-width: 715px;
diff --git a/packages/catalog-realm/catalog-app/components/listing-fitted.gts b/packages/catalog-realm/catalog-app/components/listing-fitted.gts
index 884b8d9844..e4ce201d66 100644
--- a/packages/catalog-realm/catalog-app/components/listing-fitted.gts
+++ b/packages/catalog-realm/catalog-app/components/listing-fitted.gts
@@ -307,7 +307,7 @@ export class ListingFittedTemplate extends Component<typeof Listing> {
       /* Vertical Cards */
       @container fitted-card (aspect-ratio <= 1.0) and (400px <= width) {
         .card-title {
-          font-size: var(--boxel-font-size-med);
+          font-size: var(--boxel-font-size-md);
           -webkit-line-clamp: 4;
         }
       }
@@ -403,7 +403,7 @@ export class ListingFittedTemplate extends Component<typeof Listing> {
       /* Full Card (400 x 275) */
       @container fitted-card (1.0 < aspect-ratio) and (400px <= width) and (275px <= height) {
         .card-title {
-          font-size: var(--boxel-font-size-med);
+          font-size: var(--boxel-font-size-md);
         }
         .info-section {
           padding: var(--boxel-sp);
diff --git a/packages/catalog-realm/cocktail-recipe/cocktail-recipe.gts b/packages/catalog-realm/cocktail-recipe/cocktail-recipe.gts
index 2cf658fe7a..cd9b1cbca7 100644
--- a/packages/catalog-realm/cocktail-recipe/cocktail-recipe.gts
+++ b/packages/catalog-realm/cocktail-recipe/cocktail-recipe.gts
@@ -591,7 +591,7 @@ export class CocktailRecipe extends CardDef {
           border: 1px solid #d4af37;
           border-radius: 8px;
           padding: 1.2rem;
-          color: var(--boxel-50);
+          color: var(--boxel-150);
           font-family: 'Georgia', serif;
           box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
         }
diff --git a/packages/catalog-realm/cocktail-recipe/fields/garnish-field.gts b/packages/catalog-realm/cocktail-recipe/fields/garnish-field.gts
index e343125b59..aa1a312557 100644
--- a/packages/catalog-realm/cocktail-recipe/fields/garnish-field.gts
+++ b/packages/catalog-realm/cocktail-recipe/fields/garnish-field.gts
@@ -141,7 +141,7 @@ export class GarnishField extends FieldDef {
           border: 1px solid #d4af37;
           border-radius: 4px;
           background: rgba(40, 40, 40, 0.9);
-          color: var(--boxel-50);
+          color: var(--boxel-150);
           font-size: 0.9rem;
         }
 
diff --git a/packages/catalog-realm/cocktail-recipe/fields/ingredient-field.gts b/packages/catalog-realm/cocktail-recipe/fields/ingredient-field.gts
index 219bf5d61c..c50cd8a0dc 100644
--- a/packages/catalog-realm/cocktail-recipe/fields/ingredient-field.gts
+++ b/packages/catalog-realm/cocktail-recipe/fields/ingredient-field.gts
@@ -63,7 +63,7 @@ export class IngredientField extends FieldDef {
         }
 
         .ingredient-name {
-          color: var(--boxel-50);
+          color: var(--boxel-150);
           font-size: 1rem;
           flex: 1;
         }
@@ -181,7 +181,7 @@ export class IngredientField extends FieldDef {
           border: 1px solid #d4af37;
           border-radius: 4px;
           background: rgba(40, 40, 40, 0.9);
-          color: var(--boxel-50);
+          color: var(--boxel-150);
           font-size: 0.9rem;
         }
 
diff --git a/packages/catalog-realm/components/card-list.gts b/packages/catalog-realm/components/card-list.gts
index 458b38dc14..08c36bcd69 100644
--- a/packages/catalog-realm/components/card-list.gts
+++ b/packages/catalog-realm/components/card-list.gts
@@ -37,9 +37,7 @@ export class CardList extends GlimmerComponent<CardListSignature> {
           <:response as |cards|>
             {{#each cards key='url' as |card|}}
               <li class='card-list-item'>
-                <card.component
-                  class='card'
-                />
+                <card.component class='card' />
                 {{#if (has-block 'meta')}}
                   {{yield card to='meta'}}
                 {{/if}}
@@ -69,7 +67,7 @@ export class CardList extends GlimmerComponent<CardListSignature> {
       }
       .bordered-items > .card-list-item > * {
         border-radius: var(--boxel-border-radius);
-        box-shadow: inset 0 0 0 1px var(--boxel-light-500);
+        box-shadow: inset 0 0 0 1px var(--boxel-300);
       }
     </style>
   </template>
diff --git a/packages/catalog-realm/components/map-render.gts b/packages/catalog-realm/components/map-render.gts
index 803ea84e50..f770907e2e 100644
--- a/packages/catalog-realm/components/map-render.gts
+++ b/packages/catalog-realm/components/map-render.gts
@@ -93,7 +93,7 @@ export class MapRender extends GlimmerComponent<MapRenderSignature> {
         display: flex;
         align-items: center;
         justify-content: center;
-        background: var(--boxel-50);
+        background: var(--boxel-150);
         color: #666;
         font-size: 14px;
         text-align: center;
diff --git a/packages/catalog-realm/crm-app/account.gts b/packages/catalog-realm/crm-app/account.gts
index 17417f7753..f26c82340e 100644
--- a/packages/catalog-realm/crm-app/account.gts
+++ b/packages/catalog-realm/crm-app/account.gts
@@ -604,8 +604,8 @@ class IsolatedTemplate extends Component<typeof Account> {
         container-name: tasks-summary-card;
       }
       .upcoming-tasks-title {
-        font: 600 var(--boxel-font-med);
-        letter-spacing: var(--boxel-lsp-xxs);
+        font: 600 var(--boxel-font-md);
+        letter-spacing: var(--boxel-lsp-2xs);
       }
       .tasks-summary-card :deep(.task-card) {
         --task-card-padding: var(--boxel-sp) var(--boxel-sp) var(--boxel-sp)
@@ -613,8 +613,8 @@ class IsolatedTemplate extends Component<typeof Account> {
         border-top: 1px solid var(--boxel-200);
       }
       .task-title {
-        font: 600 var(--boxel-font-med);
-        letter-spacing: var(--boxel-lsp-xxs);
+        font: 600 var(--boxel-font-md);
+        letter-spacing: var(--boxel-lsp-2xs);
         margin: 0;
       }
       .task-pill {
@@ -1057,7 +1057,7 @@ class EmbeddedTemplate extends Component<typeof Account> {
       label {
         font: 500 var(--boxel-font-sm);
         color: var(--boxel-500);
-        letter-spacing: var(--boxel-lsp-xxs);
+        letter-spacing: var(--boxel-lsp-2xs);
         margin: 0;
       }
       .next-steps-display {
@@ -1065,7 +1065,7 @@ class EmbeddedTemplate extends Component<typeof Account> {
         --entity-display-content-gap: var(--boxel-sp-xs);
         display: table;
         padding: var(--boxel-sp-sm);
-        background: var(--boxel-light-300);
+        background: var(--boxel-200);
         border-radius: var(--boxel-border-radius-sm);
       }
       .primary-tag {
@@ -1152,7 +1152,7 @@ class FittedTemplate extends Component<typeof Account> {
       }
 
       .account-name {
-        font: 600 var(--boxel-font-med);
+        font: 600 var(--boxel-font-md);
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
diff --git a/packages/catalog-realm/crm-app/base-task.gts b/packages/catalog-realm/crm-app/base-task.gts
index 32398a7253..ca5c4df206 100644
--- a/packages/catalog-realm/crm-app/base-task.gts
+++ b/packages/catalog-realm/crm-app/base-task.gts
@@ -202,7 +202,7 @@ export class FittedTask extends Component<typeof Task> {
 
       .task-completion-status {
         --boxel-circle-size: 14px;
-        --boxel-border-radius: var(--boxel-border-radius-xxs);
+        --boxel-border-radius: var(--boxel-border-radius-2xs);
       }
 
       .task-card {
@@ -617,7 +617,7 @@ export class TaskCompletionStatus extends GlimmerComponent<TaskCompletionStatusS
         --circle-size: var(--boxel-circle-size, 20px);
         --border-radius: var(
           --boxel-border-radius,
-          var(--boxel-border-radius-xxs)
+          var(--boxel-border-radius-2xs)
         );
         display: inline-flex;
         align-items: center;
diff --git a/packages/catalog-realm/crm-app/components/account-header.gts b/packages/catalog-realm/crm-app/components/account-header.gts
index 3321e9c646..cd2f0c5f0b 100644
--- a/packages/catalog-realm/crm-app/components/account-header.gts
+++ b/packages/catalog-realm/crm-app/components/account-header.gts
@@ -76,7 +76,7 @@ class AccountHeader extends GlimmerComponent<AccountHeaderArgs> {
       }
       .account-header-name {
         margin: 0;
-        font: var(--account-header-name-font, 600 var(--boxel-font-med));
+        font: var(--account-header-name-font, 600 var(--boxel-font-md));
         letter-spacing: var(
           --account-header-name-letter-spacing,
           var(--boxel-lsp-sm)
diff --git a/packages/catalog-realm/crm-app/components/avatar-group.gts b/packages/catalog-realm/crm-app/components/avatar-group.gts
index fcda076dad..befa2f7f8b 100644
--- a/packages/catalog-realm/crm-app/components/avatar-group.gts
+++ b/packages/catalog-realm/crm-app/components/avatar-group.gts
@@ -65,7 +65,7 @@ export default class AvatarGroup extends GlimmerComponent<AvatarGroupSignature>
       }
       .avatar-name {
         margin: 0;
-        font: var(--avatar-name-font, 600 var(--boxel-font-med));
+        font: var(--avatar-name-font, 600 var(--boxel-font-md));
         letter-spacing: var(--avatar-name-letter-spacing, var(--boxel-lsp-sm));
         overflow: hidden;
         text-overflow: ellipsis;
diff --git a/packages/catalog-realm/crm-app/components/summary-card.gts b/packages/catalog-realm/crm-app/components/summary-card.gts
index ecf428303a..28f64b04db 100644
--- a/packages/catalog-realm/crm-app/components/summary-card.gts
+++ b/packages/catalog-realm/crm-app/components/summary-card.gts
@@ -73,7 +73,7 @@ export default class SummaryCard extends GlimmerComponent<SummaryCardArgs> {
         .summary-title {
           margin-block: 0;
           font: 600 var(--boxel-font);
-          letter-spacing: var(--boxel-lsp-xxs);
+          letter-spacing: var(--boxel-lsp-2xs);
           align-self: flex-start;
         }
         .summary-card-icon {
diff --git a/packages/catalog-realm/crm-app/contact.gts b/packages/catalog-realm/crm-app/contact.gts
index 45d36c06b4..085cffc63e 100644
--- a/packages/catalog-realm/crm-app/contact.gts
+++ b/packages/catalog-realm/crm-app/contact.gts
@@ -184,7 +184,7 @@ class EmbeddedTemplate extends Component<typeof Contact> {
         flex-wrap: wrap;
       }
       .links :deep(.pill) {
-        --boxel-social-link-pill-size: calc(var(--boxel-font-size-xxl) - 2px);
+        --boxel-social-link-pill-size: calc(var(--boxel-font-size-2xl) - 2px);
         width: var(--boxel-social-link-pill-size);
         height: var(--boxel-social-link-pill-size);
         --default-pill-border: 1px solid var(--boxel-300);
@@ -294,7 +294,7 @@ class FittedTemplate extends Component<typeof Contact> {
         flex-wrap: wrap;
       }
       .links :deep(.pill) {
-        --boxel-social-link-pill-size: calc(var(--boxel-font-size-xxl) - 2px);
+        --boxel-social-link-pill-size: calc(var(--boxel-font-size-2xl) - 2px);
         --default-pill-border: 1px solid var(--boxel-300);
         width: var(--boxel-social-link-pill-size);
         height: var(--boxel-social-link-pill-size);
diff --git a/packages/catalog-realm/crm-app/deal.gts b/packages/catalog-realm/crm-app/deal.gts
index f31d0fdefd..714c9e5eb0 100644
--- a/packages/catalog-realm/crm-app/deal.gts
+++ b/packages/catalog-realm/crm-app/deal.gts
@@ -643,7 +643,7 @@ class IsolatedTemplate extends Component<typeof Deal> {
       }
       .account-name {
         font: 600 var(--boxel-font-lg);
-        letter-spacing: var(--boxel-lsp-xxs);
+        letter-spacing: var(--boxel-lsp-2xs);
       }
       .user-icon {
         margin-left: auto;
@@ -677,7 +677,7 @@ class IsolatedTemplate extends Component<typeof Deal> {
       }
       .summary-title {
         font: 600 var(--boxel-font);
-        letter-spacing: var(--boxel-lsp-xxs);
+        letter-spacing: var(--boxel-lsp-2xs);
         align-self: flex-start;
       }
       .summary-highlight {
@@ -882,7 +882,7 @@ class EmbeddedTemplate extends Component<typeof Deal> {
         gap: var(--boxel-sp-xxs);
       }
       .account-name {
-        font: 600 var(--boxel-font-med);
+        font: 600 var(--boxel-font-md);
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
@@ -1161,7 +1161,7 @@ class FittedTemplate extends Component<typeof Deal> {
         gap: var(--boxel-sp-xxs);
       }
       .account-name {
-        font: 600 var(--boxel-font-med);
+        font: 600 var(--boxel-font-md);
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
@@ -1383,7 +1383,7 @@ class FittedTemplate extends Component<typeof Deal> {
           --account-header-info-content-display: none;
         }
         .account-name {
-          font: 600 var(--boxel-font-med);
+          font: 600 var(--boxel-font-md);
           -webkit-line-clamp: 1;
         }
 
diff --git a/packages/catalog-realm/crm-app/task.gts b/packages/catalog-realm/crm-app/task.gts
index 64a4859baa..5f2615d49b 100644
--- a/packages/catalog-realm/crm-app/task.gts
+++ b/packages/catalog-realm/crm-app/task.gts
@@ -261,7 +261,7 @@ class TaskIsolated extends Component<typeof CRMTask> {
         align-items: center;
       }
       .task-title {
-        font-size: var(--boxel-font-size-med);
+        font-size: var(--boxel-font-size-md);
         font-weight: var(--task-font-weight-600);
       }
       .status-label {
diff --git a/packages/catalog-realm/fields-preview/number-fields.gts b/packages/catalog-realm/fields-preview/number-fields.gts
index c8d2e0c506..1b5e8bd9d8 100644
--- a/packages/catalog-realm/fields-preview/number-fields.gts
+++ b/packages/catalog-realm/fields-preview/number-fields.gts
@@ -673,8 +673,8 @@ export class NumberFieldsPreview extends CardDef {
 
         .display-column {
           padding: var(--boxel-sp-lg);
-          background: var(--boxel-purple-100);
-          border: 1px solid var(--boxel-purple-300);
+          background: var(--boxel-100);
+          border: 1px solid var(--boxel-400);
           border-radius: var(--boxel-border-radius);
         }
 
diff --git a/packages/catalog-realm/fields/cloudflare-image-url.gts b/packages/catalog-realm/fields/cloudflare-image-url.gts
index 197023eeb3..512c44e46d 100644
--- a/packages/catalog-realm/fields/cloudflare-image-url.gts
+++ b/packages/catalog-realm/fields/cloudflare-image-url.gts
@@ -211,7 +211,7 @@ class Edit extends Component<typeof CloudflareImageUrlField> {
         display: grid;
         gap: var(--boxel-sp);
         padding: var(--boxel-sp-xs);
-        background: var(--boxel-50);
+        background: var(--boxel-150);
         border: 1px solid var(--boxel-border-color);
         border-radius: var(--boxel-border-radius);
       }
@@ -261,7 +261,7 @@ class Edit extends Component<typeof CloudflareImageUrlField> {
       .result {
         padding: var(--boxel-sp);
         background: var(--boxel-purple);
-        color: var(--boxel-50);
+        color: var(--boxel-150);
         border-radius: var(--boxel-border-radius);
       }
       .result__url {
diff --git a/packages/catalog-realm/fields/discrete-range-field.gts b/packages/catalog-realm/fields/discrete-range-field.gts
index 939ed7f0e5..182a446a71 100644
--- a/packages/catalog-realm/fields/discrete-range-field.gts
+++ b/packages/catalog-realm/fields/discrete-range-field.gts
@@ -42,7 +42,7 @@ export class DiscreteRangeField extends CardDef {
       <style scoped>
         .discrete-range-display {
           padding: 0.5rem;
-          background: var(--boxel-50);
+          background: var(--boxel-150);
           border-radius: 0.25rem;
           text-align: center;
           font-weight: 500;
diff --git a/packages/catalog-realm/fields/number/progress-circle.gts b/packages/catalog-realm/fields/number/progress-circle.gts
index 35cec002d9..b49f520828 100644
--- a/packages/catalog-realm/fields/number/progress-circle.gts
+++ b/packages/catalog-realm/fields/number/progress-circle.gts
@@ -113,8 +113,8 @@ export default class ProgressCircleField extends NumberField {
         }
         .radial-mini {
           display: inline-flex;
-          width: var(--boxel-icon-xxs, 0.75rem);
-          height: var(--boxel-icon-xxs, 0.75rem);
+          width: var(--boxel-icon-2xs, 0.75rem);
+          height: var(--boxel-icon-2xs, 0.75rem);
         }
         .radial-svg {
           width: 100%;
diff --git a/packages/catalog-realm/fields/number/score.gts b/packages/catalog-realm/fields/number/score.gts
index c6e219ddf6..4159d31924 100644
--- a/packages/catalog-realm/fields/number/score.gts
+++ b/packages/catalog-realm/fields/number/score.gts
@@ -105,8 +105,8 @@ export default class ScoreField extends NumberField {
           gap: var(--boxel-sp-5xs, 0.25rem);
         }
         .chart-icon {
-          width: var(--boxel-icon-xxs, 0.75rem);
-          height: var(--boxel-icon-xxs, 0.75rem);
+          width: var(--boxel-icon-2xs, 0.75rem);
+          height: var(--boxel-icon-2xs, 0.75rem);
           color: var(--primary, var(--boxel-purple, #6638ff));
         }
         .value {
diff --git a/packages/catalog-realm/game-leaderboard/components/player-preview.gts b/packages/catalog-realm/game-leaderboard/components/player-preview.gts
index cfbb563743..cdbea853f0 100644
--- a/packages/catalog-realm/game-leaderboard/components/player-preview.gts
+++ b/packages/catalog-realm/game-leaderboard/components/player-preview.gts
@@ -105,7 +105,7 @@ export default class PlayerPreview extends GlimmerComponent<PlayerPreviewSignatu
       .player-preview__rank-label {
         font: 600 var(--boxel-font-xxs);
         text-transform: uppercase;
-        letter-spacing: var(--boxel-lsp-xxs);
+        letter-spacing: var(--boxel-lsp-2xs);
         color: rgba(255, 255, 255, 0.65);
       }
       .player-preview__rank-value {
@@ -137,7 +137,7 @@ export default class PlayerPreview extends GlimmerComponent<PlayerPreviewSignatu
       .player-preview__stat-label {
         color: rgba(255, 255, 255, 0.7);
         text-transform: uppercase;
-        letter-spacing: var(--boxel-lsp-xxs);
+        letter-spacing: var(--boxel-lsp-2xs);
       }
       .player-preview__stat-value {
         font: 700 var(--boxel-font-sm);
diff --git a/packages/catalog-realm/news-feed/components/profile-edit-button.gts b/packages/catalog-realm/news-feed/components/profile-edit-button.gts
index b0d3f33eff..9ccfd3e988 100644
--- a/packages/catalog-realm/news-feed/components/profile-edit-button.gts
+++ b/packages/catalog-realm/news-feed/components/profile-edit-button.gts
@@ -181,7 +181,7 @@ export default class ProfileEditButton extends GlimmerComponent<ProfileEditArgs>
         justify-content: space-between;
         padding: var(--boxel-sp);
         border-bottom: 1px solid var(--boxel-200);
-        background: var(--boxel-50);
+        background: var(--boxel-150);
       }
 
       .dialog-header h3 {
diff --git a/packages/catalog-realm/photo-collage/photo-collage.gts b/packages/catalog-realm/photo-collage/photo-collage.gts
index 6b8b20abf4..cc68f5f1af 100644
--- a/packages/catalog-realm/photo-collage/photo-collage.gts
+++ b/packages/catalog-realm/photo-collage/photo-collage.gts
@@ -126,7 +126,7 @@ export class PhotoCollage extends CardDef {
 
         .dark-mode {
           background-color: #121212;
-          color: var(--boxel-50);
+          color: var(--boxel-150);
         }
       </style>
     </template>
diff --git a/packages/catalog-realm/player/player.gts b/packages/catalog-realm/player/player.gts
index 068f18ea26..43e8ee5529 100644
--- a/packages/catalog-realm/player/player.gts
+++ b/packages/catalog-realm/player/player.gts
@@ -104,7 +104,7 @@ export class Player extends CardDef {
         .player-embedded-card__name {
           font: 700 var(--boxel-font-sm);
           color: #ffffff;
-          letter-spacing: var(--boxel-lsp-xxs);
+          letter-spacing: var(--boxel-lsp-2xs);
           text-shadow: 0 0 6px rgba(0, 255, 255, 0.35);
         }
       </style>
diff --git a/packages/catalog-realm/reward-card-program/reward-card-program-tracker.gts b/packages/catalog-realm/reward-card-program/reward-card-program-tracker.gts
index 8cc6ed97e4..4e73ed63cb 100644
--- a/packages/catalog-realm/reward-card-program/reward-card-program-tracker.gts
+++ b/packages/catalog-realm/reward-card-program/reward-card-program-tracker.gts
@@ -605,7 +605,7 @@ class BenefitUsageTrackingEmbedded extends Component<
         justify-content: space-between;
         align-items: center;
         gap: calc(var(--spacing, var(--boxel-sp-xs)) * 2);
-        background: var(--secondary, var(--boxel-50));
+        background: var(--secondary, var(--boxel-150));
         border-bottom: 1px solid var(--border, var(--boxel-border-color));
       }
 
@@ -662,7 +662,7 @@ class BenefitUsageTrackingEmbedded extends Component<
       .progress-bar {
         width: 60px;
         height: 4px;
-        background: var(--muted, var(--boxel-50));
+        background: var(--muted, var(--boxel-150));
         border-radius: calc(var(--radius, var(--boxel-radius)) * 0.5);
         overflow: hidden;
       }
@@ -767,7 +767,7 @@ class BenefitUsageTrackingEmbedded extends Component<
         gap: 0.5rem;
         padding: 1rem;
         border-radius: 8px;
-        background: var(--accent, var(--boxel-light-100));
+        background: var(--accent, var(--boxel-150));
         cursor: pointer;
         user-select: none;
         transition: all 0.2s ease;
@@ -796,7 +796,7 @@ class BenefitUsageTrackingEmbedded extends Component<
         padding: 0.75rem;
         border: 1px solid var(--border, var(--boxel-border-color));
         border-radius: 6px;
-        background: var(--muted, var(--boxel-50));
+        background: var(--muted, var(--boxel-150));
         transition: all 0.2s ease;
       }
 
@@ -825,7 +825,7 @@ class BenefitUsageTrackingEmbedded extends Component<
         padding: 0.75rem;
         border: 1px solid var(--border, var(--boxel-border-color));
         border-radius: 6px;
-        background: var(--muted, var(--boxel-50));
+        background: var(--muted, var(--boxel-150));
         transition: all 0.2s ease;
       }
 
@@ -833,7 +833,7 @@ class BenefitUsageTrackingEmbedded extends Component<
         padding: 0.75rem;
         border: 1px solid var(--border, var(--boxel-border-color));
         border-radius: 6px;
-        background: var(--muted, var(--boxel-50));
+        background: var(--muted, var(--boxel-150));
         transition: all 0.2s ease;
       }
 
@@ -893,7 +893,7 @@ class BenefitUsageTrackingEmbedded extends Component<
 
       .last-used {
         padding: 0.75rem;
-        background: var(--accent, var(--boxel-light-100));
+        background: var(--accent, var(--boxel-150));
         border-radius: 6px;
         display: flex;
         justify-content: space-between;
@@ -917,7 +917,7 @@ class BenefitUsageTrackingEmbedded extends Component<
         padding: 0.75rem;
         border: 1px solid var(--border, var(--boxel-border-color));
         border-radius: 6px;
-        background: var(--muted, var(--boxel-50));
+        background: var(--muted, var(--boxel-150));
         font-size: 0.8125rem;
         line-height: 1.4;
       }
@@ -1414,12 +1414,12 @@ export class RewardCardProgramTracker extends CardDef {
           border: 1px solid var(--border, var(--boxel-border-color));
           border-radius: 0.375rem;
           background: var(--muted, var(--boxel-700));
-          color: var(--foreground, var(--boxel-50));
+          color: var(--foreground, var(--boxel-150));
           font-size: 0.75rem;
           font-weight: 600;
         }
         .year-chip {
-          background: var(--accent, var(--boxel-50));
+          background: var(--accent, var(--boxel-150));
           color: var(--foreground, var(--boxel-700));
         }
 
diff --git a/packages/catalog-realm/reward-card-program/reward-card-program.gts b/packages/catalog-realm/reward-card-program/reward-card-program.gts
index 4625698968..ee65770aef 100644
--- a/packages/catalog-realm/reward-card-program/reward-card-program.gts
+++ b/packages/catalog-realm/reward-card-program/reward-card-program.gts
@@ -249,7 +249,7 @@ export class SignupBonus extends CardDef {
           background: linear-gradient(
             135deg,
             var(--card, var(--boxel-light)) 0%,
-            var(--secondary, var(--boxel-light-200)) 100%
+            var(--secondary, var(--boxel-200)) 100%
           );
           color: var(--card-foreground, var(--boxel-dark));
           font-size: 0.875rem;
@@ -509,7 +509,7 @@ export class Benefit extends CardDef {
           font-weight: 500;
         }
         .spend-requirement {
-          background: var(--muted, var(--boxel-light-200));
+          background: var(--muted, var(--boxel-200));
           border: 1px solid var(--border, var(--boxel-border-color));
           border-radius: calc(var(--radius, var(--boxel-border-radius)) * 0.5);
           padding: calc(var(--spacing, var(--boxel-sp-xs)) * 2);
@@ -557,7 +557,7 @@ export class Benefit extends CardDef {
           list-style: none;
           padding: 0;
           margin: 0;
-          background: var(--muted, var(--boxel-light-200));
+          background: var(--muted, var(--boxel-200));
           border-radius: calc(var(--radius, var(--boxel-border-radius)) * 0.5);
           padding: calc(var(--spacing, var(--boxel-sp-xs)) * 2);
         }
@@ -666,7 +666,7 @@ export class MembershipBenefit extends CardDef {
           background: linear-gradient(
             135deg,
             var(--card, var(--boxel-light)) 0%,
-            var(--secondary, var(--boxel-light-200)) 100%
+            var(--secondary, var(--boxel-200)) 100%
           );
           color: var(--card-foreground, var(--boxel-dark));
           font-size: 0.875rem;
@@ -868,7 +868,7 @@ export class EarningRule extends CardDef {
           background: linear-gradient(
             135deg,
             var(--card, var(--boxel-light)) 0%,
-            var(--secondary, var(--boxel-light-200)) 100%
+            var(--secondary, var(--boxel-200)) 100%
           );
           color: var(--card-foreground, var(--boxel-dark));
           font-size: 0.875rem;
@@ -1093,7 +1093,7 @@ export class RewardCardProgram extends CardDef {
     <template>
       <div class='platinum-stage'>
         <div class='command-center'>
-          
+
           <header class='executive-header'>
             {{#if @model.networkLogoUrl}}
               <div class='top-network-logo'>
@@ -1197,7 +1197,7 @@ export class RewardCardProgram extends CardDef {
           </header>
 
           <main class='content-grid'>
-            
+
             {{#if @fields.signupBonus}}
               <section class='welcome-section'>
                 <h2 class='section-title'>
diff --git a/packages/catalog-realm/sprint-planner/sprint-task.gts b/packages/catalog-realm/sprint-planner/sprint-task.gts
index 84eef26ee7..22fb1ae157 100644
--- a/packages/catalog-realm/sprint-planner/sprint-task.gts
+++ b/packages/catalog-realm/sprint-planner/sprint-task.gts
@@ -302,7 +302,7 @@ class TaskIsolated extends Component<typeof SprintTask> {
         align-items: center;
       }
       .task-title {
-        font-size: var(--boxel-font-size-med);
+        font-size: var(--boxel-font-size-md);
         font-weight: var(--task-font-weight-600);
       }
       .status-label {
diff --git a/packages/catalog-realm/sprint-planner/task.gts b/packages/catalog-realm/sprint-planner/task.gts
index ab337de821..8d943e11b9 100644
--- a/packages/catalog-realm/sprint-planner/task.gts
+++ b/packages/catalog-realm/sprint-planner/task.gts
@@ -197,7 +197,7 @@ export class FittedTask extends Component<typeof Task> {
       }
       .task-completion-status {
         --boxel-circle-size: 14px;
-        --boxel-border-radius: var(--boxel-border-radius-xxs);
+        --boxel-border-radius: var(--boxel-border-radius-2xs);
       }
       .task-card {
         --task-font-weight-500: 500;
@@ -604,7 +604,7 @@ export class TaskCompletionStatus extends GlimmerComponent<TaskCompletionStatusS
         --circle-size: var(--boxel-circle-size, 20px);
         --border-radius: var(
           --boxel-border-radius,
-          var(--boxel-border-radius-xxs)
+          var(--boxel-border-radius-2xs)
         );
         display: inline-flex;
         align-items: center;
diff --git a/packages/catalog-realm/time-machine/year-range-field.gts b/packages/catalog-realm/time-machine/year-range-field.gts
index ea7c560a5a..09500e4003 100644
--- a/packages/catalog-realm/time-machine/year-range-field.gts
+++ b/packages/catalog-realm/time-machine/year-range-field.gts
@@ -39,7 +39,7 @@ export class YearRangeField extends FieldDef {
       <style scoped>
         .year-range-display {
           padding: 0.5rem;
-          background: var(--boxel-50);
+          background: var(--boxel-150);
           border-radius: 0.25rem;
           text-align: center;
           font-weight: 500;
diff --git a/packages/catalog-realm/todo-mvc/todo-mvc.gts b/packages/catalog-realm/todo-mvc/todo-mvc.gts
index f12280b615..50af75fb35 100644
--- a/packages/catalog-realm/todo-mvc/todo-mvc.gts
+++ b/packages/catalog-realm/todo-mvc/todo-mvc.gts
@@ -530,7 +530,7 @@ class IsolatedTemplate extends Component<typeof TodoMvc> {
         font-family:
           -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
           Arial, sans-serif;
-        background: var(--boxel-50);
+        background: var(--boxel-150);
         min-height: 100%;
         display: flex;
         flex-direction: column;
@@ -648,7 +648,7 @@ class IsolatedTemplate extends Component<typeof TodoMvc> {
       }
 
       .empty-state {
-        background: var(--boxel-50);
+        background: var(--boxel-150);
         padding: 1rem;
         text-align: center;
         color: #9ca3af;
diff --git a/packages/catalog-realm/youtube-thumbnail-composer/fields/visual-element.gts b/packages/catalog-realm/youtube-thumbnail-composer/fields/visual-element.gts
index 249fd22322..23cf73024a 100644
--- a/packages/catalog-realm/youtube-thumbnail-composer/fields/visual-element.gts
+++ b/packages/catalog-realm/youtube-thumbnail-composer/fields/visual-element.gts
@@ -120,7 +120,7 @@ export class VisualElement extends FieldDef {
           flex-wrap: wrap;
         }
         .type-badge {
-          background: var(--boxel-purple-200);
+          background: var(--boxel-400);
           color: var(--boxel-purple);
           padding: 2px 6px;
           border-radius: var(--boxel-border-radius-xs);
diff --git a/packages/experiments-realm/blog-app.gts b/packages/experiments-realm/blog-app.gts
index 0f3f9d765c..83dec816c1 100644
--- a/packages/experiments-realm/blog-app.gts
+++ b/packages/experiments-realm/blog-app.gts
@@ -272,7 +272,7 @@ class BlogAppTemplate extends Component<typeof BlogApp> {
         flex-grow: 1;
         margin: 0;
         font: 600 var(--boxel-font-lg);
-        letter-spacing: var(--boxel-lsp-xxs);
+        letter-spacing: var(--boxel-lsp-2xs);
       }
       .blog-app-card-list {
         --embedded-card-max-width: 715px;
diff --git a/packages/experiments-realm/components/account-header.gts b/packages/experiments-realm/components/account-header.gts
index 3321e9c646..cd2f0c5f0b 100644
--- a/packages/experiments-realm/components/account-header.gts
+++ b/packages/experiments-realm/components/account-header.gts
@@ -76,7 +76,7 @@ class AccountHeader extends GlimmerComponent<AccountHeaderArgs> {
       }
       .account-header-name {
         margin: 0;
-        font: var(--account-header-name-font, 600 var(--boxel-font-med));
+        font: var(--account-header-name-font, 600 var(--boxel-font-md));
         letter-spacing: var(
           --account-header-name-letter-spacing,
           var(--boxel-lsp-sm)
diff --git a/packages/experiments-realm/components/avatar-group.gts b/packages/experiments-realm/components/avatar-group.gts
index fcda076dad..befa2f7f8b 100644
--- a/packages/experiments-realm/components/avatar-group.gts
+++ b/packages/experiments-realm/components/avatar-group.gts
@@ -65,7 +65,7 @@ export default class AvatarGroup extends GlimmerComponent<AvatarGroupSignature>
       }
       .avatar-name {
         margin: 0;
-        font: var(--avatar-name-font, 600 var(--boxel-font-med));
+        font: var(--avatar-name-font, 600 var(--boxel-font-md));
         letter-spacing: var(--avatar-name-letter-spacing, var(--boxel-lsp-sm));
         overflow: hidden;
         text-overflow: ellipsis;
diff --git a/packages/experiments-realm/components/card-list.gts b/packages/experiments-realm/components/card-list.gts
index 53d210d2ac..08c36bcd69 100644
--- a/packages/experiments-realm/components/card-list.gts
+++ b/packages/experiments-realm/components/card-list.gts
@@ -67,7 +67,7 @@ export class CardList extends GlimmerComponent<CardListSignature> {
       }
       .bordered-items > .card-list-item > * {
         border-radius: var(--boxel-border-radius);
-        box-shadow: inset 0 0 0 1px var(--boxel-light-500);
+        box-shadow: inset 0 0 0 1px var(--boxel-300);
       }
     </style>
   </template>
diff --git a/packages/experiments-realm/components/summary-card.gts b/packages/experiments-realm/components/summary-card.gts
index ecf428303a..28f64b04db 100644
--- a/packages/experiments-realm/components/summary-card.gts
+++ b/packages/experiments-realm/components/summary-card.gts
@@ -73,7 +73,7 @@ export default class SummaryCard extends GlimmerComponent<SummaryCardArgs> {
         .summary-title {
           margin-block: 0;
           font: 600 var(--boxel-font);
-          letter-spacing: var(--boxel-lsp-xxs);
+          letter-spacing: var(--boxel-lsp-2xs);
           align-self: flex-start;
         }
         .summary-card-icon {
diff --git a/packages/experiments-realm/crm/account.gts b/packages/experiments-realm/crm/account.gts
index 9f7fbb7240..e93f4c2e38 100644
--- a/packages/experiments-realm/crm/account.gts
+++ b/packages/experiments-realm/crm/account.gts
@@ -604,8 +604,8 @@ class IsolatedTemplate extends Component<typeof Account> {
         container-name: tasks-summary-card;
       }
       .upcoming-tasks-title {
-        font: 600 var(--boxel-font-med);
-        letter-spacing: var(--boxel-lsp-xxs);
+        font: 600 var(--boxel-font-md);
+        letter-spacing: var(--boxel-lsp-2xs);
       }
       .tasks-summary-card :deep(.task-card) {
         --task-card-padding: var(--boxel-sp) var(--boxel-sp) var(--boxel-sp)
@@ -613,8 +613,8 @@ class IsolatedTemplate extends Component<typeof Account> {
         border-top: 1px solid var(--boxel-200);
       }
       .task-title {
-        font: 600 var(--boxel-font-med);
-        letter-spacing: var(--boxel-lsp-xxs);
+        font: 600 var(--boxel-font-md);
+        letter-spacing: var(--boxel-lsp-2xs);
         margin: 0;
       }
       .task-pill {
@@ -1057,7 +1057,7 @@ class EmbeddedTemplate extends Component<typeof Account> {
       label {
         font: 500 var(--boxel-font-sm);
         color: var(--boxel-500);
-        letter-spacing: var(--boxel-lsp-xxs);
+        letter-spacing: var(--boxel-lsp-2xs);
         margin: 0;
       }
       .next-steps-display {
@@ -1065,7 +1065,7 @@ class EmbeddedTemplate extends Component<typeof Account> {
         --entity-display-content-gap: var(--boxel-sp-xs);
         display: table;
         padding: var(--boxel-sp-sm);
-        background: var(--boxel-light-300);
+        background: var(--boxel-200);
         border-radius: var(--boxel-border-radius-sm);
       }
       .primary-tag {
@@ -1152,7 +1152,7 @@ class FittedTemplate extends Component<typeof Account> {
       }
 
       .account-name {
-        font: 600 var(--boxel-font-med);
+        font: 600 var(--boxel-font-md);
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
diff --git a/packages/experiments-realm/crm/contact.gts b/packages/experiments-realm/crm/contact.gts
index 49b33e0084..b358f14e31 100644
--- a/packages/experiments-realm/crm/contact.gts
+++ b/packages/experiments-realm/crm/contact.gts
@@ -184,7 +184,7 @@ class EmbeddedTemplate extends Component<typeof Contact> {
         flex-wrap: wrap;
       }
       .links :deep(.pill) {
-        --boxel-social-link-pill-size: calc(var(--boxel-font-size-xxl) - 2px);
+        --boxel-social-link-pill-size: calc(var(--boxel-font-size-2xl) - 2px);
         width: var(--boxel-social-link-pill-size);
         height: var(--boxel-social-link-pill-size);
         --default-pill-border: 1px solid var(--boxel-300);
@@ -294,7 +294,7 @@ class FittedTemplate extends Component<typeof Contact> {
         flex-wrap: wrap;
       }
       .links :deep(.pill) {
-        --boxel-social-link-pill-size: calc(var(--boxel-font-size-xxl) - 2px);
+        --boxel-social-link-pill-size: calc(var(--boxel-font-size-2xl) - 2px);
         --default-pill-border: 1px solid var(--boxel-300);
         width: var(--boxel-social-link-pill-size);
         height: var(--boxel-social-link-pill-size);
diff --git a/packages/experiments-realm/crm/deal.gts b/packages/experiments-realm/crm/deal.gts
index 117bf41c14..af970d2e07 100644
--- a/packages/experiments-realm/crm/deal.gts
+++ b/packages/experiments-realm/crm/deal.gts
@@ -643,7 +643,7 @@ class IsolatedTemplate extends Component<typeof Deal> {
       }
       .account-name {
         font: 600 var(--boxel-font-lg);
-        letter-spacing: var(--boxel-lsp-xxs);
+        letter-spacing: var(--boxel-lsp-2xs);
       }
       .user-icon {
         margin-left: auto;
@@ -677,7 +677,7 @@ class IsolatedTemplate extends Component<typeof Deal> {
       }
       .summary-title {
         font: 600 var(--boxel-font);
-        letter-spacing: var(--boxel-lsp-xxs);
+        letter-spacing: var(--boxel-lsp-2xs);
         align-self: flex-start;
       }
       .summary-highlight {
@@ -882,7 +882,7 @@ class EmbeddedTemplate extends Component<typeof Deal> {
         gap: var(--boxel-sp-xxs);
       }
       .account-name {
-        font: 600 var(--boxel-font-med);
+        font: 600 var(--boxel-font-md);
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
@@ -1161,7 +1161,7 @@ class FittedTemplate extends Component<typeof Deal> {
         gap: var(--boxel-sp-xxs);
       }
       .account-name {
-        font: 600 var(--boxel-font-med);
+        font: 600 var(--boxel-font-md);
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
@@ -1383,7 +1383,7 @@ class FittedTemplate extends Component<typeof Deal> {
           --account-header-info-content-display: none;
         }
         .account-name {
-          font: 600 var(--boxel-font-med);
+          font: 600 var(--boxel-font-md);
           -webkit-line-clamp: 1;
         }
 
diff --git a/packages/experiments-realm/crm/task.gts b/packages/experiments-realm/crm/task.gts
index 7f229fcf61..c74c62e493 100644
--- a/packages/experiments-realm/crm/task.gts
+++ b/packages/experiments-realm/crm/task.gts
@@ -261,7 +261,7 @@ class TaskIsolated extends Component<typeof CRMTask> {
         align-items: center;
       }
       .task-title {
-        font-size: var(--boxel-font-size-med);
+        font-size: var(--boxel-font-size-md);
         font-weight: var(--task-font-weight-600);
       }
       .status-label {
diff --git a/packages/experiments-realm/embedded-view-driver.gts b/packages/experiments-realm/embedded-view-driver.gts
index 669adc8ff2..85a0171237 100644
--- a/packages/experiments-realm/embedded-view-driver.gts
+++ b/packages/experiments-realm/embedded-view-driver.gts
@@ -113,7 +113,7 @@ export class EmbeddedViewDriver extends CardDef {
           /* this is how a border would appear around a card.
              note that a card is not supposed to draw its own border
           */
-          box-shadow: 0 0 0 1px var(--boxel-light-500);
+          box-shadow: 0 0 0 1px var(--boxel-300);
           overflow: hidden;
           border-radius: var(--boxel-border-radius);
         }
diff --git a/packages/experiments-realm/image-upload-tester.gts b/packages/experiments-realm/image-upload-tester.gts
index 344f88061f..047f41c504 100644
--- a/packages/experiments-realm/image-upload-tester.gts
+++ b/packages/experiments-realm/image-upload-tester.gts
@@ -268,7 +268,8 @@ class ImageUploadTesterIsolated extends Component<typeof ImageUploadTester> {
           <FieldContainer @label='Source Image URL'>
             <@fields.sourceImageUrl @format='edit' />
             <p class='field-hint'>
-              Supports https URLs, Blob URLs, and data URIs (e.g. data:image/png;base64,...)
+              Supports https URLs, Blob URLs, and data URIs (e.g.
+              data:image/png;base64,...)
             </p>
           </FieldContainer>
         {{/if}}
@@ -367,14 +368,14 @@ class ImageUploadTesterIsolated extends Component<typeof ImageUploadTester> {
       .status-message {
         padding: var(--boxel-sp);
         border-radius: var(--boxel-border-radius);
-        background: var(--boxel-50);
+        background: var(--boxel-150);
         color: var(--boxel-600);
         font: 500 var(--boxel-font-sm);
       }
 
       .status-message--error {
         background: var(--boxel-error-50);
-        color: var(--boxel-error-400);
+        color: var(--boxel-danger);
       }
 
       .status-message--success {
diff --git a/packages/experiments-realm/product.gts b/packages/experiments-realm/product.gts
index f57d345594..b51bd2484a 100644
--- a/packages/experiments-realm/product.gts
+++ b/packages/experiments-realm/product.gts
@@ -169,7 +169,7 @@ export class ProductImages extends GlimmerComponent<ProductImagesSignature> {
       }
       .thumbnails::-webkit-scrollbar-thumb {
         border-radius: 5px;
-        background: var(--boxel-purple-400);
+        background: var(--boxel-500);
       }
       .thumbnails::-webkit-scrollbar {
         height: 5px;
diff --git a/packages/experiments-realm/sprint-task.gts b/packages/experiments-realm/sprint-task.gts
index cdef01c595..e2f6a77af1 100644
--- a/packages/experiments-realm/sprint-task.gts
+++ b/packages/experiments-realm/sprint-task.gts
@@ -302,7 +302,7 @@ class TaskIsolated extends Component<typeof SprintTask> {
         align-items: center;
       }
       .task-title {
-        font-size: var(--boxel-font-size-med);
+        font-size: var(--boxel-font-size-md);
         font-weight: var(--task-font-weight-600);
       }
       .status-label {
diff --git a/packages/experiments-realm/task.gts b/packages/experiments-realm/task.gts
index 32398a7253..ca5c4df206 100644
--- a/packages/experiments-realm/task.gts
+++ b/packages/experiments-realm/task.gts
@@ -202,7 +202,7 @@ export class FittedTask extends Component<typeof Task> {
 
       .task-completion-status {
         --boxel-circle-size: 14px;
-        --boxel-border-radius: var(--boxel-border-radius-xxs);
+        --boxel-border-radius: var(--boxel-border-radius-2xs);
       }
 
       .task-card {
@@ -617,7 +617,7 @@ export class TaskCompletionStatus extends GlimmerComponent<TaskCompletionStatusS
         --circle-size: var(--boxel-circle-size, 20px);
         --border-radius: var(
           --boxel-border-radius,
-          var(--boxel-border-radius-xxs)
+          var(--boxel-border-radius-2xs)
         );
         display: inline-flex;
         align-items: center;
diff --git a/packages/experiments-realm/theme.gts b/packages/experiments-realm/theme.gts
index 7ee254bc1e..d1637205f2 100644
--- a/packages/experiments-realm/theme.gts
+++ b/packages/experiments-realm/theme.gts
@@ -490,7 +490,7 @@ class Isolated extends Component<typeof BrandTheme> {
         font-family: monospace;
         font-size: 13px;
         color: #666;
-        background: var(--boxel-50);
+        background: var(--boxel-150);
         padding: 8px 12px;
         border-radius: 4px;
         flex: 1;
@@ -1057,7 +1057,7 @@ class Embedded extends Component<typeof BrandTheme> {
           'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
         font-size: 11px;
         color: #666;
-        background: var(--boxel-50);
+        background: var(--boxel-150);
         padding: 4px 8px;
         border-radius: 4px;
         flex: 1;
diff --git a/packages/experiments-realm/update-room-skills-example.gts b/packages/experiments-realm/update-room-skills-example.gts
index dbcb249329..cd0f4ef40a 100644
--- a/packages/experiments-realm/update-room-skills-example.gts
+++ b/packages/experiments-realm/update-room-skills-example.gts
@@ -545,7 +545,7 @@ class Isolated extends Component<typeof UpdateRoomSkillsExample> {
         border: 1px solid var(--boxel-300);
         border-radius: 9999px;
         padding: var(--boxel-sp-xs) var(--boxel-sp);
-        background: var(--boxel-50);
+        background: var(--boxel-150);
         font-size: 0.9rem;
         cursor: pointer;
       }
diff --git a/packages/host/app/components/ai-assistant/apply-button/index.gts b/packages/host/app/components/ai-assistant/apply-button/index.gts
index c8655abd99..e5669c24d4 100644
--- a/packages/host/app/components/ai-assistant/apply-button/index.gts
+++ b/packages/host/app/components/ai-assistant/apply-button/index.gts
@@ -165,8 +165,8 @@ const AiAssistantApplyButton: TemplateOnlyComponent<Signature> = <template>
     }
     .state-indicator.failed {
       --icon-color: var(--boxel-light);
-      background-color: var(--boxel-error-400);
-      border-color: var(--boxel-error-400);
+      background-color: var(--boxel-danger);
+      border-color: var(--boxel-danger);
     }
     .state-indicator.invalid {
       --icon-color: var(--boxel-light);
diff --git a/packages/host/app/components/ai-assistant/ask-ai-text-box.gts b/packages/host/app/components/ai-assistant/ask-ai-text-box.gts
index 7917238d35..37f4e3dc11 100644
--- a/packages/host/app/components/ai-assistant/ask-ai-text-box.gts
+++ b/packages/host/app/components/ai-assistant/ask-ai-text-box.gts
@@ -57,7 +57,7 @@ const AskAiTextBox: TemplateOnlyComponent<Signature> = <template>
       background-color: var(--boxel-ai-purple);
       color: var(--boxel-light);
       border: var(--boxel-form-control-dark-mode-border);
-      border-radius: var(--boxel-border-radius-xxl);
+      border-radius: var(--boxel-border-radius-2xl);
     }
     .ask-ai-input:hover:not(:disabled) {
       border-color: var(--boxel-light);
diff --git a/packages/host/app/components/ai-assistant/chat-input/index.gts b/packages/host/app/components/ai-assistant/chat-input/index.gts
index b9c86af428..1a752d3775 100644
--- a/packages/host/app/components/ai-assistant/chat-input/index.gts
+++ b/packages/host/app/components/ai-assistant/chat-input/index.gts
@@ -145,8 +145,8 @@ export default class AiAssistantChatInput extends Component<Signature> {
         border-color: transparent;
       }
       .send-button {
-        width: var(--boxel-icon-med);
-        height: var(--boxel-icon-med);
+        width: var(--boxel-icon-md);
+        height: var(--boxel-icon-md);
         border-radius: var(--boxel-border-radius-sm);
         margin-top: 2px;
       }
diff --git a/packages/host/app/components/ai-assistant/code-block/index.gts b/packages/host/app/components/ai-assistant/code-block/index.gts
index de5b81e378..555f7e2577 100644
--- a/packages/host/app/components/ai-assistant/code-block/index.gts
+++ b/packages/host/app/components/ai-assistant/code-block/index.gts
@@ -114,7 +114,7 @@ const CodeBlockComponent: TemplateOnlyComponent<Signature> = <template>
       background-color: var(--boxel-dark);
       color: var(--boxel-light);
       border: 1px solid var(--boxel-550);
-      border-radius: var(--boxel-border-radius-xxl);
+      border-radius: var(--boxel-border-radius-2xl);
       overflow: hidden;
     }
     :deep(.monaco-editor) {
diff --git a/packages/host/app/components/ai-assistant/message/user-message.gts b/packages/host/app/components/ai-assistant/message/user-message.gts
index ab5ffffc2b..2235b249cb 100644
--- a/packages/host/app/components/ai-assistant/message/user-message.gts
+++ b/packages/host/app/components/ai-assistant/message/user-message.gts
@@ -33,7 +33,7 @@ const UserMessage: TemplateOnlyComponent<Signature> = <template>
       padding: var(--boxel-sp-sm);
       background-color: var(--boxel-light);
       color: var(--boxel-dark);
-      border-radius: var(--boxel-border-radius-xxl);
+      border-radius: var(--boxel-border-radius-2xl);
       border-top-left-radius: var(--boxel-border-radius-xs);
     }
     .is-pending {
diff --git a/packages/host/app/components/card-catalog/filters.gts b/packages/host/app/components/card-catalog/filters.gts
index 3367f6f050..bc473bb45e 100644
--- a/packages/host/app/components/card-catalog/filters.gts
+++ b/packages/host/app/components/card-catalog/filters.gts
@@ -94,7 +94,7 @@ export default class CardCatalogFilters extends Component<Signature> {
         justify-content: flex-start;
         gap: var(--boxel-sp-sm);
         padding: var(--boxel-sp-5xs) var(--boxel-sp-sm);
-        border-radius: var(--boxel-border-radius-xxl);
+        border-radius: var(--boxel-border-radius-2xl);
       }
       .dropdown-arrow {
         flex-shrink: 0;
diff --git a/packages/host/app/components/matrix/forgot-password.gts b/packages/host/app/components/matrix/forgot-password.gts
index 0c17b7d151..0f6ef99901 100644
--- a/packages/host/app/components/matrix/forgot-password.gts
+++ b/packages/host/app/components/matrix/forgot-password.gts
@@ -164,7 +164,7 @@ export default class ForgotPassword extends Component<Signature> {
 
     <style scoped>
       .title {
-        font: 600 var(--boxel-font-med);
+        font: 600 var(--boxel-font-md);
         margin-bottom: var(--boxel-sp);
       }
       .info {
diff --git a/packages/host/app/components/matrix/login.gts b/packages/host/app/components/matrix/login.gts
index bc4ef54a8b..523add5274 100644
--- a/packages/host/app/components/matrix/login.gts
+++ b/packages/host/app/components/matrix/login.gts
@@ -99,7 +99,7 @@ export default class Login extends Component<Signature> {
         flex-direction: column;
       }
       .title {
-        font: 600 var(--boxel-font-med);
+        font: 600 var(--boxel-font-md);
         margin-bottom: var(--boxel-sp-sm);
         padding: 0;
       }
diff --git a/packages/host/app/components/matrix/register-user.gts b/packages/host/app/components/matrix/register-user.gts
index 5d238dbbfb..5bd65a35ae 100644
--- a/packages/host/app/components/matrix/register-user.gts
+++ b/packages/host/app/components/matrix/register-user.gts
@@ -226,7 +226,7 @@ export default class RegisterUser extends Component<Signature> {
     {{/if}}
     <style scoped>
       .title {
-        font: 600 var(--boxel-font-med);
+        font: 600 var(--boxel-font-md);
         margin-bottom: var(--boxel-sp-sm);
       }
       .button-wrapper {
diff --git a/packages/host/app/components/matrix/room.gts b/packages/host/app/components/matrix/room.gts
index f654a457c8..b7a93d25a5 100644
--- a/packages/host/app/components/matrix/room.gts
+++ b/packages/host/app/components/matrix/room.gts
@@ -286,7 +286,7 @@ export default class Room extends Component<Signature> {
         overflow: hidden;
         position: relative;
 
-        --chat-input-area-border-radius: var(--boxel-border-radius-xxl);
+        --chat-input-area-border-radius: var(--boxel-border-radius-2xl);
       }
       .room-actions {
         position: relative;
@@ -339,7 +339,7 @@ export default class Room extends Component<Signature> {
         align-items: center;
         padding: var(--chat-input-area-bottom-padding);
         gap: var(--boxel-sp-sm);
-        background-color: var(--boxel-light-100);
+        background-color: var(--boxel-150);
         border-bottom-left-radius: var(--chat-input-area-border-radius);
         border-bottom-right-radius: var(--chat-input-area-border-radius);
       }
diff --git a/packages/host/app/components/operator-mode/ask-ai-container.gts b/packages/host/app/components/operator-mode/ask-ai-container.gts
index 87fbd8d6f6..5b80c4894d 100644
--- a/packages/host/app/components/operator-mode/ask-ai-container.gts
+++ b/packages/host/app/components/operator-mode/ask-ai-container.gts
@@ -89,7 +89,7 @@ export default class AskAiContainer extends Component<Signature> {
         right: calc(
           2 * var(--operator-mode-spacing) + var(--container-button-size)
         );
-        border-radius: var(--boxel-border-radius-xxl);
+        border-radius: var(--boxel-border-radius-2xl);
         box-shadow: var(--boxel-deep-box-shadow);
         z-index: var(--host-ai-panel-button-z-index);
         transition: width 0.3s ease-in-out;
diff --git a/packages/host/app/components/operator-mode/binary-file-info.gts b/packages/host/app/components/operator-mode/binary-file-info.gts
index 56c6c562e3..7082f573c5 100644
--- a/packages/host/app/components/operator-mode/binary-file-info.gts
+++ b/packages/host/app/components/operator-mode/binary-file-info.gts
@@ -55,7 +55,7 @@ export default class BinaryFileInfo extends Component<Signature> {
       }
       .file-name {
         margin-top: var(--boxel-sp);
-        font: var(--boxel-font-med);
+        font: var(--boxel-font-md);
         font-weight: 600;
         width: 100%;
       }
diff --git a/packages/host/app/components/operator-mode/card-url-bar.gts b/packages/host/app/components/operator-mode/card-url-bar.gts
index f8fdbaaf0f..24a55b6091 100644
--- a/packages/host/app/components/operator-mode/card-url-bar.gts
+++ b/packages/host/app/components/operator-mode/card-url-bar.gts
@@ -106,7 +106,7 @@ export default class CardURLBar extends Component<Signature> {
 
         width: max-content;
         color: var(--boxel-light);
-        border-right: 2px solid var(--boxel-purple-300);
+        border-right: 2px solid var(--boxel-400);
         padding-right: var(--boxel-sp-xs);
         margin-right: var(--boxel-sp-xs);
 
diff --git a/packages/host/app/components/operator-mode/choose-subscription-plan-modal.gts b/packages/host/app/components/operator-mode/choose-subscription-plan-modal.gts
index 005182e441..71c837d198 100644
--- a/packages/host/app/components/operator-mode/choose-subscription-plan-modal.gts
+++ b/packages/host/app/components/operator-mode/choose-subscription-plan-modal.gts
@@ -44,7 +44,7 @@ export default class ChooseSubscriptionPlanModal extends Component<Signature> {
       .boxel-pricing-container {
         color: var(--boxel-700);
         background-color: var(--boxel-light);
-        max-width: var(--boxel-xxl-container);
+        max-width: var(--boxel-2xl-container);
         margin: 0 auto;
       }
 
@@ -150,7 +150,7 @@ export default class ChooseSubscriptionPlanModal extends Component<Signature> {
       }
 
       .plan-name {
-        font: var(--boxel-font-med);
+        font: var(--boxel-font-md);
         font-weight: 600;
         margin: 0 0 var(--boxel-sp-xs) 0;
       }
diff --git a/packages/host/app/components/operator-mode/code-submode.gts b/packages/host/app/components/operator-mode/code-submode.gts
index 2ae9621f7f..910abb7c5d 100644
--- a/packages/host/app/components/operator-mode/code-submode.gts
+++ b/packages/host/app/components/operator-mode/code-submode.gts
@@ -894,7 +894,7 @@ export default class CodeSubmode extends Component<Signature> {
       }
 
       .empty-container {
-        background-color: var(--boxel-light-100);
+        background-color: var(--boxel-150);
         align-items: center;
         justify-content: center;
       }
diff --git a/packages/host/app/components/operator-mode/error-display.gts b/packages/host/app/components/operator-mode/error-display.gts
index 6004af1a9d..20052c0280 100644
--- a/packages/host/app/components/operator-mode/error-display.gts
+++ b/packages/host/app/components/operator-mode/error-display.gts
@@ -279,7 +279,7 @@ export default class ErrorDisplay
       }
 
       .no-stack-message {
-        color: var(--boxel-purple-700);
+        color: var(--boxel-700);
         font-style: italic;
         margin: 0;
       }
diff --git a/packages/host/app/components/operator-mode/host-submode/open-site-popover.gts b/packages/host/app/components/operator-mode/host-submode/open-site-popover.gts
index 23a1c61622..4e71f291db 100644
--- a/packages/host/app/components/operator-mode/host-submode/open-site-popover.gts
+++ b/packages/host/app/components/operator-mode/host-submode/open-site-popover.gts
@@ -85,7 +85,7 @@ export default class OpenSitePopover extends Component<OpenSitePopoverArgs> {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        border-bottom: 1px solid var(--boxel-light-200);
+        border-bottom: 1px solid var(--boxel-200);
         padding: 0.5rem 0;
       }
 
@@ -117,7 +117,7 @@ export default class OpenSitePopover extends Component<OpenSitePopoverArgs> {
 
       .no-published-message {
         text-align: center;
-        color: var(--boxel-light-600);
+        color: var(--boxel-300);
         font-style: italic;
         padding: 1rem;
         font-size: var(--boxel-font-size-xs);
diff --git a/packages/host/app/components/operator-mode/host-submode/publishing-realm-popover.gts b/packages/host/app/components/operator-mode/host-submode/publishing-realm-popover.gts
index 1fe8af42cc..7ca69df683 100644
--- a/packages/host/app/components/operator-mode/host-submode/publishing-realm-popover.gts
+++ b/packages/host/app/components/operator-mode/host-submode/publishing-realm-popover.gts
@@ -92,7 +92,7 @@ export default class PublishingRealmPopover extends Component<PublishingRealmArg
       .realm-item {
         display: flex;
         align-items: center;
-        border-bottom: 1px solid var(--boxel-light-200);
+        border-bottom: 1px solid var(--boxel-200);
       }
 
       .realm-item:last-child {
@@ -116,7 +116,7 @@ export default class PublishingRealmPopover extends Component<PublishingRealmArg
       .default-realm-icon {
         width: 100%;
         height: 100%;
-        background-color: var(--boxel-light-400);
+        background-color: var(--boxel-200);
         border-radius: 3px;
       }
 
@@ -135,12 +135,12 @@ export default class PublishingRealmPopover extends Component<PublishingRealmArg
       }
 
       .loading-icon {
-        color: var(--boxel-purple-600);
+        color: var(--boxel-600);
       }
 
       .no-domains-message {
         text-align: center;
-        color: var(--boxel-light-600);
+        color: var(--boxel-300);
         font-style: italic;
         padding: 1rem;
         font-size: var(--boxel-font-size-xs);
diff --git a/packages/host/app/components/operator-mode/submode-layout.gts b/packages/host/app/components/operator-mode/submode-layout.gts
index 7df41353fc..71a09fc245 100644
--- a/packages/host/app/components/operator-mode/submode-layout.gts
+++ b/packages/host/app/components/operator-mode/submode-layout.gts
@@ -574,7 +574,7 @@ export default class SubmodeLayout extends Component<Signature> {
 
       .boxel-title {
         color: var(--boxel-light);
-        font: 900 var(--boxel-font-size-med) 'Rustica';
+        font: 900 var(--boxel-font-size-md) 'Rustica';
         letter-spacing: 3px;
       }
 
diff --git a/packages/host/app/components/search-sheet/index.gts b/packages/host/app/components/search-sheet/index.gts
index 8054adc775..c4387ef0e9 100644
--- a/packages/host/app/components/search-sheet/index.gts
+++ b/packages/host/app/components/search-sheet/index.gts
@@ -319,8 +319,8 @@ export default class SearchSheet extends Component<Signature> {
           width var(--boxel-transition);
       }
       .search-sheet:not(.closed) {
-        border-top-right-radius: var(--boxel-border-radius-xxl);
-        border-top-left-radius: var(--boxel-border-radius-xxl);
+        border-top-right-radius: var(--boxel-border-radius-2xl);
+        border-top-left-radius: var(--boxel-border-radius-2xl);
         border-bottom-right-radius: 0;
         border-bottom-left-radius: 0;
         overflow: hidden;
diff --git a/packages/host/app/styles/app.css b/packages/host/app/styles/app.css
index 7074e5a853..12e1a20338 100644
--- a/packages/host/app/styles/app.css
+++ b/packages/host/app/styles/app.css
@@ -30,7 +30,7 @@
 /* Style Monaco read-only tooltip, copied from packages/boxel-ui/addon/src/components/tooltip/index.gts */
 .ember-application .monaco-editor .monaco-editor-overlaymessage {
   background-color: rgb(0 0 0 / 80%);
-  box-shadow: 0 0 0 1px var(--boxel-light-500);
+  box-shadow: 0 0 0 1px var(--boxel-300);
   color: var(--boxel-light);
   text-align: center;
   border-radius: var(--boxel-border-radius-sm);
diff --git a/packages/host/tests/integration/components/card-basics-test.gts b/packages/host/tests/integration/components/card-basics-test.gts
index 1789c6e454..b1b93930b6 100644
--- a/packages/host/tests/integration/components/card-basics-test.gts
+++ b/packages/host/tests/integration/components/card-basics-test.gts
@@ -4165,7 +4165,7 @@ function fittedViewDriver() {
             /* this is how a border would appear around a card.
              note that a card is not supposed to draw its own border
           */
-            box-shadow: 0 0 0 1px var(--boxel-light-500);
+            box-shadow: 0 0 0 1px var(--boxel-300);
             overflow: hidden;
             border-radius: var(--boxel-border-radius);
           }
diff --git a/packages/realm-server/tests/cards/chess-gallery.gts b/packages/realm-server/tests/cards/chess-gallery.gts
index 3dbc536e56..df11df2f95 100644
--- a/packages/realm-server/tests/cards/chess-gallery.gts
+++ b/packages/realm-server/tests/cards/chess-gallery.gts
@@ -52,7 +52,7 @@ export class ChessGallery extends FieldDef {
         }
         .white,
         .black {
-          color: var(--boxel-purple-600);
+          color: var(--boxel-600);
         }
       </style>
     </template>

From c71121166622cb896779d9d550eb8d621e881058 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Thu, 13 Nov 2025 13:24:58 -0500
Subject: [PATCH 3/3] add spacing theme default

---
 packages/boxel-ui/addon/src/styles/variables.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/boxel-ui/addon/src/styles/variables.css b/packages/boxel-ui/addon/src/styles/variables.css
index 1219e43239..816d49a12d 100644
--- a/packages/boxel-ui/addon/src/styles/variables.css
+++ b/packages/boxel-ui/addon/src/styles/variables.css
@@ -226,6 +226,9 @@
   --boxel-form-control-dark-mode-placeholder-color: var(--boxel-425);
   --boxel-form-control-dark-mode-border: var(--boxel-border-flexible);
 
+  /* Theme defaults */
+  --spacing: 0.25rem;
+
   /* deprecated */
   --boxel-sp-xxxs: var(--boxel-sp-3xs);
   --boxel-sp-xxs: var(--boxel-sp-2xs);