diff --git a/src/components/ColorPicker.module.css b/src/components/ColorPicker.module.css
index 61f0678..e9d553d 100644
--- a/src/components/ColorPicker.module.css
+++ b/src/components/ColorPicker.module.css
@@ -4,7 +4,7 @@
     display: flex;
     flex-direction: column;
     align-items: stretch;
-    gap: var(--spacing-m);
+    gap: var(--spacing-xs);
     .color_preview {
       aspect-ratio: 4 / 1;
     }
diff --git a/src/page-components/harmonies/HarmonyPreview.module.css b/src/page-components/harmonies/HarmonyPreview.module.css
index 6bee54a..80b5873 100644
--- a/src/page-components/harmonies/HarmonyPreview.module.css
+++ b/src/page-components/harmonies/HarmonyPreview.module.css
@@ -5,6 +5,7 @@
     display: flex;
     flex-direction: column;
     h5 {
+      padding-block: var(--spacing-m);
       font-size: var(--font-size-m);
     }
     .color_blocks {
diff --git a/src/pages/Harmonies.module.css b/src/pages/Harmonies.module.css
index fba500b..941e88a 100644
--- a/src/pages/Harmonies.module.css
+++ b/src/pages/Harmonies.module.css
@@ -8,6 +8,7 @@
     display: flex;
     flex-direction: row;
     align-items: stretch;
+    gap: var(--spacing-m);
   }
   .function_side {
     display: flex;
@@ -18,9 +19,10 @@
       display: flex;
       flex-direction: column;
       align-items: stretch;
-      gap: var(--spacing-xs);
+      gap: var(--spacing-s);
     }
     h5 {
+      padding-block: var(--spacing-m);
       font-size: var(--font-size-m);
     }
   }
diff --git a/src/variables.css b/src/variables.css
index 9bbe29b..6d44a4a 100644
--- a/src/variables.css
+++ b/src/variables.css
@@ -75,11 +75,11 @@
     --spacing-n: calc(var(--spacing) * 0);
     --spacing-xxs: calc(var(--spacing) * 1);
     --spacing-xs: calc(var(--spacing) * 2);
-    --spacing-s: calc(var(--spacing) * 3);
-    --spacing-m: calc(var(--spacing) * 4);
-    --spacing-l: calc(var(--spacing) * 6);
-    --spacing-xl: calc(var(--spacing) * 8);
-    --spacing-xxl: calc(var(--spacing) * 12);
+    --spacing-s: calc(var(--spacing) * 4);
+    --spacing-m: calc(var(--spacing) * 8);
+    --spacing-l: calc(var(--spacing) * 12);
+    --spacing-xl: calc(var(--spacing) * 16);
+    --spacing-xxl: calc(var(--spacing) * 20);
 
     --border-radius: 2px;
     --border-radius-n: calc(var(--border-radius) * 0);