diff --git a/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-calendar-visual-test-1-snap.png b/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-calendar-visual-test-1-snap.png
index c65c907e58..3dca80d137 100644
Binary files a/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-calendar-visual-test-1-snap.png and b/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-calendar-visual-test-1-snap.png differ
diff --git a/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-calendar-visual-test-range-1-snap.png b/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-calendar-visual-test-range-1-snap.png
index 5255fbe16f..703a0d2ff3 100644
Binary files a/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-calendar-visual-test-range-1-snap.png and b/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-calendar-visual-test-range-1-snap.png differ
diff --git a/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-datepicker-visual-test-1-snap.png b/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-datepicker-visual-test-1-snap.png
index 5cca74d0cc..f17c63b91c 100644
Binary files a/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-datepicker-visual-test-1-snap.png and b/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-datepicker-visual-test-1-snap.png differ
diff --git a/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-datepicker-visual-test-range-1-snap.png b/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-datepicker-visual-test-range-1-snap.png
index 336e9c6cdf..368bc0f6be 100644
Binary files a/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-datepicker-visual-test-range-1-snap.png and b/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-datepicker-visual-test-range-1-snap.png differ
diff --git a/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-scrollable-calendar-visual-test-1-snap.png b/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-scrollable-calendar-visual-test-1-snap.png
index 3de7e52aa1..0e0a6fa87b 100644
Binary files a/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-scrollable-calendar-visual-test-1-snap.png and b/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-scrollable-calendar-visual-test-1-snap.png differ
diff --git a/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-scrollable-calendar-visual-test-range-1-snap.png b/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-scrollable-calendar-visual-test-range-1-snap.png
index a2c418aa64..bac802c61c 100644
Binary files a/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-scrollable-calendar-visual-test-range-1-snap.png and b/.storybook/__image_snapshots__/storyshots-test-js-visual-tests-bpk-component-scrollable-calendar-visual-test-range-1-snap.png differ
diff --git a/.storybook/storyshots-test.js b/.storybook/storyshots-test.js
index 97cb2b6c27..8e41d1a0c1 100644
--- a/.storybook/storyshots-test.js
+++ b/.storybook/storyshots-test.js
@@ -36,7 +36,7 @@ const beforeScreenshot = () =>
 // Allow a small amount of deviation to account for
 // CI running on a different OS than local development.
 const getMatchOptions = () => ({
-  failureThreshold: 0.1,
+  failureThreshold: 0,
   failureThresholdType: 'percent',
 });
 
diff --git a/UNRELEASED.md b/UNRELEASED.md
index e69de29bb2..454b547338 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -0,0 +1,6 @@
+**Breaking:**
+
+- bpk-component-calendar:
+- bpk-component-scrollable-calendar:
+- bpk-component-datepicker:
+    - Updated calendar component to use the new spacing grid. This component will now appear larger in height.
\ No newline at end of file
diff --git a/packages/bpk-animate-height/package.json b/packages/bpk-animate-height/package.json
index 1cde77e5f4..d20a702a41 100644
--- a/packages/bpk-animate-height/package.json
+++ b/packages/bpk-animate-height/package.json
@@ -20,7 +20,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-button": "^5.0.15"
   }
 }
diff --git a/packages/bpk-component-accordion/package.json b/packages/bpk-component-accordion/package.json
index 8a156ef99a..5326bb4b7f 100644
--- a/packages/bpk-component-accordion/package.json
+++ b/packages/bpk-component-accordion/package.json
@@ -25,7 +25,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-checkbox": "^3.0.18"
   }
 }
diff --git a/packages/bpk-component-badge/package.json b/packages/bpk-component-badge/package.json
index 349c16014e..9d5a299c8b 100644
--- a/packages/bpk-component-badge/package.json
+++ b/packages/bpk-component-badge/package.json
@@ -22,7 +22,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-icon": "^9.1.2",
     "bpk-storybook-utils": "^1.0.16"
   }
diff --git a/packages/bpk-component-banner-alert/package.json b/packages/bpk-component-banner-alert/package.json
index aed335c69a..c18262801f 100644
--- a/packages/bpk-component-banner-alert/package.json
+++ b/packages/bpk-component-banner-alert/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-animate-height": "^4.0.16",
     "bpk-component-close-button": "^3.0.18",
     "bpk-component-icon": "^9.1.2",
diff --git a/packages/bpk-component-barchart/package.json b/packages/bpk-component-barchart/package.json
index f6eac134d3..a55a7e91d3 100644
--- a/packages/bpk-component-barchart/package.json
+++ b/packages/bpk-component-barchart/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-mobile-scroll-container": "^3.0.17",
     "bpk-mixins": "^24.0.4",
     "bpk-react-utils": "^4.0.1",
diff --git a/packages/bpk-component-breakpoint/package.json b/packages/bpk-component-breakpoint/package.json
index 5f7f4a65b5..db858250ae 100644
--- a/packages/bpk-component-breakpoint/package.json
+++ b/packages/bpk-component-breakpoint/package.json
@@ -23,6 +23,6 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1"
+    "@skyscanner/bpk-foundations-web": "^4.2.0"
   }
 }
diff --git a/packages/bpk-component-calendar/package.json b/packages/bpk-component-calendar/package.json
index e84d133848..8fd2844168 100644
--- a/packages/bpk-component-calendar/package.json
+++ b/packages/bpk-component-calendar/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-aria-live": "^2.0.29",
     "bpk-component-icon": "^9.1.2",
     "bpk-component-select": "^5.0.12",
diff --git a/packages/bpk-component-calendar/src/BpkCalendar.module.css b/packages/bpk-component-calendar/src/BpkCalendar.module.css
index 0ceca1bd23..9c5c444625 100644
--- a/packages/bpk-component-calendar/src/BpkCalendar.module.css
+++ b/packages/bpk-component-calendar/src/BpkCalendar.module.css
@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar{display:flex;width:100%;flex-direction:column;border-radius:.375rem}.bpk-calendar--fixed{width:15.75rem}.bpk-calendar__header{margin-top:1.5rem}.bpk-calendar__grid{margin-top:1.5rem}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar{display:flex;width:100%;flex-direction:column;border-radius:.375rem}.bpk-calendar--fixed{width:19.25rem}.bpk-calendar__header{margin-top:1.5rem}.bpk-calendar__grid{margin-top:1.5rem}
diff --git a/packages/bpk-component-calendar/src/BpkCalendarDate.module.css b/packages/bpk-component-calendar/src/BpkCalendarDate.module.css
index a3cd647900..683a9be41b 100644
--- a/packages/bpk-component-calendar/src/BpkCalendarDate.module.css
+++ b/packages/bpk-component-calendar/src/BpkCalendarDate.module.css
@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-date{width:2.25rem;height:2.25rem;padding:0;border:none;border-radius:1.125rem;background-color:transparent;font-size:1rem;text-align:center;cursor:pointer;appearance:none;box-sizing:border-box;color:#0770e3;color:var(--bpk-calendar-date-text-color, #0770e3)}.bpk-no-touch-support .bpk-calendar-date:hover:not(:active):not(:disabled):not(.bpk-calendar-date--selected){background-color:#f1f2f8;color:#444560;color:var(--bpk-calendar-date-text-hover-color, #444560)}:global(.bpk-no-touch-support) .bpk-calendar-date:hover:not(:active):not(:disabled):not(.bpk-calendar-date--selected){background-color:#f1f2f8;color:#444560;color:var(--bpk-calendar-date-text-hover-color, #444560)}.bpk-calendar-date--colored{color:#fff}.bpk-calendar-date--colored-default{background-color:#68697f}.bpk-calendar-date--colored-positive{background-color:#00a698}.bpk-calendar-date--colored-neutral{background-color:#ffb54d}.bpk-calendar-date--colored-negative{background-color:#d1435b}.bpk-calendar-date:not(.bpk-calendar-date--selected):active{background-color:#dddde5;color:#111236;color:var(--bpk-calendar-date-text-active-color, #111236)}.bpk-calendar-date--outside{background-color:transparent;color:#b2b2bf}.bpk-calendar-date--today{font-weight:bold}.bpk-calendar-date--selected{font-weight:bold;cursor:default;background-color:#084eb2;background-color:var(--bpk-calendar-date-selected-background-color, #084eb2);color:#fff;color:var(--bpk-calendar-date-text-selected-color, #fff)}.bpk-calendar-date--middle{background-color:#cddff8;color:#111236}.bpk-calendar-date--single{background-color:#0770e3}.bpk-calendar-date--start{background-color:#0770e3}.bpk-calendar-date--end{background-color:#0770e3}.bpk-calendar-date--focused:not(:disabled):not(.bpk-calendar-date--selected):not(.bpk-calendar-date--colored){box-shadow:0 0 0 2px #0770e3 inset;box-shadow:0 0 0 2px var(--bpk-calendar-date-focused-border-color, #0770e3) inset;color:#0770e3;color:var(--bpk-calendar-date-text-focus-color, #0770e3)}.bpk-calendar-date--focused:not(:disabled):not(.bpk-calendar-date--selected).bpk-calendar-date--colored{border:0.125rem solid #0770e3;box-shadow:0 0 0 1px #fff inset}.bpk-calendar-date:disabled,.bpk-calendar-date--blocked{background-color:transparent;color:#dddde5;cursor:not-allowed}.bpk-no-touch-support .bpk-calendar-date:disabled:hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-calendar-date--blocked:hover:not(:active):not(:disabled){color:#dddde5}:global(.bpk-no-touch-support) .bpk-calendar-date:disabled:hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-calendar-date--blocked:hover:not(:active):not(:disabled){color:#dddde5}.bpk-calendar-date:disabled:active,.bpk-calendar-date--blocked:active{color:#dddde5}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-date{width:2.25rem;height:2.25rem;padding:0;border:none;border-radius:1.125rem;background-color:transparent;font-size:1rem;text-align:center;cursor:pointer;appearance:none;box-sizing:border-box;color:#111236;color:var(--bpk-calendar-date-text-color, #111236)}.bpk-no-touch-support .bpk-calendar-date:hover:not(:active):not(:disabled):not(.bpk-calendar-date--selected){background-color:#f1f2f8;color:#444560;color:var(--bpk-calendar-date-text-hover-color, #444560)}:global(.bpk-no-touch-support) .bpk-calendar-date:hover:not(:active):not(:disabled):not(.bpk-calendar-date--selected){background-color:#f1f2f8;color:#444560;color:var(--bpk-calendar-date-text-hover-color, #444560)}.bpk-calendar-date--colored{color:#fff}.bpk-calendar-date--colored-default{background-color:#68697f}.bpk-calendar-date--colored-positive{background-color:#00a698}.bpk-calendar-date--colored-neutral{background-color:#ffb54d}.bpk-calendar-date--colored-negative{background-color:#d1435b}.bpk-calendar-date:not(.bpk-calendar-date--selected):active{background-color:#dddde5;color:#111236;color:var(--bpk-calendar-date-text-active-color, #111236)}.bpk-calendar-date--outside{background-color:transparent;color:#b2b2bf}.bpk-calendar-date--today{font-weight:bold}.bpk-calendar-date--selected{font-weight:bold;cursor:default;background-color:#084eb2;background-color:var(--bpk-calendar-date-selected-background-color, #084eb2);color:#fff;color:var(--bpk-calendar-date-text-selected-color, #fff)}.bpk-calendar-date--middle{background-color:#cddff8;color:#111236}.bpk-calendar-date--single{background-color:#0770e3}.bpk-calendar-date--start{background-color:#0770e3}.bpk-calendar-date--end{background-color:#0770e3}.bpk-calendar-date--focused:not(:disabled):not(.bpk-calendar-date--selected):not(.bpk-calendar-date--colored){box-shadow:0 0 0 2px #0770e3 inset;box-shadow:0 0 0 2px var(--bpk-calendar-date-focused-border-color, #0770e3) inset;color:#0770e3;color:var(--bpk-calendar-date-text-focus-color, #0770e3)}.bpk-calendar-date--focused:not(:disabled):not(.bpk-calendar-date--selected).bpk-calendar-date--colored{border:0.125rem solid #0770e3;box-shadow:0 0 0 1px #fff inset}.bpk-calendar-date:disabled,.bpk-calendar-date--blocked{background-color:transparent;color:#dddde5;cursor:not-allowed}.bpk-no-touch-support .bpk-calendar-date:disabled:hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-calendar-date--blocked:hover:not(:active):not(:disabled){color:#dddde5}:global(.bpk-no-touch-support) .bpk-calendar-date:disabled:hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-calendar-date--blocked:hover:not(:active):not(:disabled){color:#dddde5}.bpk-calendar-date:disabled:active,.bpk-calendar-date--blocked:active{color:#dddde5}
diff --git a/packages/bpk-component-calendar/src/BpkCalendarGrid.module.css b/packages/bpk-component-calendar/src/BpkCalendarGrid.module.css
index 9aede35ff2..aca94e4471 100644
--- a/packages/bpk-component-calendar/src/BpkCalendarGrid.module.css
+++ b/packages/bpk-component-calendar/src/BpkCalendarGrid.module.css
@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-grid{width:100%;border-collapse:separate;border-spacing:0}.bpk-calendar-grid--animating{z-index:1;transition:transform 0.2s ease-in-out}.bpk-calendar-grid__caption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-calendar-grid__date{width:100%;padding:0;text-align:center;vertical-align:middle}.bpk-calendar-grid__date--start{background-image:linear-gradient(to right, #fff 50%, #cddff8 50%)}.bpk-calendar-grid__date--middle{background-color:#cddff8}.bpk-calendar-grid__date--end{background-image:linear-gradient(to left, #fff 50%, #cddff8 50%)}.bpk-calendar-grid__week{display:flex;padding-top:1.5rem;justify-content:space-around}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-grid{width:100%;border-collapse:separate;border-spacing:0}.bpk-calendar-grid--animating{z-index:1;transition:transform 0.2s ease-in-out}.bpk-calendar-grid__caption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-calendar-grid__date{width:100%;padding:0 .25rem;text-align:center;vertical-align:middle}.bpk-calendar-grid__date--start{background-image:linear-gradient(to right, #fff 50%, #cddff8 50%)}.bpk-calendar-grid__date--middle{background-color:#cddff8}.bpk-calendar-grid__date--end{background-image:linear-gradient(to left, #fff 50%, #cddff8 50%)}.bpk-calendar-grid__week{display:flex;padding-top:1.5rem;justify-content:space-around}
diff --git a/packages/bpk-component-calendar/src/BpkCalendarGrid.module.scss b/packages/bpk-component-calendar/src/BpkCalendarGrid.module.scss
index ca7d74ff40..4b1457fdbc 100644
--- a/packages/bpk-component-calendar/src/BpkCalendarGrid.module.scss
+++ b/packages/bpk-component-calendar/src/BpkCalendarGrid.module.scss
@@ -35,7 +35,7 @@
 
   &__date {
     width: 100%;
-    padding: 0;
+    padding: 0 $bpk-calendar-day-spacing;
     text-align: center;
     vertical-align: middle;
 
diff --git a/packages/bpk-component-calendar/src/BpkCalendarGridHeader.module.css b/packages/bpk-component-calendar/src/BpkCalendarGridHeader.module.css
index 7552c6e125..432a79b17c 100644
--- a/packages/bpk-component-calendar/src/BpkCalendarGridHeader.module.css
+++ b/packages/bpk-component-calendar/src/BpkCalendarGridHeader.module.css
@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-header{display:table;width:100%;table-layout:fixed}.bpk-calendar-header--table-head{display:none}.bpk-calendar-header__week{display:table-row;list-style:none;text-align:center;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-calendar-header__weekday{display:table-cell;height:2.25rem;padding:0;font-weight:normal;box-shadow:0 1px 0 0 #dddde5;vertical-align:middle;box-sizing:content-box}.bpk-calendar-header__weekday--weekend{font-weight:bold}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-header{display:table;width:100%;table-layout:fixed}.bpk-calendar-header--table-head{display:none}.bpk-calendar-header__week{display:table-row;list-style:none;text-align:center;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-calendar-header__weekday{display:table-cell;height:2.25rem;padding:0 .25rem;font-weight:normal;box-shadow:0 1px 0 0 #dddde5;vertical-align:middle;box-sizing:content-box}.bpk-calendar-header__weekday--weekend{font-weight:bold}
diff --git a/packages/bpk-component-calendar/src/BpkCalendarGridHeader.module.scss b/packages/bpk-component-calendar/src/BpkCalendarGridHeader.module.scss
index 15b6368773..330c2c8cf4 100644
--- a/packages/bpk-component-calendar/src/BpkCalendarGridHeader.module.scss
+++ b/packages/bpk-component-calendar/src/BpkCalendarGridHeader.module.scss
@@ -40,7 +40,7 @@
   &__weekday {
     display: table-cell;
     height: $bpk-calendar-day-size;
-    padding: 0;
+    padding: 0 $bpk-calendar-day-spacing;
     font-weight: normal;
     box-shadow: $shadow-bottom;
     vertical-align: middle;
diff --git a/packages/bpk-component-calendar/src/BpkCalendarGridTransition.module.css b/packages/bpk-component-calendar/src/BpkCalendarGridTransition.module.css
index 924e1fb2ae..c6702a9278 100644
--- a/packages/bpk-component-calendar/src/BpkCalendarGridTransition.module.css
+++ b/packages/bpk-component-calendar/src/BpkCalendarGridTransition.module.css
@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-grid-transition{position:relative;overflow:hidden}.bpk-calendar-grid-transition__dummy{display:inline-block;width:15.75rem}.bpk-calendar-grid-transition__strip{left:0;display:block;z-index:0;width:47.25rem}.bpk-calendar-grid-transition__strip--transitioning{z-index:1;transition:transform 200ms ease-in-out}.bpk-calendar-grid-transition__grid{display:inline-table;width:15.75rem}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-grid-transition{position:relative;overflow:hidden}.bpk-calendar-grid-transition__dummy{display:inline-block;width:19.25rem}.bpk-calendar-grid-transition__strip{left:0;display:block;z-index:0;width:57.75rem}.bpk-calendar-grid-transition__strip--transitioning{z-index:1;transition:transform 200ms ease-in-out}.bpk-calendar-grid-transition__grid{display:inline-table;width:19.25rem}
diff --git a/packages/bpk-component-calendar/src/_variables.scss b/packages/bpk-component-calendar/src/_variables.scss
index fcffdb1a9d..e541a04e57 100644
--- a/packages/bpk-component-calendar/src/_variables.scss
+++ b/packages/bpk-component-calendar/src/_variables.scss
@@ -21,4 +21,4 @@
 $shadow-bottom: 0 1px 0 0 $bpk-color-sky-gray-tint-06; /* stylelint-disable-line unit-blacklist */
 $shadow-left: -1px 0 0 0 $bpk-color-sky-gray-tint-06; /* stylelint-disable-line unit-blacklist */
 $shadow-right: 1px 0 0 0 $bpk-color-sky-gray-tint-06; /* stylelint-disable-line unit-blacklist */
-$calendar-width: 7 * $bpk-calendar-day-size;
+$calendar-width: 7 * ($bpk-calendar-day-size + (2 * $bpk-calendar-day-spacing));
diff --git a/packages/bpk-component-calendar/src/utils.js b/packages/bpk-component-calendar/src/utils.js
index 5a5b750429..fd3ab7e230 100644
--- a/packages/bpk-component-calendar/src/utils.js
+++ b/packages/bpk-component-calendar/src/utils.js
@@ -16,7 +16,10 @@
  * limitations under the License.
  */
 
-import { calendarDaySize } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+import {
+  calendarDaySize,
+  calendarDaySpacing,
+} from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
 const CSS_UNIT_REGEX = /(^[+-]?(?:\d*\.)?\d+)(.+)/i;
 
@@ -33,8 +36,14 @@ const splitToken = value => {
 
 export const getCalendarGridWidth = (multiplier = 1) => {
   const [sizeValue, sizeUnit] = splitToken(calendarDaySize);
+  const [spacingValue, spacingUnit] = splitToken(calendarDaySpacing);
 
-  const width = multiplier * (7 * sizeValue);
+  if (sizeUnit !== spacingUnit) {
+    throw new Error(
+      `'calendarDaySize' and 'calendarDaySpacing' must use the same unit. Got ${sizeUnit} and ${spacingUnit}`,
+    );
+  }
+  const width = multiplier * (7 * (sizeValue + 2 * spacingValue));
   return `${width}${sizeUnit}`;
 };
 
diff --git a/packages/bpk-component-checkbox/package.json b/packages/bpk-component-checkbox/package.json
index ff4acb8f1e..81dff87568 100644
--- a/packages/bpk-component-checkbox/package.json
+++ b/packages/bpk-component-checkbox/package.json
@@ -23,7 +23,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-storybook-utils": "^1.0.16"
   }
 }
diff --git a/packages/bpk-component-datatable/package.json b/packages/bpk-component-datatable/package.json
index f4eb0ab603..9a85a61c5f 100644
--- a/packages/bpk-component-datatable/package.json
+++ b/packages/bpk-component-datatable/package.json
@@ -25,6 +25,6 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1"
+    "@skyscanner/bpk-foundations-web": "^4.2.0"
   }
 }
diff --git a/packages/bpk-component-datepicker/package.json b/packages/bpk-component-datepicker/package.json
index 72f35fc1cd..494bfe6f1b 100644
--- a/packages/bpk-component-datepicker/package.json
+++ b/packages/bpk-component-datepicker/package.json
@@ -27,7 +27,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-storybook-utils": "^1.0.16"
   }
 }
diff --git a/packages/bpk-component-drawer/package.json b/packages/bpk-component-drawer/package.json
index e6b1ee1ad5..563dcc4a22 100644
--- a/packages/bpk-component-drawer/package.json
+++ b/packages/bpk-component-drawer/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-close-button": "^3.0.18",
     "bpk-component-icon": "^9.1.2",
     "bpk-component-link": "^3.0.16",
diff --git a/packages/bpk-component-form-validation/package.json b/packages/bpk-component-form-validation/package.json
index 1e6b1c9719..9507f3938f 100644
--- a/packages/bpk-component-form-validation/package.json
+++ b/packages/bpk-component-form-validation/package.json
@@ -23,7 +23,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-button": "^5.0.15",
     "bpk-component-checkbox": "^3.0.18",
     "bpk-component-icon": "^9.1.2",
diff --git a/packages/bpk-component-horizontal-nav/package.json b/packages/bpk-component-horizontal-nav/package.json
index f316f67a74..e722e6500d 100644
--- a/packages/bpk-component-horizontal-nav/package.json
+++ b/packages/bpk-component-horizontal-nav/package.json
@@ -23,7 +23,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-text": "^4.0.18",
     "bpk-storybook-utils": "^1.0.16"
   }
diff --git a/packages/bpk-component-icon/package.json b/packages/bpk-component-icon/package.json
index 9fe1fe32a6..5fbeba1db7 100644
--- a/packages/bpk-component-icon/package.json
+++ b/packages/bpk-component-icon/package.json
@@ -17,8 +17,8 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
-    "@skyscanner/bpk-svgs": "^14.0.12",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
+    "@skyscanner/bpk-svgs": "^14.0.13",
     "bpk-mixins": "^24.0.4",
     "bpk-react-utils": "^4.0.1",
     "prop-types": "^15.7.2"
diff --git a/packages/bpk-component-image/package.json b/packages/bpk-component-image/package.json
index 455972dd21..6707053487 100644
--- a/packages/bpk-component-image/package.json
+++ b/packages/bpk-component-image/package.json
@@ -24,7 +24,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-mobile-scroll-container": "^3.0.17",
     "bpk-component-text": "^4.0.18"
   }
diff --git a/packages/bpk-component-link/package.json b/packages/bpk-component-link/package.json
index 6f0fa8b351..15ec7b99b1 100644
--- a/packages/bpk-component-link/package.json
+++ b/packages/bpk-component-link/package.json
@@ -22,7 +22,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-storybook-utils": "^1.0.16"
   }
 }
diff --git a/packages/bpk-component-mobile-scroll-container/package.json b/packages/bpk-component-mobile-scroll-container/package.json
index 4f13e1b96f..e8b16f4273 100644
--- a/packages/bpk-component-mobile-scroll-container/package.json
+++ b/packages/bpk-component-mobile-scroll-container/package.json
@@ -23,6 +23,6 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1"
+    "@skyscanner/bpk-foundations-web": "^4.2.0"
   }
 }
diff --git a/packages/bpk-component-navigation-bar/package.json b/packages/bpk-component-navigation-bar/package.json
index 9109e70eb0..976a0d3e39 100644
--- a/packages/bpk-component-navigation-bar/package.json
+++ b/packages/bpk-component-navigation-bar/package.json
@@ -25,7 +25,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-icon": "^9.1.2",
     "bpk-storybook-utils": "^1.0.16"
   }
diff --git a/packages/bpk-component-navigation-stack/package.json b/packages/bpk-component-navigation-stack/package.json
index 0ac513a62a..e33098c0df 100644
--- a/packages/bpk-component-navigation-stack/package.json
+++ b/packages/bpk-component-navigation-stack/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-mixins": "^24.0.4",
     "bpk-react-utils": "^4.0.1",
     "prop-types": "^15.7.2",
diff --git a/packages/bpk-component-nudger/package.json b/packages/bpk-component-nudger/package.json
index 7137bfc5e4..9f8f0549e1 100644
--- a/packages/bpk-component-nudger/package.json
+++ b/packages/bpk-component-nudger/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-button": "^5.0.15",
     "bpk-component-icon": "^9.1.2",
     "bpk-mixins": "^24.0.4",
diff --git a/packages/bpk-component-phone-input/package.json b/packages/bpk-component-phone-input/package.json
index a2598f3580..92ace46471 100644
--- a/packages/bpk-component-phone-input/package.json
+++ b/packages/bpk-component-phone-input/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-input": "^6.0.28",
     "bpk-component-label": "^5.0.16",
     "bpk-component-select": "^5.0.12",
diff --git a/packages/bpk-component-progress/package.json b/packages/bpk-component-progress/package.json
index 0cedcf7fba..058d67c290 100644
--- a/packages/bpk-component-progress/package.json
+++ b/packages/bpk-component-progress/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-mixins": "^24.0.4",
     "bpk-react-utils": "^4.0.1",
     "lodash.clamp": "^4.0.3",
diff --git a/packages/bpk-component-radio/package.json b/packages/bpk-component-radio/package.json
index dd4b0fc19a..bde28604b5 100644
--- a/packages/bpk-component-radio/package.json
+++ b/packages/bpk-component-radio/package.json
@@ -22,7 +22,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-storybook-utils": "^1.0.16"
   }
 }
diff --git a/packages/bpk-component-rating/package.json b/packages/bpk-component-rating/package.json
index 41ee6001e3..ee2de7e30b 100644
--- a/packages/bpk-component-rating/package.json
+++ b/packages/bpk-component-rating/package.json
@@ -23,7 +23,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-text": "^4.0.18"
   }
 }
diff --git a/packages/bpk-component-scrollable-calendar/package.json b/packages/bpk-component-scrollable-calendar/package.json
index 504aaaf9f9..1bc75c6508 100644
--- a/packages/bpk-component-scrollable-calendar/package.json
+++ b/packages/bpk-component-scrollable-calendar/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-calendar": "^10.0.2",
     "bpk-component-text": "^4.0.18",
     "bpk-mixins": "^24.0.4",
diff --git a/packages/bpk-component-section-list/package.json b/packages/bpk-component-section-list/package.json
index d6b3901fa2..626b6d1c08 100644
--- a/packages/bpk-component-section-list/package.json
+++ b/packages/bpk-component-section-list/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-icon": "^9.1.2",
     "bpk-component-text": "^4.0.18",
     "bpk-mixins": "^24.0.4",
diff --git a/packages/bpk-component-slider/package.json b/packages/bpk-component-slider/package.json
index 66001297fa..5bd240db57 100644
--- a/packages/bpk-component-slider/package.json
+++ b/packages/bpk-component-slider/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-mixins": "^24.0.4",
     "bpk-react-utils": "^4.0.1",
     "prop-types": "^15.7.2",
diff --git a/packages/bpk-component-spinner/package.json b/packages/bpk-component-spinner/package.json
index 99407cc381..e24ff087a8 100644
--- a/packages/bpk-component-spinner/package.json
+++ b/packages/bpk-component-spinner/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "@skyscanner/bpk-svgs": "^14.0.12",
+    "@skyscanner/bpk-svgs": "^14.0.13",
     "bpk-mixins": "^24.0.4",
     "bpk-react-utils": "^4.0.1",
     "prop-types": "^15.7.2"
diff --git a/packages/bpk-component-theme-toggle/package.json b/packages/bpk-component-theme-toggle/package.json
index 3565f4b971..9dc49d75a7 100644
--- a/packages/bpk-component-theme-toggle/package.json
+++ b/packages/bpk-component-theme-toggle/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-label": "^5.0.16",
     "bpk-component-select": "^5.0.12",
     "bpk-mixins": "^24.0.4",
diff --git a/packages/bpk-component-tooltip/package.json b/packages/bpk-component-tooltip/package.json
index d2e379148b..0ca33d24c7 100644
--- a/packages/bpk-component-tooltip/package.json
+++ b/packages/bpk-component-tooltip/package.json
@@ -23,7 +23,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-component-text": "^4.0.18"
   }
 }
diff --git a/packages/bpk-mixins/package.json b/packages/bpk-mixins/package.json
index 680c8f1fd7..f2625480f3 100644
--- a/packages/bpk-mixins/package.json
+++ b/packages/bpk-mixins/package.json
@@ -14,8 +14,8 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
-    "@skyscanner/bpk-svgs": "^14.0.12"
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
+    "@skyscanner/bpk-svgs": "^14.0.13"
   },
   "peerDependencies": {
     "node-sass": "^4.12.0"
diff --git a/packages/bpk-stylesheets/package.json b/packages/bpk-stylesheets/package.json
index 8de8afc28d..e8c3e864f9 100644
--- a/packages/bpk-stylesheets/package.json
+++ b/packages/bpk-stylesheets/package.json
@@ -17,7 +17,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "bpk-mixins": "^24.0.4",
     "normalize.css": "4.2.0"
   }
diff --git a/packages/bpk-theming/package.json b/packages/bpk-theming/package.json
index d5aef682f4..7389eb47a7 100644
--- a/packages/bpk-theming/package.json
+++ b/packages/bpk-theming/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "c2217d61875a1f3aa2bb9ed9583c50e3f1523501",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-foundations-web": "^4.2.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {