From ddb7eab48df41b0fec878d6faf0c19dc1e17c8f1 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Sun, 12 Nov 2023 22:55:32 +0100
Subject: [PATCH 01/21] Add padding classes

---
 packages/css/src/footer/footer.scss           |  5 ---
 packages/css/src/highlight/highlight.scss     |  4 --
 packages/css/src/index.scss                   |  1 +
 packages/css/src/padding/README.md            |  1 +
 packages/css/src/padding/padding.scss         | 40 +++++++++++++++++++
 packages/react/src/Grid/Grid.tsx              | 15 +++++--
 packages/react/src/shared/padding/index.ts    |  2 +
 .../src/shared/padding/paddingClasses.test.ts | 33 +++++++++++++++
 .../src/shared/padding/paddingClasses.tsx     | 23 +++++++++++
 packages/react/src/shared/padding/types.ts    | 12 ++++++
 .../amsterdam/highlight.tokens.json           |  3 --
 .../storybook-react/src/Grid/Grid.stories.tsx |  6 +++
 .../storybook-react/src/shared/argTypes.ts    | 13 ++++++
 13 files changed, 142 insertions(+), 16 deletions(-)
 create mode 100644 packages/css/src/padding/README.md
 create mode 100644 packages/css/src/padding/padding.scss
 create mode 100644 packages/react/src/shared/padding/index.ts
 create mode 100644 packages/react/src/shared/padding/paddingClasses.test.ts
 create mode 100644 packages/react/src/shared/padding/paddingClasses.tsx
 create mode 100644 packages/react/src/shared/padding/types.ts
 create mode 100644 storybook/storybook-react/src/shared/argTypes.ts

diff --git a/packages/css/src/footer/footer.scss b/packages/css/src/footer/footer.scss
index c431c40c6f..5059ca70ca 100644
--- a/packages/css/src/footer/footer.scss
+++ b/packages/css/src/footer/footer.scss
@@ -7,9 +7,4 @@
 
 .amsterdam-footer__top {
   background-color: var(--amsterdam-footer-top-background-color);
-  padding-block: 2.5rem;
-}
-
-.amsterdam-footer__bottom {
-  padding-block: 0.5rem;
 }
diff --git a/packages/css/src/highlight/highlight.scss b/packages/css/src/highlight/highlight.scss
index 6dccb66dbf..b033fb37ed 100644
--- a/packages/css/src/highlight/highlight.scss
+++ b/packages/css/src/highlight/highlight.scss
@@ -3,10 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-.amsterdam-highlight {
-  padding-block: var(--amsterdam-highlight-padding-block);
-}
-
 .amsterdam-highlight--blue {
   background-color: var(--amsterdam-highlight-blue-background-color);
 }
diff --git a/packages/css/src/index.scss b/packages/css/src/index.scss
index f2a4aa7fd4..a775a813d7 100644
--- a/packages/css/src/index.scss
+++ b/packages/css/src/index.scss
@@ -4,6 +4,7 @@
  */
 
 /* Append here */
+@import "./padding/padding";
 @import "./image/image";
 @import "./pagination/pagination";
 @import "./accordion/accordion";
diff --git a/packages/css/src/padding/README.md b/packages/css/src/padding/README.md
new file mode 100644
index 0000000000..270aed4e4b
--- /dev/null
+++ b/packages/css/src/padding/README.md
@@ -0,0 +1 @@
+# Padding
diff --git a/packages/css/src/padding/padding.scss b/packages/css/src/padding/padding.scss
new file mode 100644
index 0000000000..93137f8442
--- /dev/null
+++ b/packages/css/src/padding/padding.scss
@@ -0,0 +1,40 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.amsterdam-padding-bottom--small {
+  padding-block-end: calc(var(--amsterdam-grid-gap) / 2);
+}
+
+.amsterdam-padding-top--small {
+  padding-block-start: calc(var(--amsterdam-grid-gap) / 2);
+}
+
+.amsterdam-padding-vertical--small {
+  padding-block: calc(var(--amsterdam-grid-gap) / 2);
+}
+
+.amsterdam-padding-bottom--medium {
+  padding-block-end: var(--amsterdam-grid-gap);
+}
+
+.amsterdam-padding-top--medium {
+  padding-block-start: var(--amsterdam-grid-gap);
+}
+
+.amsterdam-padding-vertical--medium {
+  padding-block: var(--amsterdam-grid-gap);
+}
+
+.amsterdam-padding-bottom--large {
+  padding-block-end: calc(var(--amsterdam-grid-gap) * 2);
+}
+
+.amsterdam-padding-top--large {
+  padding-block-start: calc(var(--amsterdam-grid-gap) * 2);
+}
+
+.amsterdam-padding-vertical--large {
+  padding-block: calc(var(--amsterdam-grid-gap) * 2);
+}
diff --git a/packages/react/src/Grid/Grid.tsx b/packages/react/src/Grid/Grid.tsx
index 32e96f317d..b723df5efa 100644
--- a/packages/react/src/Grid/Grid.tsx
+++ b/packages/react/src/Grid/Grid.tsx
@@ -13,6 +13,8 @@ import {
   RefAttributes,
 } from 'react'
 import { GridCell } from './GridCell'
+import type { PaddingProps } from '../shared/padding'
+import { paddingClasses } from '../shared/padding'
 
 export type GridColumnNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 
@@ -22,17 +24,22 @@ export type GridColumnNumbers = {
   wide: GridColumnNumber
 }
 
-interface GridComponent
-  extends ForwardRefExoticComponent<PropsWithChildren<HTMLAttributes<HTMLDivElement>> & RefAttributes<HTMLDivElement>> {
+export type GridProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>> & PaddingProps
+
+interface GridComponent extends ForwardRefExoticComponent<GridProps & RefAttributes<HTMLDivElement>> {
   Cell: typeof GridCell
 }
 
 export const Grid = forwardRef(
   (
-    { children, className, ...restProps }: PropsWithChildren<HTMLAttributes<HTMLDivElement>>,
+    { children, className, paddingBottom, paddingTop, paddingVertical, ...restProps }: GridProps,
     ref: ForwardedRef<HTMLDivElement>,
   ) => (
-    <div {...restProps} ref={ref} className={clsx('amsterdam-grid', className)}>
+    <div
+      {...restProps}
+      ref={ref}
+      className={clsx('amsterdam-grid', paddingClasses(paddingBottom, paddingTop, paddingVertical), className)}
+    >
       {children}
     </div>
   ),
diff --git a/packages/react/src/shared/padding/index.ts b/packages/react/src/shared/padding/index.ts
new file mode 100644
index 0000000000..018a61b0d3
--- /dev/null
+++ b/packages/react/src/shared/padding/index.ts
@@ -0,0 +1,2 @@
+export type * from './types'
+export { paddingClasses } from './paddingClasses'
diff --git a/packages/react/src/shared/padding/paddingClasses.test.ts b/packages/react/src/shared/padding/paddingClasses.test.ts
new file mode 100644
index 0000000000..be9030d4ef
--- /dev/null
+++ b/packages/react/src/shared/padding/paddingClasses.test.ts
@@ -0,0 +1,33 @@
+import { paddingClasses } from './paddingClasses'
+
+describe('paddingClasses function', () => {
+  it('should return an empty array when no padding values are provided', () => {
+    const result = paddingClasses()
+    expect(result).toEqual([])
+  })
+
+  it('should return the correct classes when paddingBottom is provided', () => {
+    const result = paddingClasses('small')
+    expect(result).toEqual(['amsterdam-padding-bottom--small'])
+  })
+
+  it('should return the correct classes when paddingTop is provided', () => {
+    const result = paddingClasses(undefined, 'medium')
+    expect(result).toEqual(['amsterdam-padding-top--medium'])
+  })
+
+  it('should return the correct classes when paddingVertical is provided', () => {
+    const result = paddingClasses(undefined, undefined, 'large')
+    expect(result).toEqual(['amsterdam-padding-vertical--large'])
+  })
+
+  it('should prioritize paddingVertical over paddingBottom and paddingTop', () => {
+    const result = paddingClasses('small', 'medium', 'large')
+    expect(result).toEqual(['amsterdam-padding-vertical--large'])
+  })
+
+  it('should handle multiple padding values correctly', () => {
+    const result = paddingClasses('small', 'medium')
+    expect(result).toEqual(['amsterdam-padding-bottom--small', 'amsterdam-padding-top--medium'])
+  })
+})
diff --git a/packages/react/src/shared/padding/paddingClasses.tsx b/packages/react/src/shared/padding/paddingClasses.tsx
new file mode 100644
index 0000000000..a12d5d0b9d
--- /dev/null
+++ b/packages/react/src/shared/padding/paddingClasses.tsx
@@ -0,0 +1,23 @@
+import { PaddingSize } from './types'
+
+export const paddingClasses = (
+  paddingBottom?: PaddingSize,
+  paddingTop?: PaddingSize,
+  paddingVertical?: PaddingSize,
+): string[] => {
+  const classes = [] as string[]
+
+  if (paddingVertical) {
+    return [`amsterdam-padding-vertical--${paddingVertical}`]
+  }
+
+  if (paddingBottom) {
+    classes.push(`amsterdam-padding-bottom--${paddingBottom}`)
+  }
+
+  if (paddingTop) {
+    classes.push(`amsterdam-padding-top--${paddingTop}`)
+  }
+
+  return classes
+}
diff --git a/packages/react/src/shared/padding/types.ts b/packages/react/src/shared/padding/types.ts
new file mode 100644
index 0000000000..360cbbe278
--- /dev/null
+++ b/packages/react/src/shared/padding/types.ts
@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+export type PaddingSize = 'small' | 'medium' | 'large'
+
+export type PaddingProps = {
+  paddingBottom?: PaddingSize
+  paddingTop?: PaddingSize
+  paddingVertical?: PaddingSize
+}
diff --git a/proprietary/tokens/src/components/amsterdam/highlight.tokens.json b/proprietary/tokens/src/components/amsterdam/highlight.tokens.json
index fa8430be77..90f3fd6b95 100644
--- a/proprietary/tokens/src/components/amsterdam/highlight.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/highlight.tokens.json
@@ -1,9 +1,6 @@
 {
   "amsterdam": {
     "highlight": {
-      "padding-block": {
-        "value": "2rem"
-      },
       "blue": {
         "background-color": {
           "value": "{amsterdam.color.primary-blue}"
diff --git a/storybook/storybook-react/src/Grid/Grid.stories.tsx b/storybook/storybook-react/src/Grid/Grid.stories.tsx
index e4a6ec174c..0f77d1206d 100644
--- a/storybook/storybook-react/src/Grid/Grid.stories.tsx
+++ b/storybook/storybook-react/src/Grid/Grid.stories.tsx
@@ -5,10 +5,16 @@
 
 import { Grid, Image, Screen } from '@amsterdam/design-system-react'
 import { Meta, StoryObj } from '@storybook/react'
+import { paddingArgType } from '../shared/argTypes'
 
 const meta = {
   title: 'Layout/Grid',
   component: Grid,
+  argTypes: {
+    paddingVertical: paddingArgType,
+    paddingTop: paddingArgType,
+    paddingBottom: paddingArgType,
+  },
 } satisfies Meta<typeof Grid>
 
 export default meta
diff --git a/storybook/storybook-react/src/shared/argTypes.ts b/storybook/storybook-react/src/shared/argTypes.ts
new file mode 100644
index 0000000000..846c4ffc10
--- /dev/null
+++ b/storybook/storybook-react/src/shared/argTypes.ts
@@ -0,0 +1,13 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+export const paddingArgType = {
+  control: {
+    type: 'inline-radio',
+    direction: 'horizontal',
+    labels: { undefined: 'n/a', small: 'small', medium: 'medium', large: 'large' },
+  },
+  options: [undefined, 'small', 'medium', 'large'],
+}

From 3f3d11887e8243eee4f265e9d48bf00fa747d8b3 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Mon, 13 Nov 2023 10:14:46 +0100
Subject: [PATCH 02/21] Rename padding to space and use margin

---
 packages/css/src/index.scss                   |  2 +-
 packages/css/src/padding/padding.scss         | 40 -------------------
 packages/css/src/{padding => space}/README.md |  0
 packages/css/src/space/space.scss             | 40 +++++++++++++++++++
 packages/react/src/Grid/Grid.tsx              | 10 ++---
 packages/react/src/shared/padding/index.ts    |  2 -
 .../src/shared/padding/paddingClasses.test.ts | 33 ---------------
 .../src/shared/padding/paddingClasses.tsx     | 23 -----------
 packages/react/src/shared/padding/types.ts    | 12 ------
 packages/react/src/shared/space/index.ts      |  2 +
 .../src/shared/space/spaceClasses.test.ts     | 33 +++++++++++++++
 .../react/src/shared/space/spaceClasses.tsx   | 19 +++++++++
 packages/react/src/shared/space/types.ts      | 12 ++++++
 .../storybook-react/src/Grid/Grid.stories.tsx |  8 ++--
 .../storybook-react/src/shared/argTypes.ts    |  2 +-
 15 files changed, 117 insertions(+), 121 deletions(-)
 delete mode 100644 packages/css/src/padding/padding.scss
 rename packages/css/src/{padding => space}/README.md (100%)
 create mode 100644 packages/css/src/space/space.scss
 delete mode 100644 packages/react/src/shared/padding/index.ts
 delete mode 100644 packages/react/src/shared/padding/paddingClasses.test.ts
 delete mode 100644 packages/react/src/shared/padding/paddingClasses.tsx
 delete mode 100644 packages/react/src/shared/padding/types.ts
 create mode 100644 packages/react/src/shared/space/index.ts
 create mode 100644 packages/react/src/shared/space/spaceClasses.test.ts
 create mode 100644 packages/react/src/shared/space/spaceClasses.tsx
 create mode 100644 packages/react/src/shared/space/types.ts

diff --git a/packages/css/src/index.scss b/packages/css/src/index.scss
index a775a813d7..3ea6937f4f 100644
--- a/packages/css/src/index.scss
+++ b/packages/css/src/index.scss
@@ -4,7 +4,7 @@
  */
 
 /* Append here */
-@import "./padding/padding";
+@import "./space/space";
 @import "./image/image";
 @import "./pagination/pagination";
 @import "./accordion/accordion";
diff --git a/packages/css/src/padding/padding.scss b/packages/css/src/padding/padding.scss
deleted file mode 100644
index 93137f8442..0000000000
--- a/packages/css/src/padding/padding.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
- */
-
-.amsterdam-padding-bottom--small {
-  padding-block-end: calc(var(--amsterdam-grid-gap) / 2);
-}
-
-.amsterdam-padding-top--small {
-  padding-block-start: calc(var(--amsterdam-grid-gap) / 2);
-}
-
-.amsterdam-padding-vertical--small {
-  padding-block: calc(var(--amsterdam-grid-gap) / 2);
-}
-
-.amsterdam-padding-bottom--medium {
-  padding-block-end: var(--amsterdam-grid-gap);
-}
-
-.amsterdam-padding-top--medium {
-  padding-block-start: var(--amsterdam-grid-gap);
-}
-
-.amsterdam-padding-vertical--medium {
-  padding-block: var(--amsterdam-grid-gap);
-}
-
-.amsterdam-padding-bottom--large {
-  padding-block-end: calc(var(--amsterdam-grid-gap) * 2);
-}
-
-.amsterdam-padding-top--large {
-  padding-block-start: calc(var(--amsterdam-grid-gap) * 2);
-}
-
-.amsterdam-padding-vertical--large {
-  padding-block: calc(var(--amsterdam-grid-gap) * 2);
-}
diff --git a/packages/css/src/padding/README.md b/packages/css/src/space/README.md
similarity index 100%
rename from packages/css/src/padding/README.md
rename to packages/css/src/space/README.md
diff --git a/packages/css/src/space/space.scss b/packages/css/src/space/space.scss
new file mode 100644
index 0000000000..d7cf5d73c2
--- /dev/null
+++ b/packages/css/src/space/space.scss
@@ -0,0 +1,40 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.amsterdam-space-bottom--small {
+  margin-block-end: calc(var(--amsterdam-grid-gap) / 2);
+}
+
+.amsterdam-space-top--small {
+  margin-block-start: calc(var(--amsterdam-grid-gap) / 2);
+}
+
+.amsterdam-space-vertical--small {
+  margin-block: calc(var(--amsterdam-grid-gap) / 2);
+}
+
+.amsterdam-space-bottom--medium {
+  margin-block-end: var(--amsterdam-grid-gap);
+}
+
+.amsterdam-space-top--medium {
+  margin-block-start: var(--amsterdam-grid-gap);
+}
+
+.amsterdam-space-vertical--medium {
+  margin-block: var(--amsterdam-grid-gap);
+}
+
+.amsterdam-space-bottom--large {
+  margin-block-end: calc(var(--amsterdam-grid-gap) * 2);
+}
+
+.amsterdam-space-top--large {
+  margin-block-start: calc(var(--amsterdam-grid-gap) * 2);
+}
+
+.amsterdam-space-vertical--large {
+  margin-block: calc(var(--amsterdam-grid-gap) * 2);
+}
diff --git a/packages/react/src/Grid/Grid.tsx b/packages/react/src/Grid/Grid.tsx
index b723df5efa..cb8b6578f1 100644
--- a/packages/react/src/Grid/Grid.tsx
+++ b/packages/react/src/Grid/Grid.tsx
@@ -13,8 +13,8 @@ import {
   RefAttributes,
 } from 'react'
 import { GridCell } from './GridCell'
-import type { PaddingProps } from '../shared/padding'
-import { paddingClasses } from '../shared/padding'
+import type { SpaceProps } from '../shared/space'
+import { spaceClasses } from '../shared/space'
 
 export type GridColumnNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 
@@ -24,7 +24,7 @@ export type GridColumnNumbers = {
   wide: GridColumnNumber
 }
 
-export type GridProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>> & PaddingProps
+export type GridProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>> & SpaceProps
 
 interface GridComponent extends ForwardRefExoticComponent<GridProps & RefAttributes<HTMLDivElement>> {
   Cell: typeof GridCell
@@ -32,13 +32,13 @@ interface GridComponent extends ForwardRefExoticComponent<GridProps & RefAttribu
 
 export const Grid = forwardRef(
   (
-    { children, className, paddingBottom, paddingTop, paddingVertical, ...restProps }: GridProps,
+    { children, className, spaceBottom, spaceTop, spaceVertical, ...restProps }: GridProps,
     ref: ForwardedRef<HTMLDivElement>,
   ) => (
     <div
       {...restProps}
       ref={ref}
-      className={clsx('amsterdam-grid', paddingClasses(paddingBottom, paddingTop, paddingVertical), className)}
+      className={clsx('amsterdam-grid', spaceClasses(spaceBottom, spaceTop, spaceVertical), className)}
     >
       {children}
     </div>
diff --git a/packages/react/src/shared/padding/index.ts b/packages/react/src/shared/padding/index.ts
deleted file mode 100644
index 018a61b0d3..0000000000
--- a/packages/react/src/shared/padding/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type * from './types'
-export { paddingClasses } from './paddingClasses'
diff --git a/packages/react/src/shared/padding/paddingClasses.test.ts b/packages/react/src/shared/padding/paddingClasses.test.ts
deleted file mode 100644
index be9030d4ef..0000000000
--- a/packages/react/src/shared/padding/paddingClasses.test.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { paddingClasses } from './paddingClasses'
-
-describe('paddingClasses function', () => {
-  it('should return an empty array when no padding values are provided', () => {
-    const result = paddingClasses()
-    expect(result).toEqual([])
-  })
-
-  it('should return the correct classes when paddingBottom is provided', () => {
-    const result = paddingClasses('small')
-    expect(result).toEqual(['amsterdam-padding-bottom--small'])
-  })
-
-  it('should return the correct classes when paddingTop is provided', () => {
-    const result = paddingClasses(undefined, 'medium')
-    expect(result).toEqual(['amsterdam-padding-top--medium'])
-  })
-
-  it('should return the correct classes when paddingVertical is provided', () => {
-    const result = paddingClasses(undefined, undefined, 'large')
-    expect(result).toEqual(['amsterdam-padding-vertical--large'])
-  })
-
-  it('should prioritize paddingVertical over paddingBottom and paddingTop', () => {
-    const result = paddingClasses('small', 'medium', 'large')
-    expect(result).toEqual(['amsterdam-padding-vertical--large'])
-  })
-
-  it('should handle multiple padding values correctly', () => {
-    const result = paddingClasses('small', 'medium')
-    expect(result).toEqual(['amsterdam-padding-bottom--small', 'amsterdam-padding-top--medium'])
-  })
-})
diff --git a/packages/react/src/shared/padding/paddingClasses.tsx b/packages/react/src/shared/padding/paddingClasses.tsx
deleted file mode 100644
index a12d5d0b9d..0000000000
--- a/packages/react/src/shared/padding/paddingClasses.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { PaddingSize } from './types'
-
-export const paddingClasses = (
-  paddingBottom?: PaddingSize,
-  paddingTop?: PaddingSize,
-  paddingVertical?: PaddingSize,
-): string[] => {
-  const classes = [] as string[]
-
-  if (paddingVertical) {
-    return [`amsterdam-padding-vertical--${paddingVertical}`]
-  }
-
-  if (paddingBottom) {
-    classes.push(`amsterdam-padding-bottom--${paddingBottom}`)
-  }
-
-  if (paddingTop) {
-    classes.push(`amsterdam-padding-top--${paddingTop}`)
-  }
-
-  return classes
-}
diff --git a/packages/react/src/shared/padding/types.ts b/packages/react/src/shared/padding/types.ts
deleted file mode 100644
index 360cbbe278..0000000000
--- a/packages/react/src/shared/padding/types.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
- */
-
-export type PaddingSize = 'small' | 'medium' | 'large'
-
-export type PaddingProps = {
-  paddingBottom?: PaddingSize
-  paddingTop?: PaddingSize
-  paddingVertical?: PaddingSize
-}
diff --git a/packages/react/src/shared/space/index.ts b/packages/react/src/shared/space/index.ts
new file mode 100644
index 0000000000..636012eed3
--- /dev/null
+++ b/packages/react/src/shared/space/index.ts
@@ -0,0 +1,2 @@
+export type * from './types'
+export { spaceClasses } from './spaceClasses'
diff --git a/packages/react/src/shared/space/spaceClasses.test.ts b/packages/react/src/shared/space/spaceClasses.test.ts
new file mode 100644
index 0000000000..49fc016738
--- /dev/null
+++ b/packages/react/src/shared/space/spaceClasses.test.ts
@@ -0,0 +1,33 @@
+import { spaceClasses } from './spaceClasses'
+
+describe('spaceClasses function', () => {
+  it('should return an empty array when no space values are provided', () => {
+    const result = spaceClasses()
+    expect(result).toEqual([])
+  })
+
+  it('should return the correct classes for bottom space', () => {
+    const result = spaceClasses('small')
+    expect(result).toEqual(['amsterdam-space-bottom--small'])
+  })
+
+  it('should return the correct classes for top space', () => {
+    const result = spaceClasses(undefined, 'medium')
+    expect(result).toEqual(['amsterdam-space-top--medium'])
+  })
+
+  it('should return the correct classes for vertical space', () => {
+    const result = spaceClasses(undefined, undefined, 'large')
+    expect(result).toEqual(['amsterdam-space-vertical--large'])
+  })
+
+  it('should prioritize vertical space over bottom and top space', () => {
+    const result = spaceClasses('small', 'medium', 'large')
+    expect(result).toEqual(['amsterdam-space-vertical--large'])
+  })
+
+  it('should handle multiple space values correctly', () => {
+    const result = spaceClasses('small', 'medium')
+    expect(result).toEqual(['amsterdam-space-bottom--small', 'amsterdam-space-top--medium'])
+  })
+})
diff --git a/packages/react/src/shared/space/spaceClasses.tsx b/packages/react/src/shared/space/spaceClasses.tsx
new file mode 100644
index 0000000000..06c42a4404
--- /dev/null
+++ b/packages/react/src/shared/space/spaceClasses.tsx
@@ -0,0 +1,19 @@
+import { SpaceSize } from './types'
+
+export const spaceClasses = (spaceBottom?: SpaceSize, spaceTop?: SpaceSize, spaceVertical?: SpaceSize): string[] => {
+  const classes = [] as string[]
+
+  if (spaceVertical) {
+    return [`amsterdam-space-vertical--${spaceVertical}`]
+  }
+
+  if (spaceBottom) {
+    classes.push(`amsterdam-space-bottom--${spaceBottom}`)
+  }
+
+  if (spaceTop) {
+    classes.push(`amsterdam-space-top--${spaceTop}`)
+  }
+
+  return classes
+}
diff --git a/packages/react/src/shared/space/types.ts b/packages/react/src/shared/space/types.ts
new file mode 100644
index 0000000000..7d0a38d0b3
--- /dev/null
+++ b/packages/react/src/shared/space/types.ts
@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+export type SpaceSize = 'small' | 'medium' | 'large'
+
+export type SpaceProps = {
+  spaceBottom?: SpaceSize
+  spaceTop?: SpaceSize
+  spaceVertical?: SpaceSize
+}
diff --git a/storybook/storybook-react/src/Grid/Grid.stories.tsx b/storybook/storybook-react/src/Grid/Grid.stories.tsx
index 0f77d1206d..f96e4ec7f5 100644
--- a/storybook/storybook-react/src/Grid/Grid.stories.tsx
+++ b/storybook/storybook-react/src/Grid/Grid.stories.tsx
@@ -5,15 +5,15 @@
 
 import { Grid, Image, Screen } from '@amsterdam/design-system-react'
 import { Meta, StoryObj } from '@storybook/react'
-import { paddingArgType } from '../shared/argTypes'
+import { spaceArgType } from '../shared/argTypes'
 
 const meta = {
   title: 'Layout/Grid',
   component: Grid,
   argTypes: {
-    paddingVertical: paddingArgType,
-    paddingTop: paddingArgType,
-    paddingBottom: paddingArgType,
+    spaceVertical: spaceArgType,
+    spaceTop: spaceArgType,
+    spaceBottom: spaceArgType,
   },
 } satisfies Meta<typeof Grid>
 
diff --git a/storybook/storybook-react/src/shared/argTypes.ts b/storybook/storybook-react/src/shared/argTypes.ts
index 846c4ffc10..d17337a269 100644
--- a/storybook/storybook-react/src/shared/argTypes.ts
+++ b/storybook/storybook-react/src/shared/argTypes.ts
@@ -3,7 +3,7 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-export const paddingArgType = {
+export const spaceArgType = {
   control: {
     type: 'inline-radio',
     direction: 'horizontal',

From 3710313301ecc8b6c1f8060e434c44c8f04c3871 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Mon, 13 Nov 2023 10:15:16 +0100
Subject: [PATCH 03/21] Use padding again because of collapsing margins

---
 packages/css/src/space/space.scss | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/css/src/space/space.scss b/packages/css/src/space/space.scss
index d7cf5d73c2..5c5c679fac 100644
--- a/packages/css/src/space/space.scss
+++ b/packages/css/src/space/space.scss
@@ -4,37 +4,37 @@
  */
 
 .amsterdam-space-bottom--small {
-  margin-block-end: calc(var(--amsterdam-grid-gap) / 2);
+  padding-block-end: calc(var(--amsterdam-grid-gap) / 2);
 }
 
 .amsterdam-space-top--small {
-  margin-block-start: calc(var(--amsterdam-grid-gap) / 2);
+  padding-block-start: calc(var(--amsterdam-grid-gap) / 2);
 }
 
 .amsterdam-space-vertical--small {
-  margin-block: calc(var(--amsterdam-grid-gap) / 2);
+  padding-block: calc(var(--amsterdam-grid-gap) / 2);
 }
 
 .amsterdam-space-bottom--medium {
-  margin-block-end: var(--amsterdam-grid-gap);
+  padding-block-end: var(--amsterdam-grid-gap);
 }
 
 .amsterdam-space-top--medium {
-  margin-block-start: var(--amsterdam-grid-gap);
+  padding-block-start: var(--amsterdam-grid-gap);
 }
 
 .amsterdam-space-vertical--medium {
-  margin-block: var(--amsterdam-grid-gap);
+  padding-block: var(--amsterdam-grid-gap);
 }
 
 .amsterdam-space-bottom--large {
-  margin-block-end: calc(var(--amsterdam-grid-gap) * 2);
+  padding-block-end: calc(var(--amsterdam-grid-gap) * 2);
 }
 
 .amsterdam-space-top--large {
-  margin-block-start: calc(var(--amsterdam-grid-gap) * 2);
+  padding-block-start: calc(var(--amsterdam-grid-gap) * 2);
 }
 
 .amsterdam-space-vertical--large {
-  margin-block: calc(var(--amsterdam-grid-gap) * 2);
+  padding-block: calc(var(--amsterdam-grid-gap) * 2);
 }

From b09357d45d0e58381df150f93520ade6aa318645 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Tue, 14 Nov 2023 11:55:15 +0100
Subject: [PATCH 04/21] Allow start alignment of screen

---
 packages/css/src/screen/screen.scss  |  2 ++
 packages/react/src/Screen/Screen.tsx | 13 +++++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/css/src/screen/screen.scss b/packages/css/src/screen/screen.scss
index fb109d5ef4..d75868fb2e 100644
--- a/packages/css/src/screen/screen.scss
+++ b/packages/css/src/screen/screen.scss
@@ -9,7 +9,9 @@
 
 .amsterdam-screen {
   @include reset;
+}
 
+.amsterdam-screen--center {
   margin-inline: auto;
 }
 
diff --git a/packages/react/src/Screen/Screen.tsx b/packages/react/src/Screen/Screen.tsx
index cc0e727cc6..670132c219 100644
--- a/packages/react/src/Screen/Screen.tsx
+++ b/packages/react/src/Screen/Screen.tsx
@@ -6,15 +6,24 @@
 import clsx from 'clsx'
 import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
 
+type ScreenAlign = 'center' | 'start'
 type ScreenMaxWidth = 'wide' | 'x-wide'
 
 export interface ScreenProps extends PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
+  align?: ScreenAlign
   maxWidth?: ScreenMaxWidth
 }
 
 export const Screen = forwardRef(
-  ({ children, className, maxWidth = 'wide', ...restProps }: ScreenProps, ref: ForwardedRef<HTMLDivElement>) => (
-    <div {...restProps} ref={ref} className={clsx('amsterdam-screen', `amsterdam-screen--${maxWidth}`, className)}>
+  (
+    { align = 'center', children, className, maxWidth, ...restProps }: ScreenProps,
+    ref: ForwardedRef<HTMLDivElement>,
+  ) => (
+    <div
+      {...restProps}
+      ref={ref}
+      className={clsx('amsterdam-screen', `amsterdam-screen--${align}`, `amsterdam-screen--${maxWidth}`, className)}
+    >
       {children}
     </div>
   ),

From a4fe5de2b91d8ddd5ff6da01d65ba293f434129e Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Tue, 14 Nov 2023 12:27:12 +0100
Subject: [PATCH 05/21] Remove explicit horizontal centring of grid

---
 packages/css/src/grid/grid.scss               | 1 -
 storybook/storybook-docs/src/grid.stories.mdx | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/css/src/grid/grid.scss b/packages/css/src/grid/grid.scss
index 02e3b8981e..c51f88b28a 100644
--- a/packages/css/src/grid/grid.scss
+++ b/packages/css/src/grid/grid.scss
@@ -9,7 +9,6 @@
   display: grid;
   gap: var(--amsterdam-grid-gap);
   grid-template-columns: repeat(var(--amsterdam-grid-column-count), 1fr);
-  margin-inline: auto;
   padding-inline: var(--amsterdam-grid-padding-inline);
 
   @media screen and (min-width: $amsterdam-breakpoint-medium) {
diff --git a/storybook/storybook-docs/src/grid.stories.mdx b/storybook/storybook-docs/src/grid.stories.mdx
index 99a8317f9a..c2beccf1f8 100644
--- a/storybook/storybook-docs/src/grid.stories.mdx
+++ b/storybook/storybook-docs/src/grid.stories.mdx
@@ -33,7 +33,7 @@ Dat lijkt misschien onnatuurlijk, maar is geen probleem – doorgaans worden ele
 
 ### Marges links en rechts
 
-Het grid staat horizontaal gecentreerd op de pagina.
+In websites staat het grid horizontaal gecentreerd op de pagina.
 Aan beide zijden reserveert het grid marges om afstand te houden tot de randen van het venster.
 Deze ruimte is 1½ keer zo breed als die tussen de kolommen.
 

From cc67efdd5957355f6a5a8170afb032816f6cae69 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Thu, 16 Nov 2023 11:05:20 +0100
Subject: [PATCH 06/21] Implement dense grid

---
 packages/css/src/grid/grid.scss               |  9 +++++--
 packages/css/src/space/space.scss             | 18 +++++++-------
 packages/react/src/Grid/Grid.tsx              | 21 +++++++++++++---
 .../src/components/amsterdam/grid.tokens.json | 24 ++++++++++++++-----
 storybook/storybook-docs/src/grid.stories.mdx |  2 ++
 .../storybook-react/src/Grid/Grid.docs.mdx    | 10 ++++++++
 6 files changed, 64 insertions(+), 20 deletions(-)

diff --git a/packages/css/src/grid/grid.scss b/packages/css/src/grid/grid.scss
index c51f88b28a..0d653b5165 100644
--- a/packages/css/src/grid/grid.scss
+++ b/packages/css/src/grid/grid.scss
@@ -7,9 +7,9 @@
 
 .amsterdam-grid {
   display: grid;
-  gap: var(--amsterdam-grid-gap);
+  gap: var(--amsterdam-grid-density-low-gap);
   grid-template-columns: repeat(var(--amsterdam-grid-column-count), 1fr);
-  padding-inline: var(--amsterdam-grid-padding-inline);
+  padding-inline: var(--amsterdam-grid-density-low-padding-inline);
 
   @media screen and (min-width: $amsterdam-breakpoint-medium) {
     grid-template-columns: repeat(var(--amsterdam-grid-medium-column-count), 1fr);
@@ -19,3 +19,8 @@
     grid-template-columns: repeat(var(--amsterdam-grid-wide-column-count), 1fr);
   }
 }
+
+.amsterdam-grid--density-high {
+  gap: var(--amsterdam-grid-density-high-gap);
+  padding-inline: var(--amsterdam-grid-density-high-padding-inline);
+}
diff --git a/packages/css/src/space/space.scss b/packages/css/src/space/space.scss
index 5c5c679fac..b2d7e9713a 100644
--- a/packages/css/src/space/space.scss
+++ b/packages/css/src/space/space.scss
@@ -4,37 +4,37 @@
  */
 
 .amsterdam-space-bottom--small {
-  padding-block-end: calc(var(--amsterdam-grid-gap) / 2);
+  padding-block-end: calc(var(--amsterdam-grid-density-low-gap) / 2);
 }
 
 .amsterdam-space-top--small {
-  padding-block-start: calc(var(--amsterdam-grid-gap) / 2);
+  padding-block-start: calc(var(--amsterdam-grid-density-low-gap) / 2);
 }
 
 .amsterdam-space-vertical--small {
-  padding-block: calc(var(--amsterdam-grid-gap) / 2);
+  padding-block: calc(var(--amsterdam-grid-density-low-gap) / 2);
 }
 
 .amsterdam-space-bottom--medium {
-  padding-block-end: var(--amsterdam-grid-gap);
+  padding-block-end: var(--amsterdam-grid-density-low-gap);
 }
 
 .amsterdam-space-top--medium {
-  padding-block-start: var(--amsterdam-grid-gap);
+  padding-block-start: var(--amsterdam-grid-density-low-gap);
 }
 
 .amsterdam-space-vertical--medium {
-  padding-block: var(--amsterdam-grid-gap);
+  padding-block: var(--amsterdam-grid-density-low-gap);
 }
 
 .amsterdam-space-bottom--large {
-  padding-block-end: calc(var(--amsterdam-grid-gap) * 2);
+  padding-block-end: calc(var(--amsterdam-grid-density-low-gap) * 2);
 }
 
 .amsterdam-space-top--large {
-  padding-block-start: calc(var(--amsterdam-grid-gap) * 2);
+  padding-block-start: calc(var(--amsterdam-grid-density-low-gap) * 2);
 }
 
 .amsterdam-space-vertical--large {
-  padding-block: calc(var(--amsterdam-grid-gap) * 2);
+  padding-block: calc(var(--amsterdam-grid-density-low-gap) * 2);
 }
diff --git a/packages/react/src/Grid/Grid.tsx b/packages/react/src/Grid/Grid.tsx
index cb8b6578f1..4510a90b61 100644
--- a/packages/react/src/Grid/Grid.tsx
+++ b/packages/react/src/Grid/Grid.tsx
@@ -24,7 +24,17 @@ export type GridColumnNumbers = {
   wide: GridColumnNumber
 }
 
-export type GridProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>> & SpaceProps
+type GridDensity = 'low' | 'high'
+
+export type GridProps = {
+  /**
+   * The density of the grid: low (for websites) or high (for applications).
+   * Adjusts the pace with which columns get wider, and the start width as well.
+   * This is to be implemented more generally – it will be moved into a theme soon.
+   */
+  density?: GridDensity
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>> &
+  SpaceProps
 
 interface GridComponent extends ForwardRefExoticComponent<GridProps & RefAttributes<HTMLDivElement>> {
   Cell: typeof GridCell
@@ -32,13 +42,18 @@ interface GridComponent extends ForwardRefExoticComponent<GridProps & RefAttribu
 
 export const Grid = forwardRef(
   (
-    { children, className, spaceBottom, spaceTop, spaceVertical, ...restProps }: GridProps,
+    { children, className, density = 'low', spaceBottom, spaceTop, spaceVertical, ...restProps }: GridProps,
     ref: ForwardedRef<HTMLDivElement>,
   ) => (
     <div
       {...restProps}
       ref={ref}
-      className={clsx('amsterdam-grid', spaceClasses(spaceBottom, spaceTop, spaceVertical), className)}
+      className={clsx(
+        'amsterdam-grid',
+        density && `amsterdam-grid--density-${density}`,
+        spaceClasses(spaceBottom, spaceTop, spaceVertical),
+        className,
+      )}
     >
       {children}
     </div>
diff --git a/proprietary/tokens/src/components/amsterdam/grid.tokens.json b/proprietary/tokens/src/components/amsterdam/grid.tokens.json
index 8e1bc9faea..9b45e920d1 100644
--- a/proprietary/tokens/src/components/amsterdam/grid.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/grid.tokens.json
@@ -4,13 +4,25 @@
       "column-count": {
         "value": "4"
       },
-      "gap": {
-        "value": "clamp(0.5rem, 0.375rem + 3.125vw, 3.5rem)",
-        "comment": "Grows from 8px at 320px wide to 56px at 1440px wide."
+      "density-low": {
+        "gap": {
+          "value": "clamp(1rem, 3.125vw + 0.375rem, 3.5rem)",
+          "comment": "Grows from 16px at 320px wide to 56px at 1600px wide."
+        },
+        "padding-inline": {
+          "value": "clamp(1.5rem, 4.6875vw + 0.5625rem, 5.25rem)",
+          "comment": "Equals 1.5 times the gap."
+        }
       },
-      "padding-inline": {
-        "value": "clamp(0.75rem, 0.5625rem + 4.875vw, 5.25rem)",
-        "comment": "Equals 1.5 times the gap."
+      "density-high": {
+        "gap": {
+          "value": "clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem)",
+          "comment": "Grows from 16px at 1088px wide to 40px at 2624px wide."
+        },
+        "padding-inline": {
+          "value": "clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem)",
+          "comment": "Equals the gap."
+        }
       },
       "medium": {
         "column-count": {
diff --git a/storybook/storybook-docs/src/grid.stories.mdx b/storybook/storybook-docs/src/grid.stories.mdx
index c2beccf1f8..e37a5ea83d 100644
--- a/storybook/storybook-docs/src/grid.stories.mdx
+++ b/storybook/storybook-docs/src/grid.stories.mdx
@@ -28,6 +28,8 @@ Voor elke 256 pixels extra breedte groeit de witruimte lineair met 8 pixels.
 Bij een vensterbreedte van 1600 pixels is het dus 56 pixels.
 Dit past bij de ruimtelijke opzet van de huisstijl.
 
+[Demo](https://modern-fluid-typography.vercel.app?rootFontSize=16&minSize=8&fluidSize=3.125&relativeSize=0.375&maxSize=56)
+
 Op brede vensters worden de witruimtes bijna even breed als de kolommen zelf.
 Dat lijkt misschien onnatuurlijk, maar is geen probleem – doorgaans worden elementen op 3 of 4 kolommen van het grid geplaatst en die krijgen dan ook de tussenliggende witruimtes mee.
 
diff --git a/storybook/storybook-react/src/Grid/Grid.docs.mdx b/storybook/storybook-react/src/Grid/Grid.docs.mdx
index 8a4791f670..ffb67e1940 100644
--- a/storybook/storybook-react/src/Grid/Grid.docs.mdx
+++ b/storybook/storybook-react/src/Grid/Grid.docs.mdx
@@ -29,3 +29,13 @@ Elke cel biedt ruimte voor een afbeelding.
 <Canvas of={GridStories.Cells} />
 
 Voor meer voorbeelden raadpleeg je [Grid Cell](?path=/docs/react_layout-grid-cell--docs) zelf.
+
+## Research
+
+TODO Intro
+
+- https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/
+- https://geary.co/clamp-calculator/
+- https://modern-fluid-typography.vercel.app/?rootFontSize=16&minSize=16&fluidSize=3.125&relativeSize=0.375&maxSize=56
+- https://modern-fluid-typography.vercel.app/?rootFontSize=16&minSize=16&fluidSize=1.5625&relativeSize=-0.0625&maxSize=40
+- https://gs.statcounter.com/screen-resolution-stats/desktop/netherlands

From f19c3ba504bb39af170403649dc2ebf4bc29ff9e Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Thu, 16 Nov 2023 11:21:51 +0100
Subject: [PATCH 07/21] Add documentation

---
 packages/css/src/space/README.md | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/css/src/space/README.md b/packages/css/src/space/README.md
index 270aed4e4b..55e89c7bfc 100644
--- a/packages/css/src/space/README.md
+++ b/packages/css/src/space/README.md
@@ -1 +1,31 @@
-# Padding
+# Space
+
+Utility classes are available to add spacing above and below an element.
+
+## Medium
+
+The `medium` class names set a `padding` as wide as the [Grid](?path=/docs/react_layout-grid--docs) column gap at the current width of the window.
+
+- `.amsterdam-space-vertical--medium`
+- `.amsterdam-space-bottom--medium`
+- `.amsterdam-space-top--medium`
+
+## Small
+
+The `small` class names set half that size.
+
+- `.amsterdam-space-vertical--small`
+- `.amsterdam-space-bottom--small`
+- `.amsterdam-space-top--small`
+
+## Wide
+
+The `wide` class names set double that size.
+
+- `.amsterdam-space-vertical--wide`
+- `.amsterdam-space-bottom--wide`
+- `.amsterdam-space-top--wide`
+
+## Horizontal spacing
+
+Horizontal spacing is a responsibility of the grid.

From fdb0bb2bee7856ab43e34dd0bc653ec872618cdf Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Thu, 16 Nov 2023 12:06:24 +0100
Subject: [PATCH 08/21] Make spacing a local prop for Grid for now

---
 packages/css/src/grid/grid.scss               | 72 +++++++++++++++++++
 packages/css/src/index.scss                   |  1 -
 packages/css/src/space/README.md              | 31 --------
 packages/css/src/space/space.scss             | 40 -----------
 packages/react/src/Grid/Grid.test.tsx         | 50 +++++++++++++
 packages/react/src/Grid/Grid.tsx              | 35 +++++++--
 packages/react/src/shared/space/index.ts      |  2 -
 .../src/shared/space/spaceClasses.test.ts     | 33 ---------
 .../react/src/shared/space/spaceClasses.tsx   | 19 -----
 packages/react/src/shared/space/types.ts      | 12 ----
 10 files changed, 152 insertions(+), 143 deletions(-)
 delete mode 100644 packages/css/src/space/README.md
 delete mode 100644 packages/css/src/space/space.scss
 delete mode 100644 packages/react/src/shared/space/index.ts
 delete mode 100644 packages/react/src/shared/space/spaceClasses.test.ts
 delete mode 100644 packages/react/src/shared/space/spaceClasses.tsx
 delete mode 100644 packages/react/src/shared/space/types.ts

diff --git a/packages/css/src/grid/grid.scss b/packages/css/src/grid/grid.scss
index 0d653b5165..d27241b421 100644
--- a/packages/css/src/grid/grid.scss
+++ b/packages/css/src/grid/grid.scss
@@ -24,3 +24,75 @@
   gap: var(--amsterdam-grid-density-high-gap);
   padding-inline: var(--amsterdam-grid-density-high-padding-inline);
 }
+
+.amsterdam-grid--density-low--space-bottom--small {
+  padding-block-end: calc(var(--amsterdam-grid-density-low-gap) / 2);
+}
+
+.amsterdam-grid--density-low--space-top--small {
+  padding-block-start: calc(var(--amsterdam-grid-density-low-gap) / 2);
+}
+
+.amsterdam-grid--density-low--space-vertical--small {
+  padding-block: calc(var(--amsterdam-grid-density-low-gap) / 2);
+}
+
+.amsterdam-grid--density-low--space-bottom--medium {
+  padding-block-end: var(--amsterdam-grid-density-low-gap);
+}
+
+.amsterdam-grid--density-low--space-top--medium {
+  padding-block-start: var(--amsterdam-grid-density-low-gap);
+}
+
+.amsterdam-grid--density-low--space-vertical--medium {
+  padding-block: var(--amsterdam-grid-density-low-gap);
+}
+
+.amsterdam-grid--density-low--space-bottom--large {
+  padding-block-end: calc(var(--amsterdam-grid-density-low-gap) * 2);
+}
+
+.amsterdam-grid--density-low--space-top--large {
+  padding-block-start: calc(var(--amsterdam-grid-density-low-gap) * 2);
+}
+
+.amsterdam-grid--density-low--space-vertical--large {
+  padding-block: calc(var(--amsterdam-grid-density-low-gap) * 2);
+}
+
+.amsterdam-grid--density-high--space-bottom--small {
+  padding-block-end: calc(var(--amsterdam-grid-density-high-gap) / 2);
+}
+
+.amsterdam-grid--density-high--space-top--small {
+  padding-block-start: calc(var(--amsterdam-grid-density-high-gap) / 2);
+}
+
+.amsterdam-grid--density-high--space-vertical--small {
+  padding-block: calc(var(--amsterdam-grid-density-high-gap) / 2);
+}
+
+.amsterdam-grid--density-high--space-bottom--medium {
+  padding-block-end: var(--amsterdam-grid-density-high-gap);
+}
+
+.amsterdam-grid--density-high--space-top--medium {
+  padding-block-start: var(--amsterdam-grid-density-high-gap);
+}
+
+.amsterdam-grid--density-high--space-vertical--medium {
+  padding-block: var(--amsterdam-grid-density-high-gap);
+}
+
+.amsterdam-grid--density-high--space-bottom--large {
+  padding-block-end: calc(var(--amsterdam-grid-density-high-gap) * 2);
+}
+
+.amsterdam-grid--density-high--space-top--large {
+  padding-block-start: calc(var(--amsterdam-grid-density-high-gap) * 2);
+}
+
+.amsterdam-grid--density-high--space-vertical--large {
+  padding-block: calc(var(--amsterdam-grid-density-high-gap) * 2);
+}
diff --git a/packages/css/src/index.scss b/packages/css/src/index.scss
index 3ea6937f4f..f2a4aa7fd4 100644
--- a/packages/css/src/index.scss
+++ b/packages/css/src/index.scss
@@ -4,7 +4,6 @@
  */
 
 /* Append here */
-@import "./space/space";
 @import "./image/image";
 @import "./pagination/pagination";
 @import "./accordion/accordion";
diff --git a/packages/css/src/space/README.md b/packages/css/src/space/README.md
deleted file mode 100644
index 55e89c7bfc..0000000000
--- a/packages/css/src/space/README.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# Space
-
-Utility classes are available to add spacing above and below an element.
-
-## Medium
-
-The `medium` class names set a `padding` as wide as the [Grid](?path=/docs/react_layout-grid--docs) column gap at the current width of the window.
-
-- `.amsterdam-space-vertical--medium`
-- `.amsterdam-space-bottom--medium`
-- `.amsterdam-space-top--medium`
-
-## Small
-
-The `small` class names set half that size.
-
-- `.amsterdam-space-vertical--small`
-- `.amsterdam-space-bottom--small`
-- `.amsterdam-space-top--small`
-
-## Wide
-
-The `wide` class names set double that size.
-
-- `.amsterdam-space-vertical--wide`
-- `.amsterdam-space-bottom--wide`
-- `.amsterdam-space-top--wide`
-
-## Horizontal spacing
-
-Horizontal spacing is a responsibility of the grid.
diff --git a/packages/css/src/space/space.scss b/packages/css/src/space/space.scss
deleted file mode 100644
index b2d7e9713a..0000000000
--- a/packages/css/src/space/space.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
- */
-
-.amsterdam-space-bottom--small {
-  padding-block-end: calc(var(--amsterdam-grid-density-low-gap) / 2);
-}
-
-.amsterdam-space-top--small {
-  padding-block-start: calc(var(--amsterdam-grid-density-low-gap) / 2);
-}
-
-.amsterdam-space-vertical--small {
-  padding-block: calc(var(--amsterdam-grid-density-low-gap) / 2);
-}
-
-.amsterdam-space-bottom--medium {
-  padding-block-end: var(--amsterdam-grid-density-low-gap);
-}
-
-.amsterdam-space-top--medium {
-  padding-block-start: var(--amsterdam-grid-density-low-gap);
-}
-
-.amsterdam-space-vertical--medium {
-  padding-block: var(--amsterdam-grid-density-low-gap);
-}
-
-.amsterdam-space-bottom--large {
-  padding-block-end: calc(var(--amsterdam-grid-density-low-gap) * 2);
-}
-
-.amsterdam-space-top--large {
-  padding-block-start: calc(var(--amsterdam-grid-density-low-gap) * 2);
-}
-
-.amsterdam-space-vertical--large {
-  padding-block: calc(var(--amsterdam-grid-density-low-gap) * 2);
-}
diff --git a/packages/react/src/Grid/Grid.test.tsx b/packages/react/src/Grid/Grid.test.tsx
index 5d62772910..ebbc3489c4 100644
--- a/packages/react/src/Grid/Grid.test.tsx
+++ b/packages/react/src/Grid/Grid.test.tsx
@@ -24,6 +24,56 @@ describe('Grid', () => {
     expect(component).toHaveClass('amsterdam-grid')
   })
 
+  it('renders the high-density class name', () => {
+    const { container } = render(<Grid density="high" />)
+    const component = container.querySelector(':only-child')
+    expect(component).toHaveClass('amsterdam-grid--density-high')
+  })
+
+  it('renders a medium vertical spacing class name for a low-density grid', () => {
+    const { container } = render(<Grid spaceVertical="medium" />)
+    const component = container.querySelector(':only-child')
+    expect(component).toHaveClass('amsterdam-grid--density-low--space-vertical--medium')
+  })
+
+  it('renders a medium vertical spacing class name for a high-density grid', () => {
+    const { container } = render(<Grid density="high" spaceVertical="medium" />)
+    const component = container.querySelector(':only-child')
+    expect(component).toHaveClass('amsterdam-grid--density-high--space-vertical--medium')
+  })
+
+  it('renders a small top class name for a low-density grid', () => {
+    const { container } = render(<Grid spaceTop="small" />)
+    const component = container.querySelector(':only-child')
+    expect(component).toHaveClass('amsterdam-grid--density-low--space-top--small')
+  })
+
+  it('renders a small top class name for a high-density grid', () => {
+    const { container } = render(<Grid density="high" spaceTop="small" />)
+    const component = container.querySelector(':only-child')
+    expect(component).toHaveClass('amsterdam-grid--density-high--space-top--small')
+  })
+
+  it('renders a large bottom class name for a low-density grid', () => {
+    const { container } = render(<Grid spaceBottom="large" />)
+    const component = container.querySelector(':only-child')
+    expect(component).toHaveClass('amsterdam-grid--density-low--space-bottom--large')
+  })
+
+  it('renders a large bottom class name for a high-density grid', () => {
+    const { container } = render(<Grid density="high" spaceBottom="large" />)
+    const component = container.querySelector(':only-child')
+    expect(component).toHaveClass('amsterdam-grid--density-high--space-bottom--large')
+  })
+
+  it('prioritizes vertical space over bottom and top space', () => {
+    const { container } = render(<Grid spaceVertical="medium" spaceTop="small" spaceBottom="large" />)
+    const component = container.querySelector(':only-child')
+    expect(component).toHaveClass('amsterdam-grid--density-low--space-vertical--medium')
+    expect(component).not.toHaveClass('amsterdam-grid--density-low--space-top--small')
+    expect(component).not.toHaveClass('amsterdam-grid--density-low--space-bottom--large')
+  })
+
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLDivElement>()
     const { container } = render(<Grid ref={ref} />)
diff --git a/packages/react/src/Grid/Grid.tsx b/packages/react/src/Grid/Grid.tsx
index 4510a90b61..3d59ac9d2b 100644
--- a/packages/react/src/Grid/Grid.tsx
+++ b/packages/react/src/Grid/Grid.tsx
@@ -13,8 +13,6 @@ import {
   RefAttributes,
 } from 'react'
 import { GridCell } from './GridCell'
-import type { SpaceProps } from '../shared/space'
-import { spaceClasses } from '../shared/space'
 
 export type GridColumnNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 
@@ -26,6 +24,8 @@ export type GridColumnNumbers = {
 
 type GridDensity = 'low' | 'high'
 
+type GridSpaceSize = 'small' | 'medium' | 'large'
+
 export type GridProps = {
   /**
    * The density of the grid: low (for websites) or high (for applications).
@@ -33,8 +33,33 @@ export type GridProps = {
    * This is to be implemented more generally – it will be moved into a theme soon.
    */
   density?: GridDensity
-} & PropsWithChildren<HTMLAttributes<HTMLDivElement>> &
-  SpaceProps
+  spaceBottom?: GridSpaceSize
+  spaceTop?: GridSpaceSize
+  spaceVertical?: GridSpaceSize
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>
+
+const spaceClasses = (
+  density: GridDensity,
+  spaceBottom?: GridSpaceSize,
+  spaceTop?: GridSpaceSize,
+  spaceVertical?: GridSpaceSize,
+): string[] => {
+  const classes = [] as string[]
+
+  if (spaceVertical) {
+    return [`amsterdam-grid--density-${density}--space-vertical--${spaceVertical}`]
+  }
+
+  if (spaceBottom) {
+    classes.push(`amsterdam-grid--density-${density}--space-bottom--${spaceBottom}`)
+  }
+
+  if (spaceTop) {
+    classes.push(`amsterdam-grid--density-${density}--space-top--${spaceTop}`)
+  }
+
+  return classes
+}
 
 interface GridComponent extends ForwardRefExoticComponent<GridProps & RefAttributes<HTMLDivElement>> {
   Cell: typeof GridCell
@@ -51,7 +76,7 @@ export const Grid = forwardRef(
       className={clsx(
         'amsterdam-grid',
         density && `amsterdam-grid--density-${density}`,
-        spaceClasses(spaceBottom, spaceTop, spaceVertical),
+        spaceClasses(density, spaceBottom, spaceTop, spaceVertical),
         className,
       )}
     >
diff --git a/packages/react/src/shared/space/index.ts b/packages/react/src/shared/space/index.ts
deleted file mode 100644
index 636012eed3..0000000000
--- a/packages/react/src/shared/space/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type * from './types'
-export { spaceClasses } from './spaceClasses'
diff --git a/packages/react/src/shared/space/spaceClasses.test.ts b/packages/react/src/shared/space/spaceClasses.test.ts
deleted file mode 100644
index 49fc016738..0000000000
--- a/packages/react/src/shared/space/spaceClasses.test.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { spaceClasses } from './spaceClasses'
-
-describe('spaceClasses function', () => {
-  it('should return an empty array when no space values are provided', () => {
-    const result = spaceClasses()
-    expect(result).toEqual([])
-  })
-
-  it('should return the correct classes for bottom space', () => {
-    const result = spaceClasses('small')
-    expect(result).toEqual(['amsterdam-space-bottom--small'])
-  })
-
-  it('should return the correct classes for top space', () => {
-    const result = spaceClasses(undefined, 'medium')
-    expect(result).toEqual(['amsterdam-space-top--medium'])
-  })
-
-  it('should return the correct classes for vertical space', () => {
-    const result = spaceClasses(undefined, undefined, 'large')
-    expect(result).toEqual(['amsterdam-space-vertical--large'])
-  })
-
-  it('should prioritize vertical space over bottom and top space', () => {
-    const result = spaceClasses('small', 'medium', 'large')
-    expect(result).toEqual(['amsterdam-space-vertical--large'])
-  })
-
-  it('should handle multiple space values correctly', () => {
-    const result = spaceClasses('small', 'medium')
-    expect(result).toEqual(['amsterdam-space-bottom--small', 'amsterdam-space-top--medium'])
-  })
-})
diff --git a/packages/react/src/shared/space/spaceClasses.tsx b/packages/react/src/shared/space/spaceClasses.tsx
deleted file mode 100644
index 06c42a4404..0000000000
--- a/packages/react/src/shared/space/spaceClasses.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { SpaceSize } from './types'
-
-export const spaceClasses = (spaceBottom?: SpaceSize, spaceTop?: SpaceSize, spaceVertical?: SpaceSize): string[] => {
-  const classes = [] as string[]
-
-  if (spaceVertical) {
-    return [`amsterdam-space-vertical--${spaceVertical}`]
-  }
-
-  if (spaceBottom) {
-    classes.push(`amsterdam-space-bottom--${spaceBottom}`)
-  }
-
-  if (spaceTop) {
-    classes.push(`amsterdam-space-top--${spaceTop}`)
-  }
-
-  return classes
-}
diff --git a/packages/react/src/shared/space/types.ts b/packages/react/src/shared/space/types.ts
deleted file mode 100644
index 7d0a38d0b3..0000000000
--- a/packages/react/src/shared/space/types.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
- */
-
-export type SpaceSize = 'small' | 'medium' | 'large'
-
-export type SpaceProps = {
-  spaceBottom?: SpaceSize
-  spaceTop?: SpaceSize
-  spaceVertical?: SpaceSize
-}

From 7f03defd2bfe12f935069e3507cdbdbab9ea093e Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Thu, 16 Nov 2023 12:14:38 +0100
Subject: [PATCH 09/21] Document vertical spacing

---
 .../storybook-react/src/Grid/Grid.docs.mdx    | 22 ++++++++++++-------
 .../storybook-react/src/Grid/Grid.stories.tsx |  9 ++++++++
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/storybook/storybook-react/src/Grid/Grid.docs.mdx b/storybook/storybook-react/src/Grid/Grid.docs.mdx
index ffb67e1940..6ed23b6744 100644
--- a/storybook/storybook-react/src/Grid/Grid.docs.mdx
+++ b/storybook/storybook-react/src/Grid/Grid.docs.mdx
@@ -14,6 +14,18 @@ De roze vlakken vertegenwoordigen de kolommen van het grid. Zoom in of verander
 
 <Primary />
 
+### Verticale witruimte
+
+De opties `spaceVertical`, `spaceTop` en `spaceBottom` voegen witruimte boven en/of onder het grid toe.
+Dit is bijvoorbeeld handig in Footer of Highlight, of tussen twee opvolgende grids.
+
+Elk kan een waarde `medium`, `small` of `large` krijgen.
+De witruimtes zijn even breed als de horizontale witruimte tussen de kolommen,
+respectievelijk de helft en het dubbele daarvan.
+Deze krimpen en groeien dus ook met de vensterbreedte.
+
+<Canvas of={GridStories.Space} />
+
 ### Cellen
 
 Binnen het grid maak je cellen waarin andere componenten geplaatst kunnen worden.
@@ -30,12 +42,6 @@ Elke cel biedt ruimte voor een afbeelding.
 
 Voor meer voorbeelden raadpleeg je [Grid Cell](?path=/docs/react_layout-grid-cell--docs) zelf.
 
-## Research
-
-TODO Intro
+## Richtlijnen
 
-- https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/
-- https://geary.co/clamp-calculator/
-- https://modern-fluid-typography.vercel.app/?rootFontSize=16&minSize=16&fluidSize=3.125&relativeSize=0.375&maxSize=56
-- https://modern-fluid-typography.vercel.app/?rootFontSize=16&minSize=16&fluidSize=1.5625&relativeSize=-0.0625&maxSize=40
-- https://gs.statcounter.com/screen-resolution-stats/desktop/netherlands
+- Gebruik de `spaceVertical` prop niet tegelijk met de `spaceTop` of `spaceBottom` props.
diff --git a/storybook/storybook-react/src/Grid/Grid.stories.tsx b/storybook/storybook-react/src/Grid/Grid.stories.tsx
index f96e4ec7f5..b99cd74b19 100644
--- a/storybook/storybook-react/src/Grid/Grid.stories.tsx
+++ b/storybook/storybook-react/src/Grid/Grid.stories.tsx
@@ -39,6 +39,15 @@ export const Default: Story = {
   name: 'Basis',
 }
 
+export const Space: Story = {
+  ...StoryTemplate,
+  args: {
+    children: Array.from(Array(12).keys()).map((i) => <Grid.Cell className="amsterdam-docs-pink-box" key={i} />),
+    spaceVertical: 'medium',
+  },
+  name: 'Verticale witruimte',
+}
+
 export const Cells: Story = {
   ...StoryTemplate,
   args: {

From e2cf93c9077fcef699ff4b029158b0d633275703 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Thu, 16 Nov 2023 12:18:47 +0100
Subject: [PATCH 10/21] =?UTF-8?q?Rename=20=E2=80=98space=E2=80=99=20to=20?=
 =?UTF-8?q?=E2=80=98margin=E2=80=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/css/src/grid/grid.scss               | 36 +++++++++----------
 packages/react/src/Grid/Grid.test.tsx         | 34 +++++++++---------
 packages/react/src/Grid/Grid.tsx              | 32 ++++++++---------
 .../storybook-react/src/Grid/Grid.docs.mdx    | 10 +++---
 .../storybook-react/src/Grid/Grid.stories.tsx |  2 +-
 5 files changed, 58 insertions(+), 56 deletions(-)

diff --git a/packages/css/src/grid/grid.scss b/packages/css/src/grid/grid.scss
index d27241b421..b5173e5680 100644
--- a/packages/css/src/grid/grid.scss
+++ b/packages/css/src/grid/grid.scss
@@ -25,74 +25,74 @@
   padding-inline: var(--amsterdam-grid-density-high-padding-inline);
 }
 
-.amsterdam-grid--density-low--space-bottom--small {
+.amsterdam-grid--density-low--margin-bottom--small {
   padding-block-end: calc(var(--amsterdam-grid-density-low-gap) / 2);
 }
 
-.amsterdam-grid--density-low--space-top--small {
+.amsterdam-grid--density-low--margin-top--small {
   padding-block-start: calc(var(--amsterdam-grid-density-low-gap) / 2);
 }
 
-.amsterdam-grid--density-low--space-vertical--small {
+.amsterdam-grid--density-low--margin-vertical--small {
   padding-block: calc(var(--amsterdam-grid-density-low-gap) / 2);
 }
 
-.amsterdam-grid--density-low--space-bottom--medium {
+.amsterdam-grid--density-low--margin-bottom--medium {
   padding-block-end: var(--amsterdam-grid-density-low-gap);
 }
 
-.amsterdam-grid--density-low--space-top--medium {
+.amsterdam-grid--density-low--margin-top--medium {
   padding-block-start: var(--amsterdam-grid-density-low-gap);
 }
 
-.amsterdam-grid--density-low--space-vertical--medium {
+.amsterdam-grid--density-low--margin-vertical--medium {
   padding-block: var(--amsterdam-grid-density-low-gap);
 }
 
-.amsterdam-grid--density-low--space-bottom--large {
+.amsterdam-grid--density-low--margin-bottom--large {
   padding-block-end: calc(var(--amsterdam-grid-density-low-gap) * 2);
 }
 
-.amsterdam-grid--density-low--space-top--large {
+.amsterdam-grid--density-low--margin-top--large {
   padding-block-start: calc(var(--amsterdam-grid-density-low-gap) * 2);
 }
 
-.amsterdam-grid--density-low--space-vertical--large {
+.amsterdam-grid--density-low--margin-vertical--large {
   padding-block: calc(var(--amsterdam-grid-density-low-gap) * 2);
 }
 
-.amsterdam-grid--density-high--space-bottom--small {
+.amsterdam-grid--density-high--margin-bottom--small {
   padding-block-end: calc(var(--amsterdam-grid-density-high-gap) / 2);
 }
 
-.amsterdam-grid--density-high--space-top--small {
+.amsterdam-grid--density-high--margin-top--small {
   padding-block-start: calc(var(--amsterdam-grid-density-high-gap) / 2);
 }
 
-.amsterdam-grid--density-high--space-vertical--small {
+.amsterdam-grid--density-high--margin-vertical--small {
   padding-block: calc(var(--amsterdam-grid-density-high-gap) / 2);
 }
 
-.amsterdam-grid--density-high--space-bottom--medium {
+.amsterdam-grid--density-high--margin-bottom--medium {
   padding-block-end: var(--amsterdam-grid-density-high-gap);
 }
 
-.amsterdam-grid--density-high--space-top--medium {
+.amsterdam-grid--density-high--margin-top--medium {
   padding-block-start: var(--amsterdam-grid-density-high-gap);
 }
 
-.amsterdam-grid--density-high--space-vertical--medium {
+.amsterdam-grid--density-high--margin-vertical--medium {
   padding-block: var(--amsterdam-grid-density-high-gap);
 }
 
-.amsterdam-grid--density-high--space-bottom--large {
+.amsterdam-grid--density-high--margin-bottom--large {
   padding-block-end: calc(var(--amsterdam-grid-density-high-gap) * 2);
 }
 
-.amsterdam-grid--density-high--space-top--large {
+.amsterdam-grid--density-high--margin-top--large {
   padding-block-start: calc(var(--amsterdam-grid-density-high-gap) * 2);
 }
 
-.amsterdam-grid--density-high--space-vertical--large {
+.amsterdam-grid--density-high--margin-vertical--large {
   padding-block: calc(var(--amsterdam-grid-density-high-gap) * 2);
 }
diff --git a/packages/react/src/Grid/Grid.test.tsx b/packages/react/src/Grid/Grid.test.tsx
index ebbc3489c4..f402f56fa8 100644
--- a/packages/react/src/Grid/Grid.test.tsx
+++ b/packages/react/src/Grid/Grid.test.tsx
@@ -31,47 +31,47 @@ describe('Grid', () => {
   })
 
   it('renders a medium vertical spacing class name for a low-density grid', () => {
-    const { container } = render(<Grid spaceVertical="medium" />)
+    const { container } = render(<Grid marginVertical="medium" />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--density-low--space-vertical--medium')
+    expect(component).toHaveClass('amsterdam-grid--density-low--margin-vertical--medium')
   })
 
   it('renders a medium vertical spacing class name for a high-density grid', () => {
-    const { container } = render(<Grid density="high" spaceVertical="medium" />)
+    const { container } = render(<Grid density="high" marginVertical="medium" />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--density-high--space-vertical--medium')
+    expect(component).toHaveClass('amsterdam-grid--density-high--margin-vertical--medium')
   })
 
   it('renders a small top class name for a low-density grid', () => {
-    const { container } = render(<Grid spaceTop="small" />)
+    const { container } = render(<Grid marginTop="small" />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--density-low--space-top--small')
+    expect(component).toHaveClass('amsterdam-grid--density-low--margin-top--small')
   })
 
   it('renders a small top class name for a high-density grid', () => {
-    const { container } = render(<Grid density="high" spaceTop="small" />)
+    const { container } = render(<Grid density="high" marginTop="small" />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--density-high--space-top--small')
+    expect(component).toHaveClass('amsterdam-grid--density-high--margin-top--small')
   })
 
   it('renders a large bottom class name for a low-density grid', () => {
-    const { container } = render(<Grid spaceBottom="large" />)
+    const { container } = render(<Grid marginBottom="large" />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--density-low--space-bottom--large')
+    expect(component).toHaveClass('amsterdam-grid--density-low--margin-bottom--large')
   })
 
   it('renders a large bottom class name for a high-density grid', () => {
-    const { container } = render(<Grid density="high" spaceBottom="large" />)
+    const { container } = render(<Grid density="high" marginBottom="large" />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--density-high--space-bottom--large')
+    expect(component).toHaveClass('amsterdam-grid--density-high--margin-bottom--large')
   })
 
-  it('prioritizes vertical space over bottom and top space', () => {
-    const { container } = render(<Grid spaceVertical="medium" spaceTop="small" spaceBottom="large" />)
+  it('prioritizes vertical margin over bottom and top margin', () => {
+    const { container } = render(<Grid marginVertical="medium" marginTop="small" marginBottom="large" />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--density-low--space-vertical--medium')
-    expect(component).not.toHaveClass('amsterdam-grid--density-low--space-top--small')
-    expect(component).not.toHaveClass('amsterdam-grid--density-low--space-bottom--large')
+    expect(component).toHaveClass('amsterdam-grid--density-low--margin-vertical--medium')
+    expect(component).not.toHaveClass('amsterdam-grid--density-low--margin-top--small')
+    expect(component).not.toHaveClass('amsterdam-grid--density-low--margin-bottom--large')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/Grid/Grid.tsx b/packages/react/src/Grid/Grid.tsx
index 3d59ac9d2b..b46668ffa9 100644
--- a/packages/react/src/Grid/Grid.tsx
+++ b/packages/react/src/Grid/Grid.tsx
@@ -24,7 +24,7 @@ export type GridColumnNumbers = {
 
 type GridDensity = 'low' | 'high'
 
-type GridSpaceSize = 'small' | 'medium' | 'large'
+type GridMarginSize = 'small' | 'medium' | 'large'
 
 export type GridProps = {
   /**
@@ -33,29 +33,29 @@ export type GridProps = {
    * This is to be implemented more generally – it will be moved into a theme soon.
    */
   density?: GridDensity
-  spaceBottom?: GridSpaceSize
-  spaceTop?: GridSpaceSize
-  spaceVertical?: GridSpaceSize
+  marginBottom?: GridMarginSize
+  marginTop?: GridMarginSize
+  marginVertical?: GridMarginSize
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
-const spaceClasses = (
+const marginClasses = (
   density: GridDensity,
-  spaceBottom?: GridSpaceSize,
-  spaceTop?: GridSpaceSize,
-  spaceVertical?: GridSpaceSize,
+  marginBottom?: GridMarginSize,
+  marginTop?: GridMarginSize,
+  marginVertical?: GridMarginSize,
 ): string[] => {
   const classes = [] as string[]
 
-  if (spaceVertical) {
-    return [`amsterdam-grid--density-${density}--space-vertical--${spaceVertical}`]
+  if (marginVertical) {
+    return [`amsterdam-grid--density-${density}--margin-vertical--${marginVertical}`]
   }
 
-  if (spaceBottom) {
-    classes.push(`amsterdam-grid--density-${density}--space-bottom--${spaceBottom}`)
+  if (marginBottom) {
+    classes.push(`amsterdam-grid--density-${density}--margin-bottom--${marginBottom}`)
   }
 
-  if (spaceTop) {
-    classes.push(`amsterdam-grid--density-${density}--space-top--${spaceTop}`)
+  if (marginTop) {
+    classes.push(`amsterdam-grid--density-${density}--margin-top--${marginTop}`)
   }
 
   return classes
@@ -67,7 +67,7 @@ interface GridComponent extends ForwardRefExoticComponent<GridProps & RefAttribu
 
 export const Grid = forwardRef(
   (
-    { children, className, density = 'low', spaceBottom, spaceTop, spaceVertical, ...restProps }: GridProps,
+    { children, className, density = 'low', marginBottom, marginTop, marginVertical, ...restProps }: GridProps,
     ref: ForwardedRef<HTMLDivElement>,
   ) => (
     <div
@@ -76,7 +76,7 @@ export const Grid = forwardRef(
       className={clsx(
         'amsterdam-grid',
         density && `amsterdam-grid--density-${density}`,
-        spaceClasses(density, spaceBottom, spaceTop, spaceVertical),
+        marginClasses(density, marginBottom, marginTop, marginVertical),
         className,
       )}
     >
diff --git a/storybook/storybook-react/src/Grid/Grid.docs.mdx b/storybook/storybook-react/src/Grid/Grid.docs.mdx
index 6ed23b6744..f44b8f1921 100644
--- a/storybook/storybook-react/src/Grid/Grid.docs.mdx
+++ b/storybook/storybook-react/src/Grid/Grid.docs.mdx
@@ -14,17 +14,19 @@ De roze vlakken vertegenwoordigen de kolommen van het grid. Zoom in of verander
 
 <Primary />
 
-### Verticale witruimte
+### Verticale marges
 
-De opties `spaceVertical`, `spaceTop` en `spaceBottom` voegen witruimte boven en/of onder het grid toe.
-Dit is bijvoorbeeld handig in Footer of Highlight, of tussen twee opvolgende grids.
+In tegenstelling tot de horizontale marges zijn de verticale instelbaar.
+De opties `marginVertical`, `marginTop` en `marginBottom` voegen witruimte boven en/of onder het grid toe.
+Dit is handig in een vlak met een achtergrondkleur zoals [Footer](?path=/docs/react_containers-footer--docs) of
+[Highlight](?path=/docs/react_containers-highlight--docs) of tussen twee opvolgende grids.
 
 Elk kan een waarde `medium`, `small` of `large` krijgen.
 De witruimtes zijn even breed als de horizontale witruimte tussen de kolommen,
 respectievelijk de helft en het dubbele daarvan.
 Deze krimpen en groeien dus ook met de vensterbreedte.
 
-<Canvas of={GridStories.Space} />
+<Canvas of={GridStories.VerticalMargin} />
 
 ### Cellen
 
diff --git a/storybook/storybook-react/src/Grid/Grid.stories.tsx b/storybook/storybook-react/src/Grid/Grid.stories.tsx
index b99cd74b19..13028f4787 100644
--- a/storybook/storybook-react/src/Grid/Grid.stories.tsx
+++ b/storybook/storybook-react/src/Grid/Grid.stories.tsx
@@ -39,7 +39,7 @@ export const Default: Story = {
   name: 'Basis',
 }
 
-export const Space: Story = {
+export const VerticalMargin: Story = {
   ...StoryTemplate,
   args: {
     children: Array.from(Array(12).keys()).map((i) => <Grid.Cell className="amsterdam-docs-pink-box" key={i} />),

From c24db195fe0542dda1ba339ec6c7de8ddffeddcf Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Thu, 16 Nov 2023 12:52:30 +0100
Subject: [PATCH 11/21] Finish rename

---
 storybook/storybook-react/src/Grid/Grid.docs.mdx    |  2 +-
 storybook/storybook-react/src/Grid/Grid.stories.tsx | 10 +++++-----
 storybook/storybook-react/src/shared/argTypes.ts    |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/storybook/storybook-react/src/Grid/Grid.docs.mdx b/storybook/storybook-react/src/Grid/Grid.docs.mdx
index f44b8f1921..518133117a 100644
--- a/storybook/storybook-react/src/Grid/Grid.docs.mdx
+++ b/storybook/storybook-react/src/Grid/Grid.docs.mdx
@@ -46,4 +46,4 @@ Voor meer voorbeelden raadpleeg je [Grid Cell](?path=/docs/react_layout-grid-cel
 
 ## Richtlijnen
 
-- Gebruik de `spaceVertical` prop niet tegelijk met de `spaceTop` of `spaceBottom` props.
+- Gebruik de `marginVertical` prop niet tegelijk met de `marginTop` of `marginBottom` props.
diff --git a/storybook/storybook-react/src/Grid/Grid.stories.tsx b/storybook/storybook-react/src/Grid/Grid.stories.tsx
index 13028f4787..fec9f3db36 100644
--- a/storybook/storybook-react/src/Grid/Grid.stories.tsx
+++ b/storybook/storybook-react/src/Grid/Grid.stories.tsx
@@ -5,15 +5,15 @@
 
 import { Grid, Image, Screen } from '@amsterdam/design-system-react'
 import { Meta, StoryObj } from '@storybook/react'
-import { spaceArgType } from '../shared/argTypes'
+import { marginArgType } from '../shared/argTypes'
 
 const meta = {
   title: 'Layout/Grid',
   component: Grid,
   argTypes: {
-    spaceVertical: spaceArgType,
-    spaceTop: spaceArgType,
-    spaceBottom: spaceArgType,
+    marginVertical: marginArgType,
+    marginTop: marginArgType,
+    marginBottom: marginArgType,
   },
 } satisfies Meta<typeof Grid>
 
@@ -43,7 +43,7 @@ export const VerticalMargin: Story = {
   ...StoryTemplate,
   args: {
     children: Array.from(Array(12).keys()).map((i) => <Grid.Cell className="amsterdam-docs-pink-box" key={i} />),
-    spaceVertical: 'medium',
+    marginVertical: 'medium',
   },
   name: 'Verticale witruimte',
 }
diff --git a/storybook/storybook-react/src/shared/argTypes.ts b/storybook/storybook-react/src/shared/argTypes.ts
index d17337a269..26093015cc 100644
--- a/storybook/storybook-react/src/shared/argTypes.ts
+++ b/storybook/storybook-react/src/shared/argTypes.ts
@@ -3,7 +3,7 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-export const spaceArgType = {
+export const marginArgType = {
   control: {
     type: 'inline-radio',
     direction: 'horizontal',

From 1db4ea56363ec2c0ca7f81e78857f0c8eaa39f14 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Thu, 16 Nov 2023 12:58:06 +0100
Subject: [PATCH 12/21] Prevent using vertical margin together with top or
 bottom

---
 packages/react/src/Grid/Grid.tsx              | 21 +++++++++++++++----
 packages/react/src/Grid/GridCell.tsx          |  1 -
 .../storybook-react/src/Grid/Grid.docs.mdx    |  2 +-
 .../storybook-react/src/Grid/Grid.stories.tsx |  2 +-
 4 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/Grid/Grid.tsx b/packages/react/src/Grid/Grid.tsx
index b46668ffa9..63821b306f 100644
--- a/packages/react/src/Grid/Grid.tsx
+++ b/packages/react/src/Grid/Grid.tsx
@@ -26,6 +26,21 @@ type GridDensity = 'low' | 'high'
 
 type GridMarginSize = 'small' | 'medium' | 'large'
 
+type GridMarginVerticalProp = {
+  marginBottom?: never
+  marginTop?: never
+  /** The amount of vertical whitespace above and below the grid. */
+  marginVertical?: GridMarginSize
+}
+
+type GridMarginTopAndBottomProps = {
+  /** The amount of vertical whitespace below the grid. */
+  marginBottom?: GridMarginSize
+  /** The amount of vertical whitespace above the grid. */
+  marginTop?: GridMarginSize
+  marginVertical?: never
+}
+
 export type GridProps = {
   /**
    * The density of the grid: low (for websites) or high (for applications).
@@ -33,10 +48,8 @@ export type GridProps = {
    * This is to be implemented more generally – it will be moved into a theme soon.
    */
   density?: GridDensity
-  marginBottom?: GridMarginSize
-  marginTop?: GridMarginSize
-  marginVertical?: GridMarginSize
-} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>
+} & (GridMarginVerticalProp | GridMarginTopAndBottomProps) &
+  PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
 const marginClasses = (
   density: GridDensity,
diff --git a/packages/react/src/Grid/GridCell.tsx b/packages/react/src/Grid/GridCell.tsx
index 78ee2b57dd..3395b28e6f 100644
--- a/packages/react/src/Grid/GridCell.tsx
+++ b/packages/react/src/Grid/GridCell.tsx
@@ -23,7 +23,6 @@ type GridCellColumnProps = {
   start?: GridColumnNumber | GridColumnNumbers
 }
 
-// The discriminated union and the `never` types prevent using `fullWidth` together with `span` or `start`.
 export type GridCellProps = (GridCellFullWidthProp | GridCellColumnProps) &
   PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
diff --git a/storybook/storybook-react/src/Grid/Grid.docs.mdx b/storybook/storybook-react/src/Grid/Grid.docs.mdx
index 518133117a..d1a65e1337 100644
--- a/storybook/storybook-react/src/Grid/Grid.docs.mdx
+++ b/storybook/storybook-react/src/Grid/Grid.docs.mdx
@@ -14,7 +14,7 @@ De roze vlakken vertegenwoordigen de kolommen van het grid. Zoom in of verander
 
 <Primary />
 
-### Verticale marges
+### Verticale marge
 
 In tegenstelling tot de horizontale marges zijn de verticale instelbaar.
 De opties `marginVertical`, `marginTop` en `marginBottom` voegen witruimte boven en/of onder het grid toe.
diff --git a/storybook/storybook-react/src/Grid/Grid.stories.tsx b/storybook/storybook-react/src/Grid/Grid.stories.tsx
index fec9f3db36..148a5531bf 100644
--- a/storybook/storybook-react/src/Grid/Grid.stories.tsx
+++ b/storybook/storybook-react/src/Grid/Grid.stories.tsx
@@ -45,7 +45,7 @@ export const VerticalMargin: Story = {
     children: Array.from(Array(12).keys()).map((i) => <Grid.Cell className="amsterdam-docs-pink-box" key={i} />),
     marginVertical: 'medium',
   },
-  name: 'Verticale witruimte',
+  name: 'Verticale marge',
 }
 
 export const Cells: Story = {

From bdc38a4aa20d1be4a74e1dd9fc092e0d7af38cfc Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Thu, 16 Nov 2023 13:37:56 +0100
Subject: [PATCH 13/21] Update design documentation

---
 storybook/storybook-docs/src/grid.stories.mdx | 73 ++++++++++++++++---
 1 file changed, 61 insertions(+), 12 deletions(-)

diff --git a/storybook/storybook-docs/src/grid.stories.mdx b/storybook/storybook-docs/src/grid.stories.mdx
index e37a5ea83d..13e0c9a553 100644
--- a/storybook/storybook-docs/src/grid.stories.mdx
+++ b/storybook/storybook-docs/src/grid.stories.mdx
@@ -21,18 +21,32 @@ Op dat punt worden en blijven het er 12.
 Deze breakpoints zijn gebaseerd op stappen van 256 pixels, beginnend op een basis van 64 pixels.
 Zo is 576 = 64 + 2 × 256 en 1088 = 64 + 4 × 256.
 
-### Veel witruimte
+### Twee varianten voor witruimte
+
+#### Ruimtelijk
+
+Voor websites is het grid behoorlijk ruimtelijk.
+Zo is de huisstijl ontworpen.
 
 De horizontale witruimte tussen kolommen is 16 pixels breed bij een vensterbreedte van 320 pixels.
 Voor elke 256 pixels extra breedte groeit de witruimte lineair met 8 pixels.
 Bij een vensterbreedte van 1600 pixels is het dus 56 pixels.
-Dit past bij de ruimtelijke opzet van de huisstijl.
-
-[Demo](https://modern-fluid-typography.vercel.app?rootFontSize=16&minSize=8&fluidSize=3.125&relativeSize=0.375&maxSize=56)
+In vensters die breder zijn dan dat groeit de witruimte niet verder.
 
 Op brede vensters worden de witruimtes bijna even breed als de kolommen zelf.
 Dat lijkt misschien onnatuurlijk, maar is geen probleem – doorgaans worden elementen op 3 of 4 kolommen van het grid geplaatst en die krijgen dan ook de tussenliggende witruimtes mee.
 
+#### Compact
+
+Voor applicaties is zo veel witruimte niet nodig, zelfs contraproductief.
+Daarom bestaat er een compacte variant van het grid.
+
+Hier begint de horizontale witruimte op 4 pixels bij een vensterbreedte van 320 pixels,
+en groeit deze met 4 pixels per 256 pixels extra breedte.
+Het maximum is hier 40 pixels en dat wordt pas bereikt bij een vensterbreedte van 2.624 pixels.
+
+Alle andere eigenschappen van de compacte variatie zijn gelijk aan de ruimtelijke.
+
 ### Marges links en rechts
 
 In websites staat het grid horizontaal gecentreerd op de pagina.
@@ -42,6 +56,10 @@ Deze ruimte is 1½ keer zo breed als die tussen de kolommen.
 Sommige elementen mogen over deze marges gepositioneerd worden, zoals de Page Footer en een schermvullende afbeelding.
 Die zijn dan dus breder dan de rest van de content, maar worden wel beperkt door een maximale breedte.
 
+Voor applicaties is de marge naast het grid gelijk aan de witruimtes erbinnen.
+Ook is het grid in dit geval links uitgelijnd op het scherm.
+Hier worden geen elementen over de marges heen geplaatst.
+
 ### Niet onbeperkt breed
 
 Een maximale breedte voor het grid zorgt ervoor dat de elementen van een pagina niet al te ver van elkaar verwijderd raken.
@@ -50,16 +68,29 @@ Ook wordt de witruimte en typografie dan niet extreem groot.
 Voor websites is de maximale breedte van het grid 1432 pixels.
 In vensters van minimaal 1600 pixels breed heeft het grid deze breedte – de marges bedragen hier 84 pixels.
 
-Voor applicaties kan de maximale breedte worden ingesteld op 1896 pixels.
+De maximale breedte kan ook worden ingesteld op 1896 pixels.
 Inclusief de marges van 108 pixels komt de totale breedte hier op 2112 pixels.
 
+Voor applicaties is er geen maximale breedte.
+
 Er is geen minimale breedte.
-Zelfs in vensters smaller dan 320 pixels, voor zover die in de praktijk voorkomen, blijft het grid zich schalen naar de beschikbare breedte.
+Zelfs in vensters smaller dan 320 pixels, voor zover die in de praktijk voorkomen,
+blijft het grid zich schalen naar de beschikbare breedte.
 Voor het gemak speelt de breedte van 320 wel een rol in de documentatie.
 
 ### De maatvoeringen per variant
 
-Op het startpunt van de drie varianten van het grid hebben de kolommen, witruimtes en marges de volgende breedtes in pixels:
+Op het startpunt van de drie varianten van het grid hebben de kolommen, witruimtes en marges de volgende breedtes in pixels.
+
+#### Ruimtelijk
+
+| Naam variant | Vanaf vensterbreedte | Aantal kolommen | Breedte kolom | Breedte witruimte | Breedte marge | Breedte grid |
+| :----------- | -------------------: | --------------: | ------------: | ----------------: | ------------: | -----------: |
+| smal         |                  320 |               4 |            56 |                16 |            24 |          272 |
+| middelbreed  |                  576 |               8 |            42 |                24 |            36 |          504 |
+| breed        |                 1088 |              12 |            44 |                40 |            60 |          968 |
+
+#### Compact
 
 | Naam variant | Vanaf vensterbreedte | Aantal kolommen | Breedte kolom | Breedte witruimte | Breedte marge | Breedte grid |
 | :----------- | -------------------: | --------------: | ------------: | ----------------: | ------------: | -----------: |
@@ -67,12 +98,30 @@ Op het startpunt van de drie varianten van het grid hebben de kolommen, witruimt
 | middelbreed  |                  576 |               8 |            42 |                24 |            36 |          504 |
 | breed        |                 1088 |              12 |            44 |                40 |            60 |          968 |
 
-Voor de maximale breedtes van het grid:
+### Breedtes voor design
+
+In Figma werken we met drie referentie-breedtes om het ontwerp uit te werken voor de drie klassen van apparaten.
+Op precies die breedtes is de maatvoering als volgt.
+
+#### Ruimtelijk
+
+| Klasse apparaat | referentie-breedte | Aantal kolommen | Breedte kolom | Breedte witruimte | Breedte marge | Breedte grid |
+| :-------------- | -----------------: | --------------: | ------------: | ----------------: | ------------: | -----------: |
+| telefoon        |                320 |               4 |            56 |                16 |            24 |          272 |
+| tablet          |                832 |               8 |            64 |                32 |            48 |          736 |
+| desktop         |               1600 |              12 |            68 |                56 |            84 |         1432 |
+
+#### Compact
+
+| Klasse apparaat | referentie-breedte | Aantal kolommen | Breedte kolom | Breedte witruimte | Breedte marge | Breedte grid |
+| :-------------- | -----------------: | --------------: | ------------: | ----------------: | ------------: | -----------: |
+| telefoon        |                320 |               4 |            60 |                16 |            24 |          288 |
+| tablet          |                832 |               8 |            86 |                16 |            16 |          800 |
+| desktop         |               1600 |              12 |            98 |                24 |            24 |         1440 |
 
-| Maximale breedte voor | Bij vensterbreedte | Aantal kolommen | Breedte kolom | Breedte witruimte | Breedte marge | Breedte grid |
-| :-------------------- | -----------------: | --------------: | ------------: | ----------------: | ------------: | -----------: |
-| websites              |               1600 |              12 |            68 |                56 |            84 |         1432 |
-| applicaties           |               2112 |              12 |            92 |                72 |           108 |         1896 |
+Let op: vanaf een vensterbreedte van 1088 pixels staat er een navigatiebalk links van het grid.
+Deze is 112 pixels breed.
+Vandaar de afwijkende breedte van het grid.
 
 ### Vensters of schermen
 

From a786c41268c9a8111f5c38c4712676b234f768ac Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Thu, 16 Nov 2023 13:47:40 +0100
Subject: [PATCH 14/21] Remove unnecessary test

---
 packages/react/src/Grid/Grid.test.tsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/packages/react/src/Grid/Grid.test.tsx b/packages/react/src/Grid/Grid.test.tsx
index f402f56fa8..1299868046 100644
--- a/packages/react/src/Grid/Grid.test.tsx
+++ b/packages/react/src/Grid/Grid.test.tsx
@@ -66,14 +66,6 @@ describe('Grid', () => {
     expect(component).toHaveClass('amsterdam-grid--density-high--margin-bottom--large')
   })
 
-  it('prioritizes vertical margin over bottom and top margin', () => {
-    const { container } = render(<Grid marginVertical="medium" marginTop="small" marginBottom="large" />)
-    const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--density-low--margin-vertical--medium')
-    expect(component).not.toHaveClass('amsterdam-grid--density-low--margin-top--small')
-    expect(component).not.toHaveClass('amsterdam-grid--density-low--margin-bottom--large')
-  })
-
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLDivElement>()
     const { container } = render(<Grid ref={ref} />)

From 132d144d87383d80dab52738969e55ec8f12cffc Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Thu, 16 Nov 2023 14:25:57 +0100
Subject: [PATCH 15/21] Halve the number of margin classes with local custom
 properties

---
 packages/css/src/grid/grid.scss       | 83 ++++++++-------------------
 packages/react/src/Grid/Grid.test.tsx | 12 ++--
 packages/react/src/Grid/Grid.tsx      |  9 ++-
 3 files changed, 35 insertions(+), 69 deletions(-)

diff --git a/packages/css/src/grid/grid.scss b/packages/css/src/grid/grid.scss
index b5173e5680..6adf6f0d71 100644
--- a/packages/css/src/grid/grid.scss
+++ b/packages/css/src/grid/grid.scss
@@ -6,10 +6,13 @@
 @import "../../utils/breakpoint";
 
 .amsterdam-grid {
+  --amsterdam-grid-gap: var(--amsterdam-grid-density-low-gap);
+  --amsterdam-grid-padding-inline: var(--amsterdam-grid-density-low-padding-inline);
+
   display: grid;
-  gap: var(--amsterdam-grid-density-low-gap);
+  gap: var(--amsterdam-grid-gap);
   grid-template-columns: repeat(var(--amsterdam-grid-column-count), 1fr);
-  padding-inline: var(--amsterdam-grid-density-low-padding-inline);
+  padding-inline: var(--amsterdam-grid-padding-inline);
 
   @media screen and (min-width: $amsterdam-breakpoint-medium) {
     grid-template-columns: repeat(var(--amsterdam-grid-medium-column-count), 1fr);
@@ -21,78 +24,42 @@
 }
 
 .amsterdam-grid--density-high {
-  gap: var(--amsterdam-grid-density-high-gap);
-  padding-inline: var(--amsterdam-grid-density-high-padding-inline);
-}
-
-.amsterdam-grid--density-low--margin-bottom--small {
-  padding-block-end: calc(var(--amsterdam-grid-density-low-gap) / 2);
-}
-
-.amsterdam-grid--density-low--margin-top--small {
-  padding-block-start: calc(var(--amsterdam-grid-density-low-gap) / 2);
-}
-
-.amsterdam-grid--density-low--margin-vertical--small {
-  padding-block: calc(var(--amsterdam-grid-density-low-gap) / 2);
-}
-
-.amsterdam-grid--density-low--margin-bottom--medium {
-  padding-block-end: var(--amsterdam-grid-density-low-gap);
-}
-
-.amsterdam-grid--density-low--margin-top--medium {
-  padding-block-start: var(--amsterdam-grid-density-low-gap);
-}
-
-.amsterdam-grid--density-low--margin-vertical--medium {
-  padding-block: var(--amsterdam-grid-density-low-gap);
-}
-
-.amsterdam-grid--density-low--margin-bottom--large {
-  padding-block-end: calc(var(--amsterdam-grid-density-low-gap) * 2);
-}
-
-.amsterdam-grid--density-low--margin-top--large {
-  padding-block-start: calc(var(--amsterdam-grid-density-low-gap) * 2);
-}
-
-.amsterdam-grid--density-low--margin-vertical--large {
-  padding-block: calc(var(--amsterdam-grid-density-low-gap) * 2);
+  --amsterdam-grid-gap: var(--amsterdam-grid-density-high-gap);
+  --amsterdam-grid-padding-inline: var(--amsterdam-grid-density-high-padding-inline);
 }
 
-.amsterdam-grid--density-high--margin-bottom--small {
-  padding-block-end: calc(var(--amsterdam-grid-density-high-gap) / 2);
+.amsterdam-grid--margin-bottom--small {
+  padding-block-end: calc(var(--amsterdam-grid-gap) / 2);
 }
 
-.amsterdam-grid--density-high--margin-top--small {
-  padding-block-start: calc(var(--amsterdam-grid-density-high-gap) / 2);
+.amsterdam-grid--margin-bottom--medium {
+  padding-block-end: var(--amsterdam-grid-gap);
 }
 
-.amsterdam-grid--density-high--margin-vertical--small {
-  padding-block: calc(var(--amsterdam-grid-density-high-gap) / 2);
+.amsterdam-grid--margin-bottom--large {
+  padding-block-end: calc(var(--amsterdam-grid-gap) * 2);
 }
 
-.amsterdam-grid--density-high--margin-bottom--medium {
-  padding-block-end: var(--amsterdam-grid-density-high-gap);
+.amsterdam-grid--margin-top--small {
+  padding-block-start: calc(var(--amsterdam-grid-gap) / 2);
 }
 
-.amsterdam-grid--density-high--margin-top--medium {
-  padding-block-start: var(--amsterdam-grid-density-high-gap);
+.amsterdam-grid--margin-top--medium {
+  padding-block-start: var(--amsterdam-grid-gap);
 }
 
-.amsterdam-grid--density-high--margin-vertical--medium {
-  padding-block: var(--amsterdam-grid-density-high-gap);
+.amsterdam-grid--margin-top--large {
+  padding-block-start: calc(var(--amsterdam-grid-gap) * 2);
 }
 
-.amsterdam-grid--density-high--margin-bottom--large {
-  padding-block-end: calc(var(--amsterdam-grid-density-high-gap) * 2);
+.amsterdam-grid--margin-vertical--small {
+  padding-block: calc(var(--amsterdam-grid-gap) / 2);
 }
 
-.amsterdam-grid--density-high--margin-top--large {
-  padding-block-start: calc(var(--amsterdam-grid-density-high-gap) * 2);
+.amsterdam-grid--margin-vertical--medium {
+  padding-block: var(--amsterdam-grid-gap);
 }
 
-.amsterdam-grid--density-high--margin-vertical--large {
-  padding-block: calc(var(--amsterdam-grid-density-high-gap) * 2);
+.amsterdam-grid--margin-vertical--large {
+  padding-block: calc(var(--amsterdam-grid-gap) * 2);
 }
diff --git a/packages/react/src/Grid/Grid.test.tsx b/packages/react/src/Grid/Grid.test.tsx
index 1299868046..fa6710972c 100644
--- a/packages/react/src/Grid/Grid.test.tsx
+++ b/packages/react/src/Grid/Grid.test.tsx
@@ -33,37 +33,37 @@ describe('Grid', () => {
   it('renders a medium vertical spacing class name for a low-density grid', () => {
     const { container } = render(<Grid marginVertical="medium" />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--density-low--margin-vertical--medium')
+    expect(component).toHaveClass('amsterdam-grid--margin-vertical--medium')
   })
 
   it('renders a medium vertical spacing class name for a high-density grid', () => {
     const { container } = render(<Grid density="high" marginVertical="medium" />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--density-high--margin-vertical--medium')
+    expect(component).toHaveClass('amsterdam-grid--margin-vertical--medium')
   })
 
   it('renders a small top class name for a low-density grid', () => {
     const { container } = render(<Grid marginTop="small" />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--density-low--margin-top--small')
+    expect(component).toHaveClass('amsterdam-grid--margin-top--small')
   })
 
   it('renders a small top class name for a high-density grid', () => {
     const { container } = render(<Grid density="high" marginTop="small" />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--density-high--margin-top--small')
+    expect(component).toHaveClass('amsterdam-grid--margin-top--small')
   })
 
   it('renders a large bottom class name for a low-density grid', () => {
     const { container } = render(<Grid marginBottom="large" />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--density-low--margin-bottom--large')
+    expect(component).toHaveClass('amsterdam-grid--margin-bottom--large')
   })
 
   it('renders a large bottom class name for a high-density grid', () => {
     const { container } = render(<Grid density="high" marginBottom="large" />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--density-high--margin-bottom--large')
+    expect(component).toHaveClass('amsterdam-grid--margin-bottom--large')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/Grid/Grid.tsx b/packages/react/src/Grid/Grid.tsx
index 63821b306f..27bda5e37d 100644
--- a/packages/react/src/Grid/Grid.tsx
+++ b/packages/react/src/Grid/Grid.tsx
@@ -52,7 +52,6 @@ export type GridProps = {
   PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
 const marginClasses = (
-  density: GridDensity,
   marginBottom?: GridMarginSize,
   marginTop?: GridMarginSize,
   marginVertical?: GridMarginSize,
@@ -60,15 +59,15 @@ const marginClasses = (
   const classes = [] as string[]
 
   if (marginVertical) {
-    return [`amsterdam-grid--density-${density}--margin-vertical--${marginVertical}`]
+    return [`amsterdam-grid--margin-vertical--${marginVertical}`]
   }
 
   if (marginBottom) {
-    classes.push(`amsterdam-grid--density-${density}--margin-bottom--${marginBottom}`)
+    classes.push(`amsterdam-grid--margin-bottom--${marginBottom}`)
   }
 
   if (marginTop) {
-    classes.push(`amsterdam-grid--density-${density}--margin-top--${marginTop}`)
+    classes.push(`amsterdam-grid--margin-top--${marginTop}`)
   }
 
   return classes
@@ -89,7 +88,7 @@ export const Grid = forwardRef(
       className={clsx(
         'amsterdam-grid',
         density && `amsterdam-grid--density-${density}`,
-        marginClasses(density, marginBottom, marginTop, marginVertical),
+        marginClasses(marginBottom, marginTop, marginVertical),
         className,
       )}
     >

From 1791e580dadaeac06b45e6e135162c0306b149ee Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Thu, 16 Nov 2023 14:26:26 +0100
Subject: [PATCH 16/21] Add compact story and a control for density

---
 .../storybook-react/src/Grid/Grid.docs.mdx    | 11 ++++++++
 .../storybook-react/src/Grid/Grid.stories.tsx | 28 +++++++++++++++++++
 2 files changed, 39 insertions(+)

diff --git a/storybook/storybook-react/src/Grid/Grid.docs.mdx b/storybook/storybook-react/src/Grid/Grid.docs.mdx
index d1a65e1337..c33b959639 100644
--- a/storybook/storybook-react/src/Grid/Grid.docs.mdx
+++ b/storybook/storybook-react/src/Grid/Grid.docs.mdx
@@ -12,8 +12,19 @@ import README from "../../../../packages/css/src/grid/README.grid.md?raw";
 
 De roze vlakken vertegenwoordigen de kolommen van het grid. Zoom in of verander de breedte van het venster om de breedtes en het aantal kolommen te zien veranderen. Let op: op brede schermen zijn de witruimtes tussen de kolommen soms breder dan de kolommen zelf.
 
+Voor websites is het grid behoorlijk ruimtelijk.
+Zo is de huisstijl ontworpen.
+
 <Primary />
 
+### Compact
+
+Voor applicaties is zo veel witruimte niet nodig, zelfs contraproductief.
+Daarom bestaat er een compacte variant van het grid.
+Deze zet je aan via `density="high"`.
+
+<Canvas of={GridStories.Compact} />
+
 ### Verticale marge
 
 In tegenstelling tot de horizontale marges zijn de verticale instelbaar.
diff --git a/storybook/storybook-react/src/Grid/Grid.stories.tsx b/storybook/storybook-react/src/Grid/Grid.stories.tsx
index 148a5531bf..d13146662e 100644
--- a/storybook/storybook-react/src/Grid/Grid.stories.tsx
+++ b/storybook/storybook-react/src/Grid/Grid.stories.tsx
@@ -39,12 +39,40 @@ export const Default: Story = {
   name: 'Basis',
 }
 
+export const Compact: Story = {
+  ...StoryTemplate,
+  args: {
+    children: Array.from(Array(12).keys()).map((i) => <Grid.Cell className="amsterdam-docs-pink-box" key={i} />),
+    density: 'high',
+  },
+  argTypes: {
+    density: {
+      control: {
+        type: 'inline-radio',
+        direction: 'horizontal',
+      },
+      options: ['low', 'high'],
+    },
+  },
+  name: 'Compact',
+}
+
 export const VerticalMargin: Story = {
   ...StoryTemplate,
   args: {
     children: Array.from(Array(12).keys()).map((i) => <Grid.Cell className="amsterdam-docs-pink-box" key={i} />),
+    density: 'low',
     marginVertical: 'medium',
   },
+  argTypes: {
+    density: {
+      control: {
+        type: 'inline-radio',
+        direction: 'horizontal',
+      },
+      options: ['low', 'high'],
+    },
+  },
   name: 'Verticale marge',
 }
 

From 3a8de0535e91424a495fb04fc88c2fb93af7a4f9 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Thu, 16 Nov 2023 18:01:40 +0100
Subject: [PATCH 17/21] Revert "Allow start alignment of screen"

This reverts commit b09357d45d0e58381df150f93520ade6aa318645.
---
 packages/css/src/screen/screen.scss  |  2 --
 packages/react/src/Screen/Screen.tsx | 13 ++-----------
 2 files changed, 2 insertions(+), 13 deletions(-)

diff --git a/packages/css/src/screen/screen.scss b/packages/css/src/screen/screen.scss
index d75868fb2e..fb109d5ef4 100644
--- a/packages/css/src/screen/screen.scss
+++ b/packages/css/src/screen/screen.scss
@@ -9,9 +9,7 @@
 
 .amsterdam-screen {
   @include reset;
-}
 
-.amsterdam-screen--center {
   margin-inline: auto;
 }
 
diff --git a/packages/react/src/Screen/Screen.tsx b/packages/react/src/Screen/Screen.tsx
index 670132c219..cc0e727cc6 100644
--- a/packages/react/src/Screen/Screen.tsx
+++ b/packages/react/src/Screen/Screen.tsx
@@ -6,24 +6,15 @@
 import clsx from 'clsx'
 import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
 
-type ScreenAlign = 'center' | 'start'
 type ScreenMaxWidth = 'wide' | 'x-wide'
 
 export interface ScreenProps extends PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
-  align?: ScreenAlign
   maxWidth?: ScreenMaxWidth
 }
 
 export const Screen = forwardRef(
-  (
-    { align = 'center', children, className, maxWidth, ...restProps }: ScreenProps,
-    ref: ForwardedRef<HTMLDivElement>,
-  ) => (
-    <div
-      {...restProps}
-      ref={ref}
-      className={clsx('amsterdam-screen', `amsterdam-screen--${align}`, `amsterdam-screen--${maxWidth}`, className)}
-    >
+  ({ children, className, maxWidth = 'wide', ...restProps }: ScreenProps, ref: ForwardedRef<HTMLDivElement>) => (
+    <div {...restProps} ref={ref} className={clsx('amsterdam-screen', `amsterdam-screen--${maxWidth}`, className)}>
       {children}
     </div>
   ),

From 773ff2a28d888ce52d45902155e7d6908150be2d Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Fri, 17 Nov 2023 11:57:22 +0100
Subject: [PATCH 18/21] Improve documentation and story controls

---
 storybook/storybook-docs/src/grid.stories.mdx | 21 ++++++++++++-------
 .../storybook-react/src/Grid/Grid.stories.tsx |  9 ++++----
 .../storybook-react/src/shared/argTypes.ts    |  5 ++---
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/storybook/storybook-docs/src/grid.stories.mdx b/storybook/storybook-docs/src/grid.stories.mdx
index 13e0c9a553..a0d4161fa5 100644
--- a/storybook/storybook-docs/src/grid.stories.mdx
+++ b/storybook/storybook-docs/src/grid.stories.mdx
@@ -17,11 +17,16 @@ Het grid is volledig _responsive_: afhankelijk van de breedte van het venster ve
 In vensters tot 576 pixels breed levert het grid 4 kolommen.
 Tot een breedte van 1088 pixels zijn dat er 8.
 Op dat punt worden en blijven het er 12.
+Alle kolommen zijn even breed.
 
-Deze breakpoints zijn gebaseerd op stappen van 256 pixels, beginnend op een basis van 64 pixels.
+De breakpoints zijn gebaseerd op stappen van 256 pixels, beginnend op een basis van 64 pixels.
 Zo is 576 = 64 + 2 × 256 en 1088 = 64 + 4 × 256.
 
-### Twee varianten voor witruimte
+De maatvoering van de witruimtes en de typografie veranderen op deze breakpoints niet.
+Wel wijzigt het aantal kolommen, die daardoor smaller of breder worden.
+Ook kunnen elementen op dat moment van plaats veranderen op de pagina.
+
+### Twee thema’s voor witruimte
 
 #### Ruimtelijk
 
@@ -33,13 +38,13 @@ Voor elke 256 pixels extra breedte groeit de witruimte lineair met 8 pixels.
 Bij een vensterbreedte van 1600 pixels is het dus 56 pixels.
 In vensters die breder zijn dan dat groeit de witruimte niet verder.
 
-Op brede vensters worden de witruimtes bijna even breed als de kolommen zelf.
+In brede vensters worden de witruimtes bijna even breed als de kolommen zelf.
 Dat lijkt misschien onnatuurlijk, maar is geen probleem – doorgaans worden elementen op 3 of 4 kolommen van het grid geplaatst en die krijgen dan ook de tussenliggende witruimtes mee.
 
 #### Compact
 
 Voor applicaties is zo veel witruimte niet nodig, zelfs contraproductief.
-Daarom bestaat er een compacte variant van het grid.
+Daarom is er een compact thema voor het grid.
 
 Hier begint de horizontale witruimte op 4 pixels bij een vensterbreedte van 320 pixels,
 en groeit deze met 4 pixels per 256 pixels extra breedte.
@@ -49,7 +54,9 @@ Alle andere eigenschappen van de compacte variatie zijn gelijk aan de ruimtelijk
 
 ### Marges links en rechts
 
-In websites staat het grid horizontaal gecentreerd op de pagina.
+#### Voor websites
+
+Het grid centreert zichzelf horizontaal.
 Aan beide zijden reserveert het grid marges om afstand te houden tot de randen van het venster.
 Deze ruimte is 1½ keer zo breed als die tussen de kolommen.
 
@@ -57,7 +64,6 @@ Sommige elementen mogen over deze marges gepositioneerd worden, zoals de Page Fo
 Die zijn dan dus breder dan de rest van de content, maar worden wel beperkt door een maximale breedte.
 
 Voor applicaties is de marge naast het grid gelijk aan de witruimtes erbinnen.
-Ook is het grid in dit geval links uitgelijnd op het scherm.
 Hier worden geen elementen over de marges heen geplaatst.
 
 ### Niet onbeperkt breed
@@ -132,7 +138,8 @@ Het is goed hier bewust van te zijn.
 Op een beeldscherm is het venster van een browser niet per se gemaximaliseerd; dan is het dus smaller dan het scherm.
 En _responsive design_ gaat logischerwijs uit van de breedte van het venster van de browser.
 
-Op telefoons en tablets komen beide wel vaak overeen, al is het op tablets wel degelijk mogelijk om twee (vensters van) apps naast elkaar op het scherm te zetten.
+Op telefoons en tablets komen beide wel vaak overeen,
+al is het op tablets wel degelijk mogelijk om twee (vensters van) apps naast elkaar op het scherm te zetten.
 
 ### Niet gebonden aan apparaten
 
diff --git a/storybook/storybook-react/src/Grid/Grid.stories.tsx b/storybook/storybook-react/src/Grid/Grid.stories.tsx
index d13146662e..e831e6603a 100644
--- a/storybook/storybook-react/src/Grid/Grid.stories.tsx
+++ b/storybook/storybook-react/src/Grid/Grid.stories.tsx
@@ -48,13 +48,15 @@ export const Compact: Story = {
   argTypes: {
     density: {
       control: {
-        type: 'inline-radio',
-        direction: 'horizontal',
+        type: 'radio',
       },
       options: ['low', 'high'],
     },
   },
   name: 'Compact',
+  parameters: {
+    outline: 'visible',
+  },
 }
 
 export const VerticalMargin: Story = {
@@ -67,8 +69,7 @@ export const VerticalMargin: Story = {
   argTypes: {
     density: {
       control: {
-        type: 'inline-radio',
-        direction: 'horizontal',
+        type: 'radio',
       },
       options: ['low', 'high'],
     },
diff --git a/storybook/storybook-react/src/shared/argTypes.ts b/storybook/storybook-react/src/shared/argTypes.ts
index 26093015cc..6f1b174d8e 100644
--- a/storybook/storybook-react/src/shared/argTypes.ts
+++ b/storybook/storybook-react/src/shared/argTypes.ts
@@ -5,9 +5,8 @@
 
 export const marginArgType = {
   control: {
-    type: 'inline-radio',
-    direction: 'horizontal',
-    labels: { undefined: 'n/a', small: 'small', medium: 'medium', large: 'large' },
+    type: 'radio',
+    labels: { undefined: 'none', small: 'small', medium: 'medium', large: 'large' },
   },
   options: [undefined, 'small', 'medium', 'large'],
 }

From c60c03b96985fe6bfce572ac86db52d60ea7b40f Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Fri, 17 Nov 2023 12:35:11 +0100
Subject: [PATCH 19/21] Capitalise column headers

---
 storybook/storybook-docs/src/grid.stories.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/storybook/storybook-docs/src/grid.stories.mdx b/storybook/storybook-docs/src/grid.stories.mdx
index a0d4161fa5..2e01b12d28 100644
--- a/storybook/storybook-docs/src/grid.stories.mdx
+++ b/storybook/storybook-docs/src/grid.stories.mdx
@@ -111,7 +111,7 @@ Op precies die breedtes is de maatvoering als volgt.
 
 #### Ruimtelijk
 
-| Klasse apparaat | referentie-breedte | Aantal kolommen | Breedte kolom | Breedte witruimte | Breedte marge | Breedte grid |
+| Klasse apparaat | Referentie-breedte | Aantal kolommen | Breedte kolom | Breedte witruimte | Breedte marge | Breedte grid |
 | :-------------- | -----------------: | --------------: | ------------: | ----------------: | ------------: | -----------: |
 | telefoon        |                320 |               4 |            56 |                16 |            24 |          272 |
 | tablet          |                832 |               8 |            64 |                32 |            48 |          736 |
@@ -119,7 +119,7 @@ Op precies die breedtes is de maatvoering als volgt.
 
 #### Compact
 
-| Klasse apparaat | referentie-breedte | Aantal kolommen | Breedte kolom | Breedte witruimte | Breedte marge | Breedte grid |
+| Klasse apparaat | Referentie-breedte | Aantal kolommen | Breedte kolom | Breedte witruimte | Breedte marge | Breedte grid |
 | :-------------- | -----------------: | --------------: | ------------: | ----------------: | ------------: | -----------: |
 | telefoon        |                320 |               4 |            60 |                16 |            24 |          288 |
 | tablet          |                832 |               8 |            86 |                16 |            16 |          800 |

From 3880f94d7d379df905b201922ee47c519fc9f73e Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Fri, 17 Nov 2023 12:46:23 +0100
Subject: [PATCH 20/21] =?UTF-8?q?Rename=20=E2=80=98margin=E2=80=99=20to=20?=
 =?UTF-8?q?=E2=80=98padding=E2=80=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/css/src/grid/grid.scss               | 18 ++++----
 packages/react/src/Grid/Grid.test.tsx         | 24 +++++-----
 packages/react/src/Grid/Grid.tsx              | 44 +++++++++----------
 .../storybook-react/src/Grid/Grid.docs.mdx    |  6 +--
 .../storybook-react/src/Grid/Grid.stories.tsx | 14 +++---
 .../storybook-react/src/shared/argTypes.ts    |  2 +-
 6 files changed, 54 insertions(+), 54 deletions(-)

diff --git a/packages/css/src/grid/grid.scss b/packages/css/src/grid/grid.scss
index 6adf6f0d71..86713c9c96 100644
--- a/packages/css/src/grid/grid.scss
+++ b/packages/css/src/grid/grid.scss
@@ -28,38 +28,38 @@
   --amsterdam-grid-padding-inline: var(--amsterdam-grid-density-high-padding-inline);
 }
 
-.amsterdam-grid--margin-bottom--small {
+.amsterdam-grid--padding-bottom--small {
   padding-block-end: calc(var(--amsterdam-grid-gap) / 2);
 }
 
-.amsterdam-grid--margin-bottom--medium {
+.amsterdam-grid--padding-bottom--medium {
   padding-block-end: var(--amsterdam-grid-gap);
 }
 
-.amsterdam-grid--margin-bottom--large {
+.amsterdam-grid--padding-bottom--large {
   padding-block-end: calc(var(--amsterdam-grid-gap) * 2);
 }
 
-.amsterdam-grid--margin-top--small {
+.amsterdam-grid--padding-top--small {
   padding-block-start: calc(var(--amsterdam-grid-gap) / 2);
 }
 
-.amsterdam-grid--margin-top--medium {
+.amsterdam-grid--padding-top--medium {
   padding-block-start: var(--amsterdam-grid-gap);
 }
 
-.amsterdam-grid--margin-top--large {
+.amsterdam-grid--padding-top--large {
   padding-block-start: calc(var(--amsterdam-grid-gap) * 2);
 }
 
-.amsterdam-grid--margin-vertical--small {
+.amsterdam-grid--padding-vertical--small {
   padding-block: calc(var(--amsterdam-grid-gap) / 2);
 }
 
-.amsterdam-grid--margin-vertical--medium {
+.amsterdam-grid--padding-vertical--medium {
   padding-block: var(--amsterdam-grid-gap);
 }
 
-.amsterdam-grid--margin-vertical--large {
+.amsterdam-grid--padding-vertical--large {
   padding-block: calc(var(--amsterdam-grid-gap) * 2);
 }
diff --git a/packages/react/src/Grid/Grid.test.tsx b/packages/react/src/Grid/Grid.test.tsx
index fa6710972c..a3d39fddfd 100644
--- a/packages/react/src/Grid/Grid.test.tsx
+++ b/packages/react/src/Grid/Grid.test.tsx
@@ -31,39 +31,39 @@ describe('Grid', () => {
   })
 
   it('renders a medium vertical spacing class name for a low-density grid', () => {
-    const { container } = render(<Grid marginVertical="medium" />)
+    const { container } = render(<Grid paddingVertical="medium" />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--margin-vertical--medium')
+    expect(component).toHaveClass('amsterdam-grid--padding-vertical--medium')
   })
 
   it('renders a medium vertical spacing class name for a high-density grid', () => {
-    const { container } = render(<Grid density="high" marginVertical="medium" />)
+    const { container } = render(<Grid density="high" paddingVertical="medium" />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--margin-vertical--medium')
+    expect(component).toHaveClass('amsterdam-grid--padding-vertical--medium')
   })
 
   it('renders a small top class name for a low-density grid', () => {
-    const { container } = render(<Grid marginTop="small" />)
+    const { container } = render(<Grid paddingTop="small" />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--margin-top--small')
+    expect(component).toHaveClass('amsterdam-grid--padding-top--small')
   })
 
   it('renders a small top class name for a high-density grid', () => {
-    const { container } = render(<Grid density="high" marginTop="small" />)
+    const { container } = render(<Grid density="high" paddingTop="small" />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--margin-top--small')
+    expect(component).toHaveClass('amsterdam-grid--padding-top--small')
   })
 
   it('renders a large bottom class name for a low-density grid', () => {
-    const { container } = render(<Grid marginBottom="large" />)
+    const { container } = render(<Grid paddingBottom="large" />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--margin-bottom--large')
+    expect(component).toHaveClass('amsterdam-grid--padding-bottom--large')
   })
 
   it('renders a large bottom class name for a high-density grid', () => {
-    const { container } = render(<Grid density="high" marginBottom="large" />)
+    const { container } = render(<Grid density="high" paddingBottom="large" />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--margin-bottom--large')
+    expect(component).toHaveClass('amsterdam-grid--padding-bottom--large')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/Grid/Grid.tsx b/packages/react/src/Grid/Grid.tsx
index 27bda5e37d..6799b253aa 100644
--- a/packages/react/src/Grid/Grid.tsx
+++ b/packages/react/src/Grid/Grid.tsx
@@ -24,21 +24,21 @@ export type GridColumnNumbers = {
 
 type GridDensity = 'low' | 'high'
 
-type GridMarginSize = 'small' | 'medium' | 'large'
+type GridPaddingSize = 'small' | 'medium' | 'large'
 
-type GridMarginVerticalProp = {
-  marginBottom?: never
-  marginTop?: never
+type GridPaddingVerticalProp = {
+  paddingBottom?: never
+  paddingTop?: never
   /** The amount of vertical whitespace above and below the grid. */
-  marginVertical?: GridMarginSize
+  paddingVertical?: GridPaddingSize
 }
 
-type GridMarginTopAndBottomProps = {
+type GridPaddingTopAndBottomProps = {
   /** The amount of vertical whitespace below the grid. */
-  marginBottom?: GridMarginSize
+  paddingBottom?: GridPaddingSize
   /** The amount of vertical whitespace above the grid. */
-  marginTop?: GridMarginSize
-  marginVertical?: never
+  paddingTop?: GridPaddingSize
+  paddingVertical?: never
 }
 
 export type GridProps = {
@@ -48,26 +48,26 @@ export type GridProps = {
    * This is to be implemented more generally – it will be moved into a theme soon.
    */
   density?: GridDensity
-} & (GridMarginVerticalProp | GridMarginTopAndBottomProps) &
+} & (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) &
   PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
-const marginClasses = (
-  marginBottom?: GridMarginSize,
-  marginTop?: GridMarginSize,
-  marginVertical?: GridMarginSize,
+const paddingClasses = (
+  paddingBottom?: GridPaddingSize,
+  paddingTop?: GridPaddingSize,
+  paddingVertical?: GridPaddingSize,
 ): string[] => {
   const classes = [] as string[]
 
-  if (marginVertical) {
-    return [`amsterdam-grid--margin-vertical--${marginVertical}`]
+  if (paddingVertical) {
+    return [`amsterdam-grid--padding-vertical--${paddingVertical}`]
   }
 
-  if (marginBottom) {
-    classes.push(`amsterdam-grid--margin-bottom--${marginBottom}`)
+  if (paddingBottom) {
+    classes.push(`amsterdam-grid--padding-bottom--${paddingBottom}`)
   }
 
-  if (marginTop) {
-    classes.push(`amsterdam-grid--margin-top--${marginTop}`)
+  if (paddingTop) {
+    classes.push(`amsterdam-grid--padding-top--${paddingTop}`)
   }
 
   return classes
@@ -79,7 +79,7 @@ interface GridComponent extends ForwardRefExoticComponent<GridProps & RefAttribu
 
 export const Grid = forwardRef(
   (
-    { children, className, density = 'low', marginBottom, marginTop, marginVertical, ...restProps }: GridProps,
+    { children, className, density = 'low', paddingBottom, paddingTop, paddingVertical, ...restProps }: GridProps,
     ref: ForwardedRef<HTMLDivElement>,
   ) => (
     <div
@@ -88,7 +88,7 @@ export const Grid = forwardRef(
       className={clsx(
         'amsterdam-grid',
         density && `amsterdam-grid--density-${density}`,
-        marginClasses(marginBottom, marginTop, marginVertical),
+        paddingClasses(paddingBottom, paddingTop, paddingVertical),
         className,
       )}
     >
diff --git a/storybook/storybook-react/src/Grid/Grid.docs.mdx b/storybook/storybook-react/src/Grid/Grid.docs.mdx
index c33b959639..594aa3346a 100644
--- a/storybook/storybook-react/src/Grid/Grid.docs.mdx
+++ b/storybook/storybook-react/src/Grid/Grid.docs.mdx
@@ -28,7 +28,7 @@ Deze zet je aan via `density="high"`.
 ### Verticale marge
 
 In tegenstelling tot de horizontale marges zijn de verticale instelbaar.
-De opties `marginVertical`, `marginTop` en `marginBottom` voegen witruimte boven en/of onder het grid toe.
+De opties `paddingVertical`, `paddingTop` en `paddingBottom` voegen witruimte boven en/of onder het grid toe.
 Dit is handig in een vlak met een achtergrondkleur zoals [Footer](?path=/docs/react_containers-footer--docs) of
 [Highlight](?path=/docs/react_containers-highlight--docs) of tussen twee opvolgende grids.
 
@@ -37,7 +37,7 @@ De witruimtes zijn even breed als de horizontale witruimte tussen de kolommen,
 respectievelijk de helft en het dubbele daarvan.
 Deze krimpen en groeien dus ook met de vensterbreedte.
 
-<Canvas of={GridStories.VerticalMargin} />
+<Canvas of={GridStories.VerticalSpace} />
 
 ### Cellen
 
@@ -57,4 +57,4 @@ Voor meer voorbeelden raadpleeg je [Grid Cell](?path=/docs/react_layout-grid-cel
 
 ## Richtlijnen
 
-- Gebruik de `marginVertical` prop niet tegelijk met de `marginTop` of `marginBottom` props.
+- Gebruik de `paddingVertical` prop niet tegelijk met de `paddingTop` of `paddingBottom` props.
diff --git a/storybook/storybook-react/src/Grid/Grid.stories.tsx b/storybook/storybook-react/src/Grid/Grid.stories.tsx
index e831e6603a..8f605e0e29 100644
--- a/storybook/storybook-react/src/Grid/Grid.stories.tsx
+++ b/storybook/storybook-react/src/Grid/Grid.stories.tsx
@@ -5,15 +5,15 @@
 
 import { Grid, Image, Screen } from '@amsterdam/design-system-react'
 import { Meta, StoryObj } from '@storybook/react'
-import { marginArgType } from '../shared/argTypes'
+import { paddingArgType } from '../shared/argTypes'
 
 const meta = {
   title: 'Layout/Grid',
   component: Grid,
   argTypes: {
-    marginVertical: marginArgType,
-    marginTop: marginArgType,
-    marginBottom: marginArgType,
+    paddingVertical: paddingArgType,
+    paddingTop: paddingArgType,
+    paddingBottom: paddingArgType,
   },
 } satisfies Meta<typeof Grid>
 
@@ -59,12 +59,12 @@ export const Compact: Story = {
   },
 }
 
-export const VerticalMargin: Story = {
+export const VerticalSpace: Story = {
   ...StoryTemplate,
   args: {
     children: Array.from(Array(12).keys()).map((i) => <Grid.Cell className="amsterdam-docs-pink-box" key={i} />),
     density: 'low',
-    marginVertical: 'medium',
+    paddingVertical: 'medium',
   },
   argTypes: {
     density: {
@@ -74,7 +74,7 @@ export const VerticalMargin: Story = {
       options: ['low', 'high'],
     },
   },
-  name: 'Verticale marge',
+  name: 'Verticale witruimte',
 }
 
 export const Cells: Story = {
diff --git a/storybook/storybook-react/src/shared/argTypes.ts b/storybook/storybook-react/src/shared/argTypes.ts
index 6f1b174d8e..c6d732d1dc 100644
--- a/storybook/storybook-react/src/shared/argTypes.ts
+++ b/storybook/storybook-react/src/shared/argTypes.ts
@@ -3,7 +3,7 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-export const marginArgType = {
+export const paddingArgType = {
   control: {
     type: 'radio',
     labels: { undefined: 'none', small: 'small', medium: 'medium', large: 'large' },

From cf2ecacc2ccc32e4a67b98df3dcb5cea7f671ece Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Fri, 17 Nov 2023 12:47:42 +0100
Subject: [PATCH 21/21] Remove docs covered by TypeScript types

---
 storybook/storybook-react/src/Grid/Grid.docs.mdx         | 4 ----
 storybook/storybook-react/src/GridCell/GridCell.docs.mdx | 1 -
 2 files changed, 5 deletions(-)

diff --git a/storybook/storybook-react/src/Grid/Grid.docs.mdx b/storybook/storybook-react/src/Grid/Grid.docs.mdx
index 594aa3346a..72ce1a2e03 100644
--- a/storybook/storybook-react/src/Grid/Grid.docs.mdx
+++ b/storybook/storybook-react/src/Grid/Grid.docs.mdx
@@ -54,7 +54,3 @@ Elke cel biedt ruimte voor een afbeelding.
 <Canvas of={GridStories.Cells} />
 
 Voor meer voorbeelden raadpleeg je [Grid Cell](?path=/docs/react_layout-grid-cell--docs) zelf.
-
-## Richtlijnen
-
-- Gebruik de `paddingVertical` prop niet tegelijk met de `paddingTop` of `paddingBottom` props.
diff --git a/storybook/storybook-react/src/GridCell/GridCell.docs.mdx b/storybook/storybook-react/src/GridCell/GridCell.docs.mdx
index a87e2d6792..6804ed62f6 100644
--- a/storybook/storybook-react/src/GridCell/GridCell.docs.mdx
+++ b/storybook/storybook-react/src/GridCell/GridCell.docs.mdx
@@ -50,4 +50,3 @@ Een voorbeeld met `start={2}`:
 ## Richtlijnen
 
 - Zorg ervoor dat het aantal kolommen dat je aan een cel toekent past bij het aantal kolommen van het grid voor de betreffende vensterbreedte. Datzelfde geldt voor het starten van een cel in een latere kolom. Als het totaal van beide waarden is te groot is voegt de browser kolommen toe aan het grid. Dit is niet toegestaan.
-- Gebruik de `fullWidth` prop niet tegelijk met de `span` of `start` props.