diff --git a/examples/react-template/screens/Autolayout.tsx b/examples/react-template/screens/Autolayout.tsx
index d957ff95..e03f1c96 100644
--- a/examples/react-template/screens/Autolayout.tsx
+++ b/examples/react-template/screens/Autolayout.tsx
@@ -27,6 +27,18 @@ import * as React from 'react'
 export const AutolayoutScreen = (): JSX.Element => {
   return (
     <AutoLayout>
+      <Title level={TitleLevels.ONE}>Title followed by subtitle</Title>
+      <Title subtitle>subtitle</Title>
+
+      <Title level={TitleLevels.TWO}>Title followed by subtitle</Title>
+      <Title subtitle>subtitle</Title>
+
+      <Title level={TitleLevels.THREE}>Title followed by subtitle</Title>
+      <Title subtitle>subtitle</Title>
+
+      <Title level={TitleLevels.ONE}>Title followed by subtitle</Title>
+      <Title subtitle>subtitle</Title>
+
       <Title level={TitleLevels.TWO}>Title followed by Icon</Title>
       <Icon size={IconSize.LARGE} name={IconName.ALERT} />
       <Title level={TitleLevels.TWO}>Title followed by Box</Title>
diff --git a/packages/styles/framework/src/components/_autolayout.scss b/packages/styles/framework/src/components/_autolayout.scss
index 8b0acd41..1c3c0b63 100644
--- a/packages/styles/framework/src/components/_autolayout.scss
+++ b/packages/styles/framework/src/components/_autolayout.scss
@@ -1,95 +1,101 @@
 body:not(.is-tight) {
-  .accordions {
+  .accordions:not(:last-child) {
     margin-bottom: 24px;
   }
-  .card {
+  .card:not(:last-child) {
     margin-bottom: 24px;
   }
-  .box {
+  .box:not(:last-child) {
     margin-bottom: 24px;
   }
-  .table {
+  .table:not(:last-child) {
     margin-bottom: 24px;
   }
-  .list {
+  .list:not(:last-child) {
     margin-bottom: 24px;
   }
-  .timeline {
+  .timeline:not(:last-child) {
     margin-bottom: 24px;
   }
-  .stepper {
+  .stepper:not(:last-child) {
     margin-bottom: 24px;
   }
-  .pagination {
+  .pagination:not(:last-child) {
     margin-bottom: 24px;
   }
-  .segmented-control {
+  .segmented-control:not(:last-child) {
     margin-bottom: 24px;
   }
-  .tabs {
+  .tabs:not(:last-child) {
     margin-bottom: 24px;
   }
-  .range {
+  .range:not(:last-child) {
     margin-bottom: 24px;
   }
-  .stepper {
+  .stepper:not(:last-child) {
     margin-bottom: 24px;
   }
-  .price-container {
+  .price-container:not(:last-child) {
     margin-bottom: 12px;
   }
-  .buttons {
+  .buttons:not(:last-child) {
     margin-bottom: 24px;
   }
-  .countdown {
+  .countdown:not(:last-child) {
     margin-bottom: 16px;
   }
-  .countdown.is-small {
+  .countdown.is-small:not(:last-child) {
     margin-bottom: 12px;
   }
-  .chips-list {
+  .chips-list:not(:last-child) {
     margin-bottom: 12px;
   }
   p.text:not(:last-child) {
     margin-bottom: 12px;
   }
-  .progress {
+  .progress:not(:last-child) {
     margin-bottom: 8px;
   }
-  .progress-radial {
+  .progress-radial:not(:last-child) {
     margin-bottom: 8px;
   }
-  .radio {
+  .radio:not(:last-child) {
     margin-bottom: 12px;
   }
-  .checkbox {
+  .checkbox:not(:last-child) {
     margin-bottom: 12px;
   }
-  .switch {
+  .switch:not(:last-child) {
     margin-bottom: 12px;
   }
-  .radio-tile {
+  .radio-tile:not(:last-child) {
     margin-bottom: 24px;
   }
-  .checkbox-tile {
+  .checkbox-tile:not(:last-child) {
     margin-bottom: 24px;
   }
-  .input {
-    margin-bottom: 16px;
+  .field:not(:last-child) {
+    margin-bottom: 24px;
+  }
+  .control:not(:last-child) {
+    margin-bottom: 4px;
+  }
+  .help:not(:last-child) {
+    margin-bottom: 4px;
   }
-  .textarea {
+  .textarea:not(:last-child) {
     margin-bottom: 16px;
   }
-  .select {
+  .select:not(:last-child) {
     margin-bottom: 16px;
   }
-  .link {
+  .link:not(:last-child) {
     margin-bottom: 12px;
   }
-  .sticker {
+  .sticker:not(:last-child) {
     margin-bottom: 8px;
   }
-  .tag {
+  .tag:not(:last-child) {
     margin-bottom: 8px;
   }
   .title.is-level-1:not(:last-child) {
@@ -110,116 +116,131 @@ body:not(.is-tight) {
   .title.is-level-6:not(:last-child) {
     margin-bottom: 12px;
   }
-  .overline {
+  .overline:not(:last-child) {
     margin-bottom: 0px;
   }
-  .title.is-level-1 + .subtitle {
+  .title:has(+.subtitle):not(:last-child) {
     margin-bottom: 8px;
   }
-  .title.is-level-2 + .subtitle {
-    margin-bottom: 8px;
-  }
-  .subtitle + .title.is-level-1 {
+  .title.is-level-1 + .subtitle:not(:last-child) {
     margin-bottom: 32px;
   }
-  .subtitle + .title.is-level-2 {
+  .title.is-level-2 + .subtitle:not(:last-child) {
     margin-bottom: 24px;
   }
+  .title.is-level-3 + .subtitle:not(:last-child) {
+    margin-bottom: 24px;
+  }
+  .title.is-level-4 + .subtitle:not(:last-child) {
+    margin-bottom: 12px;
+  }
+  .title.is-level-5 + .subtitle:not(:last-child) {
+    margin-bottom: 12px;
+  }
+  .title.is-level-6 + .subtitle:not(:last-child) {
+    margin-bottom: 12px;
+  }
 }
 
 @include mobile() {
   body:not(.is-tight) {
-    .accordions {
+    .accordions:not(:last-child) {
       margin-bottom: 16px;
     }
-  .card {
+  .card:not(:last-child) {
       margin-bottom: 16px;
     }
-  .box {
+  .box:not(:last-child) {
       margin-bottom: 16px;
     }
-  .table {
+  .table:not(:last-child) {
       margin-bottom: 16px;
     }
-  .list {
+  .list:not(:last-child) {
       margin-bottom: 16px;
     }
-  .timeline {
+  .timeline:not(:last-child) {
       margin-bottom: 16px;
     }
-  .stepper {
+  .stepper:not(:last-child) {
       margin-bottom: 16px;
     }
-  .pagination {
+  .pagination:not(:last-child) {
       margin-bottom: 16px;
     }
-  .segmented-control {
+  .segmented-control:not(:last-child) {
       margin-bottom: 16px;
     }
-  .tabs {
+  .tabs:not(:last-child) {
       margin-bottom: 16px;
     }
-  .range {
+  .range:not(:last-child) {
       margin-bottom: 16px;
     }
-  .stepper {
+  .stepper:not(:last-child) {
       margin-bottom: 16px;
     }
-  .price-container {
+  .price-container:not(:last-child) {
       margin-bottom: 8px;
     }
-  .buttons {
+  .buttons:not(:last-child) {
       margin-bottom: 16px;
     }
-  .countdown {
+  .countdown:not(:last-child) {
       margin-bottom: 12px;
     }
-  .countdown.is-small {
+  .countdown.is-small:not(:last-child) {
       margin-bottom: 12px;
     }
-  .chips-list {
+  .chips-list:not(:last-child) {
       margin-bottom: 12px;
     }
   p.text:not(:last-child) {
       margin-bottom: 8px;
     }
-  .progress {
+  .progress:not(:last-child) {
       margin-bottom: 8px;
     }
-  .progress-radial {
+  .progress-radial:not(:last-child) {
       margin-bottom: 8px;
     }
-  .radio {
+  .radio:not(:last-child) {
       margin-bottom: 12px;
     }
-  .checkbox {
+  .checkbox:not(:last-child) {
       margin-bottom: 12px;
     }
-  .switch {
+  .switch:not(:last-child) {
       margin-bottom: 12px;
     }
-  .radio-tile {
+  .radio-tile:not(:last-child) {
       margin-bottom: 16px;
     }
-  .checkbox-tile {
+  .checkbox-tile:not(:last-child) {
       margin-bottom: 16px;
     }
-  .input {
+  .field:not(:last-child) {
       margin-bottom: 16px;
     }
-  .textarea {
+  .control:not(:last-child) {
+      margin-bottom: 4px;
+    }
+  .help:not(:last-child) {
+      margin-bottom: 4px;
+    }
+  .textarea:not(:last-child) {
       margin-bottom: 16px;
     }
-  .select {
+  .select:not(:last-child) {
       margin-bottom: 16px;
     }
-  .link {
+  .link:not(:last-child) {
       margin-bottom: 8px;
     }
-  .sticker {
+  .sticker:not(:last-child) {
       margin-bottom: 8px;
     }
-  .tag {
+  .tag:not(:last-child) {
       margin-bottom: 8px;
     }
   .title.is-level-1:not(:last-child) {
@@ -240,21 +261,30 @@ body:not(.is-tight) {
   .title.is-level-6:not(:last-child) {
       margin-bottom: 8px;
     }
-  .overline {
+  .overline:not(:last-child) {
       margin-bottom: 0px;
     }
-  .title.is-level-1 + .subtitle {
+  .title:has(+.subtitle):not(:last-child) {
       margin-bottom: 8px;
     }
-  .title.is-level-2 + .subtitle {
-      margin-bottom: 8px;
-    }
-  .subtitle + .title.is-level-1 {
+  .title.is-level-1 + .subtitle:not(:last-child) {
       margin-bottom: 40px;
     }
-  .subtitle + .title.is-level-2 {
+  .title.is-level-2 + .subtitle:not(:last-child) {
+      margin-bottom: 32px;
+    }
+  .title.is-level-3 + .subtitle:not(:last-child) {
       margin-bottom: 32px;
     }
+  .title.is-level-4 + .subtitle:not(:last-child) {
+      margin-bottom: 8px;
+    }
+  .title.is-level-5 + .subtitle:not(:last-child) {
+      margin-bottom: 8px;
+    }
+  .title.is-level-6 + .subtitle:not(:last-child) {
+      margin-bottom: 8px;
+    }
 
   }
 }
diff --git a/packages/styles/framework/src/elements/_form.scss b/packages/styles/framework/src/elements/_form.scss
index 97e93144..dbe8e894 100644
--- a/packages/styles/framework/src/elements/_form.scss
+++ b/packages/styles/framework/src/elements/_form.scss
@@ -5,14 +5,6 @@ $help-size: $size-small;
 $label-weight: $weight-bold;
 
 .field {
-  &:not(:first-child) {
-    margin-top: $field-margin;
-  }
-
-  &:not(:last-child) {
-    margin-bottom: 7.5px;
-  }
-
   &.is-fullwidth {
     div.control {
       flex: 1;
@@ -412,7 +404,6 @@ $label-weight: $weight-bold;
   }
 
   + .help {
-    margin: 4px 0;
     font-size: $text-12;
     font-weight: $weight-medium;
   }
diff --git a/packages/styles/scripts/autolayout.ts b/packages/styles/scripts/autolayout.ts
index ff018f15..633cbf2c 100644
--- a/packages/styles/scripts/autolayout.ts
+++ b/packages/styles/scripts/autolayout.ts
@@ -3,9 +3,9 @@ import { INSERT_SPACE_BETWEEN } from "@trilogy-ds/react/components/autolayout/De
 import { SpacerSize } from "@trilogy-ds/react/components/spacer";
 import { SpacingMatrixMode } from "@trilogy-ds/react/components/autolayout/SpacingMatrix";
 
-type DefaultSpacingMatrix = Array<[SpacingMatrixMode, string, (string | SpacerSize)?, SpacerSize?, SpacerSize?]>;
+type DefaultSpacingMatrix = Array<[SpacingMatrixMode, string, (string | SpacerSize | null)?, SpacerSize?, SpacerSize?]>;
 
-const { THREE, FOUR, FIVE, TWO, SEVEN, ZERO, SIX } = SpacerSize;
+const { THREE, FOUR, FIVE, TWO, ONE, SEVEN, ZERO, SIX } = SpacerSize;
 
 /*
 * @first component: string (can not be default)
@@ -31,7 +31,7 @@ export const DEFAULT_SPACING_MATRIX: DefaultSpacingMatrix = [
   [INSERT_SPACE_BETWEEN, '.countdown', 'default', FOUR, THREE],
   [INSERT_SPACE_BETWEEN, '.countdown.is-small', 'default', THREE, THREE],
   [INSERT_SPACE_BETWEEN, '.chips-list', 'default', THREE, THREE],
-  [INSERT_SPACE_BETWEEN, 'p.text:not(:last-child)', 'default', THREE, TWO],
+  [INSERT_SPACE_BETWEEN, 'p.text', 'default', THREE, TWO],
   [INSERT_SPACE_BETWEEN, '.Progress', 'default', TWO, TWO],
   [INSERT_SPACE_BETWEEN, '.progress-radial', 'default', TWO, TWO],
   [INSERT_SPACE_BETWEEN, '.Radio', 'default', THREE, THREE],
@@ -39,23 +39,28 @@ export const DEFAULT_SPACING_MATRIX: DefaultSpacingMatrix = [
   [INSERT_SPACE_BETWEEN, '.switch', 'default', THREE, THREE],
   [INSERT_SPACE_BETWEEN, '.radio-tile', 'default', FIVE, FOUR],
   [INSERT_SPACE_BETWEEN, '.checkbox-tile', 'default', FIVE, FOUR],
-  [INSERT_SPACE_BETWEEN, '.input', 'default', FOUR, FOUR],
+  [INSERT_SPACE_BETWEEN, '.field', 'default', FIVE, FOUR],
+  [INSERT_SPACE_BETWEEN, '.control', 'default', ONE, ONE],
+  [INSERT_SPACE_BETWEEN, '.help', 'default', ONE, ONE],
   [INSERT_SPACE_BETWEEN, '.textarea', 'default', FOUR, FOUR],
   [INSERT_SPACE_BETWEEN, '.select', 'default', FOUR, FOUR],
   [INSERT_SPACE_BETWEEN, '.link', 'default', THREE, TWO],
   [INSERT_SPACE_BETWEEN, '.sticker', 'default', TWO, TWO],
   [INSERT_SPACE_BETWEEN, '.tag', 'default', TWO, TWO],
-  [INSERT_SPACE_BETWEEN, '.title.is-level-1:not(:last-child)', 'default', SEVEN, SIX],
-  [INSERT_SPACE_BETWEEN, '.title.is-level-2:not(:last-child)', 'default', SIX, FIVE],
-  [INSERT_SPACE_BETWEEN, '.title.is-level-3:not(:last-child)', 'default', FOUR, THREE],
-  [INSERT_SPACE_BETWEEN, '.title.is-level-4:not(:last-child)', 'default', THREE, TWO],
-  [INSERT_SPACE_BETWEEN, '.title.is-level-5:not(:last-child)', 'default', THREE, TWO],
-  [INSERT_SPACE_BETWEEN, '.title.is-level-6:not(:last-child)', 'default', THREE, TWO],
+  [INSERT_SPACE_BETWEEN, '.title.is-level-1', 'default', SEVEN, SIX],
+  [INSERT_SPACE_BETWEEN, '.title.is-level-2', 'default', SIX, FIVE],
+  [INSERT_SPACE_BETWEEN, '.title.is-level-3', 'default', FOUR, THREE],
+  [INSERT_SPACE_BETWEEN, '.title.is-level-4', 'default', THREE, TWO],
+  [INSERT_SPACE_BETWEEN, '.title.is-level-5', 'default', THREE, TWO],
+  [INSERT_SPACE_BETWEEN, '.title.is-level-6', 'default', THREE, TWO],
   [INSERT_SPACE_BETWEEN, '.overline', 'default', ZERO, ZERO],
-  [INSERT_SPACE_BETWEEN, '.title.is-level-1', '.subtitle', TWO, TWO],
-  [INSERT_SPACE_BETWEEN, '.title.is-level-2', '.subtitle', TWO, TWO],
-  [INSERT_SPACE_BETWEEN, '.subtitle', '.title.is-level-1', SIX, SEVEN],
-  [INSERT_SPACE_BETWEEN, '.subtitle', '.title.is-level-2', FIVE, SIX]
+  [INSERT_SPACE_BETWEEN, '.title:has(+.subtitle)', null, TWO, TWO],
+  [INSERT_SPACE_BETWEEN, '.title.is-level-1 + .subtitle', null, SIX, SEVEN],
+  [INSERT_SPACE_BETWEEN, '.title.is-level-2 + .subtitle', null, FIVE, SIX],
+  [INSERT_SPACE_BETWEEN, '.title.is-level-3 + .subtitle', null, FIVE, SIX],
+  [INSERT_SPACE_BETWEEN, '.title.is-level-4 + .subtitle', null, THREE, TWO],
+  [INSERT_SPACE_BETWEEN, '.title.is-level-5 + .subtitle', null, THREE, TWO],
+  [INSERT_SPACE_BETWEEN, '.title.is-level-6 + .subtitle', null, THREE, TWO],
 ];
 
 
@@ -68,8 +73,8 @@ const createBodyAutolayoutSCSS = (spacingMatrix: DefaultSpacingMatrix): string =
     let selector = '';
 
     if (insertType === INSERT_SPACE_BETWEEN) {
-      if (!component2 || typeof component2 === 'number') {
-        selector = `.${component.toLowerCase()}`;
+      if (!component2 || typeof component2 === null) {
+        selector = `${component.toLowerCase()}`;
       } else {
         if (typeof component === 'string' && component2 === 'default') {
           selector = `${component.toLowerCase()}`;
@@ -81,12 +86,12 @@ const createBodyAutolayoutSCSS = (spacingMatrix: DefaultSpacingMatrix): string =
       const spacingVal = spacingValue as SpacerSize;
       const mobileSpacingVal = mobileSpacingValue as SpacerSize | undefined;
 
-      scssContent += `  ${selector} {\n`;
+      scssContent += `  ${selector}:not(:last-child) {\n`;
       scssContent += `    margin-bottom: ${spacingVal}px;\n`;
       scssContent += '  }\n';
 
       if (mobileSpacingVal !== undefined) {
-        mobileContent += `  ${selector} {\n`;
+        mobileContent += `  ${selector}:not(:last-child) {\n`;
         mobileContent += `      margin-bottom: ${mobileSpacingVal}px;\n`;
         mobileContent += '    }\n';
       }