diff --git a/gallery/src/pages/components/ha-badge.ts b/gallery/src/pages/components/ha-badge.ts
index 10c158f263..1633592c44 100644
--- a/gallery/src/pages/components/ha-badge.ts
+++ b/gallery/src/pages/components/ha-badge.ts
@@ -117,7 +117,7 @@ export class DemoHaBadge extends LitElement {
     }
     .card-content {
       display: flex;
-      gap: 24px;
+      gap: var(--ha-space-6);
     }
   `;
 }
diff --git a/gallery/src/pages/components/ha-button.ts b/gallery/src/pages/components/ha-button.ts
index a0a07fbb75..9bff55fa60 100644
--- a/gallery/src/pages/components/ha-button.ts
+++ b/gallery/src/pages/components/ha-button.ts
@@ -155,11 +155,11 @@ export class DemoHaButton extends LitElement {
     .card-content {
       display: flex;
       flex-direction: column;
-      gap: 24px;
+      gap: var(--ha-space-6);
     }
     .card-content div {
       display: flex;
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
   `;
 }
diff --git a/gallery/src/pages/components/ha-progress-button.ts b/gallery/src/pages/components/ha-progress-button.ts
index 4e4b92379c..824e760ba8 100644
--- a/gallery/src/pages/components/ha-progress-button.ts
+++ b/gallery/src/pages/components/ha-progress-button.ts
@@ -123,11 +123,11 @@ export class DemoHaProgressButton extends LitElement {
     .card-content {
       display: flex;
       flex-direction: column;
-      gap: 24px;
+      gap: var(--ha-space-6);
     }
     .card-content div {
       display: flex;
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
   `;
 }
diff --git a/gallery/src/pages/components/ha-slider.ts b/gallery/src/pages/components/ha-slider.ts
index 4c8fb6037d..8325970ef1 100644
--- a/gallery/src/pages/components/ha-slider.ts
+++ b/gallery/src/pages/components/ha-slider.ts
@@ -88,7 +88,7 @@ export class DemoHaSlider extends LitElement {
       display: flex;
       flex-direction: column;
       align-items: center;
-      gap: 24px;
+      gap: var(--ha-space-6);
     }
   `;
 }
diff --git a/gallery/src/pages/components/ha-spinner.ts b/gallery/src/pages/components/ha-spinner.ts
index 3dc3eaae7b..2b4c47bb9f 100644
--- a/gallery/src/pages/components/ha-spinner.ts
+++ b/gallery/src/pages/components/ha-spinner.ts
@@ -70,7 +70,7 @@ export class DemoHaSpinner extends LitElement {
       display: flex;
       flex-direction: column;
       align-items: center;
-      gap: 24px;
+      gap: var(--ha-space-6);
     }
   `;
 }
diff --git a/hassio/src/dialogs/system-managed/dialog-system-managed.ts b/hassio/src/dialogs/system-managed/dialog-system-managed.ts
index 6021f2efbd..7a41da8cd6 100644
--- a/hassio/src/dialogs/system-managed/dialog-system-managed.ts
+++ b/hassio/src/dialogs/system-managed/dialog-system-managed.ts
@@ -159,7 +159,7 @@ class HassioSystemManagedDialog extends LitElement {
           display: flex;
           justify-content: center;
           align-items: center;
-          gap: 16px;
+          gap: var(--ha-space-4);
           --mdc-icon-size: 48px;
           margin-bottom: 32px;
         }
diff --git a/hassio/src/resources/hassio-style.ts b/hassio/src/resources/hassio-style.ts
index 2979349546..e1872faabb 100644
--- a/hassio/src/resources/hassio-style.ts
+++ b/hassio/src/resources/hassio-style.ts
@@ -31,7 +31,7 @@ export const hassioStyle = css`
   .card-group {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    grid-gap: 8px;
+    grid-gap: var(--ha-space-2);
   }
   @media screen and (min-width: 640px) {
     .card-group {
diff --git a/landing-page/src/ha-landing-page.ts b/landing-page/src/ha-landing-page.ts
index 5a002518c1..4960c169c6 100644
--- a/landing-page/src/ha-landing-page.ts
+++ b/landing-page/src/ha-landing-page.ts
@@ -213,7 +213,7 @@ class HaLandingPage extends LandingPageBaseElement {
       ha-card .card-content {
         display: flex;
         flex-direction: column;
-        gap: 16px;
+        gap: var(--ha-space-4);
       }
       ha-alert p {
         text-align: unset;
diff --git a/src/components/chart/ha-chart-base.ts b/src/components/chart/ha-chart-base.ts
index 80036a1bf8..74a0bd2414 100644
--- a/src/components/chart/ha-chart-base.ts
+++ b/src/components/chart/ha-chart-base.ts
@@ -974,7 +974,7 @@ export class HaChartBase extends LitElement {
       right: 4px;
       display: flex;
       flex-direction: column;
-      gap: 4px;
+      gap: var(--ha-space-1);
     }
     .chart-controls.small {
       top: 0;
@@ -1011,7 +1011,7 @@ export class HaChartBase extends LitElement {
       flex-wrap: wrap;
       justify-content: center;
       align-items: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
     .chart-legend li {
       height: 24px;
diff --git a/src/components/ha-badge.ts b/src/components/ha-badge.ts
index 0a5ef02ef0..f671a1f113 100644
--- a/src/components/ha-badge.ts
+++ b/src/components/ha-badge.ts
@@ -54,7 +54,7 @@ export class HaBadge extends LitElement {
       flex-direction: row;
       align-items: center;
       justify-content: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
       height: var(--ha-badge-size, 36px);
       min-width: var(--ha-badge-size, 36px);
       padding: 0px 12px;
diff --git a/src/components/ha-copy-textfield.ts b/src/components/ha-copy-textfield.ts
index 8645d205b9..3c7435aae3 100644
--- a/src/components/ha-copy-textfield.ts
+++ b/src/components/ha-copy-textfield.ts
@@ -76,7 +76,7 @@ export class HaCopyTextfield extends LitElement {
     .container {
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
       margin-top: 8px;
     }
 
diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts
index 77d00485c1..e1bb5ed6af 100644
--- a/src/components/ha-date-range-picker.ts
+++ b/src/components/ha-date-range-picker.ts
@@ -343,7 +343,7 @@ export class HaDateRangePicker extends LitElement {
     .date-range-inputs {
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
 
     .date-range-ranges {
diff --git a/src/components/ha-form/ha-form-grid.ts b/src/components/ha-form/ha-form-grid.ts
index a9bffc7f76..09e567ae13 100644
--- a/src/components/ha-form/ha-form-grid.ts
+++ b/src/components/ha-form/ha-form-grid.ts
@@ -77,8 +77,8 @@ export class HaFormGrid extends LitElement implements HaFormElement {
         var(--form-grid-column-count, auto-fit),
         minmax(var(--form-grid-min-width, 200px), 1fr)
       );
-      grid-column-gap: 8px;
-      grid-row-gap: 24px;
+      grid-column-gap: var(--ha-space-2);
+      grid-row-gap: var(--ha-space-6);
     }
     :host > ha-form {
       display: block;
diff --git a/src/components/ha-form/ha-form-optional_actions.ts b/src/components/ha-form/ha-form-optional_actions.ts
index c17a6a5e65..30d58e0fd7 100644
--- a/src/components/ha-form/ha-form-optional_actions.ts
+++ b/src/components/ha-form/ha-form-optional_actions.ts
@@ -156,7 +156,7 @@ export class HaFormOptionalActions extends LitElement implements HaFormElement {
     :host {
       display: flex !important;
       flex-direction: column;
-      gap: 24px;
+      gap: var(--ha-space-6);
     }
     :host ha-form {
       display: block;
diff --git a/src/components/ha-formfield.ts b/src/components/ha-formfield.ts
index 0f49c75514..b97ed5aabf 100644
--- a/src/components/ha-formfield.ts
+++ b/src/components/ha-formfield.ts
@@ -57,7 +57,7 @@ export class HaFormfield extends FormfieldBase {
       }
       .mdc-form-field {
         align-items: var(--ha-formfield-align-items, center);
-        gap: 4px;
+        gap: var(--ha-space-1);
       }
       .mdc-form-field > label {
         direction: var(--direction);
diff --git a/src/components/ha-grid-size-picker.ts b/src/components/ha-grid-size-picker.ts
index a050d81d69..4fe5c7e5a4 100644
--- a/src/components/ha-grid-size-picker.ts
+++ b/src/components/ha-grid-size-picker.ts
@@ -227,7 +227,7 @@ export class HaGridSizeEditor extends LitElement {
           "row-slider preview";
         grid-template-rows: auto auto;
         grid-template-columns: auto 1fr;
-        gap: 8px;
+        gap: var(--ha-space-2);
       }
       #columns {
         grid-area: column-slider;
diff --git a/src/components/ha-icon-button-toolbar.ts b/src/components/ha-icon-button-toolbar.ts
index 742d0ab125..2a57659049 100644
--- a/src/components/ha-icon-button-toolbar.ts
+++ b/src/components/ha-icon-button-toolbar.ts
@@ -104,7 +104,7 @@ export class HaIconButtonToolbar extends LitElement {
       background-color: transparent;
       padding-right: 4px;
       height: var(--icon-button-toolbar-height);
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
 
     .icon-toolbar-button {
diff --git a/src/components/ha-picker-field.ts b/src/components/ha-picker-field.ts
index ba8513794f..af6ca632f4 100644
--- a/src/components/ha-picker-field.ts
+++ b/src/components/ha-picker-field.ts
@@ -105,7 +105,7 @@ export class HaPickerField extends LitElement {
           --md-list-item-bottom-space: 0px;
           --md-list-item-leading-space: 8px;
           --md-list-item-trailing-space: 8px;
-          --ha-md-list-item-gap: 8px;
+          --ha-md-list-item-gap: var(--ha-space-2);
           /* Remove the default focus ring */
           --md-focus-ring-width: 0px;
           --md-focus-ring-duration: 0s;
diff --git a/src/components/ha-segmented-bar.ts b/src/components/ha-segmented-bar.ts
index 19f5e58f47..08ad6b67f0 100644
--- a/src/components/ha-segmented-bar.ts
+++ b/src/components/ha-segmented-bar.ts
@@ -90,7 +90,7 @@ class HaSegmentedBar extends LitElement {
     .heading {
       display: flex;
       flex-direction: row;
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
     .heading .title {
       flex: 1;
@@ -125,7 +125,7 @@ class HaSegmentedBar extends LitElement {
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
-      gap: 12px;
+      gap: var(--ha-space-3);
       margin: 12px 0;
       padding: 0;
       list-style: none;
@@ -133,7 +133,7 @@ class HaSegmentedBar extends LitElement {
     .legend li {
       display: flex;
       align-items: center;
-      gap: 4px;
+      gap: var(--ha-space-1);
       font-size: var(--ha-font-size-s);
     }
     .legend li .bullet {
diff --git a/src/components/ha-select-box.ts b/src/components/ha-select-box.ts
index a87fde5d01..7b84c1d6ee 100644
--- a/src/components/ha-select-box.ts
+++ b/src/components/ha-select-box.ts
@@ -116,7 +116,7 @@ export class HaSelectBox extends LitElement {
     .list {
       display: grid;
       grid-template-columns: repeat(var(--columns, 1), minmax(0, 1fr));
-      gap: 12px;
+      gap: var(--ha-space-3);
     }
     .option {
       position: relative;
@@ -128,7 +128,7 @@ export class HaSelectBox extends LitElement {
       align-items: center;
       justify-content: space-between;
       padding: 12px;
-      gap: 8px;
+      gap: var(--ha-space-2);
       overflow: hidden;
       cursor: pointer;
     }
@@ -137,7 +137,7 @@ export class HaSelectBox extends LitElement {
       position: relative;
       display: flex;
       flex-direction: row;
-      gap: 8px;
+      gap: var(--ha-space-2);
       min-width: 0;
       width: 100%;
     }
@@ -148,7 +148,7 @@ export class HaSelectBox extends LitElement {
     .option .content .text {
       display: flex;
       flex-direction: column;
-      gap: 4px;
+      gap: var(--ha-space-1);
       min-width: 0;
       flex: 1;
     }
diff --git a/src/components/ha-selector/ha-selector-button-toggle.ts b/src/components/ha-selector/ha-selector-button-toggle.ts
index eaa1f32116..0219ccd907 100644
--- a/src/components/ha-selector/ha-selector-button-toggle.ts
+++ b/src/components/ha-selector/ha-selector-button-toggle.ts
@@ -89,7 +89,7 @@ export class HaButtonToggleSelector extends LitElement {
       display: flex;
       justify-content: space-between;
       flex-wrap: wrap;
-      gap: 8px;
+      gap: var(--ha-space-2);
       align-items: center;
     }
     @media all and (max-width: 600px) {
diff --git a/src/components/ha-selector/ha-selector-media.ts b/src/components/ha-selector/ha-selector-media.ts
index c23afd34f8..dcb7ec7bf0 100644
--- a/src/components/ha-selector/ha-selector-media.ts
+++ b/src/components/ha-selector/ha-selector-media.ts
@@ -321,7 +321,7 @@ export class HaMediaSelector extends LitElement {
       display: flex;
       align-items: center;
       padding: 8px;
-      gap: 12px;
+      gap: var(--ha-space-3);
     }
     ha-card .thumbnail {
       width: 40px;
diff --git a/src/components/ha-selector/ha-selector-object.ts b/src/components/ha-selector/ha-selector-object.ts
index a69c1afb64..ce70327d72 100644
--- a/src/components/ha-selector/ha-selector-object.ts
+++ b/src/components/ha-selector/ha-selector-object.ts
@@ -297,7 +297,7 @@ export class HaObjectSelector extends LitElement {
     return [
       css`
         ha-md-list {
-          gap: 8px;
+          gap: var(--ha-space-2);
         }
         ha-md-list-item {
           border: 1px solid var(--divider-color);
diff --git a/src/components/media-player/dialog-join-media-players.ts b/src/components/media-player/dialog-join-media-players.ts
index ac5b581c45..514d3a4cb8 100644
--- a/src/components/media-player/dialog-join-media-players.ts
+++ b/src/components/media-player/dialog-join-media-players.ts
@@ -217,7 +217,7 @@ class DialogJoinMediaPlayers extends LitElement {
         .content {
           display: flex;
           flex-direction: column;
-          row-gap: 16px;
+          row-gap: var(--ha-space-4);
         }
 
         ha-dialog-header ha-button {
diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts
index eb2a8674d6..af835296db 100644
--- a/src/components/media-player/ha-media-player-browse.ts
+++ b/src/components/media-player/ha-media-player-browse.ts
@@ -1138,7 +1138,7 @@ export class HaMediaPlayerBrowse extends LitElement {
             auto-fit,
             minmax(var(--media-browse-item-size, 175px), 0.1fr)
           );
-          grid-gap: 16px;
+          grid-gap: var(--ha-space-4);
           padding: 16px;
         }
 
diff --git a/src/components/media-player/ha-media-player-toggle.ts b/src/components/media-player/ha-media-player-toggle.ts
index ec5366e381..cbc7f9d122 100644
--- a/src/components/media-player/ha-media-player-toggle.ts
+++ b/src/components/media-player/ha-media-player-toggle.ts
@@ -54,7 +54,7 @@ class HaMediaPlayerToggle extends LitElement {
         .list-item {
           display: grid;
           grid-template-columns: auto 1fr auto;
-          column-gap: 16px;
+          column-gap: var(--ha-space-4);
           align-items: center;
           width: 100%;
         }
diff --git a/src/dialogs/config-flow/step-flow-create-entry.ts b/src/dialogs/config-flow/step-flow-create-entry.ts
index 6af7c0da57..6d99bd1420 100644
--- a/src/dialogs/config-flow/step-flow-create-entry.ts
+++ b/src/dialogs/config-flow/step-flow-create-entry.ts
@@ -325,7 +325,7 @@ class StepFlowCreateEntry extends LitElement {
         .device-info {
           display: flex;
           align-items: center;
-          gap: 8px;
+          gap: var(--ha-space-2);
         }
         .device-info img {
           width: 40px;
diff --git a/src/dialogs/enter-code/dialog-enter-code.ts b/src/dialogs/enter-code/dialog-enter-code.ts
index 374e5a8ae9..2dd810f2ed 100644
--- a/src/dialogs/enter-code/dialog-enter-code.ts
+++ b/src/dialogs/enter-code/dialog-enter-code.ts
@@ -209,7 +209,7 @@ export class DialogEnterCode
       display: grid;
       grid-template-columns: repeat(var(--keypad-columns), auto);
       grid-auto-rows: auto;
-      grid-gap: 24px;
+      grid-gap: var(--ha-space-6);
       justify-items: center;
       align-items: center;
     }
diff --git a/src/dialogs/more-info/components/ha-more-info-control-select-container.ts b/src/dialogs/more-info/components/ha-more-info-control-select-container.ts
index e25e3404a6..1b3524099c 100644
--- a/src/dialogs/more-info/components/ha-more-info-control-select-container.ts
+++ b/src/dialogs/more-info/components/ha-more-info-control-select-container.ts
@@ -32,7 +32,7 @@ export class HaMoreInfoControlSelectContainer extends LitElement {
       display: flex;
       flex-direction: row;
       justify-content: flex-start;
-      gap: 12px;
+      gap: var(--ha-space-3);
       margin: auto;
       overflow: auto;
       -ms-overflow-style: none; /* IE and Edge */
diff --git a/src/dialogs/more-info/components/siren/ha-more-info-siren-advanced-controls.ts b/src/dialogs/more-info/components/siren/ha-more-info-siren-advanced-controls.ts
index 4f6b3719b0..86df2e643a 100644
--- a/src/dialogs/more-info/components/siren/ha-more-info-siren-advanced-controls.ts
+++ b/src/dialogs/more-info/components/siren/ha-more-info-siren-advanced-controls.ts
@@ -202,13 +202,13 @@ class MoreInfoSirenAdvancedControls extends LitElement {
         .options {
           display: flex;
           flex-direction: column;
-          gap: 16px;
+          gap: var(--ha-space-4);
         }
         .controls {
           display: flex;
           flex-direction: row;
           justify-content: center;
-          gap: 16px;
+          gap: var(--ha-space-4);
           margin-top: 16px;
         }
         ha-control-button {
diff --git a/src/dialogs/more-info/controls/more-info-camera.ts b/src/dialogs/more-info/controls/more-info-camera.ts
index d814df7468..be5c689e83 100644
--- a/src/dialogs/more-info/controls/more-info-camera.ts
+++ b/src/dialogs/more-info/controls/more-info-camera.ts
@@ -107,7 +107,7 @@ class MoreInfoCamera extends LitElement {
       box-sizing: border-box;
       padding: 16px;
       z-index: 1;
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
   `;
 }
diff --git a/src/dialogs/more-info/controls/more-info-lock.ts b/src/dialogs/more-info/controls/more-info-lock.ts
index 260702fa53..a3462b0e92 100644
--- a/src/dialogs/more-info/controls/more-info-lock.ts
+++ b/src/dialogs/more-info/controls/more-info-lock.ts
@@ -181,7 +181,7 @@ class MoreInfoLock extends LitElement {
           display: flex;
           align-items: center;
           flex-direction: row;
-          gap: 8px;
+          gap: var(--ha-space-2);
           font-weight: var(--ha-font-weight-medium);
           color: var(--success-color);
         }
diff --git a/src/dialogs/more-info/controls/more-info-media_player.ts b/src/dialogs/more-info/controls/more-info-media_player.ts
index ce6b6f887f..21ba77155c 100644
--- a/src/dialogs/more-info/controls/more-info-media_player.ts
+++ b/src/dialogs/more-info/controls/more-info-media_player.ts
@@ -442,7 +442,7 @@ class MoreInfoMediaPlayer extends LitElement {
     :host {
       display: flex;
       flex-direction: column;
-      gap: 24px;
+      gap: var(--ha-space-6);
       margin-top: 0;
     }
 
@@ -510,7 +510,7 @@ class MoreInfoMediaPlayer extends LitElement {
     .volume {
       display: flex;
       align-items: center;
-      gap: 12px;
+      gap: var(--ha-space-3);
       margin-left: 8px;
     }
 
@@ -591,7 +591,7 @@ class MoreInfoMediaPlayer extends LitElement {
     .bottom-controls {
       display: flex;
       flex-direction: column;
-      gap: 24px;
+      gap: var(--ha-space-6);
       align-self: center;
       width: 320px;
     }
diff --git a/src/dialogs/more-info/controls/more-info-update.ts b/src/dialogs/more-info/controls/more-info-update.ts
index 0bd5ed254f..edf6398b29 100644
--- a/src/dialogs/more-info/controls/more-info-update.ts
+++ b/src/dialogs/more-info/controls/more-info-update.ts
@@ -508,7 +508,7 @@ class MoreInfoUpdate extends LitElement {
       box-sizing: border-box;
       padding: 16px;
       z-index: 1;
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
 
     a {
diff --git a/src/dialogs/shortcuts/dialog-shortcuts.ts b/src/dialogs/shortcuts/dialog-shortcuts.ts
index a805184ce7..2459cc9e02 100644
--- a/src/dialogs/shortcuts/dialog-shortcuts.ts
+++ b/src/dialogs/shortcuts/dialog-shortcuts.ts
@@ -269,7 +269,7 @@ class DialogShortcuts extends LitElement {
         display: flex;
         flex-direction: row;
         align-items: center;
-        gap: 8px;
+        gap: var(--ha-space-2);
         margin: 4px 0;
       }
 
diff --git a/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts b/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts
index e7bf0703b4..f9811ba488 100644
--- a/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts
+++ b/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts
@@ -127,7 +127,7 @@ export class CloudStepIntro extends LitElement {
       .features {
         display: flex;
         flex-direction: column;
-        grid-gap: 16px;
+        grid-gap: var(--ha-space-4);
         padding: 16px;
       }
       .feature {
diff --git a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-pipeline.ts b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-pipeline.ts
index 99173b976b..410f4abe4a 100644
--- a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-pipeline.ts
+++ b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-pipeline.ts
@@ -427,7 +427,7 @@ export class HaVoiceAssistantSetupStepPipeline extends LitElement {
         width: 100%;
         height: 10px;
         display: flex;
-        gap: 4px;
+        gap: var(--ha-space-1);
         margin: 8px 0;
       }
       .segment {
diff --git a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-success.ts b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-success.ts
index 5252bcce16..d3a4d7cf0d 100644
--- a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-success.ts
+++ b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-success.ts
@@ -368,7 +368,7 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {
         margin-top: 24px;
       }
       .rows {
-        gap: 16px;
+        gap: var(--ha-space-4);
         display: flex;
         flex-direction: column;
       }
diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts
index 7eb7f5bedb..6583ae3b1e 100644
--- a/src/layouts/hass-subpage.ts
+++ b/src/layouts/hass-subpage.ts
@@ -182,7 +182,7 @@ class HassSubpage extends LitElement {
           display: flex;
           flex-wrap: wrap;
           justify-content: flex-end;
-          gap: 8px;
+          gap: var(--ha-space-2);
         }
         :host([narrow]) #fab.tabs {
           bottom: calc(84px + var(--safe-area-inset-bottom, 0px));
diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts
index 7900611fba..6930ae7dcf 100644
--- a/src/layouts/hass-tabs-subpage-data-table.ts
+++ b/src/layouts/hass-tabs-subpage-data-table.ts
@@ -740,7 +740,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
       width: 100%;
       justify-content: space-between;
       padding: 0 16px;
-      gap: 16px;
+      gap: var(--ha-space-4);
       box-sizing: border-box;
       background: var(--primary-background-color);
       border-bottom: 1px solid var(--divider-color);
@@ -823,7 +823,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
       display: flex;
       align-items: center;
       min-width: 100%;
-      gap: 16px;
+      gap: var(--ha-space-4);
       padding: 0 16px;
       box-sizing: border-box;
       overflow-x: scroll;
@@ -852,7 +852,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
     .selection-controls {
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
 
     .selection-controls p {
@@ -864,7 +864,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
     .center-vertical {
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
 
     .relative {
diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts
index 5a3e737b48..7679ebe33c 100644
--- a/src/layouts/hass-tabs-subpage.ts
+++ b/src/layouts/hass-tabs-subpage.ts
@@ -362,7 +362,7 @@ class HassTabsSubpage extends LitElement {
           display: flex;
           flex-wrap: wrap;
           justify-content: flex-end;
-          gap: 8px;
+          gap: var(--ha-space-2);
         }
         :host([narrow]) #fab.tabs {
           bottom: calc(84px + var(--safe-area-inset-bottom, 0px));
diff --git a/src/onboarding/onboarding-integrations.ts b/src/onboarding/onboarding-integrations.ts
index bbbd52898d..c59a28d8c5 100644
--- a/src/onboarding/onboarding-integrations.ts
+++ b/src/onboarding/onboarding-integrations.ts
@@ -212,7 +212,7 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) {
           margin-top: 24px;
           display: grid;
           grid-template-columns: repeat(auto-fill, minmax(106px, 1fr));
-          row-gap: 24px;
+          row-gap: var(--ha-space-6);
         }
         .more {
           display: flex;
diff --git a/src/onboarding/onboarding-welcome-links.ts b/src/onboarding/onboarding-welcome-links.ts
index c52a3f075d..d4808adb9e 100644
--- a/src/onboarding/onboarding-welcome-links.ts
+++ b/src/onboarding/onboarding-welcome-links.ts
@@ -64,8 +64,8 @@ class OnboardingWelcomeLinks extends LitElement {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
       margin-top: 16px;
-      column-gap: 16px;
-      row-gap: 16px;
+      column-gap: var(--ha-space-4);
+      row-gap: var(--ha-space-4);
     }
     @media (max-width: 550px) {
       :host {
diff --git a/src/onboarding/restore-backup/onboarding-restore-backup-cloud-login.ts b/src/onboarding/restore-backup/onboarding-restore-backup-cloud-login.ts
index 6355d4c084..3af1b8a1ef 100644
--- a/src/onboarding/restore-backup/onboarding-restore-backup-cloud-login.ts
+++ b/src/onboarding/restore-backup/onboarding-restore-backup-cloud-login.ts
@@ -123,7 +123,7 @@ class OnboardingRestoreBackupCloudLogin extends LitElement {
           font-size: var(--ha-font-size-2xl);
           display: flex;
           align-items: center;
-          gap: 16px;
+          gap: var(--ha-space-4);
         }
         h2 img {
           width: 48px;
diff --git a/src/onboarding/restore-backup/onboarding-restore-backup-restore.ts b/src/onboarding/restore-backup/onboarding-restore-backup-restore.ts
index 43e738f4db..1ce9b4e1e4 100644
--- a/src/onboarding/restore-backup/onboarding-restore-backup-restore.ts
+++ b/src/onboarding/restore-backup/onboarding-restore-backup-restore.ts
@@ -332,7 +332,7 @@ class OnboardingRestoreBackupRestore extends LitElement {
           display: flex;
           align-items: center;
           flex-direction: row;
-          gap: 8px;
+          gap: var(--ha-space-2);
           line-height: var(--ha-line-height-condensed);
         }
         h2 {
diff --git a/src/panels/config/automation/add-automation-element-dialog.ts b/src/panels/config/automation/add-automation-element-dialog.ts
index ad52ade755..dc8a9b7112 100644
--- a/src/panels/config/automation/add-automation-element-dialog.ts
+++ b/src/panels/config/automation/add-automation-element-dialog.ts
@@ -736,7 +736,7 @@ class DialogAddAutomationElement
         }
         .shortcut-label {
           display: flex;
-          gap: 12px;
+          gap: var(--ha-space-3);
           justify-content: space-between;
         }
         .shortcut-label .supporting-text {
diff --git a/src/panels/config/automation/paste-replace-dialog/dialog-paste-replace.ts b/src/panels/config/automation/paste-replace-dialog/dialog-paste-replace.ts
index 5b4436b42e..dcbbd29d16 100644
--- a/src/panels/config/automation/paste-replace-dialog/dialog-paste-replace.ts
+++ b/src/panels/config/automation/paste-replace-dialog/dialog-paste-replace.ts
@@ -92,7 +92,7 @@ class DialogPasteReplace extends LitElement implements HassDialog {
         }
         div[slot="primaryAction"] {
           display: flex;
-          gap: 8px;
+          gap: var(--ha-space-2);
         }
       `,
     ];
diff --git a/src/panels/config/automation/styles.ts b/src/panels/config/automation/styles.ts
index b2cea2a01e..b5359fe4d0 100644
--- a/src/panels/config/automation/styles.ts
+++ b/src/panels/config/automation/styles.ts
@@ -118,7 +118,7 @@ export const manualEditorStyles = css`
       var(--ha-automation-editor-max-width) -
         ${CONTENT_MIN_WIDTH}px - var(--mdc-drawer-width, 0px)
     );
-    --sidebar-gap: 16px;
+    --sidebar-gap: var(--ha-space-4);
   }
 
   .fab-positioner {
@@ -188,7 +188,7 @@ export const automationRowsStyles = css`
   .rows {
     display: flex;
     flex-direction: column;
-    gap: 16px;
+    gap: var(--ha-space-4);
   }
   .rows.no-sidebar {
     margin-inline-end: 0;
@@ -225,7 +225,7 @@ export const automationRowsStyles = css`
   .buttons {
     display: flex;
     flex-wrap: wrap;
-    gap: 8px;
+    gap: var(--ha-space-2);
     order: 1;
   }
 `;
@@ -244,7 +244,7 @@ export const overflowStyles = css`
   .overflow-label {
     display: flex;
     justify-content: space-between;
-    gap: 12px;
+    gap: var(--ha-space-3);
     white-space: nowrap;
   }
   .overflow-label .shortcut {
diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
index f89fe9aaf2..4c37a4bf53 100644
--- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
@@ -806,7 +806,7 @@ export default class HaAutomationTriggerRow extends LitElement {
           display: flex;
           justify-content: center;
           align-items: center;
-          gap: 4px;
+          gap: var(--ha-space-1);
           line-height: 1;
           padding: 0;
         }
diff --git a/src/panels/config/backup/components/config/ha-backup-config-agents.ts b/src/panels/config/backup/components/config/ha-backup-config-agents.ts
index 82cd67fe26..05e2fa7edf 100644
--- a/src/panels/config/backup/components/config/ha-backup-config-agents.ts
+++ b/src/panels/config/backup/components/config/ha-backup-config-agents.ts
@@ -313,13 +313,13 @@ class HaBackupConfigAgents extends LitElement {
       display: flex;
       align-items: center;
       flex-direction: row;
-      gap: 8px;
+      gap: var(--ha-space-2);
       line-height: var(--ha-line-height-condensed);
     }
     .unencrypted-warning {
       display: flex;
       align-items: center;
-      gap: 4px;
+      gap: var(--ha-space-1);
     }
     .dot {
       display: block;
@@ -341,7 +341,7 @@ class HaBackupConfigAgents extends LitElement {
         align-items: flex-start;
         flex-direction: column;
         justify-content: flex-start;
-        gap: 4px;
+        gap: var(--ha-space-1);
       }
     }
   `;
diff --git a/src/panels/config/backup/components/ha-backup-agents-picker.ts b/src/panels/config/backup/components/ha-backup-agents-picker.ts
index 778eef62cd..8c52b25ca2 100644
--- a/src/panels/config/backup/components/ha-backup-agents-picker.ts
+++ b/src/panels/config/backup/components/ha-backup-agents-picker.ts
@@ -119,7 +119,7 @@ class HaBackupAgentsPicker extends LitElement {
       display: flex;
       flex-direction: row;
       align-items: center;
-      gap: 16px;
+      gap: var(--ha-space-4);
       font-size: var(--ha-font-size-l);
       font-weight: var(--ha-font-weight-normal);
       line-height: var(--ha-line-height-normal);
diff --git a/src/panels/config/backup/components/ha-backup-details-restore.ts b/src/panels/config/backup/components/ha-backup-details-restore.ts
index f7da7cf38a..bdc1cd1999 100644
--- a/src/panels/config/backup/components/ha-backup-details-restore.ts
+++ b/src/panels/config/backup/components/ha-backup-details-restore.ts
@@ -110,7 +110,7 @@ class HaBackupDetailsRestore extends LitElement {
       max-width: 690px;
       width: 100%;
       margin: 0 auto;
-      gap: 24px;
+      gap: var(--ha-space-6);
       display: grid;
     }
     .card-content {
@@ -133,7 +133,7 @@ class HaBackupDetailsRestore extends LitElement {
       display: flex;
       align-items: center;
       flex-direction: row;
-      gap: 8px;
+      gap: var(--ha-space-2);
       line-height: var(--ha-line-height-condensed);
     }
   `;
diff --git a/src/panels/config/backup/components/ha-backup-details-summary.ts b/src/panels/config/backup/components/ha-backup-details-summary.ts
index 89f69bc5df..75a781a546 100644
--- a/src/panels/config/backup/components/ha-backup-details-summary.ts
+++ b/src/panels/config/backup/components/ha-backup-details-summary.ts
@@ -138,7 +138,7 @@ class HaBackupDetailsSummary extends LitElement {
       max-width: 690px;
       width: 100%;
       margin: 0 auto;
-      gap: 24px;
+      gap: var(--ha-space-6);
       display: grid;
     }
     .card-content {
@@ -168,7 +168,7 @@ class HaBackupDetailsSummary extends LitElement {
       display: flex;
       align-items: center;
       flex-direction: row;
-      gap: 8px;
+      gap: var(--ha-space-2);
       line-height: var(--ha-line-height-condensed);
     }
   `;
diff --git a/src/panels/config/backup/components/ha-backup-formfield-label.ts b/src/panels/config/backup/components/ha-backup-formfield-label.ts
index 87be97d213..28f3a2632a 100644
--- a/src/panels/config/backup/components/ha-backup-formfield-label.ts
+++ b/src/panels/config/backup/components/ha-backup-formfield-label.ts
@@ -35,7 +35,7 @@ class SupervisorFormfieldLabel extends LitElement {
     :host {
       display: flex;
       flex-direction: row;
-      gap: 16px;
+      gap: var(--ha-space-4);
       align-items: center;
     }
     .label {
diff --git a/src/panels/config/backup/components/ha-backup-summary-card.ts b/src/panels/config/backup/components/ha-backup-summary-card.ts
index 458e31bd2c..482ef9e5b9 100644
--- a/src/panels/config/backup/components/ha-backup-summary-card.ts
+++ b/src/panels/config/backup/components/ha-backup-summary-card.ts
@@ -74,8 +74,8 @@ class HaBackupSummaryCard extends LitElement {
     .summary {
       display: flex;
       flex-direction: row;
-      column-gap: 16px;
-      row-gap: 8px;
+      column-gap: var(--ha-space-4);
+      row-gap: var(--ha-space-2);
       align-items: center;
       padding: 16px;
       padding-bottom: 8px;
diff --git a/src/panels/config/backup/components/overview/ha-backup-overview-backups.ts b/src/panels/config/backup/components/overview/ha-backup-overview-backups.ts
index f3e8f90832..0891ac4965 100644
--- a/src/panels/config/backup/components/overview/ha-backup-overview-backups.ts
+++ b/src/panels/config/backup/components/overview/ha-backup-overview-backups.ts
@@ -117,7 +117,7 @@ class HaBackupOverviewBackups extends LitElement {
           padding: 28px 20px 0;
           max-width: 690px;
           margin: 0 auto;
-          gap: 24px;
+          gap: var(--ha-space-6);
           display: flex;
           flex-direction: column;
           margin-bottom: calc(72px + var(--safe-area-inset-bottom));
diff --git a/src/panels/config/backup/components/overview/ha-backup-overview-onboarding.ts b/src/panels/config/backup/components/overview/ha-backup-overview-onboarding.ts
index 277c12a8d1..632b61cbf9 100644
--- a/src/panels/config/backup/components/overview/ha-backup-overview-onboarding.ts
+++ b/src/panels/config/backup/components/overview/ha-backup-overview-onboarding.ts
@@ -61,7 +61,7 @@ class HaBackupOverviewBackups extends LitElement {
           display: flex;
           flex-direction: row;
           align-items: center;
-          gap: 16px;
+          gap: var(--ha-space-4);
         }
         .icon {
           position: relative;
diff --git a/src/panels/config/backup/components/overview/ha-backup-overview-settings.ts b/src/panels/config/backup/components/overview/ha-backup-overview-settings.ts
index d38bc0a691..ae7eb76bef 100644
--- a/src/panels/config/backup/components/overview/ha-backup-overview-settings.ts
+++ b/src/panels/config/backup/components/overview/ha-backup-overview-settings.ts
@@ -303,7 +303,7 @@ class HaBackupBackupsSummary extends LitElement {
           padding: 28px 20px 0;
           max-width: 690px;
           margin: 0 auto;
-          gap: 24px;
+          gap: var(--ha-space-6);
           display: flex;
           flex-direction: column;
           margin-bottom: 24px;
diff --git a/src/panels/config/backup/components/overview/ha-backup-overview-summary.ts b/src/panels/config/backup/components/overview/ha-backup-overview-summary.ts
index 7488440e5d..985545f82a 100644
--- a/src/panels/config/backup/components/overview/ha-backup-overview-summary.ts
+++ b/src/panels/config/backup/components/overview/ha-backup-overview-summary.ts
@@ -334,7 +334,7 @@ class HaBackupOverviewBackups extends LitElement {
           display: flex;
           flex-direction: row;
           align-items: center;
-          gap: 16px;
+          gap: var(--ha-space-4);
         }
         p {
           margin: 0;
diff --git a/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts b/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts
index 4fa015dafd..db710193ca 100644
--- a/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts
+++ b/src/panels/config/backup/dialogs/dialog-backup-onboarding.ts
@@ -579,7 +579,7 @@ class DialogBackupOnboarding extends LitElement implements HassDialog {
           display: flex;
           flex-direction: row;
           align-items: center;
-          gap: 24px;
+          gap: var(--ha-space-6);
         }
         .encryption-key p {
           margin: 0;
diff --git a/src/panels/config/backup/dialogs/dialog-change-backup-encryption-key.ts b/src/panels/config/backup/dialogs/dialog-change-backup-encryption-key.ts
index ec05e567ed..bc1e5143c2 100644
--- a/src/panels/config/backup/dialogs/dialog-change-backup-encryption-key.ts
+++ b/src/panels/config/backup/dialogs/dialog-change-backup-encryption-key.ts
@@ -305,7 +305,7 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
           display: flex;
           flex-direction: row;
           align-items: center;
-          gap: 24px;
+          gap: var(--ha-space-6);
         }
         .encryption-key p {
           margin: 0;
diff --git a/src/panels/config/backup/dialogs/dialog-set-backup-encryption-key.ts b/src/panels/config/backup/dialogs/dialog-set-backup-encryption-key.ts
index ee6423b38f..084471af4a 100644
--- a/src/panels/config/backup/dialogs/dialog-set-backup-encryption-key.ts
+++ b/src/panels/config/backup/dialogs/dialog-set-backup-encryption-key.ts
@@ -231,7 +231,7 @@ class DialogSetBackupEncryptionKey extends LitElement implements HassDialog {
           display: flex;
           flex-direction: row;
           align-items: center;
-          gap: 24px;
+          gap: var(--ha-space-6);
         }
         .encryption-key p {
           margin: 0;
diff --git a/src/panels/config/backup/dialogs/dialog-show-backup-encryption-key.ts b/src/panels/config/backup/dialogs/dialog-show-backup-encryption-key.ts
index 0f9a2df226..df253c31bb 100644
--- a/src/panels/config/backup/dialogs/dialog-show-backup-encryption-key.ts
+++ b/src/panels/config/backup/dialogs/dialog-show-backup-encryption-key.ts
@@ -153,7 +153,7 @@ class DialogShowBackupEncryptionKey extends LitElement implements HassDialog {
           display: flex;
           flex-direction: row;
           align-items: center;
-          gap: 24px;
+          gap: var(--ha-space-6);
         }
         .encryption-key p {
           margin: 0;
diff --git a/src/panels/config/backup/ha-config-backup-backups.ts b/src/panels/config/backup/ha-config-backup-backups.ts
index 7a93ed8d34..932559d775 100644
--- a/src/panels/config/backup/ha-config-backup-backups.ts
+++ b/src/panels/config/backup/ha-config-backup-backups.ts
@@ -189,7 +189,7 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
             0
           );
           return html`
-            <div style="display: flex; gap: 4px;">
+            <div style="display: flex; gap: var(--ha-space-1);">
               ${displayedAgentIds.map((agentId) => {
                 const name = computeBackupAgentName(
                   this.hass.localize,
diff --git a/src/panels/config/backup/ha-config-backup-details.ts b/src/panels/config/backup/ha-config-backup-details.ts
index ae308a4c42..65167d8236 100644
--- a/src/panels/config/backup/ha-config-backup-details.ts
+++ b/src/panels/config/backup/ha-config-backup-details.ts
@@ -356,7 +356,7 @@ class HaConfigBackupDetails extends LitElement {
       padding: 28px 20px 0;
       max-width: 690px;
       margin: 0 auto;
-      gap: 24px;
+      gap: var(--ha-space-6);
       display: grid;
       margin-bottom: 24px;
     }
@@ -399,7 +399,7 @@ class HaConfigBackupDetails extends LitElement {
       display: flex;
       align-items: center;
       flex-direction: row;
-      gap: 8px;
+      gap: var(--ha-space-2);
       line-height: var(--ha-line-height-condensed);
     }
     .dot {
diff --git a/src/panels/config/backup/ha-config-backup-location.ts b/src/panels/config/backup/ha-config-backup-location.ts
index ebe0c44d13..556d032cf3 100644
--- a/src/panels/config/backup/ha-config-backup-location.ts
+++ b/src/panels/config/backup/ha-config-backup-location.ts
@@ -326,7 +326,7 @@ class HaConfigBackupDetails extends LitElement {
       padding: 28px 20px 0;
       max-width: 690px;
       margin: 0 auto;
-      gap: 24px;
+      gap: var(--ha-space-6);
       display: grid;
       margin-bottom: 24px;
     }
@@ -376,7 +376,7 @@ class HaConfigBackupDetails extends LitElement {
       display: flex;
       align-items: center;
       flex-direction: row;
-      gap: 8px;
+      gap: var(--ha-space-2);
       line-height: var(--ha-line-height-condensed);
     }
     .dot {
diff --git a/src/panels/config/backup/ha-config-backup-overview.ts b/src/panels/config/backup/ha-config-backup-overview.ts
index 6e37724882..d8bcf680bf 100644
--- a/src/panels/config/backup/ha-config-backup-overview.ts
+++ b/src/panels/config/backup/ha-config-backup-overview.ts
@@ -248,7 +248,7 @@ class HaConfigBackupOverview extends LitElement {
           padding: 28px 20px 0;
           max-width: 690px;
           margin: 0 auto;
-          gap: 24px;
+          gap: var(--ha-space-6);
           display: flex;
           flex-direction: column;
           margin-bottom: calc(var(--safe-area-inset-bottom) + 72px);
diff --git a/src/panels/config/backup/ha-config-backup-settings.ts b/src/panels/config/backup/ha-config-backup-settings.ts
index 733df1146d..9a91f5e9a2 100644
--- a/src/panels/config/backup/ha-config-backup-settings.ts
+++ b/src/panels/config/backup/ha-config-backup-settings.ts
@@ -510,7 +510,7 @@ class HaConfigBackupSettings extends LitElement {
       padding: 28px 20px 0;
       max-width: 690px;
       margin: 0 auto;
-      gap: 24px;
+      gap: var(--ha-space-6);
       display: flex;
       flex-direction: column;
       margin-bottom: 24px;
@@ -532,7 +532,7 @@ class HaConfigBackupSettings extends LitElement {
     }
     .cloud-info .cloud-header {
       display: flex;
-      gap: 16px;
+      gap: var(--ha-space-4);
       font-size: var(--ha-font-size-xl);
       align-items: center;
       padding: 16px;
diff --git a/src/panels/config/cloud/account/dialog-cloud-support-package.ts b/src/panels/config/cloud/account/dialog-cloud-support-package.ts
index e5b7148d24..eb43588f46 100644
--- a/src/panels/config/cloud/account/dialog-cloud-support-package.ts
+++ b/src/panels/config/cloud/account/dialog-cloud-support-package.ts
@@ -129,7 +129,7 @@ export class DialogSupportPackage extends LitElement {
     }
     .actions {
       display: flex;
-      gap: 8px;
+      gap: var(--ha-space-2);
       justify-content: flex-end;
     }
     hr {
diff --git a/src/panels/config/dashboard/dashboard-card.ts b/src/panels/config/dashboard/dashboard-card.ts
index 663500dc33..9ce1c30ff1 100644
--- a/src/panels/config/dashboard/dashboard-card.ts
+++ b/src/panels/config/dashboard/dashboard-card.ts
@@ -59,7 +59,7 @@ export class DashboardCard extends LitElement {
       padding: 12px;
       display: block;
       text-align: var(--float-start);
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
     .preview {
       padding: 16px;
diff --git a/src/panels/config/integrations/ha-config-integration-page.ts b/src/panels/config/integrations/ha-config-integration-page.ts
index 69eb69561b..805abec4f3 100644
--- a/src/panels/config/integrations/ha-config-integration-page.ts
+++ b/src/panels/config/integrations/ha-config-integration-page.ts
@@ -921,7 +921,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
         .header {
           display: flex;
           flex-wrap: wrap;
-          gap: 24px;
+          gap: var(--ha-space-6);
           align-items: center;
           justify-content: space-between;
           margin-bottom: 24px;
@@ -932,7 +932,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
         }
         .title {
           display: flex;
-          gap: 4px;
+          gap: var(--ha-space-1);
           flex-direction: column;
           justify-content: space-between;
         }
@@ -991,7 +991,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
         .actions {
           display: flex;
           flex-wrap: wrap;
-          gap: 8px;
+          gap: var(--ha-space-2);
         }
         .section {
           width: 100%;
@@ -1013,7 +1013,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
         .integration-info {
           display: flex;
           align-items: center;
-          gap: 8px;
+          gap: var(--ha-space-2);
         }
         .integration-info ha-svg-icon {
           min-width: 24px;
diff --git a/src/panels/config/integrations/ha-config-integrations-dashboard.ts b/src/panels/config/integrations/ha-config-integrations-dashboard.ts
index 4dd2365327..b15fdd416a 100644
--- a/src/panels/config/integrations/ha-config-integrations-dashboard.ts
+++ b/src/panels/config/integrations/ha-config-integrations-dashboard.ts
@@ -1013,7 +1013,7 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin(
           z-index: 2;
           background-color: var(--primary-background-color);
           padding: 0 16px;
-          gap: 16px;
+          gap: var(--ha-space-4);
           box-sizing: border-box;
           border-bottom: 1px solid var(--divider-color);
         }
diff --git a/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-new.ts b/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-new.ts
index 006450d239..3ba36cdf4b 100644
--- a/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-new.ts
+++ b/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-new.ts
@@ -91,7 +91,7 @@ class MatterAddDeviceNew extends LitElement {
         justify-content: space-between;
         padding: 0 24px;
         box-sizing: border-box;
-        gap: 16px;
+        gap: var(--ha-space-4);
         width: 100%;
         max-width: 400px;
       }
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/capability-controls/zwave_js-capability-control-thermostat-setback.ts b/src/panels/config/integrations/integration-panels/zwave_js/capability-controls/zwave_js-capability-control-thermostat-setback.ts
index 784a4b8e07..6712a50500 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/capability-controls/zwave_js-capability-control-thermostat-setback.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/capability-controls/zwave_js-capability-control-thermostat-setback.ts
@@ -209,7 +209,7 @@ class ZWaveJSCapabilityThermostatSetback extends LitElement {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
-      gap: 16px;
+      gap: var(--ha-space-4);
     }
     :host > ha-select {
       width: 100%;
@@ -225,7 +225,7 @@ class ZWaveJSCapabilityThermostatSetback extends LitElement {
     .setback-state {
       width: 100%;
       display: flex;
-      gap: 16px;
+      gap: var(--ha-space-4);
     }
     .setback-state ha-select,
     ha-textfield {
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts
index 1a376ca857..e983d1297e 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts
@@ -362,7 +362,7 @@ class DialogZWaveJSRemoveNode extends LitElement {
           display: flex;
           align-items: center;
           flex-direction: column;
-          gap: 16px;
+          gap: var(--ha-space-4);
           text-align: center;
         }
 
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts
index 284415a657..563ec754e5 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts
@@ -997,7 +997,7 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
 
         .right-buttons {
           display: flex;
-          gap: 8px;
+          gap: var(--ha-space-2);
           margin-left: auto;
         }
 
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-custom-param.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-custom-param.ts
index 5cd52ee1b4..948864acf0 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-custom-param.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-custom-param.ts
@@ -224,7 +224,7 @@ class ZWaveJSCustomParam extends LitElement {
     .custom-config-form {
       display: flex;
       flex-wrap: wrap;
-      gap: 16px;
+      gap: var(--ha-space-4);
       margin-bottom: 8px;
     }
 
diff --git a/src/panels/config/logs/dialog-download-logs.ts b/src/panels/config/logs/dialog-download-logs.ts
index de616b39d7..e651c3cd9f 100644
--- a/src/panels/config/logs/dialog-download-logs.ts
+++ b/src/panels/config/logs/dialog-download-logs.ts
@@ -141,7 +141,7 @@ class DownloadLogsDialog extends LitElement {
           display: flex;
           flex-direction: column;
           align-items: center;
-          gap: 8px;
+          gap: var(--ha-space-2);
         }
       `,
     ];
diff --git a/src/panels/config/network/ha-config-url-form.ts b/src/panels/config/network/ha-config-url-form.ts
index 2ca71d860c..85dce96d12 100644
--- a/src/panels/config/network/ha-config-url-form.ts
+++ b/src/panels/config/network/ha-config-url-form.ts
@@ -444,7 +444,7 @@ class ConfigUrlForm extends SubscribeMixin(LitElement) {
     .url-container {
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
       margin-top: 8px;
     }
     .textfield-container {
diff --git a/src/panels/config/network/supervisor-network.ts b/src/panels/config/network/supervisor-network.ts
index c8eddc5445..0f1d0ac7e5 100644
--- a/src/panels/config/network/supervisor-network.ts
+++ b/src/panels/config/network/supervisor-network.ts
@@ -803,7 +803,7 @@ export class HassioNetwork extends LitElement {
         .address-row {
           display: flex;
           flex-direction: row;
-          gap: 8px;
+          gap: var(--ha-space-2);
           align-items: center;
         }
         .address-row ha-textfield {
diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts
index 566e6e18b1..be32bda328 100644
--- a/src/panels/config/script/ha-script-editor.ts
+++ b/src/panels/config/script/ha-script-editor.ts
@@ -1197,7 +1197,7 @@ export class HaScriptEditor extends UndoRedoMixin<
           display: flex;
           flex-direction: column;
           align-items: center;
-          gap: 8px;
+          gap: var(--ha-space-2);
           pointer-events: none;
         }
 
diff --git a/src/panels/config/voice-assistants/cloud-discover.ts b/src/panels/config/voice-assistants/cloud-discover.ts
index 13f323964f..78ec4fd827 100644
--- a/src/panels/config/voice-assistants/cloud-discover.ts
+++ b/src/panels/config/voice-assistants/cloud-discover.ts
@@ -145,7 +145,7 @@ export class CloudDiscover extends LitElement {
     .features {
       display: grid;
       grid-template-columns: auto;
-      grid-gap: 16px;
+      grid-gap: var(--ha-space-4);
       padding: 16px;
     }
     @media (min-width: 600px) {
diff --git a/src/panels/config/voice-assistants/debug/assist-pipeline-run-debug.ts b/src/panels/config/voice-assistants/debug/assist-pipeline-run-debug.ts
index 43359df353..8dca4e4097 100644
--- a/src/panels/config/voice-assistants/debug/assist-pipeline-run-debug.ts
+++ b/src/panels/config/voice-assistants/debug/assist-pipeline-run-debug.ts
@@ -470,7 +470,7 @@ export class AssistPipelineRunDebug extends LitElement {
       .start-buttons {
         display: flex;
         flex-wrap: wrap;
-        gap: 8px;
+        gap: var(--ha-space-2);
         align-items: center;
         justify-content: center;
       }
diff --git a/src/panels/developer-tools/event/developer-tools-event.ts b/src/panels/developer-tools/event/developer-tools-event.ts
index 9ee837f74e..0d437b1904 100644
--- a/src/panels/developer-tools/event/developer-tools-event.ts
+++ b/src/panels/developer-tools/event/developer-tools-event.ts
@@ -146,7 +146,7 @@ class HaPanelDevEvent extends LitElement {
       haStyle,
       css`
         .content {
-          gap: 16px;
+          gap: var(--ha-space-4);
           padding: 16px;
           max-width: 1200px;
           margin: auto;
diff --git a/src/panels/developer-tools/state/developer-tools-state.ts b/src/panels/developer-tools/state/developer-tools-state.ts
index 5a9f170c6b..d2d80b32c3 100644
--- a/src/panels/developer-tools/state/developer-tools-state.ts
+++ b/src/panels/developer-tools/state/developer-tools-state.ts
@@ -542,7 +542,7 @@ class HaPanelDevState extends LitElement {
           --mdc-icon-button-size: 24px;
           display: flex;
           align-items: center;
-          gap: 8px;
+          gap: var(--ha-space-2);
         }
 
         .entity-id ha-icon-button {
@@ -581,7 +581,7 @@ class HaPanelDevState extends LitElement {
           display: flex;
           margin: 8px 0;
           align-items: center;
-          gap: 8px;
+          gap: var(--ha-space-2);
         }
 
         :host([narrow]) .state-wrapper {
diff --git a/src/panels/developer-tools/statistics/developer-tools-statistics.ts b/src/panels/developer-tools/statistics/developer-tools-statistics.ts
index 94df844329..05dbd2fcb8 100644
--- a/src/panels/developer-tools/statistics/developer-tools-statistics.ts
+++ b/src/panels/developer-tools/statistics/developer-tools-statistics.ts
@@ -714,7 +714,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
           height: 100%;
           display: flex;
           flex-direction: column;
-          gap: 8px;
+          gap: var(--ha-space-2);
         }
         ha-data-table {
           width: 100%;
@@ -733,7 +733,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
           width: 100%;
           justify-content: space-between;
           padding: 0 16px;
-          gap: 16px;
+          gap: var(--ha-space-4);
           box-sizing: border-box;
           background: var(--primary-background-color);
           border-bottom: 1px solid var(--divider-color);
@@ -750,7 +750,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
         .narrow-header-row {
           display: flex;
           align-items: center;
-          gap: 16px;
+          gap: var(--ha-space-4);
           padding: 0 16px;
           overflow-x: scroll;
           -ms-overflow-style: none;
@@ -772,7 +772,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
         .selection-controls {
           display: flex;
           align-items: center;
-          gap: 8px;
+          gap: var(--ha-space-2);
         }
 
         .selection-controls p {
@@ -784,7 +784,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
         .center-vertical {
           display: flex;
           align-items: center;
-          gap: 8px;
+          gap: var(--ha-space-2);
         }
 
         .relative {
diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts
index 18b8682c2f..c0a6528b49 100644
--- a/src/panels/developer-tools/template/developer-tools-template.ts
+++ b/src/panels/developer-tools/template/developer-tools-template.ts
@@ -274,7 +274,7 @@ ${type === "object"
         }
 
         .content {
-          gap: 16px;
+          gap: var(--ha-space-4);
           padding: 16px;
         }
 
diff --git a/src/panels/lovelace/badges/hui-view-badges.ts b/src/panels/lovelace/badges/hui-view-badges.ts
index 14bc4f1ae7..f443b99adc 100644
--- a/src/panels/lovelace/badges/hui-view-badges.ts
+++ b/src/panels/lovelace/badges/hui-view-badges.ts
@@ -202,7 +202,7 @@ export class HuiViewBadges extends LitElement {
       align-items: flex-start;
       flex-wrap: var(--badges-wrap, wrap);
       justify-content: var(--badges-aligmnent, center);
-      gap: 8px;
+      gap: var(--ha-space-2);
       margin: 0;
     }
 
@@ -244,7 +244,7 @@ export class HuiViewBadges extends LitElement {
       flex-direction: row;
       align-items: center;
       outline: none;
-      gap: 8px;
+      gap: var(--ha-space-2);
       height: 36px;
       padding: 6px 20px 6px 20px;
       box-sizing: border-box;
diff --git a/src/panels/lovelace/card-features/hui-lock-open-door-card-feature.ts b/src/panels/lovelace/card-features/hui-lock-open-door-card-feature.ts
index 194f198426..1fc029c175 100644
--- a/src/panels/lovelace/card-features/hui-lock-open-door-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-lock-open-door-card-feature.ts
@@ -150,7 +150,7 @@ class HuiLockOpenDoorCardFeature
           align-items: center;
           justify-content: center;
           flex-direction: row;
-          gap: 8px;
+          gap: var(--ha-space-2);
           font-weight: var(--ha-font-weight-medium);
           color: var(--success-color);
           margin: 0 12px 12px 12px;
diff --git a/src/panels/lovelace/cards/hui-alarm-panel-card.ts b/src/panels/lovelace/cards/hui-alarm-panel-card.ts
index 5f89e76c35..d3a40a46e4 100644
--- a/src/panels/lovelace/cards/hui-alarm-panel-card.ts
+++ b/src/panels/lovelace/cards/hui-alarm-panel-card.ts
@@ -425,7 +425,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
       display: grid;
       grid-template-columns: repeat(var(--keypad-columns), auto);
       grid-auto-rows: auto;
-      grid-gap: 16px;
+      grid-gap: var(--ha-space-4);
       justify-items: center;
       align-items: center;
     }
diff --git a/src/panels/lovelace/cards/hui-area-card.ts b/src/panels/lovelace/cards/hui-area-card.ts
index 8e60db2d83..e019fa8da3 100644
--- a/src/panels/lovelace/cards/hui-area-card.ts
+++ b/src/panels/lovelace/cards/hui-area-card.ts
@@ -747,7 +747,7 @@ export class HuiAreaCard extends LitElement implements LovelaceCard {
       left: 0;
       display: flex;
       flex-direction: row;
-      gap: 8px;
+      gap: var(--ha-space-2);
       padding: 8px;
       pointer-events: none;
       z-index: 1;
diff --git a/src/panels/lovelace/cards/hui-clock-card.ts b/src/panels/lovelace/cards/hui-clock-card.ts
index c254b7b30a..4fd3a8d363 100644
--- a/src/panels/lovelace/cards/hui-clock-card.ts
+++ b/src/panels/lovelace/cards/hui-clock-card.ts
@@ -159,7 +159,7 @@ export class HuiClockCard extends LitElement implements LovelaceCard {
     .time-wrapper.size-large {
       height: calc(100% - 32px);
       padding: 16px;
-      row-gap: 12px;
+      row-gap: var(--ha-space-3);
     }
 
     .time-title {
diff --git a/src/panels/lovelace/cards/hui-error-card.ts b/src/panels/lovelace/cards/hui-error-card.ts
index 26d72284d6..7bc717f32d 100644
--- a/src/panels/lovelace/cards/hui-error-card.ts
+++ b/src/panels/lovelace/cards/hui-error-card.ts
@@ -88,7 +88,7 @@ export class HuiErrorCard extends LitElement implements LovelaceCard {
     .header {
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
       padding: 16px;
     }
     .message {
diff --git a/src/panels/lovelace/cards/hui-heading-card.ts b/src/panels/lovelace/cards/hui-heading-card.ts
index 29db2c7e57..f8553d4669 100644
--- a/src/panels/lovelace/cards/hui-heading-card.ts
+++ b/src/panels/lovelace/cards/hui-heading-card.ts
@@ -154,7 +154,7 @@ export class HuiHeadingCard extends LitElement implements LovelaceCard {
       justify-content: space-between;
       align-items: center;
       overflow: hidden;
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
     .content:hover ha-icon-next {
       transform: translateX(calc(4px * var(--scale-direction)));
@@ -173,7 +173,7 @@ export class HuiHeadingCard extends LitElement implements LovelaceCard {
       display: flex;
       flex-direction: row;
       align-items: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
       color: var(--ha-heading-card-title-color, var(--primary-text-color));
       font-size: var(--ha-heading-card-title-font-size, var(--ha-font-size-l));
       font-weight: var(
diff --git a/src/panels/lovelace/editor/badge-editor/hui-dialog-suggest-badge.ts b/src/panels/lovelace/editor/badge-editor/hui-dialog-suggest-badge.ts
index cf90884686..163e99b03b 100644
--- a/src/panels/lovelace/editor/badge-editor/hui-dialog-suggest-badge.ts
+++ b/src/panels/lovelace/editor/badge-editor/hui-dialog-suggest-badge.ts
@@ -148,7 +148,7 @@ export class HuiDialogSuggestBadge extends LitElement {
           align-items: flex-start;
           flex-wrap: wrap;
           justify-content: center;
-          gap: 8px;
+          gap: var(--ha-space-2);
           margin: 0;
         }
         .editor {
diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
index c2f17fdc33..4aa4aafcd4 100644
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
@@ -504,7 +504,7 @@ export class HuiDialogEditCard
         }
 
         [slot="primaryAction"] {
-          gap: 8px;
+          gap: var(--ha-space-2);
           display: flex;
         }
       `,
diff --git a/src/panels/lovelace/views/hui-sections-view.ts b/src/panels/lovelace/views/hui-sections-view.ts
index 95db6c4da5..3c9fd53bf3 100644
--- a/src/panels/lovelace/views/hui-sections-view.ts
+++ b/src/panels/lovelace/views/hui-sections-view.ts
@@ -513,7 +513,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
       --mdc-icon-size: 18px;
       display: flex;
       align-items: center;
-      gap: 12px;
+      gap: var(--ha-space-3);
       margin-bottom: 8px;
     }
     .imported-card-header .subtitle {
diff --git a/src/panels/lovelace/views/hui-view-header.ts b/src/panels/lovelace/views/hui-view-header.ts
index c621784c9c..a0e45d67e9 100644
--- a/src/panels/lovelace/views/hui-view-header.ts
+++ b/src/panels/lovelace/views/hui-view-header.ts
@@ -464,7 +464,7 @@ export class HuiViewHeader extends LitElement {
       flex-direction: row;
       align-items: center;
       outline: none;
-      gap: 8px;
+      gap: var(--ha-space-2);
       height: 36px;
       padding: 6px 20px 6px 20px;
       box-sizing: border-box;
diff --git a/src/resources/theme/core.globals.ts b/src/resources/theme/core.globals.ts
index 16b91124a8..4d2a066e19 100644
--- a/src/resources/theme/core.globals.ts
+++ b/src/resources/theme/core.globals.ts
@@ -19,6 +19,29 @@ export const coreStyles = css`
     --ha-border-radius-pill: 9999px;
     --ha-border-radius-circle: 50%;
     --ha-border-radius-square: 0;
+      
+    # Spacing
+    --ha-space-0: 0px;
+    --ha-space-1: 4px;
+    --ha-space-2: 8px;
+    --ha-space-3: 12px;
+    --ha-space-4: 16px;
+    --ha-space-5: 20px;
+    --ha-space-6: 24px;
+    --ha-space-7: 28px;
+    --ha-space-8: 32px;
+    --ha-space-9: 36px;
+    --ha-space-10: 40px;
+    --ha-space-11: 44px;
+    --ha-space-12: 48px;
+    --ha-space-13: 44px;
+    --ha-space-14: 56px;
+    --ha-space-15: 60px;
+    --ha-space-16: 64px;
+    --ha-space-17: 68px;
+    --ha-space-18: 72px;
+    --ha-space-19: 76px;
+    --ha-space-20: 80px;
   }
 `;
 
diff --git a/src/state-control/climate/ha-state-control-climate-temperature.ts b/src/state-control/climate/ha-state-control-climate-temperature.ts
index a3317dfde3..8af23ed6a4 100644
--- a/src/state-control/climate/ha-state-control-climate-temperature.ts
+++ b/src/state-control/climate/ha-state-control-climate-temperature.ts
@@ -537,7 +537,7 @@ export class HaStateControlClimateTemperature extends LitElement {
         .dual {
           display: flex;
           flex-direction: row;
-          gap: 24px;
+          gap: var(--ha-space-6);
         }
         .target-button {
           outline: none;
@@ -562,11 +562,11 @@ export class HaStateControlClimateTemperature extends LitElement {
           opacity: 1;
         }
         .container.md .dual {
-          gap: 16px;
+          gap: var(--ha-space-4);
         }
         .container.sm .dual,
         .container.xs .dual {
-          gap: 8px;
+          gap: var(--ha-space-2);
         }
         .container.sm .target-icon {
           display: none;
diff --git a/src/state-control/state-control-circular-slider-style.ts b/src/state-control/state-control-circular-slider-style.ts
index 23d27f6eac..33ce689642 100644
--- a/src/state-control/state-control-circular-slider-style.ts
+++ b/src/state-control/state-control-circular-slider-style.ts
@@ -26,7 +26,7 @@ export const stateControlCircularSliderStyle = css`
     font-size: var(--ha-font-size-l);
     line-height: var(--ha-line-height-normal);
     letter-spacing: 0.1px;
-    gap: 8px;
+    gap: var(--ha-space-2);
     --mdc-icon-size: 16px;
   }
   .info * {
@@ -61,7 +61,7 @@ export const stateControlCircularSliderStyle = css`
     left: 0;
     right: 0;
     margin: 0 auto;
-    gap: 24px;
+    gap: var(--ha-space-6);
     display: flex;
     flex-direction: row;
     align-items: center;