diff --git a/packages/storybook/config/preview.ts b/packages/storybook/config/preview.ts
index 48333a8e8..0f830c0f9 100644
--- a/packages/storybook/config/preview.ts
+++ b/packages/storybook/config/preview.ts
@@ -45,6 +45,7 @@ import '@nl-design-system-unstable/tubbergen-design-tokens/dist/index.css';
 import '@nl-design-system-unstable/tubbergen-design-tokens/src/font';
 import '@nl-design-system-unstable/venray-design-tokens/dist/index.css';
 import '@nl-design-system-unstable/voorbeeld-design-tokens/dist/theme.css';
+import '@nl-design-system-unstable/voorbeeld-design-tokens/dist/fluid.css';
 import '@nl-design-system-unstable/voorbeeld-design-tokens/src/custom.scss';
 import '@nl-design-system-unstable/voorbeeld-design-tokens/src/font';
 import '@nl-design-system-unstable/vught-design-tokens/dist/index.css';
diff --git a/packages/voorbeeld-design-tokens/figma/voorbeeld.tokens.json b/packages/voorbeeld-design-tokens/figma/voorbeeld.tokens.json
index caf4d9a68..538daed56 100644
--- a/packages/voorbeeld-design-tokens/figma/voorbeeld.tokens.json
+++ b/packages/voorbeeld-design-tokens/figma/voorbeeld.tokens.json
@@ -914,6 +914,58 @@
     }
   },
   "common": {
+    "basis": {
+      "typography": {
+        "min": {
+          "small": { "font-size": { "$value": "0.9643rem" } },
+          "medium": { "font-size": { "$value": "1.125rem" } },
+          "large": { "font-size": { "$value": "1.3125rem" } },
+          "x-large": { "font-size": { "$value": "1.5313rem" } },
+          "xx-large": { "font-size": { "$value": "1.7865rem" } },
+          "xxx-large": { "font-size": { "$value": "2.0842rem" } },
+          "xxxx-large": { "font-size": { "$value": "2.4316rem" } }
+        },
+        "scale": {
+          "small": {
+            "font-size": { "$value": "14px" },
+            "line-height": { "$value": "1.6" }
+          },
+          "medium": {
+            "font-size": { "$value": "16px" },
+            "line-height": { "$value": "1.6" }
+          },
+          "large": {
+            "font-size": { "$value": "20px" },
+            "line-height": { "$value": "1.5" }
+          },
+          "x-large": {
+            "font-size": { "$value": "24px" },
+            "line-height": { "$value": "1.3" }
+          },
+          "xx-large": {
+            "font-size": { "$value": "32px" },
+            "line-height": { "$value": "1.25" }
+          },
+          "xxx-large": {
+            "font-size": { "$value": "40px" },
+            "line-height": { "$value": "1.2" }
+          },
+          "xxxx-large": {
+            "font-size": { "$value": "48px" },
+            "line-height": { "$value": "1.15" }
+          }
+        },
+        "max": {
+          "small": { "font-size": { "$value": "1.2rem" } },
+          "medium": { "font-size": { "$value": "1.5rem" } },
+          "large": { "font-size": { "$value": "1.875rem" } },
+          "x-large": { "font-size": { "$value": "2.3438rem" } },
+          "xx-large": { "font-size": { "$value": "2.9297rem" } },
+          "xxx-large": { "font-size": { "$value": "3.6621rem" } },
+          "xxxx-large": { "font-size": { "$value": "4.5776rem" } }
+        }
+      }
+    },
     "utrecht": {
       "document": {
         "background-color": {
@@ -930,7 +982,7 @@
         },
         "font-size": {
           "$type": "fontSizes",
-          "$value": "{voorbeeld.typography.font-size.md}"
+          "$value": "{basis.typography.scale.medium.font-size}"
         },
         "font-weight": {
           "$type": "fontWeights",
@@ -1697,7 +1749,7 @@
           },
           "font-size": {
             "$type": "fontSizes",
-            "$value": "{voorbeeld.typography.font-size.xl}"
+            "$value": "{basis.typography.scale.x-large.font-size}"
           }
         }
       }
@@ -1816,6 +1868,30 @@
           "$type": "textCase",
           "$value": "None"
         },
+        "font-size": {
+          "$type": "fontSizes",
+          "$value": "{basis.typography.scale.small.font-size}"
+        },
+        "min-block-size": {
+          "$type": "sizing",
+          "$value": "{voorbeeld.size.xs}"
+        },
+        "min-inline-size": {
+          "$type": "sizing",
+          "$value": "{voorbeeld.size.xs}"
+        },
+        "font-weight": {
+          "$type": "fontWeights",
+          "$value": "{voorbeeld.document.strong.font-weight}"
+        },
+        "border-radius": {
+          "$type": "borderRadius",
+          "$value": "{voorbeeld.border-radius.round}"
+        },
+        "font-family": {
+          "$type": "fontFamilies",
+          "$value": "{utrecht.document.font-family}"
+        },
         "letter-spacing": {
           "$type": "letterSpacing",
           "$value": "None"
@@ -1917,7 +1993,7 @@
         "attribution": {
           "font-size": {
             "$type": "fontSizes",
-            "$value": "{voorbeeld.typography.font-size.sm}"
+            "$value": "{basis.typography.scale.small.font-size}"
           },
           "color": {
             "$type": "color",
@@ -1927,7 +2003,7 @@
         "content": {
           "font-size": {
             "$type": "fontSizes",
-            "$value": "{voorbeeld.typography.font-size.xl}"
+            "$value": "{basis.typography.scale.x-large.font-size}"
           },
           "color": {
             "$type": "color",
@@ -3590,7 +3666,7 @@
         },
         "font-size": {
           "$type": "fontSizes",
-          "$value": "{voorbeeld.typography.font-size.3xl}"
+          "$value": "{basis.typography.scale.xxx-large.font-size}"
         }
       },
       "heading-2": {
@@ -3612,7 +3688,7 @@
         },
         "font-size": {
           "$type": "fontSizes",
-          "$value": "{voorbeeld.typography.font-size.2xl}"
+          "$value": "{basis.typography.scale.xx-large.font-size}"
         }
       },
       "heading-3": {
@@ -3634,7 +3710,7 @@
         },
         "font-size": {
           "$type": "fontSizes",
-          "$value": "{voorbeeld.typography.font-size.xl}"
+          "$value": "{basis.typography.scale.x-large.font-size}"
         }
       },
       "heading-4": {
@@ -3656,7 +3732,7 @@
         },
         "font-size": {
           "$type": "fontSizes",
-          "$value": "{voorbeeld.typography.font-size.lg}"
+          "$value": "{basis.typography.scale.large.font-size}"
         }
       },
       "heading-5": {
@@ -3678,7 +3754,7 @@
         },
         "font-size": {
           "$type": "fontSizes",
-          "$value": "{voorbeeld.typography.font-size.md}"
+          "$value": "{basis.typography.scale.medium.font-size}"
         }
       },
       "heading-6": {
@@ -3700,7 +3776,7 @@
         },
         "font-size": {
           "$type": "fontSizes",
-          "$value": "{voorbeeld.typography.font-size.sm}"
+          "$value": "{basis.typography.scale.small.font-size}"
         }
       }
     }
@@ -4521,7 +4597,7 @@
           },
           "font-size": {
             "$type": "fontSizes",
-            "$value": "{voorbeeld.typography.font-size.lg}"
+            "$value": "{basis.typography.scale.large.font-size}"
           },
           "font-weight": {
             "$type": "fontWeights",
@@ -4539,7 +4615,7 @@
           },
           "font-size": {
             "$type": "fontSizes",
-            "$value": "{voorbeeld.typography.font-size.sm}"
+            "$value": "{basis.typography.scale.small.font-size}"
           },
           "font-weight": {
             "$type": "fontWeights",
@@ -5210,7 +5286,7 @@
       "status-badge": {
         "font-size": {
           "$type": "fontSizes",
-          "$value": "{voorbeeld.typography.font-size.sm}"
+          "$value": "{basis.typography.scale.small.font-size}"
         },
         "line-height": {
           "$type": "lineHeights",
@@ -5647,7 +5723,7 @@
           },
           "font-size": {
             "$type": "fontSizes",
-            "$value": "{voorbeeld.typography.font-size.xl}"
+            "$value": "{basis.typography.scale.x-large.font-size}"
           },
           "font-weight": {
             "$type": "fontWeights",
diff --git a/packages/voorbeeld-design-tokens/src/fluid.scss b/packages/voorbeeld-design-tokens/src/fluid.scss
new file mode 100644
index 000000000..34c2eb3c2
--- /dev/null
+++ b/packages/voorbeeld-design-tokens/src/fluid.scss
@@ -0,0 +1,80 @@
+/*
+ * Prefer `vi` over `vw` when available.
+ * Like `inline-size` and other logical properties, `vi` is based on the `inline` axis,
+ * instead of making assumptions about the text direction.
+ * The `vi` unit is unfortunately not yet implemented by all evergreen browsers.
+ */
+
+@property --100vw {
+  syntax: "<length>";
+  initial-value: 0px;
+  inherits: true;
+}
+
+@property --100vi {
+  syntax: "<length>";
+  initial-value: 0px;
+  inherits: true;
+}
+
+.voorbeeld-theme {
+  --100vw: 100vw;
+  --100vi: 100vi;
+
+  --viewport-small-inline-size: 320;
+  --viewport-large-inline-size: 1600;
+  --viewport-size: tan(atan2(var(--100vi, var(--100vw)), 1px));
+  --font-size-scale: calc(
+    (
+        clamp(var(--viewport-small-inline-size), var(--viewport-size), var(--viewport-large-inline-size)) -
+          var(--viewport-small-inline-size)
+      ) / (var(--viewport-large-inline-size) - var(--viewport-small-inline-size))
+  );
+
+  /*
+  --basis-typography-min-xxxx-large-font-size: 2.4316rem;
+  --basis-typography-max-xxxx-large-font-size: 4.5776rem;
+  */
+
+  --basis-typography-scale-small-font-size: calc(
+    var(--basis-typography-min-small-font-size) +
+      (var(--basis-typography-max-small-font-size) - var(--basis-typography-min-small-font-size)) *
+      var(--font-size-scale)
+  );
+
+  --basis-typography-scale-medium-font-size: calc(
+    var(--basis-typography-min-medium-font-size) +
+      (var(--basis-typography-max-medium-font-size) - var(--basis-typography-min-medium-font-size)) *
+      var(--font-size-scale)
+  );
+
+  --basis-typography-scale-large-font-size: calc(
+    var(--basis-typography-min-large-font-size) +
+      (var(--basis-typography-max-large-font-size) - var(--basis-typography-min-large-font-size)) *
+      var(--font-size-scale)
+  );
+
+  --basis-typography-scale-x-large-font-size: calc(
+    var(--basis-typography-min-x-large-font-size) +
+      (var(--basis-typography-max-x-large-font-size) - var(--basis-typography-min-x-large-font-size)) *
+      var(--font-size-scale)
+  );
+
+  --basis-typography-scale-xx-large-font-size: calc(
+    var(--basis-typography-min-xx-large-font-size) +
+      (var(--basis-typography-max-xx-large-font-size) - var(--basis-typography-min-xx-large-font-size)) *
+      var(--font-size-scale)
+  );
+
+  --basis-typography-scale-xxx-large-font-size: calc(
+    var(--basis-typography-min-xxx-large-font-size) +
+      (var(--basis-typography-max-xxx-large-font-size) - var(--basis-typography-min-xxx-large-font-size)) *
+      var(--font-size-scale)
+  );
+
+  --basis-typography-scale-xxxx-large-font-size: calc(
+    var(--basis-typography-min-xxxx-large-font-size) +
+      (var(--basis-typography-max-xxxx-large-font-size) - var(--basis-typography-min-xxxx-large-font-size)) *
+      var(--font-size-scale)
+  );
+}
diff --git a/proprietary/basic-theme-design-tokens/src/_responsive.scss b/proprietary/basic-theme-design-tokens/src/_responsive.scss
deleted file mode 100644
index 6258ac8e8..000000000
--- a/proprietary/basic-theme-design-tokens/src/_responsive.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * @license SEE LICENSE.md
- * Copyright (c) 2021 NL Design System Community
- * All rights reserved
- */
-
-/* stylelint-disable no-duplicate-selectors */
diff --git a/proprietary/basic-theme-design-tokens/src/custom.scss b/proprietary/basic-theme-design-tokens/src/custom.scss
deleted file mode 100644
index f3ba0c515..000000000
--- a/proprietary/basic-theme-design-tokens/src/custom.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * @license SEE LICENSE.md
- * Copyright (c) 2021 NL Design System Community
- * All rights reserved
- */
-
-@import "./index.css";
diff --git a/proprietary/basic-theme-design-tokens/src/index.scss b/proprietary/basic-theme-design-tokens/src/index.scss
deleted file mode 100644
index 404f0becc..000000000
--- a/proprietary/basic-theme-design-tokens/src/index.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * @license SEE LICENSE.md
- * Copyright (c) 2021 NL Design System Community
- * All rights reserved
- */
-
-@import "./design-tokens.css";
-@import "./responsive";