diff --git a/packages/grafana-ui/src/components/FormField/_FormField.scss b/packages/grafana-ui/src/components/FormField/_FormField.scss
index 36955e2fca6..0c69e67f82a 100644
--- a/packages/grafana-ui/src/components/FormField/_FormField.scss
+++ b/packages/grafana-ui/src/components/FormField/_FormField.scss
@@ -1,5 +1,5 @@
 .form-field {
-  margin-bottom: $gf-form-margin;
+  margin-bottom: $space-xxs;
   display: flex;
   flex-direction: row;
   align-items: center;
diff --git a/packages/grafana-ui/src/components/Select/_Select.scss b/packages/grafana-ui/src/components/Select/_Select.scss
index bc18ed9d369..f0270b1422e 100644
--- a/packages/grafana-ui/src/components/Select/_Select.scss
+++ b/packages/grafana-ui/src/components/Select/_Select.scss
@@ -3,7 +3,7 @@ $select-input-bg-disabled: $input-bg-disabled;
 
 @mixin select-control() {
   width: 100%;
-  margin-right: $gf-form-margin;
+  margin-right: $space-xs;
   @include border-radius($input-border-radius-sm);
   background-color: $input-bg;
 }
diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
index 4e4031a0414..f56b4e6d90d 100644
--- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
@@ -17,6 +17,7 @@ $enable-hover-media-query: false !default;
 // Control the default styling of most Bootstrap elements by modifying these
 // variables. Mostly focused on spacing.
 
+$space-xxs: ${theme.spacing.xxs} !default;
 $space-xs: ${theme.spacing.xs} !default;
 $space-sm: ${theme.spacing.s} !default;
 $space-md: ${theme.spacing.m} !default;
@@ -164,7 +165,6 @@ $input-padding-y-lg: 10px !default;
 
 $input-height: 35px !default;
 
-$gf-form-margin: 3px;
 $gf-form-input-height: 35px;
 
 $cursor-disabled: not-allowed !default;
diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts
index 6559f6a8fe8..4fb11a213aa 100644
--- a/packages/grafana-ui/src/themes/default.ts
+++ b/packages/grafana-ui/src/themes/default.ts
@@ -44,6 +44,7 @@ const theme: GrafanaThemeCommons = {
   },
   spacing: {
     d: '14px',
+    xxs: '2px',
     xs: '4px',
     s: '8px',
     m: '16px',
diff --git a/packages/grafana-ui/src/types/theme.ts b/packages/grafana-ui/src/types/theme.ts
index 469408942d7..6c1e7912850 100644
--- a/packages/grafana-ui/src/types/theme.ts
+++ b/packages/grafana-ui/src/types/theme.ts
@@ -49,6 +49,7 @@ export interface GrafanaThemeCommons {
   };
   spacing: {
     d: string;
+    xxs: string;
     xs: string;
     s: string;
     m: string;
diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss
index 63212141bad..75d033fcf87 100644
--- a/public/sass/_variables.generated.scss
+++ b/public/sass/_variables.generated.scss
@@ -20,6 +20,7 @@ $enable-hover-media-query: false !default;
 // Control the default styling of most Bootstrap elements by modifying these
 // variables. Mostly focused on spacing.
 
+$space-xxs: 2px !default;
 $space-xs: 4px !default;
 $space-sm: 8px !default;
 $space-md: 16px !default;
@@ -167,7 +168,6 @@ $input-padding-y-lg: 10px !default;
 
 $input-height: 35px !default;
 
-$gf-form-margin: 3px;
 $gf-form-input-height: 35px;
 
 $cursor-disabled: not-allowed !default;
diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss
index 3cb7acb08f0..6cf32687188 100644
--- a/public/sass/base/_type.scss
+++ b/public/sass/base/_type.scss
@@ -109,7 +109,7 @@ h6,
 .h4,
 .h5,
 .h6 {
-  margin-bottom: $space-s;
+  margin-bottom: $space-sm;
   font-family: $headings-font-family;
   font-weight: $headings-font-weight;
   line-height: $headings-line-height;
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index c341c686143..2eccdd52e8b 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -1,8 +1,7 @@
-$gf-form-margin: 3px;
 $input-border: 1px solid $input-border-color;
 
 .gf-form {
-  margin-bottom: $gf-form-margin;
+  margin-bottom: $space-xxs;
   display: flex;
   flex-direction: row;
   align-items: flex-start;
@@ -33,7 +32,7 @@ $input-border: 1px solid $input-border-color;
 
 .gf-form--has-input-icon {
   position: relative;
-  margin-right: $gf-form-margin;
+  margin-right: $space-xs;
 
   .gf-form-input-icon {
     position: absolute;
@@ -82,7 +81,7 @@ $input-border: 1px solid $input-border-color;
   align-content: flex-start;
 
   .gf-form + .gf-form {
-    margin-left: $gf-form-margin;
+    margin-left: $space-xs;
   }
 
   &--nowrap {
@@ -147,14 +146,14 @@ $input-border: 1px solid $input-border-color;
 }
 
 .gf-form-label + .gf-form-label {
-  margin-right: $gf-form-margin;
+  margin-right: $space-xs;
 }
 
 .gf-form-pre {
   display: block;
   flex-grow: 1;
   margin: 0;
-  margin-right: $gf-form-margin;
+  margin-right: $space-xs;
   border: $input-btn-border-width solid transparent;
   border-left: none;
   @include border-radius($label-border-radius-sm);
@@ -336,7 +335,7 @@ $input-border: 1px solid $input-border-color;
 
 .gf-form-btn {
   padding: $input-padding-y $input-padding-x;
-  margin-right: $gf-form-margin;
+  margin-right: $space-xs;
   line-height: $input-line-height;
   font-size: $font-size-sm;
 
@@ -354,7 +353,7 @@ $input-border: 1px solid $input-border-color;
 }
 
 .gf-form-dropdown-typeahead {
-  margin-right: $gf-form-margin;
+  //margin-right: $space-xs; ?
   position: relative;
 
   &::after {
@@ -391,7 +390,7 @@ $input-border: 1px solid $input-border-color;
   }
 
   &--header {
-    margin-bottom: $gf-form-margin;
+    margin-bottom: $space-xxs;
   }
 
   &--no-padding {
diff --git a/public/sass/components/_infobox.scss b/public/sass/components/_infobox.scss
index 6f7a7bf86dc..16e07c68b20 100644
--- a/public/sass/components/_infobox.scss
+++ b/public/sass/components/_infobox.scss
@@ -5,7 +5,7 @@
   margin-bottom: 2rem;
   border-top: 3px solid $info-box-border-color;
   margin-bottom: $spacer;
-  margin-right: $gf-form-margin;
+  margin-right: $space-xs;
   box-shadow: $card-shadow;
   flex-grow: 1;
 
diff --git a/public/sass/utils/_widths.scss b/public/sass/utils/_widths.scss
index b1213e6ea60..0770ba19fc3 100644
--- a/public/sass/utils/_widths.scss
+++ b/public/sass/utils/_widths.scss
@@ -8,20 +8,20 @@
 // widths
 @for $i from 1 through 30 {
   .width-#{$i} {
-    width: ($spacer * $i) - $gf-form-margin !important;
+    width: ($spacer * $i) - $space-xs !important;
   }
 }
 
 @for $i from 1 through 30 {
   .max-width-#{$i} {
-    max-width: ($spacer * $i) - $gf-form-margin !important;
+    max-width: ($spacer * $i) - $space-xs !important;
     flex-grow: 1;
   }
 }
 
 @for $i from 1 through 30 {
   .min-width-#{$i} {
-    min-width: ($spacer * $i) - $gf-form-margin !important;
+    min-width: ($spacer * $i) - $space-xs !important;
   }
 }