diff --git a/packages/css/src/components/index.scss b/packages/css/src/components/index.scss
index b2bc2afed6..bbcafa7119 100644
--- a/packages/css/src/components/index.scss
+++ b/packages/css/src/components/index.scss
@@ -56,6 +56,8 @@
 @use "radio/radio";
 @use "row/row";
 @use "screen/screen";
+@use "screen/screen-poc-debug";
+@use "screen/screen-poc-space";
 @use "search-field/search-field";
 @use "select/select";
 @use "skip-link/skip-link";
diff --git a/packages/css/src/components/screen/screen-poc-debug.scss b/packages/css/src/components/screen/screen-poc-debug.scss
new file mode 100644
index 0000000000..424cef1391
--- /dev/null
+++ b/packages/css/src/components/screen/screen-poc-debug.scss
@@ -0,0 +1,49 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+body {
+  background-image: repeating-linear-gradient(
+    45deg,
+    rgb(0 0 0 / 6.25%),
+    rgb(0 0 0 / 6.25%) var(--ams-space-grid-xs),
+    rgb(0 0 0 / 12.5%) var(--ams-space-grid-xs),
+    rgb(0 0 0 / 12.5%) var(--ams-space-grid-sm)
+  );
+}
+
+.ams-screen {
+  background: transparent;
+}
+
+.ams-header,
+.ams-page-body,
+.ams-footer,
+.ams-grid,
+.ams-grid > *,
+.ams-spotlight {
+  box-shadow: inset 0 0 0 0.5rem rgb(0 0 0 / 25%);
+}
+
+main {
+  .ams-grid {
+    background-color: var(--ams-color-highlight-yellow);
+
+    > * {
+      background-color: rgb(255 255 255 / 50%);
+    }
+  }
+
+  .ams-spotlight {
+    background-color: var(--ams-color-highlight-purple);
+
+    > .ams-grid {
+      background-color: transparent;
+
+      > * {
+        background-color: rgb(255 255 255 / 25%);
+      }
+    }
+  }
+}
diff --git a/packages/css/src/components/screen/screen-poc-space.scss b/packages/css/src/components/screen/screen-poc-space.scss
new file mode 100644
index 0000000000..66d78d8d3e
--- /dev/null
+++ b/packages/css/src/components/screen/screen-poc-space.scss
@@ -0,0 +1,39 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+// Add top and bottom padding to screen
+// Remove padding from header
+// Add more space below footer
+.ams-screen {
+  padding-block: var(--ams-space-grid-sm);
+}
+
+.ams-header,
+[class*="ams-grid--padding-"] {
+  padding-block: 0 !important;
+}
+
+// Add gap to Screen and Page Body
+// To replace all manual block paddings on Grid
+.ams-screen,
+.ams-page-body {
+  display: grid;
+  gap: var(--ams-space-grid-md);
+}
+
+.ams-grid,
+.ams-spotlight {
+  &[class*="ams-mb-"] {
+    margin-block-end: 0 !important;
+  }
+}
+
+// Add block padding to Spotlight and Breakout
+// To replace manual block paddings on child Grids
+.ams-breakout,
+.ams-spotlight,
+.ams-footer__spotlight {
+  padding-block: var(--ams-space-grid-md);
+}
diff --git a/proprietary/tokens/src/components/ams/gap.tokens.json b/proprietary/tokens/src/components/ams/gap.tokens.json
index 21cbf8055f..955dc3186c 100644
--- a/proprietary/tokens/src/components/ams/gap.tokens.json
+++ b/proprietary/tokens/src/components/ams/gap.tokens.json
@@ -1,11 +1,11 @@
 {
   "ams": {
     "gap": {
-      "xs": { "value": "{ams.space.grid.xs}" },
-      "sm": { "value": "{ams.space.grid.sm}" },
-      "md": { "value": "{ams.space.grid.md}" },
-      "lg": { "value": "{ams.space.grid.lg}" },
-      "xl": { "value": "{ams.space.grid.xl}" }
+      "xs": { "value": "{ams.space.xs}" },
+      "sm": { "value": "{ams.space.sm}" },
+      "md": { "value": "{ams.space.md}" },
+      "lg": { "value": "{ams.space.lg}" },
+      "xl": { "value": "{ams.space.xl}" }
     }
   }
 }
diff --git a/proprietary/tokens/src/components/ams/margin.tokens.json b/proprietary/tokens/src/components/ams/margin.tokens.json
index 4834a24a8d..705fb57f38 100644
--- a/proprietary/tokens/src/components/ams/margin.tokens.json
+++ b/proprietary/tokens/src/components/ams/margin.tokens.json
@@ -1,11 +1,11 @@
 {
   "ams": {
     "margin": {
-      "xs": { "value": "{ams.space.grid.xs}" },
-      "sm": { "value": "{ams.space.grid.sm}" },
-      "md": { "value": "{ams.space.grid.md}" },
-      "lg": { "value": "{ams.space.grid.lg}" },
-      "xl": { "value": "{ams.space.grid.xl}" }
+      "xs": { "value": "{ams.space.xs}" },
+      "sm": { "value": "{ams.space.sm}" },
+      "md": { "value": "{ams.space.md}" },
+      "lg": { "value": "{ams.space.lg}" },
+      "xl": { "value": "{ams.space.xl}" }
     }
   }
 }
diff --git a/storybook/src/pages/amsterdam/ArticlePage/ArticlePage.tsx b/storybook/src/pages/amsterdam/ArticlePage/ArticlePage.tsx
index b30ec3d443..a14a8abd7e 100644
--- a/storybook/src/pages/amsterdam/ArticlePage/ArticlePage.tsx
+++ b/storybook/src/pages/amsterdam/ArticlePage/ArticlePage.tsx
@@ -21,7 +21,7 @@ export const ArticlePage = ({
 }: ArticlePageProps) => (
   <>
     <ArticleBreadcrumb />
-    <main id="main">
+    <main className="ams-page-body" id="main">
       <ArticleHeader heading={heading} imageSrc={imageSrc} />
       <ArticleBody
         lead={lead}
diff --git a/storybook/src/pages/amsterdam/FormPage/FormPage.tsx b/storybook/src/pages/amsterdam/FormPage/FormPage.tsx
index fdd5e120ce..29071c6560 100644
--- a/storybook/src/pages/amsterdam/FormPage/FormPage.tsx
+++ b/storybook/src/pages/amsterdam/FormPage/FormPage.tsx
@@ -22,83 +22,85 @@ export const FormPage = () => {
   const [textareaLength, setTextareaLength] = useState(0)
 
   return (
-    <Grid paddingBottom="medium" paddingTop="small">
-      <Grid.Cell span={{ narrow: 4, medium: 6, wide: 8 }} start={{ narrow: 1, medium: 2, wide: 3 }}>
-        <Breadcrumb>
-          <Breadcrumb.Link>Home</Breadcrumb.Link>
-        </Breadcrumb>
-        <Heading className="ams-mb--md" level={1}>
-          Contact
-        </Heading>
-        <form className="ams-gap--md" id="main" onSubmit={(e) => e.preventDefault()}>
-          <Field>
-            <Label htmlFor="body">Wat wilt u aan de gemeente vragen?</Label>
-            <Paragraph id="bodyDescription" size="small">
-              Een duidelijke beschrijving van uw vraag helpt ons bij het behandelen.
-            </Paragraph>
-            <TextArea
-              aria-describedby="bodyDescription"
-              id="body"
-              onChange={(e) => setTextareaLength(e.target.value.length)}
-              rows={4}
-            />
-            <CharacterCount length={textareaLength} maxLength={1000} />
-          </Field>
-          <FieldSet aria-describedby="contactDetailsDescription" legend="Wat zijn uw gegevens?">
-            <Column gap="small">
-              <Paragraph id="contactDetailsDescription">
-                Wij hebben uw gegevens nodig om contact met u te kunnen opnemen.
+    <main className="ams-page-body" id="main">
+      <Grid paddingBottom="medium" paddingTop="small">
+        <Grid.Cell span={{ narrow: 4, medium: 6, wide: 8 }} start={{ narrow: 1, medium: 2, wide: 3 }}>
+          <Breadcrumb>
+            <Breadcrumb.Link>Home</Breadcrumb.Link>
+          </Breadcrumb>
+          <Heading className="ams-mb--md" level={1}>
+            Contact
+          </Heading>
+          <form className="ams-gap--md" id="main" onSubmit={(e) => e.preventDefault()}>
+            <Field>
+              <Label htmlFor="body">Wat wilt u aan de gemeente vragen?</Label>
+              <Paragraph id="bodyDescription" size="small">
+                Een duidelijke beschrijving van uw vraag helpt ons bij het behandelen.
               </Paragraph>
-              <Field>
-                <Label htmlFor="initials">Voorletters</Label>
-                <TextInput id="initials" name="initials" />
-              </Field>
-              <Field>
-                <Label htmlFor="familyName">Achternaam</Label>
-                <TextInput autoComplete="family-name" id="familyName" name="familyName" />
-              </Field>
-              <FieldSet legend="Woonplaats">
-                <Radio name="city" value="amsterdam">
-                  Amsterdam
-                </Radio>
-                <Radio name="city" value="weesp">
-                  Weesp
-                </Radio>
-                <Radio name="city" value="anders">
-                  Anders
-                </Radio>
-              </FieldSet>
-              <Field>
-                <Label htmlFor="email">E-mail</Label>
-                <TextInput autoComplete="email" id="email" name="email" />
-              </Field>
-              <Row wrap>
+              <TextArea
+                aria-describedby="bodyDescription"
+                id="body"
+                onChange={(e) => setTextareaLength(e.target.value.length)}
+                rows={4}
+              />
+              <CharacterCount length={textareaLength} maxLength={1000} />
+            </Field>
+            <FieldSet aria-describedby="contactDetailsDescription" legend="Wat zijn uw gegevens?">
+              <Column gap="small">
+                <Paragraph id="contactDetailsDescription">
+                  Wij hebben uw gegevens nodig om contact met u te kunnen opnemen.
+                </Paragraph>
                 <Field>
-                  <Label htmlFor="countryCode">Landnummer</Label>
-                  <Select id="countryCode" name="countryCode">
-                    <Select.Option value="+31">Nederland +31</Select.Option>
-                    <Select.Option value="+32">België +32</Select.Option>
-                    <Select.Option value="+33">Frankrijk +33</Select.Option>
-                  </Select>
+                  <Label htmlFor="initials">Voorletters</Label>
+                  <TextInput id="initials" name="initials" />
                 </Field>
                 <Field>
-                  <Label htmlFor="phone">Telefoonnummer</Label>
-                  <TextInput autoComplete="tel" id="phone" name="phone" />
+                  <Label htmlFor="familyName">Achternaam</Label>
+                  <TextInput autoComplete="family-name" id="familyName" name="familyName" />
                 </Field>
-              </Row>
-            </Column>
-          </FieldSet>
-          <Alert heading="Waarom vragen we om deze gegevens?" headingLevel={2}>
-            <Paragraph>
-              We bewaren uw contactgegevens voor het afhandelen van uw vraag of klacht en het verbeteren van onze
-              dienstverlening.
-            </Paragraph>
-          </Alert>
-          <div>
-            <Button type="submit">Versturen</Button>
-          </div>
-        </form>
-      </Grid.Cell>
-    </Grid>
+                <FieldSet legend="Woonplaats">
+                  <Radio name="city" value="amsterdam">
+                    Amsterdam
+                  </Radio>
+                  <Radio name="city" value="weesp">
+                    Weesp
+                  </Radio>
+                  <Radio name="city" value="anders">
+                    Anders
+                  </Radio>
+                </FieldSet>
+                <Field>
+                  <Label htmlFor="email">E-mail</Label>
+                  <TextInput autoComplete="email" id="email" name="email" />
+                </Field>
+                <Row wrap>
+                  <Field>
+                    <Label htmlFor="countryCode">Landnummer</Label>
+                    <Select id="countryCode" name="countryCode">
+                      <Select.Option value="+31">Nederland +31</Select.Option>
+                      <Select.Option value="+32">België +32</Select.Option>
+                      <Select.Option value="+33">Frankrijk +33</Select.Option>
+                    </Select>
+                  </Field>
+                  <Field>
+                    <Label htmlFor="phone">Telefoonnummer</Label>
+                    <TextInput autoComplete="tel" id="phone" name="phone" />
+                  </Field>
+                </Row>
+              </Column>
+            </FieldSet>
+            <Alert heading="Waarom vragen we om deze gegevens?" headingLevel={2}>
+              <Paragraph>
+                We bewaren uw contactgegevens voor het afhandelen van uw vraag of klacht en het verbeteren van onze
+                dienstverlening.
+              </Paragraph>
+            </Alert>
+            <div>
+              <Button type="submit">Versturen</Button>
+            </div>
+          </form>
+        </Grid.Cell>
+      </Grid>
+    </main>
   )
 }
diff --git a/storybook/src/pages/amsterdam/HomePage/HomePage.docs.mdx b/storybook/src/pages/amsterdam/HomePage/HomePage.docs.mdx
index 732da7ad86..50f4eba918 100644
--- a/storybook/src/pages/amsterdam/HomePage/HomePage.docs.mdx
+++ b/storybook/src/pages/amsterdam/HomePage/HomePage.docs.mdx
@@ -14,25 +14,25 @@ The starting page of an application generally provides a broad overview of subje
 A typical layout for a homepage:
 
 ```tsx
-<Screen>
+<Page>
   <SkipLink href="#main">Direct naar inhoud</SkipLink>
-  <Grid>
-    <Header />
-  </Grid>
-  <main id="main">
+  <PageGrid>
+    <PageHeader />
+  </PageGrid>
+  <PageBody as="main" id="main">
     <Overlap>
       <Search />
     </Overlap>
-    <Grid>
+    <PageGrid>
       <AppComponent1 />
       <AppComponent2 />
       <AppComponent3 />
-    </Grid>
-  </main>
-  <Footer>
-    <Grid />
-  </Footer>
-</Screen>
+    </PageGrid>
+  </PageBody>
+  <PageFooter>
+    <PageGrid />
+  </PageFooter>
+</Page>
 ```
 
 1. The Skip Link prevents users from having to pass all preceding navigation links.
diff --git a/storybook/src/pages/amsterdam/HomePage/HomePage.tsx b/storybook/src/pages/amsterdam/HomePage/HomePage.tsx
index a002138d55..e707afa495 100644
--- a/storybook/src/pages/amsterdam/HomePage/HomePage.tsx
+++ b/storybook/src/pages/amsterdam/HomePage/HomePage.tsx
@@ -5,7 +5,7 @@ import { HomeTopTasks } from './HomeTopTasks'
 import { Default as OverlapStory } from '../../../components/Overlap/Overlap.stories'
 
 export const HomePage = () => (
-  <main id="main">
+  <main className="ams-page-body" id="main">
     <Overlap>{OverlapStory.args?.children}</Overlap>
     <HomeTopTasks />
     <HomeSpotlight />