From e7734347a9e7205d510a16a543294bde69b9c6f0 Mon Sep 17 00:00:00 2001
From: Aram <37216945+alimpens@users.noreply.github.com>
Date: Fri, 9 Feb 2024 16:12:33 +0100
Subject: [PATCH 1/6] feat!: Add theme setup and compact theme (#1067)

---
 packages/css/README.md                        |  11 ++
 .../src/components/accordion/accordion.scss   |   9 +-
 packages/css/src/components/badge/badge.scss  |   9 +-
 .../src/components/blockquote/blockquote.scss |   9 +-
 .../src/components/breadcrumb/breadcrumb.scss |   9 +-
 .../css/src/components/button/button.scss     |   9 +-
 .../css/src/components/checkbox/checkbox.scss |  15 +--
 .../css/src/components/dialog/dialog.scss     |   9 +-
 .../src/components/form-label/form-label.scss |   9 +-
 packages/css/src/components/grid/grid.scss    |   8 --
 .../css/src/components/header/header.scss     |   4 +-
 .../css/src/components/heading/heading.scss   |  54 +++-------
 packages/css/src/components/icon/icon.scss    |  62 +++--------
 .../src/components/link-list/link-list.scss   |  27 ++---
 packages/css/src/components/link/link.scss    |   9 +-
 .../components/ordered-list/ordered-list.scss |   9 +-
 .../components/page-heading/page-heading.scss |   9 +-
 .../src/components/page-menu/page-menu.scss   |   9 +-
 .../src/components/pagination/pagination.scss |   9 +-
 .../src/components/paragraph/paragraph.scss   |  27 ++---
 .../components/search-field/search-field.scss |   9 +-
 .../src/components/skip-link/skip-link.scss   |   5 -
 .../src/components/text-input/text-input.scss |   9 +-
 .../top-task-link/top-task-link.scss          |  18 +---
 .../unordered-list/unordered-list.scss        |   9 +-
 packages/react/README.md                      |  13 ++-
 packages/react/src/Grid/Grid.test.tsx         |  30 +-----
 packages/react/src/Grid/Grid.tsx              |  10 +-
 proprietary/tokens/build.js                   |  99 +++++++++++++++++
 proprietary/tokens/package.json               |   2 +-
 .../amsterdam/typography.compact.tokens.json  |  29 +++++
 .../brand/amsterdam/typography.tokens.json    |  90 +++++-----------
 .../amsterdam/accordion.tokens.json           |  14 +--
 .../components/amsterdam/badge.tokens.json    |  10 +-
 .../amsterdam/blockquote.tokens.json          |  12 +--
 .../amsterdam/breadcrumb.tokens.json          |  10 +-
 .../components/amsterdam/button.tokens.json   |  10 +-
 .../components/amsterdam/checkbox.tokens.json |  16 +--
 .../components/amsterdam/dialog.tokens.json   |  10 +-
 .../amsterdam/form-label.tokens.json          |  10 +-
 .../amsterdam/grid.compact.tokens.json        |  14 +++
 .../src/components/amsterdam/grid.tokens.json |  24 ++---
 .../components/amsterdam/header.tokens.json   |   2 +-
 .../components/amsterdam/heading.tokens.json  |  72 ++++---------
 .../src/components/amsterdam/icon.tokens.json |  48 +++------
 .../amsterdam/link-list.tokens.json           |  36 ++-----
 .../src/components/amsterdam/link.tokens.json |  10 +-
 .../amsterdam/mega-menu.tokens.json           |   4 +-
 .../amsterdam/ordered-list.tokens.json        |  10 +-
 .../amsterdam/page-heading.tokens.json        |  10 +-
 .../amsterdam/page-menu.tokens.json           |  10 +-
 .../amsterdam/pagination.tokens.json          |  10 +-
 .../amsterdam/paragraph.tokens.json           |  36 ++-----
 .../amsterdam/search-field.tokens.json        |  14 +--
 .../amsterdam/skip-link.tokens.json           |   8 +-
 .../components/amsterdam/table.tokens.json    |   4 +-
 .../amsterdam/text-input.tokens.json          |  10 +-
 .../amsterdam/top-task-link.tokens.json       |  20 +---
 .../amsterdam/unordered-list.tokens.json      |  10 +-
 .../tokens/style-dictionary.config.json       | 101 ------------------
 storybook/storybook-docs/config/preview.tsx   |   2 +-
 .../storybook-docs/src/color.stories.mdx      |   2 +-
 storybook/storybook-react/config/preview.tsx  |   2 +-
 .../storybook-react/src/Grid/Grid.docs.mdx    |  12 ---
 .../storybook-react/src/Grid/Grid.stories.tsx |  13 ---
 65 files changed, 389 insertions(+), 826 deletions(-)
 create mode 100644 proprietary/tokens/build.js
 create mode 100644 proprietary/tokens/src/brand/amsterdam/typography.compact.tokens.json
 create mode 100644 proprietary/tokens/src/components/amsterdam/grid.compact.tokens.json
 delete mode 100644 proprietary/tokens/style-dictionary.config.json

diff --git a/packages/css/README.md b/packages/css/README.md
index 1e1d741234..72db8a0eec 100644
--- a/packages/css/README.md
+++ b/packages/css/README.md
@@ -38,3 +38,14 @@ export default class ExamplePage extends React.Component {
   }
 }
 ```
+
+## Compact mode
+
+For applications, the large text and ample white space of the theme can be counterproductive.
+That’s why there is a compact mode.
+To use the compact mode, import the compact css **after** theme css, like so:
+
+```javascript
+import "@amsterdam/design-system-tokens/dist/index.css";
+import "@amsterdam/design-system-tokens/dist/compact.css";
+```
diff --git a/packages/css/src/components/accordion/accordion.scss b/packages/css/src/components/accordion/accordion.scss
index e16d2f0cc8..7523c78133 100644
--- a/packages/css/src/components/accordion/accordion.scss
+++ b/packages/css/src/components/accordion/accordion.scss
@@ -20,19 +20,14 @@
   cursor: pointer;
   display: flex;
   font-family: var(--amsterdam-accordion-button-font-family);
-  font-size: var(--amsterdam-accordion-button-spacious-font-size);
+  font-size: var(--amsterdam-accordion-button-font-size);
   font-weight: var(--amsterdam-accordion-button-font-weight);
   justify-content: space-between;
-  line-height: var(--amsterdam-accordion-button-spacious-line-height);
+  line-height: var(--amsterdam-accordion-button-line-height);
   padding-block: 0.75rem;
   padding-inline: 1rem;
   width: 100%;
 
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-accordion-button-compact-font-size);
-    line-height: var(--amsterdam-accordion-button-compact-line-height);
-  }
-
   &:focus {
     outline-offset: var(--amsterdam-accordion-button-focus-outline-offset);
   }
diff --git a/packages/css/src/components/badge/badge.scss b/packages/css/src/components/badge/badge.scss
index 1c20a45492..77782d4240 100644
--- a/packages/css/src/components/badge/badge.scss
+++ b/packages/css/src/components/badge/badge.scss
@@ -6,15 +6,10 @@
 .amsterdam-badge {
   display: inline-block;
   font-family: var(--amsterdam-badge-font-family);
-  font-size: var(--amsterdam-badge-spacious-font-size);
+  font-size: var(--amsterdam-badge-font-size);
   font-weight: var(--amsterdam-badge-font-weight);
-  line-height: var(--amsterdam-badge-spacious-line-height);
+  line-height: var(--amsterdam-badge-line-height);
   padding-inline: var(--amsterdam-badge-padding-inline);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-badge-compact-font-size);
-    line-height: var(--amsterdam-badge-compact-line-height);
-  }
 }
 
 .amsterdam-badge--blue {
diff --git a/packages/css/src/components/blockquote/blockquote.scss b/packages/css/src/components/blockquote/blockquote.scss
index d2f4f27e7f..3599b4b8e1 100644
--- a/packages/css/src/components/blockquote/blockquote.scss
+++ b/packages/css/src/components/blockquote/blockquote.scss
@@ -16,9 +16,9 @@
   break-inside: avoid;
   color: var(--amsterdam-blockquote-color);
   font-family: var(--amsterdam-blockquote-font-family);
-  font-size: var(--amsterdam-blockquote-spacious-font-size);
+  font-size: var(--amsterdam-blockquote-font-size);
   font-weight: var(--amsterdam-blockquote-font-weight);
-  line-height: var(--amsterdam-blockquote-spacious-line-height);
+  line-height: var(--amsterdam-blockquote-line-height);
   quotes: "“" "”";
 
   &::before {
@@ -29,11 +29,6 @@
     content: close-quote;
   }
 
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-blockquote-spacious-font-size);
-    line-height: var(--amsterdam-blockquote-spacious-line-height);
-  }
-
   @include hyphenation;
   @include reset;
 }
diff --git a/packages/css/src/components/breadcrumb/breadcrumb.scss b/packages/css/src/components/breadcrumb/breadcrumb.scss
index ca63dfa8bb..ab0d7bbe61 100644
--- a/packages/css/src/components/breadcrumb/breadcrumb.scss
+++ b/packages/css/src/components/breadcrumb/breadcrumb.scss
@@ -12,14 +12,9 @@
 
 .amsterdam-breadcrumb {
   font-family: var(--amsterdam-breadcrumb-font-family, inherit);
-  font-size: var(--amsterdam-breadcrumb-spacious-font-size);
+  font-size: var(--amsterdam-breadcrumb-font-size);
   font-weight: var(--amsterdam-breadcrumb-font-weight);
-  line-height: var(--amsterdam-breadcrumb-spacious-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-breadcrumb-compact-font-size);
-    line-height: var(--amsterdam-breadcrumb-compact-line-height);
-  }
+  line-height: var(--amsterdam-breadcrumb-line-height);
 }
 
 .amsterdam-breadcrumb__list {
diff --git a/packages/css/src/components/button/button.scss b/packages/css/src/components/button/button.scss
index 205df7d0d0..da42a5a6c5 100644
--- a/packages/css/src/components/button/button.scss
+++ b/packages/css/src/components/button/button.scss
@@ -10,15 +10,10 @@
 }
 
 .amsterdam-button {
-  font-size: var(--amsterdam-button-spacious-font-size);
-  line-height: var(--amsterdam-button-spacious-line-height);
+  font-size: var(--amsterdam-button-font-size);
+  line-height: var(--amsterdam-button-line-height);
 
   @include reset;
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-breadcrumb-compact-font-size);
-    line-height: var(--amsterdam-breadcrumb-compact-line-height);
-  }
 }
 
 .amsterdam-button--secondary {
diff --git a/packages/css/src/components/checkbox/checkbox.scss b/packages/css/src/components/checkbox/checkbox.scss
index c74d8fc171..068bd52077 100644
--- a/packages/css/src/components/checkbox/checkbox.scss
+++ b/packages/css/src/components/checkbox/checkbox.scss
@@ -19,7 +19,7 @@
   align-items: center;
   display: flex;
   flex-shrink: 0;
-  height: calc(var(--amsterdam-checkbox-spacious-font-size) * var(--amsterdam-checkbox-spacious-line-height));
+  height: calc(var(--amsterdam-checkbox-font-size) * var(--amsterdam-checkbox-line-height));
   width: 1.5rem;
 
   &::after {
@@ -31,10 +31,6 @@
     height: 1.5rem;
     width: 100%;
   }
-
-  .amsterdam-theme--compact & {
-    height: calc(var(--amsterdam-checkbox-compact-font-size) * var(--amsterdam-checkbox-compact-line-height));
-  }
 }
 
 @mixin reset {
@@ -46,10 +42,10 @@
   cursor: pointer;
   display: inline-flex;
   font-family: var(--amsterdam-checkbox-font-family);
-  font-size: var(--amsterdam-checkbox-spacious-font-size);
+  font-size: var(--amsterdam-checkbox-font-size);
   font-weight: 400;
   gap: 0.5rem;
-  line-height: var(--amsterdam-checkbox-spacious-line-height);
+  line-height: var(--amsterdam-checkbox-line-height);
 
   &:hover {
     color: var(--amsterdam-checkbox-hover-color);
@@ -63,11 +59,6 @@
     }
   }
 
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-checkbox-compact-font-size);
-    line-height: var(--amsterdam-checkbox-compact-line-height);
-  }
-
   @include reset;
 }
 
diff --git a/packages/css/src/components/dialog/dialog.scss b/packages/css/src/components/dialog/dialog.scss
index 7bc27b00b2..432c8c8d37 100644
--- a/packages/css/src/components/dialog/dialog.scss
+++ b/packages/css/src/components/dialog/dialog.scss
@@ -53,17 +53,12 @@
   color: var(--amsterdam-dialog-title-color);
   flex: auto;
   font-family: var(--amsterdam-dialog-title-font-family);
-  font-size: var(--amsterdam-dialog-title-spacious-font-size);
+  font-size: var(--amsterdam-dialog-title-font-size);
   font-weight: var(--amsterdam-dialog-title-font-weight);
-  line-height: var(--amsterdam-dialog-title-spacious-line-height);
+  line-height: var(--amsterdam-dialog-title-line-height);
 
   @include hyphenation;
   @include reset;
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-dialog-title-compact-font-size);
-    line-height: var(--amsterdam-dialog-title-compact-line-height);
-  }
 }
 
 .amsterdam-dialog__footer {
diff --git a/packages/css/src/components/form-label/form-label.scss b/packages/css/src/components/form-label/form-label.scss
index e133db8ab6..eb16881860 100644
--- a/packages/css/src/components/form-label/form-label.scss
+++ b/packages/css/src/components/form-label/form-label.scss
@@ -12,15 +12,10 @@
 .amsterdam-form-label {
   color: var(--amsterdam-form-label-color);
   font-family: var(--amsterdam-form-label-font-family);
-  font-size: var(--amsterdam-form-label-spacious-font-size);
+  font-size: var(--amsterdam-form-label-font-size);
   font-weight: var(--amsterdam-form-label-font-weight);
-  line-height: var(--amsterdam-form-label-spacious-line-height);
+  line-height: var(--amsterdam-form-label-line-height);
 
   @include hyphenation;
   @include reset;
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-form-label-compact-font-size);
-    line-height: var(--amsterdam-form-label-compact-line-height);
-  }
 }
diff --git a/packages/css/src/components/grid/grid.scss b/packages/css/src/components/grid/grid.scss
index 3505afb737..64939ac993 100644
--- a/packages/css/src/components/grid/grid.scss
+++ b/packages/css/src/components/grid/grid.scss
@@ -6,9 +6,6 @@
 @import "../../common/breakpoint";
 
 .amsterdam-grid {
-  --amsterdam-grid-gap: var(--amsterdam-grid-spacious-gap);
-  --amsterdam-grid-padding-inline: var(--amsterdam-grid-spacious-padding-inline);
-
   display: grid;
   gap: var(--amsterdam-grid-gap);
   grid-template-columns: repeat(var(--amsterdam-grid-column-count), 1fr);
@@ -23,11 +20,6 @@
   }
 }
 
-.amsterdam-grid--compact {
-  --amsterdam-grid-gap: var(--amsterdam-grid-compact-gap);
-  --amsterdam-grid-padding-inline: var(--amsterdam-grid-compact-padding-inline);
-}
-
 .amsterdam-grid--gap-vertical--none {
   row-gap: initial;
 }
diff --git a/packages/css/src/components/header/header.scss b/packages/css/src/components/header/header.scss
index fd96a3d750..4c05b82eb7 100644
--- a/packages/css/src/components/header/header.scss
+++ b/packages/css/src/components/header/header.scss
@@ -75,9 +75,9 @@
   border: 0;
   color: var(--amsterdam-page-menu-item-color);
   font-family: var(--amsterdam-page-menu-item-font-family);
-  font-size: var(--amsterdam-page-menu-item-spacious-font-size);
+  font-size: var(--amsterdam-page-menu-item-font-size);
   font-weight: var(--amsterdam-page-menu-item-font-weight);
-  line-height: var(--amsterdam-page-menu-item-spacious-line-height);
+  line-height: var(--amsterdam-page-menu-item-line-height);
   margin-block: 0;
   padding-inline: 0 30px;
   text-align: center;
diff --git a/packages/css/src/components/heading/heading.scss b/packages/css/src/components/heading/heading.scss
index 0118f0ef8c..f5d6fdd4b1 100644
--- a/packages/css/src/components/heading/heading.scss
+++ b/packages/css/src/components/heading/heading.scss
@@ -23,63 +23,33 @@
 }
 
 .amsterdam-heading--1 {
-  font-size: var(--amsterdam-heading-spacious-level-1-font-size);
-  line-height: var(--amsterdam-heading-spacious-level-1-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-heading-compact-level-1-font-size);
-    line-height: var(--amsterdam-heading-compact-level-1-line-height);
-  }
+  font-size: var(--amsterdam-heading-level-1-font-size);
+  line-height: var(--amsterdam-heading-level-1-line-height);
 }
 
 .amsterdam-heading--2 {
-  font-size: var(--amsterdam-heading-spacious-level-2-font-size);
-  line-height: var(--amsterdam-heading-spacious-level-2-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-heading-compact-level-2-font-size);
-    line-height: var(--amsterdam-heading-compact-level-2-line-height);
-  }
+  font-size: var(--amsterdam-heading-level-2-font-size);
+  line-height: var(--amsterdam-heading-level-2-line-height);
 }
 
 .amsterdam-heading--3 {
-  font-size: var(--amsterdam-heading-spacious-level-3-font-size);
-  line-height: var(--amsterdam-heading-spacious-level-3-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-heading-compact-level-3-font-size);
-    line-height: var(--amsterdam-heading-compact-level-3-line-height);
-  }
+  font-size: var(--amsterdam-heading-level-3-font-size);
+  line-height: var(--amsterdam-heading-level-3-line-height);
 }
 
 .amsterdam-heading--4 {
-  font-size: var(--amsterdam-heading-spacious-level-4-font-size);
-  line-height: var(--amsterdam-heading-spacious-level-4-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-heading-compact-level-4-font-size);
-    line-height: var(--amsterdam-heading-compact-level-4-line-height);
-  }
+  font-size: var(--amsterdam-heading-level-4-font-size);
+  line-height: var(--amsterdam-heading-level-4-line-height);
 }
 
 .amsterdam-heading--5 {
-  font-size: var(--amsterdam-heading-spacious-level-5-font-size);
-  line-height: var(--amsterdam-heading-spacious-level-5-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-heading-compact-level-5-font-size);
-    line-height: var(--amsterdam-heading-compact-level-5-line-height);
-  }
+  font-size: var(--amsterdam-heading-level-5-font-size);
+  line-height: var(--amsterdam-heading-level-5-line-height);
 }
 
 .amsterdam-heading--6 {
-  font-size: var(--amsterdam-heading-spacious-level-6-font-size);
-  line-height: var(--amsterdam-heading-spacious-level-6-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-heading-compact-level-6-font-size);
-    line-height: var(--amsterdam-heading-compact-level-6-line-height);
-  }
+  font-size: var(--amsterdam-heading-level-6-font-size);
+  line-height: var(--amsterdam-heading-level-6-line-height);
 }
 
 .amsterdam-heading--inverse-color {
diff --git a/packages/css/src/components/icon/icon.scss b/packages/css/src/components/icon/icon.scss
index c4c36a255b..aa9edcdeeb 100644
--- a/packages/css/src/components/icon/icon.scss
+++ b/packages/css/src/components/icon/icon.scss
@@ -18,75 +18,37 @@
 }
 
 .amsterdam-icon--size-3 {
-  height: calc(var(--amsterdam-icon-spacious-size-3-font-size) * var(--amsterdam-icon-spacious-size-3-line-height));
+  height: calc(var(--amsterdam-icon-size-3-font-size) * var(--amsterdam-icon-size-3-line-height));
 }
 
 .amsterdam-icon--size-3 svg {
-  height: var(--amsterdam-icon-spacious-size-3-font-size);
-  width: var(--amsterdam-icon-spacious-size-3-font-size);
+  height: var(--amsterdam-icon-size-3-font-size);
+  width: var(--amsterdam-icon-size-3-font-size);
 }
 
 .amsterdam-icon--size-4 {
-  height: calc(var(--amsterdam-icon-spacious-size-4-font-size) * var(--amsterdam-icon-spacious-size-4-line-height));
+  height: calc(var(--amsterdam-icon-size-4-font-size) * var(--amsterdam-icon-size-4-line-height));
 }
 
 .amsterdam-icon--size-4 svg {
-  height: var(--amsterdam-icon-spacious-size-4-font-size);
-  width: var(--amsterdam-icon-spacious-size-4-font-size);
+  height: var(--amsterdam-icon-size-4-font-size);
+  width: var(--amsterdam-icon-size-4-font-size);
 }
 
 .amsterdam-icon--size-5 {
-  height: calc(var(--amsterdam-icon-spacious-size-5-font-size) * var(--amsterdam-icon-spacious-size-5-line-height));
+  height: calc(var(--amsterdam-icon-size-5-font-size) * var(--amsterdam-icon-size-5-line-height));
 }
 
 .amsterdam-icon--size-5 svg {
-  height: var(--amsterdam-icon-spacious-size-5-font-size);
-  width: var(--amsterdam-icon-spacious-size-5-font-size);
+  height: var(--amsterdam-icon-size-5-font-size);
+  width: var(--amsterdam-icon-size-5-font-size);
 }
 
 .amsterdam-icon--size-6 {
-  height: calc(var(--amsterdam-icon-spacious-size-6-font-size) * var(--amsterdam-icon-spacious-size-6-line-height));
+  height: calc(var(--amsterdam-icon-size-6-font-size) * var(--amsterdam-icon-size-6-line-height));
 }
 
 .amsterdam-icon--size-6 svg {
-  height: var(--amsterdam-icon-spacious-size-6-font-size);
-  width: var(--amsterdam-icon-spacious-size-6-font-size);
-}
-
-.amsterdam-theme--compact {
-  .amsterdam-icon--size-3 {
-    height: calc(var(--amsterdam-icon-compact-size-3-font-size) * var(--amsterdam-icon-compact-size-3-line-height));
-  }
-
-  .amsterdam-icon--size-3 svg {
-    height: var(--amsterdam-icon-compact-size-3-font-size);
-    width: var(--amsterdam-icon-compact-size-3-font-size);
-  }
-
-  .amsterdam-icon--size-4 {
-    height: calc(var(--amsterdam-icon-compact-size-4-font-size) * var(--amsterdam-icon-compact-size-4-line-height));
-  }
-
-  .amsterdam-icon--size-4 svg {
-    height: var(--amsterdam-icon-compact-size-4-font-size);
-    width: var(--amsterdam-icon-compact-size-4-font-size);
-  }
-
-  .amsterdam-icon--size-5 {
-    height: calc(var(--amsterdam-icon-compact-size-5-font-size) * var(--amsterdam-icon-compact-size-5-line-height));
-  }
-
-  .amsterdam-icon--size-5 svg {
-    height: var(--amsterdam-icon-compact-size-5-font-size);
-    width: var(--amsterdam-icon-compact-size-5-font-size);
-  }
-
-  .amsterdam-icon--size-6 {
-    height: calc(var(--amsterdam-icon-compact-size-6-font-size) * var(--amsterdam-icon-compact-size-6-line-height));
-  }
-
-  .amsterdam-icon--size-6 svg {
-    height: var(--amsterdam-icon-compact-size-6-font-size);
-    width: var(--amsterdam-icon-compact-size-6-font-size);
-  }
+  height: var(--amsterdam-icon-size-6-font-size);
+  width: var(--amsterdam-icon-size-6-font-size);
 }
diff --git a/packages/css/src/components/link-list/link-list.scss b/packages/css/src/components/link-list/link-list.scss
index 5b44f0072d..8f985cd384 100644
--- a/packages/css/src/components/link-list/link-list.scss
+++ b/packages/css/src/components/link-list/link-list.scss
@@ -25,20 +25,15 @@
   color: var(--amsterdam-link-list-link-color);
   display: inline-flex;
   font-family: var(--amsterdam-link-list-link-font-family);
-  font-size: var(--amsterdam-link-list-link-spacious-medium-font-size);
+  font-size: var(--amsterdam-link-list-link-medium-font-size);
   font-weight: var(--amsterdam-link-list-link-font-weight);
   gap: var(--amsterdam-link-list-link-gap);
-  line-height: var(--amsterdam-link-list-link-spacious-medium-line-height);
+  line-height: var(--amsterdam-link-list-link-medium-line-height);
   outline-offset: var(--amsterdam-link-list-link-outline-offset);
   text-decoration-line: var(--amsterdam-link-list-link-text-decoration-line);
   text-decoration-thickness: var(--amsterdam-link-list-link-text-decoration-thickness);
   text-underline-offset: var(--amsterdam-link-list-link-text-underline-offset);
 
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-link-list-link-compact-medium-font-size);
-    line-height: var(--amsterdam-link-list-link-compact-medium-line-height);
-  }
-
   &:hover {
     color: var(--amsterdam-link-list-link-hover-color);
     text-decoration-line: var(--amsterdam-link-list-link-hover-text-decoration-line);
@@ -46,25 +41,15 @@
 }
 
 .amsterdam-link-list__link--small {
-  font-size: var(--amsterdam-link-list-link-spacious-small-font-size);
-  line-height: var(--amsterdam-link-list-link-spacious-small-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-link-list-link-compact-small-font-size);
-    line-height: var(--amsterdam-link-list-link-compact-small-line-height);
-  }
+  font-size: var(--amsterdam-link-list-link-small-font-size);
+  line-height: var(--amsterdam-link-list-link-small-line-height);
 }
 
 .amsterdam-link-list__link--large {
-  font-size: var(--amsterdam-link-list-link-spacious-large-font-size);
-  line-height: var(--amsterdam-link-list-link-spacious-large-line-height);
+  font-size: var(--amsterdam-link-list-link-large-font-size);
+  line-height: var(--amsterdam-link-list-link-large-line-height);
 
   @include hyphenation;
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-link-list-link-compact-large-font-size);
-    line-height: var(--amsterdam-link-list-link-compact-large-line-height);
-  }
 }
 
 .amsterdam-link-list__link--on-background-dark {
diff --git a/packages/css/src/components/link/link.scss b/packages/css/src/components/link/link.scss
index 835b00e4fa..db1b9d4d2b 100644
--- a/packages/css/src/components/link/link.scss
+++ b/packages/css/src/components/link/link.scss
@@ -22,8 +22,8 @@
 
 .amsterdam-link--standalone {
   display: inline-block;
-  font-size: var(--amsterdam-link-standalone-spacious-font-size);
-  line-height: var(--amsterdam-link-standalone-spacious-line-height);
+  font-size: var(--amsterdam-link-standalone-font-size);
+  line-height: var(--amsterdam-link-standalone-line-height);
   text-decoration-line: var(--amsterdam-link-standalone-text-decoration-line);
   text-decoration-thickness: var(--amsterdam-link-standalone-text-decoration-thickness);
   text-underline-offset: var(--amsterdam-link-standalone-text-underline-offset);
@@ -32,11 +32,6 @@
     text-decoration-thickness: var(--amsterdam-link-standalone-hover-text-decoration-thickness);
     text-underline-offset: var(--amsterdam-link-standalone-hover-text-underline-offset);
   }
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-link-standalone-compact-font-size);
-    line-height: var(--amsterdam-link-standalone-compact-line-height);
-  }
 }
 
 .amsterdam-link--inline {
diff --git a/packages/css/src/components/ordered-list/ordered-list.scss b/packages/css/src/components/ordered-list/ordered-list.scss
index 71cecda27e..1c5d55eb64 100644
--- a/packages/css/src/components/ordered-list/ordered-list.scss
+++ b/packages/css/src/components/ordered-list/ordered-list.scss
@@ -24,9 +24,9 @@
 .amsterdam-ordered-list:not(.amsterdam-ordered-list--no-markers) {
   color: var(--amsterdam-ordered-list-color);
   font-family: var(--amsterdam-ordered-list-font-family);
-  font-size: var(--amsterdam-ordered-list-spacious-font-size);
+  font-size: var(--amsterdam-ordered-list-font-size);
   font-weight: var(--amsterdam-ordered-list-font-weight);
-  line-height: var(--amsterdam-ordered-list-spacious-line-height);
+  line-height: var(--amsterdam-ordered-list-line-height);
   list-style-type: var(--amsterdam-ordered-list-list-style-type);
 
   /** List items are responsible for indentation and marker positioning. */
@@ -45,8 +45,3 @@
     padding-inline-start: var(--amsterdam-ordered-list-ordered-list-item-padding-inline-start);
   }
 }
-
-.amsterdam-theme--compact .amsterdam-ordered-list:not(.amsterdam-ordered-list--no-markers) {
-  font-size: var(--amsterdam-ordered-list-compact-font-size);
-  line-height: var(--amsterdam-ordered-list-compact-line-height);
-}
diff --git a/packages/css/src/components/page-heading/page-heading.scss b/packages/css/src/components/page-heading/page-heading.scss
index 7297367571..ea18fbbfa3 100644
--- a/packages/css/src/components/page-heading/page-heading.scss
+++ b/packages/css/src/components/page-heading/page-heading.scss
@@ -16,17 +16,12 @@
   break-inside: avoid;
   color: var(--amsterdam-page-heading-color);
   font-family: var(--amsterdam-page-heading-font-family);
-  font-size: var(--amsterdam-page-heading-spacious-font-size);
+  font-size: var(--amsterdam-page-heading-font-size);
   font-weight: var(--amsterdam-page-heading-font-weight);
-  line-height: var(--amsterdam-page-heading-spacious-line-height);
+  line-height: var(--amsterdam-page-heading-line-height);
 
   @include hyphenation;
   @include reset;
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-page-heading-compact-font-size);
-    line-height: var(--amsterdam-page-heading-compact-line-height);
-  }
 }
 
 .amsterdam-page-heading--inverse-color {
diff --git a/packages/css/src/components/page-menu/page-menu.scss b/packages/css/src/components/page-menu/page-menu.scss
index 9bcd29be35..377d80b463 100644
--- a/packages/css/src/components/page-menu/page-menu.scss
+++ b/packages/css/src/components/page-menu/page-menu.scss
@@ -34,10 +34,10 @@
   display: inline-flex;
   flex-direction: row;
   font-family: var(--amsterdam-page-menu-item-font-family);
-  font-size: var(--amsterdam-page-menu-item-spacious-font-size);
+  font-size: var(--amsterdam-page-menu-item-font-size);
   font-weight: var(--amsterdam-page-menu-item-font-weight);
   gap: var(--amsterdam-page-menu-item-gap);
-  line-height: var(--amsterdam-page-menu-item-spacious-line-height);
+  line-height: var(--amsterdam-page-menu-item-line-height);
   outline-offset: var(--amsterdam-page-menu-item-outline-offset);
   text-align: center;
   text-decoration-line: var(--amsterdam-page-menu-item-text-decoration-line);
@@ -45,11 +45,6 @@
   text-underline-offset: var(--amsterdam-page-menu-item-text-underline-offset);
   touch-action: manipulation;
   white-space: nowrap;
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-page-menu-item-compact-font-size);
-    line-height: var(--amsterdam-page-menu-item-compact-line-height);
-  }
 }
 
 .amsterdam-page-menu__link {
diff --git a/packages/css/src/components/pagination/pagination.scss b/packages/css/src/components/pagination/pagination.scss
index 7aa0329fb3..00b61047ad 100644
--- a/packages/css/src/components/pagination/pagination.scss
+++ b/packages/css/src/components/pagination/pagination.scss
@@ -14,17 +14,12 @@
   display: flex;
   flex-wrap: wrap;
   font-family: var(--amsterdam-pagination-font-family);
-  font-size: var(--amsterdam-pagination-spacious-font-size);
+  font-size: var(--amsterdam-pagination-font-size);
   font-weight: var(--amsterdam-pagination-font-weight);
   justify-content: center;
-  line-height: var(--amsterdam-pagination-spacious-line-height);
+  line-height: var(--amsterdam-pagination-line-height);
 
   @include list-reset;
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-pagination-compact-font-size);
-    line-height: var(--amsterdam-pagination-compact-line-height);
-  }
 }
 
 @mixin button-reset {
diff --git a/packages/css/src/components/paragraph/paragraph.scss b/packages/css/src/components/paragraph/paragraph.scss
index cafe752a58..7ea0587fc3 100644
--- a/packages/css/src/components/paragraph/paragraph.scss
+++ b/packages/css/src/components/paragraph/paragraph.scss
@@ -12,36 +12,21 @@
 .amsterdam-paragraph {
   color: var(--amsterdam-paragraph-color);
   font-family: var(--amsterdam-paragraph-font-family);
-  font-size: var(--amsterdam-paragraph-spacious-medium-font-size);
+  font-size: var(--amsterdam-paragraph-medium-font-size);
   font-weight: var(--amsterdam-paragraph-font-weight);
-  line-height: var(--amsterdam-paragraph-spacious-medium-line-height);
+  line-height: var(--amsterdam-paragraph-medium-line-height);
 
   @include reset;
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-paragraph-compact-medium-font-size);
-    line-height: var(--amsterdam-paragraph-compact-medium-line-height);
-  }
 }
 
 .amsterdam-paragraph--small {
-  font-size: var(--amsterdam-paragraph-spacious-small-font-size);
-  line-height: var(--amsterdam-paragraph-spacious-small-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-paragraph-compact-small-font-size);
-    line-height: var(--amsterdam-paragraph-compact-small-line-height);
-  }
+  font-size: var(--amsterdam-paragraph-small-font-size);
+  line-height: var(--amsterdam-paragraph-small-line-height);
 }
 
 .amsterdam-paragraph--large {
-  font-size: var(--amsterdam-paragraph-spacious-large-font-size);
-  line-height: var(--amsterdam-paragraph-spacious-large-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-paragraph-compact-large-font-size);
-    line-height: var(--amsterdam-paragraph-compact-large-line-height);
-  }
+  font-size: var(--amsterdam-paragraph-large-font-size);
+  line-height: var(--amsterdam-paragraph-large-line-height);
 }
 
 .amsterdam-paragraph--inverse-color {
diff --git a/packages/css/src/components/search-field/search-field.scss b/packages/css/src/components/search-field/search-field.scss
index 0ba85f3541..3b82e97d78 100644
--- a/packages/css/src/components/search-field/search-field.scss
+++ b/packages/css/src/components/search-field/search-field.scss
@@ -19,9 +19,9 @@
   box-shadow: var(--amsterdam-search-field-input-box-shadow);
   color: var(--amsterdam-search-field-input-color);
   font-family: var(--amsterdam-search-field-input-font-family);
-  font-size: var(--amsterdam-search-field-input-spacious-font-size);
+  font-size: var(--amsterdam-search-field-input-font-size);
   font-weight: var(--amsterdam-search-field-input-font-weight);
-  line-height: var(--amsterdam-search-field-input-spacious-line-height);
+  line-height: var(--amsterdam-search-field-input-line-height);
   outline-offset: var(--amsterdam-search-field-input-outline-offset);
   padding-block: 0.5rem;
   padding-inline: 1rem;
@@ -30,11 +30,6 @@
 
   @include reset;
 
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-search-field-input-compact-font-size);
-    line-height: var(--amsterdam-search-field-input-compact-line-height);
-  }
-
   &:hover {
     box-shadow: var(--amsterdam-search-field-input-hover-box-shadow);
   }
diff --git a/packages/css/src/components/skip-link/skip-link.scss b/packages/css/src/components/skip-link/skip-link.scss
index 7ecdfd3b78..0fab6a9414 100644
--- a/packages/css/src/components/skip-link/skip-link.scss
+++ b/packages/css/src/components/skip-link/skip-link.scss
@@ -20,9 +20,4 @@
   &:hover {
     background-color: var(--amsterdam-skip-link-hover-background-color);
   }
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-skip-link-compact-font-size);
-    line-height: var(--amsterdam-skip-link-compact-line-height);
-  }
 }
diff --git a/packages/css/src/components/text-input/text-input.scss b/packages/css/src/components/text-input/text-input.scss
index ff022df752..c6e5a2704c 100644
--- a/packages/css/src/components/text-input/text-input.scss
+++ b/packages/css/src/components/text-input/text-input.scss
@@ -14,9 +14,9 @@
   box-shadow: var(--amsterdam-text-input-box-shadow);
   color: var(--amsterdam-text-input-color);
   font-family: var(--amsterdam-text-input-font-family);
-  font-size: var(--amsterdam-text-input-spacious-font-size);
+  font-size: var(--amsterdam-text-input-font-size);
   font-weight: var(--amsterdam-text-input-font-weight);
-  line-height: var(--amsterdam-text-input-spacious-line-height);
+  line-height: var(--amsterdam-text-input-line-height);
   outline-offset: var(--amsterdam-text-input-outline-offset);
   padding-block: 0.5rem;
   padding-inline: 1rem;
@@ -25,11 +25,6 @@
 
   @include reset;
 
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-text-input-compact-font-size);
-    line-height: var(--amsterdam-text-input-compact-line-height);
-  }
-
   &:hover {
     box-shadow: var(--amsterdam-text-input-hover-box-shadow);
   }
diff --git a/packages/css/src/components/top-task-link/top-task-link.scss b/packages/css/src/components/top-task-link/top-task-link.scss
index 2394e04ce9..028d4d4b58 100644
--- a/packages/css/src/components/top-task-link/top-task-link.scss
+++ b/packages/css/src/components/top-task-link/top-task-link.scss
@@ -22,18 +22,13 @@
 .amsterdam-top-task-link__label {
   color: var(--amsterdam-top-task-link-label-color);
   font-family: var(--amsterdam-top-task-link-label-font-family);
-  font-size: var(--amsterdam-top-task-link-label-spacious-font-size);
+  font-size: var(--amsterdam-top-task-link-label-font-size);
   font-weight: var(--amsterdam-top-task-link-label-font-weight);
-  line-height: var(--amsterdam-top-task-link-label-spacious-line-height);
+  line-height: var(--amsterdam-top-task-link-label-line-height);
   text-decoration-line: var(--amsterdam-top-task-link-label-text-decoration-line);
   text-decoration-thickness: var(--amsterdam-top-task-link-label-text-decoration-thickness);
   text-underline-offset: var(--amsterdam-top-task-link-label-text-underline-offset);
 
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-top-task-link-label-compact-font-size);
-    line-height: var(--amsterdam-top-task-link-label-compact-line-height);
-  }
-
   @include hyphenation;
   @include reset;
 }
@@ -46,14 +41,9 @@
 .amsterdam-top-task-link__description {
   color: var(--amsterdam-top-task-link-description-color);
   font-family: var(--amsterdam-top-task-link-description-font-family);
-  font-size: var(--amsterdam-top-task-link-description-spacious-font-size);
+  font-size: var(--amsterdam-top-task-link-description-font-size);
   font-weight: var(--amsterdam-top-task-link-description-font-weight);
-  line-height: var(--amsterdam-top-task-link-description-spacious-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-top-task-link-description-compact-font-size);
-    line-height: var(--amsterdam-top-task-link-description-compact-line-height);
-  }
+  line-height: var(--amsterdam-top-task-link-description-line-height);
 
   @include reset;
 }
diff --git a/packages/css/src/components/unordered-list/unordered-list.scss b/packages/css/src/components/unordered-list/unordered-list.scss
index af73bd85f4..def450aabb 100644
--- a/packages/css/src/components/unordered-list/unordered-list.scss
+++ b/packages/css/src/components/unordered-list/unordered-list.scss
@@ -24,9 +24,9 @@
 .amsterdam-unordered-list:not(.amsterdam-unordered-list--no-markers) {
   color: var(--amsterdam-unordered-list-color);
   font-family: var(--amsterdam-unordered-list-font-family);
-  font-size: var(--amsterdam-unordered-list-spacious-font-size);
+  font-size: var(--amsterdam-unordered-list-font-size);
   font-weight: var(--amsterdam-unordered-list-font-weight);
-  line-height: var(--amsterdam-unordered-list-spacious-line-height);
+  line-height: var(--amsterdam-unordered-list-line-height);
   list-style-type: var(--amsterdam-unordered-list-list-style-type);
 
   /** List items are responsible for indentation and marker positioning. */
@@ -45,8 +45,3 @@
     padding-inline-start: var(--amsterdam-unordered-list-unordered-list-item-padding-inline-start);
   }
 }
-
-.amsterdam-theme--compact .amsterdam-unordered-list:not(.amsterdam-unordered-list--no-markers) {
-  font-size: var(--amsterdam-unordered-list-compact-font-size);
-  line-height: var(--amsterdam-unordered-list-compact-line-height);
-}
diff --git a/packages/react/README.md b/packages/react/README.md
index f5464a057b..f2199a4085 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -28,7 +28,7 @@ Import the packages you need.
 ```javascript
 import { Paragraph } from "@amsterdam/design-system-react";
 
-import "@amsterdam/design-system-tokens/dist/root.css";
+import "@amsterdam/design-system-tokens/dist/index.css";
 import "@amsterdam/design-system-assets/font/index.css";
 import "@amsterdam/design-system-css/dist/index.css";
 
@@ -38,3 +38,14 @@ function App() {
 
 export default App;
 ```
+
+## Compact mode
+
+For applications, the large text and ample white space of the theme can be counterproductive.
+That’s why there is a compact mode.
+To use the compact mode, import the compact css **after** theme css, like so:
+
+```javascript
+import "@amsterdam/design-system-tokens/dist/index.css";
+import "@amsterdam/design-system-tokens/dist/compact.css";
+```
diff --git a/packages/react/src/Grid/Grid.test.tsx b/packages/react/src/Grid/Grid.test.tsx
index 01198dec8b..37e279419f 100644
--- a/packages/react/src/Grid/Grid.test.tsx
+++ b/packages/react/src/Grid/Grid.test.tsx
@@ -24,48 +24,24 @@ describe('Grid', () => {
     expect(component).toHaveClass('amsterdam-grid')
   })
 
-  it('renders the compact class name', () => {
-    const { container } = render(<Grid compact />)
-    const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--compact')
-  })
-
-  it('renders a medium vertical spacing class name for a spacious grid', () => {
+  it('renders a medium vertical spacing class name', () => {
     const { container } = render(<Grid paddingVertical="medium" />)
     const component = container.querySelector(':only-child')
     expect(component).toHaveClass('amsterdam-grid--padding-vertical--medium')
   })
 
-  it('renders a medium vertical spacing class name for a compact grid', () => {
-    const { container } = render(<Grid compact paddingVertical="medium" />)
-    const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--padding-vertical--medium')
-  })
-
-  it('renders a small top class name for a spacious grid', () => {
+  it('renders a small top class name', () => {
     const { container } = render(<Grid paddingTop="small" />)
     const component = container.querySelector(':only-child')
     expect(component).toHaveClass('amsterdam-grid--padding-top--small')
   })
 
-  it('renders a small top class name for a compact grid', () => {
-    const { container } = render(<Grid compact paddingTop="small" />)
-    const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--padding-top--small')
-  })
-
-  it('renders a large bottom class name for a spacious grid', () => {
+  it('renders a large bottom class name', () => {
     const { container } = render(<Grid paddingBottom="large" />)
     const component = container.querySelector(':only-child')
     expect(component).toHaveClass('amsterdam-grid--padding-bottom--large')
   })
 
-  it('renders a large bottom class name for a compact grid', () => {
-    const { container } = render(<Grid compact paddingBottom="large" />)
-    const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--padding-bottom--large')
-  })
-
   it('renders a class name for a vertical gap', () => {
     const { container } = render(<Grid gapVertical="large" />)
     const component = container.querySelector(':only-child')
diff --git a/packages/react/src/Grid/Grid.tsx b/packages/react/src/Grid/Grid.tsx
index 7220bc11b5..bc27e2955b 100644
--- a/packages/react/src/Grid/Grid.tsx
+++ b/packages/react/src/Grid/Grid.tsx
@@ -34,13 +34,6 @@ type GridPaddingTopAndBottomProps = {
 }
 
 export type GridProps = {
-  /**
-   * Opts in to a less spacious layout.
-   * Decreases whitespace between columns and to the sides of the grid.
-   * This usually works well for applications.
-   * @todo Implement more generally – it will be moved into a theme soon.
-   */
-  compact?: boolean
   /** The amount of vertical whitespace between rows of the grid. */
   gapVertical?: 'none' | 'small' | 'large'
 } & (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) &
@@ -74,7 +67,7 @@ type GridComponent = {
 
 export const Grid = forwardRef(
   (
-    { children, className, compact, gapVertical, paddingBottom, paddingTop, paddingVertical, ...restProps }: GridProps,
+    { children, className, gapVertical, paddingBottom, paddingTop, paddingVertical, ...restProps }: GridProps,
     ref: ForwardedRef<HTMLDivElement>,
   ) => (
     <div
@@ -82,7 +75,6 @@ export const Grid = forwardRef(
       ref={ref}
       className={clsx(
         'amsterdam-grid',
-        compact && `amsterdam-grid--compact`,
         gapVertical && `amsterdam-grid--gap-vertical--${gapVertical}`,
         paddingClasses(paddingBottom, paddingTop, paddingVertical),
         className,
diff --git a/proprietary/tokens/build.js b/proprietary/tokens/build.js
new file mode 100644
index 0000000000..ccb0a46247
--- /dev/null
+++ b/proprietary/tokens/build.js
@@ -0,0 +1,99 @@
+const StyleDictionary = require('style-dictionary')
+
+const modes = ['compact']
+
+function generateSharedConfig(mode) {
+  const name = mode ? `${mode}` : 'index'
+
+  return {
+    css: {
+      transforms: ['attribute/cti', 'name/cti/kebab', 'color/hsl-4'],
+      transformGroup: 'css',
+      buildPath: 'dist/',
+      files: [
+        {
+          destination: `${name}.css`,
+          format: 'css/variables',
+          options: {
+            outputReferences: true,
+          },
+        },
+      ],
+    },
+    cssTheme: {
+      transforms: ['attribute/cti', 'name/cti/kebab', 'color/hsl-4'],
+      buildPath: 'dist/',
+      files: [
+        {
+          destination: `${name}.theme.css`,
+          format: 'css/variables',
+          options: {
+            selector: '.amsterdam-theme',
+            outputReferences: true,
+          },
+        },
+      ],
+    },
+    js: {
+      transforms: ['attribute/cti', 'name/cti/camel', 'color/hsl-4'],
+      buildPath: 'dist/',
+      files: [
+        {
+          format: 'javascript/es6',
+          destination: `${name}.mjs`,
+        },
+      ],
+    },
+    json: {
+      transforms: ['attribute/cti', 'name/cti/camel', 'color/hsl-4'],
+      buildPath: 'dist/',
+      files: [
+        {
+          destination: `${name}.json`,
+          format: 'json/nested',
+        },
+      ],
+    },
+    scss: {
+      transforms: ['attribute/cti', 'name/cti/kebab', 'color/hsl-4'],
+      buildPath: 'dist/',
+      files: [
+        {
+          destination: `${name}.scss`,
+          format: 'scss/variables',
+          options: {
+            outputReferences: true,
+          },
+        },
+      ],
+    },
+    typescript: {
+      transforms: ['attribute/cti', 'name/cti/camel', 'color/hsl-4'],
+      transformGroup: 'js',
+      buildPath: 'dist/',
+      files: [
+        {
+          format: 'typescript/module-declarations',
+          destination: `${name}.d.ts`,
+        },
+      ],
+    },
+  }
+}
+
+console.log('Building default mode...')
+StyleDictionary.extend({
+  source: [
+    // exclude non-default modes from source
+    `./src/**/!(*.${modes.join(`|*.`)}).tokens.json`,
+  ],
+  platforms: generateSharedConfig(),
+}).buildAllPlatforms()
+
+modes.forEach((mode) => {
+  console.log(`\n\nBuilding ${mode} mode...`)
+  StyleDictionary.extend({
+    source: [`./src/**/*.${mode}.tokens.json`],
+    platforms: generateSharedConfig(mode),
+  }).buildAllPlatforms()
+})
diff --git a/proprietary/tokens/package.json b/proprietary/tokens/package.json
index 159447c652..fd63fd13b3 100644
--- a/proprietary/tokens/package.json
+++ b/proprietary/tokens/package.json
@@ -18,7 +18,7 @@
   },
   "scripts": {
     "clean": "rimraf dist/",
-    "build": "style-dictionary build --config ./style-dictionary.config.json",
+    "build": "node build.js",
     "watch": "chokidar --follow-symlinks --initial --command \"npm run build\" \"src/**/*.tokens.json\""
   },
   "devDependencies": {
diff --git a/proprietary/tokens/src/brand/amsterdam/typography.compact.tokens.json b/proprietary/tokens/src/brand/amsterdam/typography.compact.tokens.json
new file mode 100644
index 0000000000..e722ff598f
--- /dev/null
+++ b/proprietary/tokens/src/brand/amsterdam/typography.compact.tokens.json
@@ -0,0 +1,29 @@
+{
+  "amsterdam": {
+    "typography": {
+      "text-level": {
+        "0": {
+          "font-size": { "value": "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)" }
+        },
+        "1": {
+          "font-size": { "value": "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)" }
+        },
+        "2": {
+          "font-size": { "value": "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)" }
+        },
+        "3": {
+          "font-size": { "value": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)" }
+        },
+        "4": {
+          "font-size": { "value": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)" }
+        },
+        "5": {
+          "font-size": { "value": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)" }
+        },
+        "6": {
+          "font-size": { "value": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)" }
+        }
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/brand/amsterdam/typography.tokens.json b/proprietary/tokens/src/brand/amsterdam/typography.tokens.json
index 59121f4704..3394e80de1 100644
--- a/proprietary/tokens/src/brand/amsterdam/typography.tokens.json
+++ b/proprietary/tokens/src/brand/amsterdam/typography.tokens.json
@@ -6,68 +6,34 @@
         "normal": { "value": 400 },
         "bold": { "value": 800 }
       },
-      "spacious": {
-        "text-level": {
-          "0": {
-            "font-size": { "value": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)" },
-            "line-height": { "value": "1.15" }
-          },
-          "1": {
-            "font-size": { "value": "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)" },
-            "line-height": { "value": "1.2" }
-          },
-          "2": {
-            "font-size": { "value": "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)" },
-            "line-height": { "value": "1.25" }
-          },
-          "3": {
-            "font-size": { "value": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)" },
-            "line-height": { "value": "1.3" }
-          },
-          "4": {
-            "font-size": { "value": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)" },
-            "line-height": { "value": "1.5" }
-          },
-          "5": {
-            "font-size": { "value": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)" },
-            "line-height": { "value": "1.6" }
-          },
-          "6": {
-            "font-size": { "value": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)" },
-            "line-height": { "value": "1.6" }
-          }
-        }
-      },
-      "compact": {
-        "text-level": {
-          "0": {
-            "font-size": { "value": "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)" },
-            "line-height": { "value": "1.15" }
-          },
-          "1": {
-            "font-size": { "value": "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)" },
-            "line-height": { "value": "1.2" }
-          },
-          "2": {
-            "font-size": { "value": "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)" },
-            "line-height": { "value": "1.25" }
-          },
-          "3": {
-            "font-size": { "value": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)" },
-            "line-height": { "value": "1.3" }
-          },
-          "4": {
-            "font-size": { "value": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)" },
-            "line-height": { "value": "1.5" }
-          },
-          "5": {
-            "font-size": { "value": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)" },
-            "line-height": { "value": "1.6" }
-          },
-          "6": {
-            "font-size": { "value": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)" },
-            "line-height": { "value": "1.6" }
-          }
+      "text-level": {
+        "0": {
+          "font-size": { "value": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)" },
+          "line-height": { "value": "1.15" }
+        },
+        "1": {
+          "font-size": { "value": "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)" },
+          "line-height": { "value": "1.2" }
+        },
+        "2": {
+          "font-size": { "value": "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)" },
+          "line-height": { "value": "1.25" }
+        },
+        "3": {
+          "font-size": { "value": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)" },
+          "line-height": { "value": "1.3" }
+        },
+        "4": {
+          "font-size": { "value": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)" },
+          "line-height": { "value": "1.5" }
+        },
+        "5": {
+          "font-size": { "value": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)" },
+          "line-height": { "value": "1.6" }
+        },
+        "6": {
+          "font-size": { "value": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)" },
+          "line-height": { "value": "1.6" }
         }
       }
     }
diff --git a/proprietary/tokens/src/components/amsterdam/accordion.tokens.json b/proprietary/tokens/src/components/amsterdam/accordion.tokens.json
index 628f1e4acc..16de651e15 100644
--- a/proprietary/tokens/src/components/amsterdam/accordion.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/accordion.tokens.json
@@ -3,21 +3,15 @@
     "accordion": {
       "button": {
         "color": { "value": "{amsterdam.color.primary-blue}" },
+        "font-family": { "value": "{amsterdam.typography.font-family}" },
+        "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
+        "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
+        "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" },
         "focus": {
           "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }
         },
-        "font-family": { "value": "{amsterdam.typography.font-family}" },
-        "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
         "hover": {
           "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.neutral-grey3}" }
-        },
-        "spacious": {
-          "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
-        },
-        "compact": {
-          "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
         }
       }
     }
diff --git a/proprietary/tokens/src/components/amsterdam/badge.tokens.json b/proprietary/tokens/src/components/amsterdam/badge.tokens.json
index 0a722c1226..4b9492cc1f 100644
--- a/proprietary/tokens/src/components/amsterdam/badge.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/badge.tokens.json
@@ -2,16 +2,10 @@
   "amsterdam": {
     "badge": {
       "font-family": { "value": "{amsterdam.typography.font-family}" },
+      "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
       "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
+      "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" },
       "padding-inline": { "value": "0.5rem" },
-      "spacious": {
-        "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
-      },
-      "compact": {
-        "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
-      },
       "blue": {
         "background-color": { "value": "{amsterdam.color.blue}" },
         "color": { "value": "{amsterdam.color.primary-black}" }
diff --git a/proprietary/tokens/src/components/amsterdam/blockquote.tokens.json b/proprietary/tokens/src/components/amsterdam/blockquote.tokens.json
index 01b820ad4a..3061174dc7 100644
--- a/proprietary/tokens/src/components/amsterdam/blockquote.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/blockquote.tokens.json
@@ -3,16 +3,10 @@
     "blockquote": {
       "color": { "value": "{amsterdam.color.primary-black}" },
       "font-family": { "value": "{amsterdam.typography.font-family}" },
+      "font-size": { "value": "{amsterdam.typography.text-level.3.font-size}" },
       "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
-      "inverse-color": { "value": "{amsterdam.color.primary-white}" },
-      "spacious": {
-        "font-size": { "value": "{amsterdam.typography.spacious.text-level.3.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.spacious.text-level.3.line-height}" }
-      },
-      "compact": {
-        "font-size": { "value": "{amsterdam.typography.compact.text-level.3.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.compact.text-level.3.line-height}" }
-      }
+      "line-height": { "value": "{amsterdam.typography.text-level.3.line-height}" },
+      "inverse-color": { "value": "{amsterdam.color.primary-white}" }
     }
   }
 }
diff --git a/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json b/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json
index d006844a5c..31cd659d70 100644
--- a/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json
@@ -2,7 +2,9 @@
   "amsterdam": {
     "breadcrumb": {
       "font-family": { "value": "{amsterdam.typography.font-family}" },
+      "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" },
       "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
+      "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" },
       "separator": {
         "background-image": {
           "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>\")"
@@ -18,14 +20,6 @@
           "color": { "value": "{amsterdam.color.dark-blue}" },
           "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" }
         }
-      },
-      "spacious": {
-        "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
-      },
-      "compact": {
-        "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
       }
     }
   }
diff --git a/proprietary/tokens/src/components/amsterdam/button.tokens.json b/proprietary/tokens/src/components/amsterdam/button.tokens.json
index c07033be2a..0ebe731227 100644
--- a/proprietary/tokens/src/components/amsterdam/button.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/button.tokens.json
@@ -1,14 +1,8 @@
 {
   "amsterdam": {
     "button": {
-      "spacious": {
-        "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
-      },
-      "compact": {
-        "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
-      },
+      "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
+      "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" },
       "secondary": {
         "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.primary-blue}" },
         "hover": {
diff --git a/proprietary/tokens/src/components/amsterdam/checkbox.tokens.json b/proprietary/tokens/src/components/amsterdam/checkbox.tokens.json
index b53da6b8ef..73b9d548aa 100644
--- a/proprietary/tokens/src/components/amsterdam/checkbox.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/checkbox.tokens.json
@@ -2,6 +2,11 @@
   "amsterdam": {
     "checkbox": {
       "color": { "value": "{amsterdam.color.primary-black}" },
+      "font-family": { "value": "{amsterdam.typography.font-family}" },
+      "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
+      "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
+      "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" },
+      "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
       "checkmark": {
         "border-color": { "value": "{amsterdam.color.primary-blue}" },
         "checked": {
@@ -56,19 +61,8 @@
       "disabled": {
         "color": { "value": "{amsterdam.color.neutral-grey3}" }
       },
-      "font-family": { "value": "{amsterdam.typography.font-family}" },
-      "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
       "hover": {
         "color": { "value": "{amsterdam.color.dark-blue}" }
-      },
-      "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
-      "spacious": {
-        "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
-      },
-      "compact": {
-        "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
       }
     }
   }
diff --git a/proprietary/tokens/src/components/amsterdam/dialog.tokens.json b/proprietary/tokens/src/components/amsterdam/dialog.tokens.json
index 70d0940d8b..6e3bf4a413 100644
--- a/proprietary/tokens/src/components/amsterdam/dialog.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/dialog.tokens.json
@@ -7,15 +7,9 @@
       "title": {
         "color": { "value": "{amsterdam.color.primary-black}" },
         "font-family": { "value": "{amsterdam.typography.font-family}" },
+        "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
         "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
-        "spacious": {
-          "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
-        },
-        "compact": {
-          "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
-        }
+        "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }
       },
       "backdrop": {
         "background": { "value": "#0006" }
diff --git a/proprietary/tokens/src/components/amsterdam/form-label.tokens.json b/proprietary/tokens/src/components/amsterdam/form-label.tokens.json
index 4a42884769..01d8f6377b 100644
--- a/proprietary/tokens/src/components/amsterdam/form-label.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/form-label.tokens.json
@@ -3,15 +3,9 @@
     "form-label": {
       "color": { "value": "{amsterdam.color.primary-black}" },
       "font-family": { "value": "{amsterdam.typography.font-family}" },
+      "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" },
       "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
-      "spacious": {
-        "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" }
-      },
-      "compact": {
-        "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" }
-      }
+      "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" }
     }
   }
 }
diff --git a/proprietary/tokens/src/components/amsterdam/grid.compact.tokens.json b/proprietary/tokens/src/components/amsterdam/grid.compact.tokens.json
new file mode 100644
index 0000000000..cc8e5b85e8
--- /dev/null
+++ b/proprietary/tokens/src/components/amsterdam/grid.compact.tokens.json
@@ -0,0 +1,14 @@
+{
+  "amsterdam": {
+    "grid": {
+      "gap": {
+        "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
+        "comment": "Grows from 16px at 1088px wide to 40px at 2624px wide."
+      },
+      "padding-inline": {
+        "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
+        "comment": "Equals the gap."
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/amsterdam/grid.tokens.json b/proprietary/tokens/src/components/amsterdam/grid.tokens.json
index 209b4f6ed2..a6ec7c33ac 100644
--- a/proprietary/tokens/src/components/amsterdam/grid.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/grid.tokens.json
@@ -2,25 +2,13 @@
   "amsterdam": {
     "grid": {
       "column-count": { "value": "4" },
-      "spacious": {
-        "gap": {
-          "value": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
-          "comment": "Grows from 16px at 320px wide to 56px at 1600px wide."
-        },
-        "padding-inline": {
-          "value": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)",
-          "comment": "Equals 1.5 times the gap."
-        }
+      "gap": {
+        "value": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
+        "comment": "Grows from 16px at 320px wide to 56px at 1600px wide."
       },
-      "compact": {
-        "gap": {
-          "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
-          "comment": "Grows from 16px at 1088px wide to 40px at 2624px wide."
-        },
-        "padding-inline": {
-          "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
-          "comment": "Equals the gap."
-        }
+      "padding-inline": {
+        "value": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)",
+        "comment": "Equals 1.5 times the gap."
       },
       "medium": {
         "column-count": { "value": "8" }
diff --git a/proprietary/tokens/src/components/amsterdam/header.tokens.json b/proprietary/tokens/src/components/amsterdam/header.tokens.json
index 7dff95fbde..f45bb65980 100644
--- a/proprietary/tokens/src/components/amsterdam/header.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/header.tokens.json
@@ -1,7 +1,7 @@
 {
   "amsterdam": {
     "header": {
-      "column-gap": { "value": "{amsterdam.grid.spacious.gap}" }
+      "column-gap": { "value": "{amsterdam.grid.gap}" }
     }
   }
 }
diff --git a/proprietary/tokens/src/components/amsterdam/heading.tokens.json b/proprietary/tokens/src/components/amsterdam/heading.tokens.json
index e8fc70121e..a7a07a076a 100644
--- a/proprietary/tokens/src/components/amsterdam/heading.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/heading.tokens.json
@@ -5,57 +5,29 @@
       "font-family": { "value": "{amsterdam.typography.font-family}" },
       "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
       "inverse-color": { "value": "{amsterdam.color.primary-white}" },
-      "spacious": {
-        "level-1": {
-          "line-height": { "value": "{amsterdam.typography.spacious.text-level.1.line-height}" },
-          "font-size": { "value": "{amsterdam.typography.spacious.text-level.1.font-size}" }
-        },
-        "level-2": {
-          "line-height": { "value": "{amsterdam.typography.spacious.text-level.2.line-height}" },
-          "font-size": { "value": "{amsterdam.typography.spacious.text-level.2.font-size}" }
-        },
-        "level-3": {
-          "line-height": { "value": "{amsterdam.typography.spacious.text-level.3.line-height}" },
-          "font-size": { "value": "{amsterdam.typography.spacious.text-level.3.font-size}" }
-        },
-        "level-4": {
-          "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" },
-          "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" }
-        },
-        "level-5": {
-          "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" },
-          "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }
-        },
-        "level-6": {
-          "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" },
-          "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" }
-        }
+      "level-1": {
+        "font-size": { "value": "{amsterdam.typography.text-level.1.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.text-level.1.line-height}" }
       },
-      "compact": {
-        "level-1": {
-          "line-height": { "value": "{amsterdam.typography.compact.text-level.1.line-height}" },
-          "font-size": { "value": "{amsterdam.typography.compact.text-level.1.font-size}" }
-        },
-        "level-2": {
-          "line-height": { "value": "{amsterdam.typography.compact.text-level.2.line-height}" },
-          "font-size": { "value": "{amsterdam.typography.compact.text-level.2.font-size}" }
-        },
-        "level-3": {
-          "line-height": { "value": "{amsterdam.typography.compact.text-level.3.line-height}" },
-          "font-size": { "value": "{amsterdam.typography.compact.text-level.3.font-size}" }
-        },
-        "level-4": {
-          "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" },
-          "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" }
-        },
-        "level-5": {
-          "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" },
-          "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }
-        },
-        "level-6": {
-          "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" },
-          "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" }
-        }
+      "level-2": {
+        "font-size": { "value": "{amsterdam.typography.text-level.2.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.text-level.2.line-height}" }
+      },
+      "level-3": {
+        "font-size": { "value": "{amsterdam.typography.text-level.3.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.text-level.3.line-height}" }
+      },
+      "level-4": {
+        "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" }
+      },
+      "level-5": {
+        "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }
+      },
+      "level-6": {
+        "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" }
       }
     }
   }
diff --git a/proprietary/tokens/src/components/amsterdam/icon.tokens.json b/proprietary/tokens/src/components/amsterdam/icon.tokens.json
index dbaac0ef7f..76f5e2648b 100644
--- a/proprietary/tokens/src/components/amsterdam/icon.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/icon.tokens.json
@@ -1,41 +1,21 @@
 {
   "amsterdam": {
     "icon": {
-      "spacious": {
-        "size-3": {
-          "font-size": { "value": "{amsterdam.typography.spacious.text-level.3.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.spacious.text-level.3.line-height}" }
-        },
-        "size-4": {
-          "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" }
-        },
-        "size-5": {
-          "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
-        },
-        "size-6": {
-          "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
-        }
+      "size-3": {
+        "font-size": { "value": "{amsterdam.typography.text-level.3.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.text-level.3.line-height}" }
       },
-      "compact": {
-        "size-3": {
-          "font-size": { "value": "{amsterdam.typography.compact.text-level.3.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.compact.text-level.3.line-height}" }
-        },
-        "size-4": {
-          "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" }
-        },
-        "size-5": {
-          "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
-        },
-        "size-6": {
-          "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
-        }
+      "size-4": {
+        "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" }
+      },
+      "size-5": {
+        "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }
+      },
+      "size-6": {
+        "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" }
       }
     }
   }
diff --git a/proprietary/tokens/src/components/amsterdam/link-list.tokens.json b/proprietary/tokens/src/components/amsterdam/link-list.tokens.json
index 8c41ccd8bd..17b5e15f99 100644
--- a/proprietary/tokens/src/components/amsterdam/link-list.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/link-list.tokens.json
@@ -11,33 +11,17 @@
         "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" },
         "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" },
         "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" },
-        "spacious": {
-          "small": {
-            "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
-            "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
-          },
-          "medium": {
-            "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
-            "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
-          },
-          "large": {
-            "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" },
-            "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" }
-          }
+        "small": {
+          "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" }
         },
-        "compact": {
-          "small": {
-            "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
-            "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
-          },
-          "medium": {
-            "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
-            "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
-          },
-          "large": {
-            "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" },
-            "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" }
-          }
+        "medium": {
+          "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }
+        },
+        "large": {
+          "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" }
         },
         "hover": {
           "color": { "value": "{amsterdam.link-appearance.hover.color}" },
diff --git a/proprietary/tokens/src/components/amsterdam/link.tokens.json b/proprietary/tokens/src/components/amsterdam/link.tokens.json
index 75b063f8f4..929a6afcb5 100644
--- a/proprietary/tokens/src/components/amsterdam/link.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/link.tokens.json
@@ -26,6 +26,8 @@
         }
       },
       "standalone": {
+        "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" },
         "text-decoration-line": { "value": "{amsterdam.link-appearance.regular.text-decoration-line}" },
         "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" },
         "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" },
@@ -34,14 +36,6 @@
             "value": "{amsterdam.link-appearance.regular.hover.text-decoration-thickness}"
           },
           "text-underline-offset": { "value": "{amsterdam.link-appearance.regular.hover.text-underline-offset}" }
-        },
-        "spacious": {
-          "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
-        },
-        "compact": {
-          "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
         }
       },
       "on-background-dark": {
diff --git a/proprietary/tokens/src/components/amsterdam/mega-menu.tokens.json b/proprietary/tokens/src/components/amsterdam/mega-menu.tokens.json
index 88c7e10b32..88486b3e30 100644
--- a/proprietary/tokens/src/components/amsterdam/mega-menu.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/mega-menu.tokens.json
@@ -2,10 +2,10 @@
   "amsterdam": {
     "mega-menu": {
       "list-category": {
-        "column-gap": { "value": "{amsterdam.grid.spacious.gap}" },
+        "column-gap": { "value": "{amsterdam.grid.gap}" },
         "column-width": { "value": "20rem" },
         "padding-block-start": { "value": "1rem" },
-        "padding-block-end": { "value": "{amsterdam.grid.spacious.gap}" }
+        "padding-block-end": { "value": "{amsterdam.grid.gap}" }
       }
     }
   }
diff --git a/proprietary/tokens/src/components/amsterdam/ordered-list.tokens.json b/proprietary/tokens/src/components/amsterdam/ordered-list.tokens.json
index d566961b0b..0032f02c09 100644
--- a/proprietary/tokens/src/components/amsterdam/ordered-list.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/ordered-list.tokens.json
@@ -3,17 +3,11 @@
     "ordered-list": {
       "color": { "value": "{amsterdam.color.primary-black}" },
       "font-family": { "value": "{amsterdam.typography.font-family}" },
+      "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
       "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
       "gap": { "value": "0.75rem" },
+      "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" },
       "list-style-type": { "value": "decimal" },
-      "spacious": {
-        "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
-      },
-      "compact": {
-        "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
-      },
       "item": {
         "margin-inline-start": {
           "value": "2.25rem",
diff --git a/proprietary/tokens/src/components/amsterdam/page-heading.tokens.json b/proprietary/tokens/src/components/amsterdam/page-heading.tokens.json
index cd8908e6c5..05f4198b37 100644
--- a/proprietary/tokens/src/components/amsterdam/page-heading.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/page-heading.tokens.json
@@ -3,16 +3,10 @@
     "page-heading": {
       "color": { "value": "{amsterdam.color.primary-black}" },
       "font-family": { "value": "{amsterdam.typography.font-family}" },
+      "font-size": { "value": "{amsterdam.typography.text-level.0.font-size}" },
       "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
       "inverse-color": { "value": "{amsterdam.color.primary-white}" },
-      "spacious": {
-        "font-size": { "value": "{amsterdam.typography.spacious.text-level.0.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.spacious.text-level.0.font-size}" }
-      },
-      "compact": {
-        "font-size": { "value": "{amsterdam.typography.compact.text-level.0.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.compact.text-level.0.font-size}" }
-      }
+      "line-height": { "value": "{amsterdam.typography.text-level.0.font-size}" }
     }
   }
 }
diff --git a/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json b/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json
index 6223d09a9a..534d7df1be 100644
--- a/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json
@@ -6,20 +6,14 @@
       "item": {
         "color": { "value": "{amsterdam.link-appearance.color}" },
         "font-family": { "value": "{amsterdam.typography.font-family}" },
+        "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" },
         "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
         "gap": { "value": "0.5rem" },
+        "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" },
         "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
         "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" },
         "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" },
         "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" },
-        "spacious": {
-          "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
-        },
-        "compact": {
-          "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
-        },
         "hover": {
           "color": { "value": "{amsterdam.link-appearance.hover.color}" },
           "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" }
diff --git a/proprietary/tokens/src/components/amsterdam/pagination.tokens.json b/proprietary/tokens/src/components/amsterdam/pagination.tokens.json
index 6cca52f715..4360328976 100644
--- a/proprietary/tokens/src/components/amsterdam/pagination.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/pagination.tokens.json
@@ -3,15 +3,9 @@
     "pagination": {
       "color": { "value": "{amsterdam.link-appearance.color}" },
       "font-family": { "value": "{amsterdam.typography.font-family}" },
+      "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
       "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
-      "spacious": {
-        "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
-      },
-      "compact": {
-        "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
-      },
+      "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" },
       "button": {
         "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
         "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" },
diff --git a/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json b/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json
index 3999df3bc5..0b78d70f46 100644
--- a/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json
@@ -5,33 +5,17 @@
       "font-family": { "value": "{amsterdam.typography.font-family}" },
       "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
       "inverse-color": { "value": "{amsterdam.color.primary-white}" },
-      "spacious": {
-        "small": {
-          "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
-        },
-        "medium": {
-          "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
-        },
-        "large": {
-          "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" }
-        }
+      "small": {
+        "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" }
       },
-      "compact": {
-        "small": {
-          "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
-        },
-        "medium": {
-          "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
-        },
-        "large": {
-          "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" }
-        }
+      "medium": {
+        "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }
+      },
+      "large": {
+        "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" }
       }
     }
   }
diff --git a/proprietary/tokens/src/components/amsterdam/search-field.tokens.json b/proprietary/tokens/src/components/amsterdam/search-field.tokens.json
index bb97585406..3e72d7401e 100644
--- a/proprietary/tokens/src/components/amsterdam/search-field.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/search-field.tokens.json
@@ -15,15 +15,17 @@
         },
         "color": { "value": "{amsterdam.color.primary-black}" },
         "font-family": { "value": "{amsterdam.typography.font-family}" },
+        "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" },
         "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
+        "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" },
         "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
         "cancel-button": {
           "background-image": {
             "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M29.333 5.47 26.53 2.668 16 13.187 5.47 2.666 2.668 5.47 13.187 16 2.666 26.53l2.804 2.803L16 18.813l10.53 10.52 2.803-2.804L18.813 16z'/></svg>\")"
           },
           "color": { "value": "{amsterdam.color.primary-blue}" },
-          "height": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
-          "width": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" }
+          "height": { "value": "{amsterdam.typography.text-level.6.font-size}" },
+          "width": { "value": "{amsterdam.typography.text-level.6.font-size}" }
         },
         "hover": {
           "box-shadow": {
@@ -32,14 +34,6 @@
         },
         "placeholder": {
           "color": { "value": "{amsterdam.color.neutral-grey3}" }
-        },
-        "compact": {
-          "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
-        },
-        "spacious": {
-          "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
         }
       }
     }
diff --git a/proprietary/tokens/src/components/amsterdam/skip-link.tokens.json b/proprietary/tokens/src/components/amsterdam/skip-link.tokens.json
index 8e9f937c47..f3f4586332 100644
--- a/proprietary/tokens/src/components/amsterdam/skip-link.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/skip-link.tokens.json
@@ -5,13 +5,9 @@
       "color": { "value": "{amsterdam.color.primary-white}" },
       "font-family": { "value": "{amsterdam.typography.font-family}" },
       "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
-      "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
-      "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" },
+      "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" },
+      "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" },
       "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
-      "compact": {
-        "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
-      },
       "hover": {
         "background-color": { "value": "{amsterdam.color.dark-blue}" }
       }
diff --git a/proprietary/tokens/src/components/amsterdam/table.tokens.json b/proprietary/tokens/src/components/amsterdam/table.tokens.json
index d1d78cbd80..ad90451455 100644
--- a/proprietary/tokens/src/components/amsterdam/table.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/table.tokens.json
@@ -4,8 +4,8 @@
       "color": { "value": "{amsterdam.color.primary-black}" },
       "font-family": { "value": "{amsterdam.typography.font-family}" },
       "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
-      "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
-      "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" },
+      "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
+      "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" },
       "caption": {
         "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" }
       },
diff --git a/proprietary/tokens/src/components/amsterdam/text-input.tokens.json b/proprietary/tokens/src/components/amsterdam/text-input.tokens.json
index 9e842c62c0..95c1e64dc3 100644
--- a/proprietary/tokens/src/components/amsterdam/text-input.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/text-input.tokens.json
@@ -4,7 +4,9 @@
       "box-shadow": { "value": "inset 0 0 0 1px {amsterdam.color.primary-black}" },
       "color": { "value": "{amsterdam.color.primary-black}" },
       "font-family": { "value": "{amsterdam.typography.font-family}" },
+      "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" },
       "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
+      "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" },
       "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
       "disabled": {
         "background-color": { "value": "{amsterdam.color.primary-white}" },
@@ -22,14 +24,6 @@
       },
       "placeholder": {
         "color": { "value": "{amsterdam.color.neutral-grey3}" }
-      },
-      "compact": {
-        "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
-      },
-      "spacious": {
-        "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
       }
     }
   }
diff --git a/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json b/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json
index f67a4e39e6..bee69ba5a1 100644
--- a/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json
@@ -4,34 +4,22 @@
       "description": {
         "color": { "value": "{amsterdam.color.primary-black}" },
         "font-family": { "value": "{amsterdam.typography.font-family}" },
+        "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" },
         "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
-        "spacious": {
-          "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
-        },
-        "compact": {
-          "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
-        }
+        "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" }
       },
       "label": {
         "color": { "value": "{amsterdam.link-appearance.color}" },
         "font-family": { "value": "{amsterdam.typography.font-family}" },
+        "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" },
         "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
+        "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" },
         "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" },
         "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" },
         "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" },
         "hover": {
           "color": { "value": "{amsterdam.color.dark-blue}" },
           "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" }
-        },
-        "spacious": {
-          "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" }
-        },
-        "compact": {
-          "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" }
         }
       },
       "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }
diff --git a/proprietary/tokens/src/components/amsterdam/unordered-list.tokens.json b/proprietary/tokens/src/components/amsterdam/unordered-list.tokens.json
index aa33f763f0..e4ad15e7c1 100644
--- a/proprietary/tokens/src/components/amsterdam/unordered-list.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/unordered-list.tokens.json
@@ -3,17 +3,11 @@
     "unordered-list": {
       "color": { "value": "{amsterdam.color.primary-black}" },
       "font-family": { "value": "{amsterdam.typography.font-family}" },
+      "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" },
       "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
       "gap": { "value": "0.75rem" },
+      "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" },
       "list-style-type": { "value": "'\\2022'" },
-      "spacious": {
-        "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
-      },
-      "compact": {
-        "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
-      },
       "item": {
         "margin-inline-start": {
           "value": "1.625rem",
diff --git a/proprietary/tokens/style-dictionary.config.json b/proprietary/tokens/style-dictionary.config.json
deleted file mode 100644
index b0fca77487..0000000000
--- a/proprietary/tokens/style-dictionary.config.json
+++ /dev/null
@@ -1,101 +0,0 @@
-{
-  "source": ["./src/**/tokens.json", "./src/**/*.tokens.json"],
-  "platforms": {
-    "js": {
-      "transforms": ["attribute/cti", "name/cti/camel", "color/hsl-4"],
-      "buildPath": "dist/",
-      "files": [
-        {
-          "destination": "index.js",
-          "format": "javascript/es6"
-        },
-        {
-          "format": "javascript/module",
-          "destination": "tokens.js"
-        }
-      ]
-    },
-    "json": {
-      "transforms": ["attribute/cti", "name/cti/camel", "color/hsl-4"],
-      "buildPath": "dist/",
-      "files": [
-        {
-          "destination": "index.tokens.json",
-          "format": "json/nested"
-        },
-        {
-          "destination": "index.json",
-          "format": "json/flat"
-        }
-      ]
-    },
-    "css": {
-      "transforms": ["attribute/cti", "name/cti/kebab", "color/hsl-4"],
-      "buildPath": "dist/",
-      "files": [
-        {
-          "destination": "root.css",
-          "format": "css/variables",
-          "options": {
-            "outputReferences": true
-          }
-        }
-      ]
-    },
-    "css-theme": {
-      "transforms": ["attribute/cti", "name/cti/kebab", "color/hsl-4"],
-      "buildPath": "dist/",
-      "files": [
-        {
-          "destination": "index.css",
-          "format": "css/variables",
-          "options": {
-            "selector": ".amsterdam-theme",
-            "outputReferences": true
-          }
-        }
-      ]
-    },
-    "scss": {
-      "transforms": ["attribute/cti", "name/cti/kebab", "color/hsl-4"],
-      "buildPath": "dist/",
-      "files": [
-        {
-          "destination": "_variables.scss",
-          "format": "scss/variables",
-          "options": {
-            "outputReferences": true
-          }
-        }
-      ]
-    },
-    "typescript": {
-      "transforms": ["attribute/cti", "name/cti/camel", "color/hsl-4"],
-      "transformGroup": "js",
-      "buildPath": "dist/",
-      "files": [
-        {
-          "format": "typescript/es6-declarations",
-          "destination": "index.d.ts"
-        },
-        {
-          "format": "typescript/module-declarations",
-          "destination": "tokens.d.ts"
-        }
-      ]
-    },
-    "less": {
-      "transforms": ["attribute/cti", "name/cti/kebab", "color/hsl-4"],
-      "buildPath": "dist/",
-      "files": [
-        {
-          "destination": "variables.less",
-          "format": "less/variables",
-          "options": {
-            "outputReferences": true
-          }
-        }
-      ]
-    }
-  }
-}
diff --git a/storybook/storybook-docs/config/preview.tsx b/storybook/storybook-docs/config/preview.tsx
index 44eb52f93e..d1eec48c6f 100644
--- a/storybook/storybook-docs/config/preview.tsx
+++ b/storybook/storybook-docs/config/preview.tsx
@@ -1,4 +1,4 @@
-import '@amsterdam/design-system-tokens/dist/root.css'
+import '@amsterdam/design-system-tokens/dist/index.css'
 import '@amsterdam/design-system-assets/font/index.css'
 import '@amsterdam/design-system-css/dist/index.css'
 import '../../storybook-overrides.css'
diff --git a/storybook/storybook-docs/src/color.stories.mdx b/storybook/storybook-docs/src/color.stories.mdx
index a072ed1030..3e4aa07d20 100644
--- a/storybook/storybook-docs/src/color.stories.mdx
+++ b/storybook/storybook-docs/src/color.stories.mdx
@@ -1,4 +1,4 @@
-import tokens from "@amsterdam/design-system-tokens/dist/index.tokens.json";
+import tokens from "@amsterdam/design-system-tokens/dist/index.json";
 import { Meta } from "@storybook/blocks";
 import { ColorPalette } from "./components/ColorPalette";
 
diff --git a/storybook/storybook-react/config/preview.tsx b/storybook/storybook-react/config/preview.tsx
index b2a9360236..91ac8e204a 100644
--- a/storybook/storybook-react/config/preview.tsx
+++ b/storybook/storybook-react/config/preview.tsx
@@ -1,4 +1,4 @@
-import '@amsterdam/design-system-tokens/dist/root.css'
+import '@amsterdam/design-system-tokens/dist/index.css'
 import '@amsterdam/design-system-assets/font/index.css'
 import '@amsterdam/design-system-css/dist/index.css'
 import '../../storybook-overrides.css'
diff --git a/storybook/storybook-react/src/Grid/Grid.docs.mdx b/storybook/storybook-react/src/Grid/Grid.docs.mdx
index 968079d5f0..a6d0a561a1 100644
--- a/storybook/storybook-react/src/Grid/Grid.docs.mdx
+++ b/storybook/storybook-react/src/Grid/Grid.docs.mdx
@@ -11,23 +11,11 @@ import README from "../../../../packages/css/src/components/grid/README.md?raw";
 The pink areas below represent the columns of the grid.
 The spaces in between are white.
 
-### Spacious
-
-For websites, the grid is quite spacious.
-This is one of the core tenets of our visual identity.
-
 The grid has 12 columns on wide screens, so all 12 cells in this example are in a row.
 On narrow screens, you will see three rows of four columns; on medium-wide screens, one row of eight and one of four.
 
 <Primary />
 
-### Compact
-
-For applications, so much white space is not necessary, even counterproductive.
-That’s why there is a compact version of the grid.
-
-<Canvas of={GridStories.Compact} />
-
 ### Vertical Margin
 
 Unlike the horizontal margins between columns, the vertical ones above and below are adjustable.
diff --git a/storybook/storybook-react/src/Grid/Grid.stories.tsx b/storybook/storybook-react/src/Grid/Grid.stories.tsx
index 5662ff19b0..fa20e98ef6 100644
--- a/storybook/storybook-react/src/Grid/Grid.stories.tsx
+++ b/storybook/storybook-react/src/Grid/Grid.stories.tsx
@@ -15,11 +15,6 @@ const meta = {
     children: {
       table: { disable: true },
     },
-    compact: {
-      control: {
-        type: 'boolean',
-      },
-    },
     gapVertical: {
       control: {
         type: 'radio',
@@ -91,14 +86,6 @@ export const Default: Story = {
   },
 }
 
-export const Compact: Story = {
-  ...StoryTemplate,
-  args: {
-    children: TwelveGridCells,
-    compact: true,
-  },
-}
-
 export const VerticalSpace: Story = {
   ...StoryTemplate,
   args: {

From 972a9e241082c49001ed191a9d443189fbe26d5d Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 9 Feb 2024 17:07:09 +0100
Subject: [PATCH 2/6] chore(release): Publish new release(s) (#1069)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Aram Limpens <a.limpens@amsterdam.nl>
---
 .release-please-manifest.json   |  6 +++---
 packages/css/CHANGELOG.md       | 15 +++++++++++++++
 packages/react/CHANGELOG.md     | 13 +++++++++++++
 proprietary/tokens/CHANGELOG.md | 14 ++++++++++++++
 4 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/.release-please-manifest.json b/.release-please-manifest.json
index 5973185086..b7ebc54718 100644
--- a/.release-please-manifest.json
+++ b/.release-please-manifest.json
@@ -1,7 +1,7 @@
 {
-  "packages/css": "0.3.0",
-  "packages/react": "0.3.0",
+  "packages/css": "0.5.0",
+  "packages/react": "0.5.0",
   "proprietary/assets": "0.1.6",
   "proprietary/react-icons": "0.1.11",
-  "proprietary/tokens": "0.3.0"
+  "proprietary/tokens": "0.5.0"
 }
diff --git a/packages/css/CHANGELOG.md b/packages/css/CHANGELOG.md
index e9472befb8..b5252e83e0 100644
--- a/packages/css/CHANGELOG.md
+++ b/packages/css/CHANGELOG.md
@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.5.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-css@0.4.0...design-system-css-v0.5.0) (2024-02-09)
+
+
+### ⚠ BREAKING CHANGES
+
+* Add theme setup and compact theme ([#1067](https://github.com/Amsterdam/design-system/issues/1067))
+* Remove deprecated ‘in list’ variant of Link ([#1064](https://github.com/Amsterdam/design-system/issues/1064))
+
+### Features
+
+* Add theme setup and compact theme ([#1067](https://github.com/Amsterdam/design-system/issues/1067)) ([e773434](https://github.com/Amsterdam/design-system/commit/e7734347a9e7205d510a16a543294bde69b9c6f0))
+* Hyphenate headings and other large text components ([#1056](https://github.com/Amsterdam/design-system/issues/1056)) ([f875171](https://github.com/Amsterdam/design-system/commit/f8751716018d4ed269a086e1764741ad29714fa0))
+* Remove deprecated ‘in list’ variant of Link ([#1064](https://github.com/Amsterdam/design-system/issues/1064)) ([b30784b](https://github.com/Amsterdam/design-system/commit/b30784b352b4a057069ceb397951b79a6e2547f2))
+
+
 ## [0.4.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-css@0.3.0...@amsterdam/design-system-css@0.4.0) (2024-01-31)
 
 ### ⚠ BREAKING CHANGES
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index f94bfa8a72..2822723902 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.5.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-react@0.4.0...design-system-react-v0.5.0) (2024-02-09)
+
+
+### ⚠ BREAKING CHANGES
+
+* Add theme setup and compact theme ([#1067](https://github.com/Amsterdam/design-system/issues/1067))
+* Remove deprecated ‘in list’ variant of Link ([#1064](https://github.com/Amsterdam/design-system/issues/1064))
+
+### Features
+
+* Add theme setup and compact theme ([#1067](https://github.com/Amsterdam/design-system/issues/1067)) ([e773434](https://github.com/Amsterdam/design-system/commit/e7734347a9e7205d510a16a543294bde69b9c6f0))
+* Remove deprecated ‘in list’ variant of Link ([#1064](https://github.com/Amsterdam/design-system/issues/1064)) ([b30784b](https://github.com/Amsterdam/design-system/commit/b30784b352b4a057069ceb397951b79a6e2547f2))
+
 ## [0.4.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-react@0.3.0...@amsterdam/design-system-react@0.4.0) (2024-01-31)
 
 ### ⚠ BREAKING CHANGES
diff --git a/proprietary/tokens/CHANGELOG.md b/proprietary/tokens/CHANGELOG.md
index e28bbb46ad..39f333265c 100644
--- a/proprietary/tokens/CHANGELOG.md
+++ b/proprietary/tokens/CHANGELOG.md
@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.5.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-tokens@0.4.0...design-system-tokens-v0.5.0) (2024-02-09)
+
+
+### ⚠ BREAKING CHANGES
+
+* Add theme setup and compact theme ([#1067](https://github.com/Amsterdam/design-system/issues/1067))
+* Remove deprecated ‘in list’ variant of Link ([#1064](https://github.com/Amsterdam/design-system/issues/1064))
+
+### Features
+
+* Add theme setup and compact theme ([#1067](https://github.com/Amsterdam/design-system/issues/1067)) ([e773434](https://github.com/Amsterdam/design-system/commit/e7734347a9e7205d510a16a543294bde69b9c6f0))
+* Hyphenate headings and other large text components ([#1056](https://github.com/Amsterdam/design-system/issues/1056)) ([f875171](https://github.com/Amsterdam/design-system/commit/f8751716018d4ed269a086e1764741ad29714fa0))
+* Remove deprecated ‘in list’ variant of Link ([#1064](https://github.com/Amsterdam/design-system/issues/1064)) ([b30784b](https://github.com/Amsterdam/design-system/commit/b30784b352b4a057069ceb397951b79a6e2547f2))
+
 ## [0.4.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-tokens@0.3.0...@amsterdam/design-system-tokens@0.4.0) (2024-01-31)
 
 ### ⚠ BREAKING CHANGES

From 740ff24dd3b733fae86f97b0e2740eebb5ca2b25 Mon Sep 17 00:00:00 2001
From: Aram Limpens <a.limpens@amsterdam.nl>
Date: Fri, 9 Feb 2024 17:22:34 +0100
Subject: [PATCH 3/6] Manually update version numbers

---
 packages/css/package.json       | 2 +-
 packages/react/package.json     | 2 +-
 proprietary/tokens/package.json | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/css/package.json b/packages/css/package.json
index 9185054434..b7da876500 100644
--- a/packages/css/package.json
+++ b/packages/css/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.4.0",
+  "version": "0.5.0",
   "author": "Community for NL Design System",
   "description": "CSS files for components for the City of Amsterdam based on the NL Design System architecture",
   "license": "EUPL-1.2",
diff --git a/packages/react/package.json b/packages/react/package.json
index ed5bb55d7b..972bb6aa68 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.4.0",
+  "version": "0.5.0",
   "author": "Community for NL Design System",
   "description": "React component library bundle for the City of Amsterdam based on the NL Design System architecture",
   "license": "EUPL-1.2",
diff --git a/proprietary/tokens/package.json b/proprietary/tokens/package.json
index fd63fd13b3..9815e13f61 100644
--- a/proprietary/tokens/package.json
+++ b/proprietary/tokens/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.4.0",
+  "version": "0.5.0",
   "author": "Community for NL Design System",
   "description": "Design tokens for components for the City of Amsterdam based on the NL Design System architecture",
   "license": "SEE LICENSE IN LICENSE.md",

From c7f12c048e1f754f7347ca2630d844752b58f876 Mon Sep 17 00:00:00 2001
From: Aram <37216945+alimpens@users.noreply.github.com>
Date: Fri, 9 Feb 2024 17:48:12 +0100
Subject: [PATCH 4/6] fix: Sync release please version numbers to released
 versions (#1070)

---
 .release-please-manifest.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.release-please-manifest.json b/.release-please-manifest.json
index b7ebc54718..4624742d29 100644
--- a/.release-please-manifest.json
+++ b/.release-please-manifest.json
@@ -1,7 +1,7 @@
 {
   "packages/css": "0.5.0",
   "packages/react": "0.5.0",
-  "proprietary/assets": "0.1.6",
-  "proprietary/react-icons": "0.1.11",
+  "proprietary/assets": "0.1.7",
+  "proprietary/react-icons": "0.1.12",
   "proprietary/tokens": "0.5.0"
 }

From a13817bf07914e2d4ac5e1d5fa5af09c1893fa2f Mon Sep 17 00:00:00 2001
From: Aram <37216945+alimpens@users.noreply.github.com>
Date: Mon, 12 Feb 2024 14:01:32 +0100
Subject: [PATCH 5/6] chore: Update release please bootstrap SHA (#1072)

---
 release-please-config.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/release-please-config.json b/release-please-config.json
index 390c3dcfa9..686a4f9ef7 100644
--- a/release-please-config.json
+++ b/release-please-config.json
@@ -1,6 +1,6 @@
 {
   "plugins": ["node-workspace"],
-  "bootstrap-sha": "3bc9765e9de9553db5b643d2ed79735837d4d7b6",
+  "bootstrap-sha": "740ff24dd3b733fae86f97b0e2740eebb5ca2b25",
   "bump-minor-pre-major": true,
   "bump-patch-for-minor-pre-major": true,
   "group-pull-request-title-pattern": "chore(release): Publish new release(s)",

From d53d0a93f18238759d85bd897a7b6ee537cc78b0 Mon Sep 17 00:00:00 2001
From: Aram <37216945+alimpens@users.noreply.github.com>
Date: Mon, 12 Feb 2024 14:04:58 +0100
Subject: [PATCH 6/6] feat: Create unique token classes (#1071)

---
 proprietary/tokens/build.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/proprietary/tokens/build.js b/proprietary/tokens/build.js
index ccb0a46247..5ffe1d2997 100644
--- a/proprietary/tokens/build.js
+++ b/proprietary/tokens/build.js
@@ -3,7 +3,7 @@ const StyleDictionary = require('style-dictionary')
 const modes = ['compact']
 
 function generateSharedConfig(mode) {
-  const name = mode ? `${mode}` : 'index'
+  const name = mode || 'index'
 
   return {
     css: {
@@ -28,7 +28,7 @@ function generateSharedConfig(mode) {
           destination: `${name}.theme.css`,
           format: 'css/variables',
           options: {
-            selector: '.amsterdam-theme',
+            selector: `.amsterdam-theme${name === 'index' ? '' : `--${name}`}`,
             outputReferences: true,
           },
         },