From 7b51788f2c1bc0715e9981562595d0dbe8aa5fbe Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 22 Nov 2023 15:03:48 +0100
Subject: [PATCH 01/24] Improve Storybook theme further

---
 storybook/storybook-overrides.css | 74 ++++++++++++++++++++-----------
 1 file changed, 47 insertions(+), 27 deletions(-)

diff --git a/storybook/storybook-overrides.css b/storybook/storybook-overrides.css
index 9a758620db..f1abaf8ad2 100644
--- a/storybook/storybook-overrides.css
+++ b/storybook/storybook-overrides.css
@@ -1,52 +1,72 @@
 /* stylelint-disable */
 
-.sbdocs-content > :is(h1, h2, h3, h4, h5, h6, p, li) {
-  color: #000000;
-  font-family: "Amsterdam Sans", Arial, sans-serif;
+.sbdocs-content > :is(h1, h2, h3, h4, h5, h6, p),
+.sbdocs-content > div > :is(h1, h2, h3, h4, h5, h6, p),
+.sbdocs-content :where(li:not(.sb-anchor, .sb-unstyled, .sb-unstyled li)) {
+  color: #000000 !important;
+  font-family: "Amsterdam Sans", Arial, sans-serif !important;
 }
 
-.sbdocs-content > :is(p, li, a),
-.sbdocs-content > :is(ol, ul) li {
-  font-size: 1rem;
-  line-height: 1.75;
+.sbdocs-content > :is(p, a),
+.sbdocs-content > div > :is(p, a),
+.sbdocs-content :where(li:not(.sb-anchor, .sb-unstyled, .sb-unstyled li)) {
+  font-size: 1.125rem !important;
+  line-height: 1.75 !important;
 }
 
-.sbdocs-content > h1 + p {
-  font-size: 1.25rem;
+.sbdocs-content > :is(p, ol, ul),
+.sbdocs-content > div > :is(p, ol, ul) {
+  margin-block: 1.25rem !important;
+  padding-block: 0 !important;
 }
 
-.sbdocs-content > a {
-  color: #004699;
-  text-decoration: underline;
+.sbdocs-content > h1 + p,
+.sbdocs-content > div > h1 + p {
+  font-size: 1.375rem !important;
+  margin-block-end: 2em !important;
 }
 
-.sbdocs-content > a:hover {
-  color: #102e62;
-  text-decoration-thickness: 2px;
+.sbdocs-content > a,
+.sbdocs-content > div > a {
+  color: #004699 !important;
+  text-decoration: underline !important;
 }
 
-.sbdocs-content > :is(h1, h2, h3, h4, h5, h6, p, ul, ol) {
-  margin-block: 1rem 0.25rem !important;
-  padding-block: 0;
+.sbdocs-content > a:hover,
+.sbdocs-content > div > a:hover {
+  color: #102e62 !important;
+  text-decoration-thickness: 2px !important;
 }
 
-.sbdocs-content > h1 {
-  margin-block: 2rem !important;
+.sbdocs-content > :is(h1, h2, h3, h4, h5, h6),
+.sbdocs-content > div > :is(h1, h2, h3, h4, h5, h6) {
+  margin-block: 1em 0.5em !important;
+  padding-block: 0 !important;
 }
 
-.sbdocs-content > h2 {
-  margin-block: 2rem 1rem !important;
+.sbdocs-content > h1,
+.sbdocs-content > div > h1 {
+  font-size: 2rem !important;
+  margin-block: 0 1.5em !important;
 }
 
-.sbdocs-content > h3 {
-  margin-block-start: 1.5rem !important;
+.sbdocs-content > h2,
+.sbdocs-content > div > h2 {
+  font-size: 1.75rem !important;
 }
 
-.sbdocs-content > h4 {
-  margin-block-start: 1rem !important;
+.sbdocs-content > h3,
+.sbdocs-content > div > h3 {
+  font-size: 1.375rem !important;
 }
 
-.sbdocs-content > :is(p, ul, ol) {
+.sbdocs-content > h4,
+.sbdocs-content > div > h4 {
+  font-size: 1.125rem !important;
+}
+
+.sbdocs-content > :is(p, ul, ol),
+.sbdocs-content > div > :is(p, ul, ol) {
   margin-block: 0 1rem !important;
 }
 

From dce6aa1f08b7633e203ac91aabfce71b490adbed Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 22 Nov 2023 15:05:04 +0100
Subject: [PATCH 02/24] Add new typography tokens for density themes

---
 .../brand/amsterdam/typography.tokens.json    |  72 ++++++++++
 .../storybook-docs/src/typography.stories.mdx | 125 +++++++++++++-----
 2 files changed, 164 insertions(+), 33 deletions(-)

diff --git a/proprietary/tokens/src/brand/amsterdam/typography.tokens.json b/proprietary/tokens/src/brand/amsterdam/typography.tokens.json
index d616feab46..195e720e94 100644
--- a/proprietary/tokens/src/brand/amsterdam/typography.tokens.json
+++ b/proprietary/tokens/src/brand/amsterdam/typography.tokens.json
@@ -6,6 +6,78 @@
         "normal": { "value": 400 },
         "bold": { "value": 800 }
       },
+      "density-low": {
+        "text-level": {
+          "0": {
+            "font-size": { "value": "clamp(1.802rem, 2.479vw + 1.009rem, 4.578rem)" },
+            "line-height": { "value": "1.1" }
+          },
+          "1": {
+            "font-size": { "value": "clamp(1.602rem, 1.839vw + 1.013rem, 3.662rem)" },
+            "line-height": { "value": "1.2" }
+          },
+          "2": {
+            "font-size": { "value": "clamp(1.424rem, 1.345vw + 0.994rem, 2.93rem)" },
+            "line-height": { "value": "1.3" }
+          },
+          "3": {
+            "font-size": { "value": "clamp(1.266rem, 0.962vw + 0.958rem, 2.344rem)" },
+            "line-height": { "value": "1.4" }
+          },
+          "4": {
+            "font-size": { "value": "clamp(1.125rem, 0.67vw + 0.911rem, 1.875rem)" },
+            "line-height": { "value": "1.4" }
+          },
+          "5": {
+            "font-size": { "value": "clamp(1.25rem, 0.558vw + 1.071rem, 1.875rem)" },
+            "line-height": { "value": "1.5" }
+          },
+          "6": {
+            "font-size": { "value": "clamp(1rem, 0.446vw + 0.857rem, 1.5rem)" },
+            "line-height": { "value": "1.6" }
+          },
+          "7": {
+            "font-size": { "value": "clamp(0.8rem, 0.357vw + 0.686rem, 1.2rem)" },
+            "line-height": { "value": "1.6" }
+          }
+        }
+      },
+      "density-high": {
+        "text-level": {
+          "0": {
+            "font-size": { "value": "clamp(1.577rem, 1.657vw + 1.047rem, 3.433rem)" },
+            "line-height": { "value": "1.1" }
+          },
+          "1": {
+            "font-size": { "value": "clamp(1.402rem, 1.201vw + 1.018rem, 2.747rem)" },
+            "line-height": { "value": "1.2" }
+          },
+          "2": {
+            "font-size": { "value": "clamp(1.246rem, 0.849vw + 0.974rem, 2.197rem)" },
+            "line-height": { "value": "1.3" }
+          },
+          "3": {
+            "font-size": { "value": "clamp(1.107rem, 0.581vw + 0.921rem, 1.758rem)" },
+            "line-height": { "value": "1.4" }
+          },
+          "4": {
+            "font-size": { "value": "clamp(0.984rem, 0.377vw + 0.863rem, 1.406rem)" },
+            "line-height": { "value": "1.4" }
+          },
+          "5": {
+            "font-size": { "value": "clamp(1.094rem, 0.279vw + 1.005rem, 1.406rem)" },
+            "line-height": { "value": "1.5" }
+          },
+          "6": {
+            "font-size": { "value": "clamp(0.875rem, 0.223vw + 0.804rem, 1.125rem)" },
+            "line-height": { "value": "1.6" }
+          },
+          "7": {
+            "font-size": { "value": "clamp(0.7rem, 0.179vw + 0.643rem, 0.9rem)" },
+            "line-height": { "value": "1.6" }
+          }
+        }
+      },
       "text-level": {
         "0": {
           "narrow": {
diff --git a/storybook/storybook-docs/src/typography.stories.mdx b/storybook/storybook-docs/src/typography.stories.mdx
index 6ffc5a33b5..ddea7e3c03 100644
--- a/storybook/storybook-docs/src/typography.stories.mdx
+++ b/storybook/storybook-docs/src/typography.stories.mdx
@@ -23,53 +23,106 @@ Deze zin demonstreert alle letters van het Latijnse alfabet en cijfers in de Ams
 
 ## Tekstgrootte
 
-De grootte van de tekst is afhankelijk van de breedte van het venster.
-Hiermee zorgen we ervoor dat tekst op schermen van alle afmetingen prettig leesbaar is.
+### Acht tekstniveau’s
 
 Er zijn 8 niveaus van tekstgrootte en bijbehorende regelhoogte.
-Alle typografische componenten maken er gebruik van.
-Dit overzicht toont de maximale tekstgrootte voor elk niveau.
+Elk typografisch element zit op 1 zo’n niveau: titel, paragraaf, link, citaat, formuliertekst, enzovoort.
+Ze zijn genummerd van 0 tot en met 7 – zo komen ze voor de diverse titels mooi overeen.
+Voorbeelden:
+
+<ol start={0}>
+  <li>Page heading</li>
+  <li>Heading 1</li>
+  <li>Heading 2</li>
+  <li>Heading 3, Blockquote</li>
+  <li>Heading 4, Top Task Link Title</li>
+  <li>Large Paragraph, Alert Title</li>
+  <li>Paragraph, Button</li>
+  <li>Small Paragraph, Link List, Form Label, Top Task Link Description, Breadcrumb</li>
+</ol>
+
+### Responsive
+
+De grootte van de tekst is afhankelijk van de breedte van het venster.
+Hiermee zorgen we ervoor dat het op schermen van alle afmetingen prettig lezen is.
+Ook werkt dat goed samen met het fluïde [grid](?path=/docs/react_layout-grid--docs).
+
+Tekst begint met groeien bij een vensterbreedte van 320 pixels.
+Daaronder wordt het niet kleiner.
+
+Het groeien stopt bij een vensterbreedte van 1440 pixels –
+dat is de vensterbreedte van 1600 pixels min de horizontale marge van 2 × 84 pixels.
+
+Zo heeft elk niveau een minimale en een maximale tekstgrootte.
+Daartussen groeit die in een rechte lijn.
+
+### Typografische schaal
+
+De typografische schaal is gebaseerd op een factor van 5 ÷ 4 = 1,25.
+Voor elk naastliggende niveau is de tekst dus zo veel keer groter of kleiner.
+
+Bij de minimale vensterbreedte groeit de tekstgrootte voor de niveau’s 0 tot en met 4 langzamer, met een factor van 9 ÷ 8 = 1,125.
+Zo worden titels niet te groot op telefoons en andere smalle vensters.
+
+De getallen die uit deze systematiek rollen zijn niet afgerond op ronde getallen.
+
+### Twee thema’s voor websites en applicaties
+
+#### Ruimtelijk
+
+Voor websites is de typografie behoorlijk ruimtelijk.
+Zo is de huisstijl ontworpen.
+
+Een standaard paragraaf is 16 pixels groot bij een vensterbreedte van 320 pixels.
+In een venster van 1600 pixels breed is dat de helft meer: 24 pixels.
+
+De maximale tekstgroottes voor alle niveau’s in het ruimtelijke thema:
 
 <Typeset
   fontFamily="Amsterdam Sans, Arial, sans-serif"
-  fontSizes={[80, 56, 40, 32, 28, 25, 22, 18]}
+  fontSizes={[73.2, 58.6, 46.9, 37.5, 30.0, 30.0, 24.0, 19.2]}
   fontWeight={400}
   sampleText="Jouw typograaf biedt mij zulke exquise schreven"
 />
 
-Elk tekstniveau heeft een minimale tekstgrootte (bij een vensterbreedte van 320 pixels) en een maximale (bij 1440 pixels).
-Tussen beide stijgt de tekst linear, met een knik op een extra breakpoint van 854 pixels.
-Eerst stijgt de grootte sneller, daarna langzamer.
+#### Compact
 
-Op dit moment reageert de typografie nog op 1 breakpoint bij een vensterbreedte van 854 pixels.
-Nu het grid doorontwikkeld is, stemmen we de typografie daar weer op af.
-Dit aparte breakpoint komt dus snel te vervallen.
+Voor applicaties is zulke grote tekst niet nodig, zelfs contraproductief.
+Daarom is er een compact thema voor de typografie.
 
-In de tabel hieronder vind je deze waardes in pixels:
+Hier is een paragraaf 14 pixels groot bij de minimale vensterbreedte en 18 pixels bij de maximale.
+Een paragraaf groeit hier dus niet met de helft, maar met iets meer dan een kwart.
 
-| Niveau                     |   0 |   1 |   2 |   3 |   4 |   5 |   6 |   7 |
-| :------------------------- | --: | --: | --: | --: | --: | --: | --: | --: |
-| minimale tekstgrootte      |  32 |  32 |  28 |  24 |  20 |  22 |  18 |  16 |
-| tekstgrootte op breakpoint |  64 |  48 |  36 |  29 |  23 |  26 |  21 |  17 |
-| maximale tekstgrootte      |  80 |  56 |  40 |  32 |  25 |  28 |  22 |  18 |
-| relatieve regelhoogte      | 1.1 | 1.2 | 1.3 | 1.4 | 1.4 | 1.5 | 1.6 | 1.6 |
+De maximale tekstgroottes voor alle niveau’s in het compacte thema:
 
-Tekst op niveau 5 is groter dan op niveau 4.
-Dat is omdat titel niveau 4 kleinere letters heeft dan paragrafen met grote letters.
-Het alternatief om Heading 4 tekstniveau 5 te geven leek ons nog verwarrender.
+<Typeset
+  fontFamily="Amsterdam Sans, Arial, sans-serif"
+  fontSizes={[54.9, 43.9, 35.2, 28.1, 22.5, 22.5, 18.0, 14.4]}
+  fontWeight={400}
+  sampleText="Jouw typograaf biedt mij zulke exquise schreven"
+/>
+
+### Referentie-breedtes voor ontwerpers
+
+In Figma werken we met drie referentie-breedtes.
+Op die breedtes werken we het ontwerp van een scherm uit voor die drie klassen van apparaten.
+Op deze breedtes is de maatvoering als volgt, afgerond op 1 cijfer achter de komma.
 
-Voorbeelden van componenten en hun tekstniveaus:
+#### Ruimtelijk
 
-| Componenten                                          | Niveau |
-| :--------------------------------------------------- | -----: |
-| Page heading                                         |      0 |
-| Heading 1                                            |      1 |
-| Heading 2                                            |      2 |
-| Heading 3, Blockquote                                |      3 |
-| Heading 4, Top Task Link                             |      4 |
-| Large Paragraph, Alert Title                         |      5 |
-| Paragraph, Button, Link behalve InList               |      6 |
-| Small Paragraph, InList Link, Form Label, Breadcrumb |      7 |
+| Klasse apparaat | Referentie-breedte |    0 |    1 |    2 |    3 |    4 |    5 |    6 |    7 |
+| :-------------- | :----------------- | ---: | ---: | ---: | ---: | ---: | ---: | ---: | ---: |
+| telefoon        | 320                | 28,8 | 25,6 | 22,8 | 20,3 |   18 |   20 |   16 | 12,8 |
+| tablet          | 832                | 49,3 | 40,8 | 33,9 | 28,2 | 23,5 | 24,6 | 19,7 | 15,7 |
+| desktop         | 1600               | 73,2 | 58,6 | 46,9 | 37,5 |   30 |   30 |   24 | 19,2 |
+
+#### Compact
+
+| Klasse apparaat | Referentie-breedte |    0 |    1 |    2 |    3 |    4 |    5 |    6 |    7 |
+| :-------------- | :----------------- | ---: | ---: | ---: | ---: | ---: | ---: | ---: | ---: |
+| telefoon        | 320                | 25,2 | 22,4 | 19,9 | 17,7 | 15,8 | 17,5 | 14,0 | 11,2 |
+| tablet          | 832                | 38,8 | 32,3 | 26,9 | 22,5 | 18,9 | 19,8 | 15,8 | 12,7 |
+| desktop         | 1600               | 54,9 | 43,9 | 35,2 | 28,1 | 22,5 | 22,5 | 18,0 | 14,4 |
 
 ## Accentuering
 
@@ -179,7 +232,13 @@ Werk je met andere technologie, maar wel met npm, dan installeer je `@amsterdam/
 
 Ook kun je het lettertype zelf hosten en opnemen in je applicatie, vraag het dan aan via het formulier hieronder.
 Als het helemaal niet mogelijk is Amsterdam Sans te gebruiken pas je het lettertype Arial toe, of het generieke sans-serif lettertype van het apparaat.
-In alle gevallen voer je die alternatieven op voor als het downloaden van het font voor de gebruiker niet lukt, of terwijl dat bezig is: `font-family: "'Amsterdam Sans', Arial, sans-serif"`.
+In alle gevallen voer je die alternatieven op voor als het downloaden van het font voor de gebruiker niet lukt, of terwijl dat bezig is:
+
+```css
+.class {
+  font-family: "Amsterdam Sans", Arial, sans-serif;
+}
+```
 
 ### Licentie en aanvraag
 

From 31215607c5df6bfbf3e6188ba4f04ada1df29bab Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 22 Nov 2023 15:23:22 +0100
Subject: [PATCH 03/24] Implement new typography tokens to headings and
 paragraphs

---
 packages/css/src/heading/heading.scss         | 34 ++-----
 .../css/src/page-heading/page-heading.scss    | 10 +--
 packages/css/src/paragraph/paragraph.scss     | 26 ++----
 .../components/amsterdam/heading.tokens.json  | 88 +++++++++++++------
 .../amsterdam/page-heading.tokens.json        | 25 ++++--
 .../amsterdam/paragraph.tokens.json           | 46 ++++++----
 6 files changed, 121 insertions(+), 108 deletions(-)

diff --git a/packages/css/src/heading/heading.scss b/packages/css/src/heading/heading.scss
index e147ae61ff..b305b36a9b 100644
--- a/packages/css/src/heading/heading.scss
+++ b/packages/css/src/heading/heading.scss
@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
@@ -22,39 +20,23 @@
 }
 
 .amsterdam-heading--1 {
-  font-size: var(--amsterdam-heading-1-narrow-font-size);
-  line-height: var(--amsterdam-heading-1-line-height);
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-heading-1-wide-font-size);
-  }
+  font-size: var(--amsterdam-heading-density-low-level-1-font-size);
+  line-height: var(--amsterdam-heading-density-low-level-1-line-height);
 }
 
 .amsterdam-heading--2 {
-  font-size: var(--amsterdam-heading-2-narrow-font-size);
-  line-height: var(--amsterdam-heading-2-line-height);
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-heading-2-wide-font-size);
-  }
+  font-size: var(--amsterdam-heading-density-low-level-2-font-size);
+  line-height: var(--amsterdam-heading-density-low-level-2-line-height);
 }
 
 .amsterdam-heading--3 {
-  font-size: var(--amsterdam-heading-3-narrow-font-size);
-  line-height: var(--amsterdam-heading-3-line-height);
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-heading-3-wide-font-size);
-  }
+  font-size: var(--amsterdam-heading-density-low-level-3-font-size);
+  line-height: var(--amsterdam-heading-density-low-level-3-line-height);
 }
 
 .amsterdam-heading--4 {
-  font-size: var(--amsterdam-heading-4-narrow-font-size);
-  line-height: var(--amsterdam-heading-4-line-height);
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-heading-4-wide-font-size);
-  }
+  font-size: var(--amsterdam-heading-density-low-level-4-font-size);
+  line-height: var(--amsterdam-heading-density-low-level-4-line-height);
 }
 
 .amsterdam-heading--inverse-color {
diff --git a/packages/css/src/page-heading/page-heading.scss b/packages/css/src/page-heading/page-heading.scss
index dac2c86b4d..b5780f0615 100644
--- a/packages/css/src/page-heading/page-heading.scss
+++ b/packages/css/src/page-heading/page-heading.scss
@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
@@ -16,13 +14,9 @@
   break-inside: avoid;
   color: var(--amsterdam-page-heading-color);
   font-family: var(--amsterdam-page-heading-font-family);
-  font-size: var(--amsterdam-page-heading-narrow-font-size);
+  font-size: var(--amsterdam-page-heading-density-low-font-size);
   font-weight: var(--amsterdam-page-heading-font-weight);
-  line-height: var(--amsterdam-page-heading-line-height);
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-page-heading-wide-font-size);
-  }
+  line-height: var(--amsterdam-page-heading-density-low-line-height);
 
   @include reset;
 }
diff --git a/packages/css/src/paragraph/paragraph.scss b/packages/css/src/paragraph/paragraph.scss
index 1384d49cbe..3a90019eb1 100644
--- a/packages/css/src/paragraph/paragraph.scss
+++ b/packages/css/src/paragraph/paragraph.scss
@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
@@ -14,33 +12,21 @@
 .amsterdam-paragraph {
   color: var(--amsterdam-paragraph-color);
   font-family: var(--amsterdam-paragraph-font-family);
-  font-size: var(--amsterdam-paragraph-narrow-font-size);
+  font-size: var(--amsterdam-paragraph-density-low-medium-font-size);
   font-weight: var(--amsterdam-paragraph-font-weight);
-  line-height: var(--amsterdam-paragraph-line-height);
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-paragraph-wide-font-size);
-  }
+  line-height: var(--amsterdam-paragraph-density-low-medium-line-height);
 
   @include reset;
 }
 
 .amsterdam-paragraph--small {
-  font-size: var(--amsterdam-paragraph-small-narrow-font-size);
-  line-height: var(--amsterdam-paragraph-small-line-height);
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-paragraph-small-wide-font-size);
-  }
+  font-size: var(--amsterdam-paragraph-density-low-small-font-size);
+  line-height: var(--amsterdam-paragraph-density-low-small-line-height);
 }
 
 .amsterdam-paragraph--large {
-  font-size: var(--amsterdam-paragraph-large-narrow-font-size);
-  line-height: var(--amsterdam-paragraph-large-line-height);
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-paragraph-large-wide-font-size);
-  }
+  font-size: var(--amsterdam-paragraph-density-low-large-font-size);
+  line-height: var(--amsterdam-paragraph-density-low-large-line-height);
 }
 
 .amsterdam-paragraph--inverse-color {
diff --git a/proprietary/tokens/src/components/amsterdam/heading.tokens.json b/proprietary/tokens/src/components/amsterdam/heading.tokens.json
index 12f04133eb..e7845d1a6b 100644
--- a/proprietary/tokens/src/components/amsterdam/heading.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/heading.tokens.json
@@ -5,40 +5,72 @@
       "font-family": { "value": "{amsterdam.typography.font-family}" },
       "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
       "inverse-color": { "value": "{amsterdam.color.primary-white}" },
-      "1": {
-        "line-height": { "value": "{amsterdam.typography.text-level.1.line-height}" },
-        "narrow": {
-          "font-size": { "value": "{amsterdam.typography.text-level.1.narrow.font-size}" }
+      "density-high": {
+        "level-1": {
+          "line-height": {
+            "value": "{amsterdam.typography.density-high.text-level.1.line-height}"
+          },
+          "font-size": {
+            "value": "{amsterdam.typography.density-high.text-level.1.font-size}"
+          }
         },
-        "wide": {
-          "font-size": { "value": "{amsterdam.typography.text-level.1.wide.font-size}" }
-        }
-      },
-      "2": {
-        "line-height": { "value": "{amsterdam.typography.text-level.2.line-height}" },
-        "narrow": {
-          "font-size": { "value": "{amsterdam.typography.text-level.2.narrow.font-size}" }
+        "level-2": {
+          "line-height": {
+            "value": "{amsterdam.typography.density-high.text-level.2.line-height}"
+          },
+          "font-size": {
+            "value": "{amsterdam.typography.density-high.text-level.2.font-size}"
+          }
         },
-        "wide": {
-          "font-size": { "value": "{amsterdam.typography.text-level.2.wide.font-size}" }
-        }
-      },
-      "3": {
-        "line-height": { "value": "{amsterdam.typography.text-level.3.line-height}" },
-        "narrow": {
-          "font-size": { "value": "{amsterdam.typography.text-level.3.narrow.font-size}" }
+        "level-3": {
+          "line-height": {
+            "value": "{amsterdam.typography.density-high.text-level.3.line-height}"
+          },
+          "font-size": {
+            "value": "{amsterdam.typography.density-high.text-level.3.font-size}"
+          }
         },
-        "wide": {
-          "font-size": { "value": "{amsterdam.typography.text-level.3.wide.font-size}" }
+        "level-4": {
+          "line-height": {
+            "value": "{amsterdam.typography.density-high.text-level.4.line-height}"
+          },
+          "font-size": {
+            "value": "{amsterdam.typography.density-high.text-level.4.font-size}"
+          }
         }
       },
-      "4": {
-        "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" },
-        "narrow": {
-          "font-size": { "value": "{amsterdam.typography.text-level.4.narrow.font-size}" }
+      "density-low": {
+        "level-1": {
+          "line-height": {
+            "value": "{amsterdam.typography.density-low.text-level.1.line-height}"
+          },
+          "font-size": {
+            "value": "{amsterdam.typography.density-low.text-level.1.font-size}"
+          }
+        },
+        "level-2": {
+          "line-height": {
+            "value": "{amsterdam.typography.density-low.text-level.2.line-height}"
+          },
+          "font-size": {
+            "value": "{amsterdam.typography.density-low.text-level.2.font-size}"
+          }
+        },
+        "level-3": {
+          "line-height": {
+            "value": "{amsterdam.typography.density-low.text-level.3.line-height}"
+          },
+          "font-size": {
+            "value": "{amsterdam.typography.density-low.text-level.3.font-size}"
+          }
         },
-        "wide": {
-          "font-size": { "value": "{amsterdam.typography.text-level.4.wide.font-size}" }
+        "level-4": {
+          "line-height": {
+            "value": "{amsterdam.typography.density-low.text-level.4.line-height}"
+          },
+          "font-size": {
+            "value": "{amsterdam.typography.density-low.text-level.4.font-size}"
+          }
         }
       }
     }
diff --git a/proprietary/tokens/src/components/amsterdam/page-heading.tokens.json b/proprietary/tokens/src/components/amsterdam/page-heading.tokens.json
index 7e5014931d..f2bc7e5afd 100644
--- a/proprietary/tokens/src/components/amsterdam/page-heading.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/page-heading.tokens.json
@@ -3,15 +3,24 @@
     "page-heading": {
       "color": { "value": "{amsterdam.color.primary-black}" },
       "font-family": { "value": "{amsterdam.typography.font-family}" },
-      "line-height": { "value": "{amsterdam.typography.text-level.0.line-height}" },
-      "narrow": {
-        "font-size": { "value": "{amsterdam.typography.text-level.0.narrow.font-size}" }
-      },
-      "wide": {
-        "font-size": { "value": "{amsterdam.typography.text-level.0.wide.font-size}" }
-      },
       "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
-      "inverse-color": { "value": "{amsterdam.color.primary-white}" }
+      "inverse-color": { "value": "{amsterdam.color.primary-white}" },
+      "density-high": {
+        "font-size": {
+          "value": "{amsterdam.typography.density-high.text-level.0.font-size}"
+        },
+        "line-height": {
+          "value": "{amsterdam.typography.density-high.text-level.0.font-size}"
+        }
+      },
+      "density-low": {
+        "font-size": {
+          "value": "{amsterdam.typography.density-low.text-level.0.font-size}"
+        },
+        "line-height": {
+          "value": "{amsterdam.typography.density-low.text-level.0.font-size}"
+        }
+      }
     }
   }
 }
diff --git a/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json b/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json
index ba24e6a0dd..d9cc1c2f44 100644
--- a/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json
@@ -6,28 +6,38 @@
       "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
       "inverse-color": { "value": "{amsterdam.color.primary-white}" },
       "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" },
-      "narrow": {
-        "font-size": { "value": "{amsterdam.typography.text-level.6.narrow.font-size}" }
-      },
-      "wide": {
-        "font-size": { "value": "{amsterdam.typography.text-level.6.wide.font-size}" }
-      },
-      "small": {
-        "line-height": { "value": "{amsterdam.typography.text-level.7.line-height}" },
-        "narrow": {
-          "font-size": { "value": "{amsterdam.typography.text-level.7.narrow.font-size}" }
+      "density-high": {
+        "small": {
+          "font-size": { "value": "{amsterdam.typography.density-high.text-level.7.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-high.text-level.7.line-height}" }
         },
-        "wide": {
-          "font-size": { "value": "{amsterdam.typography.text-level.7.wide.font-size}" }
+        "medium": {
+          "font-size": { "value": "{amsterdam.typography.density-high.text-level.6.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-high.text-level.6.line-height}" }
+        },
+        "large": {
+          "font-size": { "value": "{amsterdam.typography.density-high.text-level.5.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-high.text-level.5.line-height}" }
         }
       },
-      "large": {
-        "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" },
-        "narrow": {
-          "font-size": { "value": "{amsterdam.typography.text-level.5.narrow.font-size}" }
+      "density-low": {
+        "small": {
+          "font-size": {
+            "value": "{amsterdam.typography.density-low.text-level.7.font-size}",
+            "line-height": { "value": "{amsterdam.typography.density-low.text-level.7.line-height}" }
+          }
+        },
+        "medium": {
+          "font-size": {
+            "value": "{amsterdam.typography.density-low.text-level.6.font-size}",
+            "line-height": { "value": "{amsterdam.typography.density-low.text-level.6.line-height}" }
+          }
         },
-        "wide": {
-          "font-size": { "value": "{amsterdam.typography.text-level.5.wide.font-size}" }
+        "large": {
+          "font-size": {
+            "value": "{amsterdam.typography.density-low.text-level.5.font-size}",
+            "line-height": { "value": "{amsterdam.typography.density-low.text-level.5.line-height}" }
+          }
         }
       }
     }

From 4650517094b3f9029b2a79ad90dc514929cdc5ea Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 22 Nov 2023 16:33:23 +0100
Subject: [PATCH 04/24] Update
 storybook/storybook-docs/src/typography.stories.mdx

---
 storybook/storybook-docs/src/typography.stories.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/storybook/storybook-docs/src/typography.stories.mdx b/storybook/storybook-docs/src/typography.stories.mdx
index ddea7e3c03..04a05e2501 100644
--- a/storybook/storybook-docs/src/typography.stories.mdx
+++ b/storybook/storybook-docs/src/typography.stories.mdx
@@ -43,7 +43,7 @@ Voorbeelden:
 
 ### Responsive
 
-De grootte van de tekst is afhankelijk van de breedte van het venster.
+De grootte van tekst is afhankelijk van de breedte van het venster.
 Hiermee zorgen we ervoor dat het op schermen van alle afmetingen prettig lezen is.
 Ook werkt dat goed samen met het fluïde [grid](?path=/docs/react_layout-grid--docs).
 

From 67f6fb7291311ad03a7a28690b9c7e7b4a604b33 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 22 Nov 2023 16:34:53 +0100
Subject: [PATCH 05/24] Update
 storybook/storybook-docs/src/typography.stories.mdx

---
 storybook/storybook-docs/src/typography.stories.mdx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/storybook/storybook-docs/src/typography.stories.mdx b/storybook/storybook-docs/src/typography.stories.mdx
index 04a05e2501..2c8ca871af 100644
--- a/storybook/storybook-docs/src/typography.stories.mdx
+++ b/storybook/storybook-docs/src/typography.stories.mdx
@@ -50,8 +50,7 @@ Ook werkt dat goed samen met het fluïde [grid](?path=/docs/react_layout-grid--d
 Tekst begint met groeien bij een vensterbreedte van 320 pixels.
 Daaronder wordt het niet kleiner.
 
-Het groeien stopt bij een vensterbreedte van 1440 pixels –
-dat is de vensterbreedte van 1600 pixels min de horizontale marge van 2 × 84 pixels.
+Het groeien stopt bij een vensterbreedte van 1600 pixels.
 
 Zo heeft elk niveau een minimale en een maximale tekstgrootte.
 Daartussen groeit die in een rechte lijn.

From 06b744e3d0ef16df315698401ab424a23ad0e386 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Thu, 23 Nov 2023 17:18:46 +0100
Subject: [PATCH 06/24] Improve base font size and typographic scales

---
 .../brand/amsterdam/typography.tokens.json    | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/proprietary/tokens/src/brand/amsterdam/typography.tokens.json b/proprietary/tokens/src/brand/amsterdam/typography.tokens.json
index 195e720e94..f1ee28d1b8 100644
--- a/proprietary/tokens/src/brand/amsterdam/typography.tokens.json
+++ b/proprietary/tokens/src/brand/amsterdam/typography.tokens.json
@@ -9,35 +9,35 @@
       "density-low": {
         "text-level": {
           "0": {
-            "font-size": { "value": "clamp(1.802rem, 2.479vw + 1.009rem, 4.578rem)" },
+            "font-size": { "value": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)" },
             "line-height": { "value": "1.1" }
           },
           "1": {
-            "font-size": { "value": "clamp(1.602rem, 1.839vw + 1.013rem, 3.662rem)" },
+            "font-size": { "value": "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)" },
             "line-height": { "value": "1.2" }
           },
           "2": {
-            "font-size": { "value": "clamp(1.424rem, 1.345vw + 0.994rem, 2.93rem)" },
+            "font-size": { "value": "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)" },
             "line-height": { "value": "1.3" }
           },
           "3": {
-            "font-size": { "value": "clamp(1.266rem, 0.962vw + 0.958rem, 2.344rem)" },
+            "font-size": { "value": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)" },
             "line-height": { "value": "1.4" }
           },
           "4": {
-            "font-size": { "value": "clamp(1.125rem, 0.67vw + 0.911rem, 1.875rem)" },
+            "font-size": { "value": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)" },
             "line-height": { "value": "1.4" }
           },
           "5": {
-            "font-size": { "value": "clamp(1.25rem, 0.558vw + 1.071rem, 1.875rem)" },
+            "font-size": { "value": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)" },
             "line-height": { "value": "1.5" }
           },
           "6": {
-            "font-size": { "value": "clamp(1rem, 0.446vw + 0.857rem, 1.5rem)" },
+            "font-size": { "value": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)" },
             "line-height": { "value": "1.6" }
           },
           "7": {
-            "font-size": { "value": "clamp(0.8rem, 0.357vw + 0.686rem, 1.2rem)" },
+            "font-size": { "value": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)" },
             "line-height": { "value": "1.6" }
           }
         }
@@ -45,35 +45,35 @@
       "density-high": {
         "text-level": {
           "0": {
-            "font-size": { "value": "clamp(1.577rem, 1.657vw + 1.047rem, 3.433rem)" },
+            "font-size": { "value": "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)" },
             "line-height": { "value": "1.1" }
           },
           "1": {
-            "font-size": { "value": "clamp(1.402rem, 1.201vw + 1.018rem, 2.747rem)" },
+            "font-size": { "value": "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)" },
             "line-height": { "value": "1.2" }
           },
           "2": {
-            "font-size": { "value": "clamp(1.246rem, 0.849vw + 0.974rem, 2.197rem)" },
+            "font-size": { "value": "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)" },
             "line-height": { "value": "1.3" }
           },
           "3": {
-            "font-size": { "value": "clamp(1.107rem, 0.581vw + 0.921rem, 1.758rem)" },
+            "font-size": { "value": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)" },
             "line-height": { "value": "1.4" }
           },
           "4": {
-            "font-size": { "value": "clamp(0.984rem, 0.377vw + 0.863rem, 1.406rem)" },
+            "font-size": { "value": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)" },
             "line-height": { "value": "1.4" }
           },
           "5": {
-            "font-size": { "value": "clamp(1.094rem, 0.279vw + 1.005rem, 1.406rem)" },
+            "font-size": { "value": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)" },
             "line-height": { "value": "1.5" }
           },
           "6": {
-            "font-size": { "value": "clamp(0.875rem, 0.223vw + 0.804rem, 1.125rem)" },
+            "font-size": { "value": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)" },
             "line-height": { "value": "1.6" }
           },
           "7": {
-            "font-size": { "value": "clamp(0.7rem, 0.179vw + 0.643rem, 0.9rem)" },
+            "font-size": { "value": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)" },
             "line-height": { "value": "1.6" }
           }
         }

From b9c8b899967459d0b5c48aa9f7b2e15704a98fe7 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Thu, 23 Nov 2023 17:18:18 +0100
Subject: [PATCH 07/24] Replace font size and line height tokens in all
 components

---
 packages/css/src/accordion/accordion.scss     |  11 +-
 packages/css/src/alert/alert.scss             |  11 +-
 packages/css/src/blockquote/blockquote.scss   |  11 +-
 packages/css/src/breadcrumb/breadcrumb.scss   |  11 +-
 packages/css/src/button/button.scss           |  13 +-
 packages/css/src/checkbox/checkbox.scss       |  17 +--
 packages/css/src/dialog/dialog.scss           |   9 +-
 packages/css/src/footer/footer.scss           |   2 -
 packages/css/src/form-label/form-label.scss   |  15 +-
 packages/css/src/heading/heading.scss         |  20 +++
 packages/css/src/icon/icon.scss               | 141 ++++++++++--------
 packages/css/src/link/link.scss               |  20 +--
 .../css/src/ordered-list/ordered-list.scss    |  15 +-
 packages/css/src/page-menu/page-menu.scss     |  11 +-
 packages/css/src/pagination/pagination.scss   |  11 +-
 packages/css/src/paragraph/paragraph.scss     |  15 ++
 .../css/src/top-task-link/top-task-link.scss  |  20 +--
 .../src/unordered-list/unordered-list.scss    |  15 +-
 .../amsterdam/accordion.tokens.json           |  15 +-
 .../components/amsterdam/alert.tokens.json    |  11 +-
 .../amsterdam/blockquote.tokens.json          |  11 +-
 .../amsterdam/breadcrumb.tokens.json          |  17 +--
 .../components/amsterdam/button.tokens.json   |  10 +-
 .../components/amsterdam/checkbox.tokens.json |  20 +--
 .../components/amsterdam/dialog.tokens.json   |  11 +-
 .../amsterdam/form-label.tokens.json          |  11 +-
 .../components/amsterdam/heading.tokens.json  |  64 ++------
 .../src/components/amsterdam/icon.tokens.json |  65 ++++----
 .../src/components/amsterdam/link.tokens.json |  22 +--
 .../amsterdam/ordered-list.tokens.json        |  11 +-
 .../amsterdam/page-menu.tokens.json           |  11 +-
 .../amsterdam/pagination.tokens.json          |  11 +-
 .../amsterdam/paragraph.tokens.json           |  18 +--
 .../amsterdam/top-task-link.tokens.json       |  34 ++---
 .../amsterdam/unordered-list.tokens.json      |  11 +-
 35 files changed, 367 insertions(+), 354 deletions(-)

diff --git a/packages/css/src/accordion/accordion.scss b/packages/css/src/accordion/accordion.scss
index ee17a369a0..8908637fb1 100644
--- a/packages/css/src/accordion/accordion.scss
+++ b/packages/css/src/accordion/accordion.scss
@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 .amsterdam-accordion__header {
   display: flex;
   margin-block: 0;
@@ -22,16 +20,17 @@
   cursor: pointer;
   display: flex;
   font-family: var(--amsterdam-accordion-button-font-family);
-  font-size: var(--amsterdam-accordion-button-narrow-font-size);
+  font-size: var(--amsterdam-accordion-button-density-low-font-size);
   font-weight: var(--amsterdam-accordion-button-font-weight);
   justify-content: space-between;
-  line-height: var(--amsterdam-accordion-button-line-height);
+  line-height: var(--amsterdam-accordion-button-density-low-line-height);
   padding-block: 0.75rem;
   padding-inline: 1rem;
   width: 100%;
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-accordion-button-wide-font-size);
+  .amsterdam-theme--density-high & {
+    font-size: var(--amsterdam-accordion-button-density-high-font-size);
+    line-height: var(--amsterdam-accordion-button-density-high-line-height);
   }
 
   &:focus {
diff --git a/packages/css/src/alert/alert.scss b/packages/css/src/alert/alert.scss
index 92a5ac54b9..9c477bf60e 100644
--- a/packages/css/src/alert/alert.scss
+++ b/packages/css/src/alert/alert.scss
@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 .amsterdam-alert {
   align-items: flex-start;
   background-color: var(--amsterdam-alert-background-color);
@@ -30,12 +28,13 @@
 .amsterdam-alert__title {
   color: var(--amsterdam-alert-title-color);
   font-family: var(--amsterdam-alert-title-font-family);
-  font-size: var(--amsterdam-alert-title-narrow-font-size);
+  font-size: var(--amsterdam-alert-title-density-low-font-size);
   font-weight: var(--amsterdam-alert-title-font-weight);
-  line-height: var(--amsterdam-alert-title-line-height);
+  line-height: var(--amsterdam-alert-title-density-low-line-height);
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-alert-title-wide-font-size);
+  .amsterdam-theme--density-high & {
+    font-size: var(--amsterdam-alert-title-density-high-font-size);
+    line-height: var(--amsterdam-alert-title-density-high-line-height);
   }
 
   @include reset;
diff --git a/packages/css/src/blockquote/blockquote.scss b/packages/css/src/blockquote/blockquote.scss
index 5aa9d9c53b..cb0bd3d33e 100644
--- a/packages/css/src/blockquote/blockquote.scss
+++ b/packages/css/src/blockquote/blockquote.scss
@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
@@ -16,9 +14,9 @@
   break-inside: avoid;
   color: var(--amsterdam-blockquote-color);
   font-family: var(--amsterdam-blockquote-font-family);
-  font-size: var(--amsterdam-blockquote-narrow-font-size);
+  font-size: var(--amsterdam-blockquote-density-low-font-size);
   font-weight: var(--amsterdam-blockquote-font-weight);
-  line-height: var(--amsterdam-blockquote-line-height);
+  line-height: var(--amsterdam-blockquote-density-low-line-height);
   quotes: "“" "”";
 
   &::before {
@@ -29,8 +27,9 @@
     content: close-quote;
   }
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-blockquote-wide-font-size);
+  .amsterdam-theme--density-high & {
+    font-size: var(--amsterdam-blockquote-density-low-font-size);
+    line-height: var(--amsterdam-blockquote-density-low-line-height);
   }
 
   @include reset;
diff --git a/packages/css/src/breadcrumb/breadcrumb.scss b/packages/css/src/breadcrumb/breadcrumb.scss
index 13ad8a8555..e717cd4a4a 100644
--- a/packages/css/src/breadcrumb/breadcrumb.scss
+++ b/packages/css/src/breadcrumb/breadcrumb.scss
@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
@@ -14,12 +12,13 @@
 
 .amsterdam-breadcrumb {
   font-family: var(--amsterdam-breadcrumb-font-family, inherit);
-  font-size: var(--amsterdam-breadcrumb-narrow-font-size);
+  font-size: var(--amsterdam-breadcrumb-density-low-font-size);
   font-weight: var(--amsterdam-breadcrumb-font-weight);
-  line-height: var(--amsterdam-breadcrumb-line-height);
+  line-height: var(--amsterdam-breadcrumb-density-low-line-height);
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-breadcrumb-wide-font-size);
+  .amsterdam-theme--density-high & {
+    font-size: var(--amsterdam-breadcrumb-density-low-font-size);
+    line-height: var(--amsterdam-breadcrumb-density-low-line-height);
   }
 }
 
diff --git a/packages/css/src/button/button.scss b/packages/css/src/button/button.scss
index b026d87054..97229dfdb6 100644
--- a/packages/css/src/button/button.scss
+++ b/packages/css/src/button/button.scss
@@ -4,20 +4,21 @@
  */
 
 @import "../../node_modules/@utrecht/components/button/css";
-@import "../../utils/breakpoint";
 
 @mixin reset {
   -webkit-text-size-adjust: 100%;
 }
 
 .amsterdam-button {
-  font-size: var(--amsterdam-button-narrow-font-size);
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-button-wide-font-size);
-  }
+  font-size: var(--amsterdam-button-density-low-font-size);
+  line-height: var(--amsterdam-button-density-low-line-height);
 
   @include reset;
+
+  .amsterdam-theme--density-high & {
+    font-size: var(--amsterdam-breadcrumb-density-high-font-size);
+    line-height: var(--amsterdam-breadcrumb-density-high-line-height);
+  }
 }
 
 .amsterdam-button--secondary {
diff --git a/packages/css/src/checkbox/checkbox.scss b/packages/css/src/checkbox/checkbox.scss
index fc9afd555e..fb7f5badcf 100644
--- a/packages/css/src/checkbox/checkbox.scss
+++ b/packages/css/src/checkbox/checkbox.scss
@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 .amsterdam-checkbox__input {
   appearance: none;
   margin-block: 0;
@@ -21,7 +19,7 @@
   align-items: center;
   display: flex;
   flex-shrink: 0;
-  height: calc(var(--amsterdam-checkbox-checkmark-narrow-size) * var(--amsterdam-checkbox-checkmark-multiplier));
+  height: calc(var(--amsterdam-checkbox-density-low-font-size) * var(--amsterdam-checkbox-density-low-line-height));
   width: 1.5rem;
 
   &::after {
@@ -34,8 +32,8 @@
     width: 100%;
   }
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    height: calc(var(--amsterdam-checkbox-checkmark-wide-size) * var(--amsterdam-checkbox-checkmark-multiplier));
+  .amsterdam-theme--density-high & {
+    height: calc(var(--amsterdam-checkbox-density-high-font-size) * var(--amsterdam-checkbox-density-high-line-height));
   }
 }
 
@@ -48,10 +46,10 @@
   cursor: pointer;
   display: inline-flex;
   font-family: var(--amsterdam-checkbox-font-family);
-  font-size: var(--amsterdam-checkbox-narrow-font-size);
+  font-size: var(--amsterdam-checkbox-density-low-font-size);
   font-weight: 400;
   gap: 0.5rem;
-  line-height: var(--amsterdam-checkbox-line-height);
+  line-height: var(--amsterdam-checkbox-density-low-line-height);
 
   &:hover {
     color: var(--amsterdam-checkbox-hover-color);
@@ -65,8 +63,9 @@
     }
   }
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-checkbox-wide-font-size);
+  .amsterdam-theme--density-high & {
+    font-size: var(--amsterdam-checkbox-density-high-font-size);
+    line-height: var(--amsterdam-checkbox-density-high-line-height);
   }
 
   @include reset;
diff --git a/packages/css/src/dialog/dialog.scss b/packages/css/src/dialog/dialog.scss
index 7259222b25..e312587c9b 100644
--- a/packages/css/src/dialog/dialog.scss
+++ b/packages/css/src/dialog/dialog.scss
@@ -52,12 +52,13 @@
   color: var(--amsterdam-dialog-title-color);
   flex: auto;
   font-family: var(--amsterdam-dialog-title-font-family);
-  font-size: var(--amsterdam-dialog-title-narrow-font-size);
+  font-size: var(--amsterdam-dialog-title-density-low-font-size);
   font-weight: var(--amsterdam-dialog-title-font-weight);
-  line-height: var(--amsterdam-dialog-title-line-height);
+  line-height: var(--amsterdam-dialog-title-density-low-line-height);
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-dialog-title-wide-font-size);
+  .amsterdam-theme--density-high & {
+    font-size: var(--amsterdam-dialog-title-density-high-font-size);
+    line-height: var(--amsterdam-dialog-title-density-high-line-height);
   }
 
   @include reset;
diff --git a/packages/css/src/footer/footer.scss b/packages/css/src/footer/footer.scss
index 5059ca70ca..b1a8be0791 100644
--- a/packages/css/src/footer/footer.scss
+++ b/packages/css/src/footer/footer.scss
@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 .amsterdam-footer__top {
   background-color: var(--amsterdam-footer-top-background-color);
 }
diff --git a/packages/css/src/form-label/form-label.scss b/packages/css/src/form-label/form-label.scss
index c9a7682f16..693c274a93 100644
--- a/packages/css/src/form-label/form-label.scss
+++ b/packages/css/src/form-label/form-label.scss
@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 @mixin reset {
   -webkit-text-size-adjust: 100%;
 }
@@ -12,13 +10,14 @@
 .amsterdam-form-label {
   color: var(--amsterdam-form-label-color);
   font-family: var(--amsterdam-form-label-font-family);
-  font-size: var(--amsterdam-form-label-narrow-font-size);
+  font-size: var(--amsterdam-form-label-density-low-font-size);
   font-weight: var(--amsterdam-form-label-font-weight);
-  line-height: var(--amsterdam-form-label-line-height);
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-form-label-wide-font-size);
-  }
+  line-height: var(--amsterdam-form-label-density-low-line-height);
 
   @include reset;
+
+  .amsterdam-theme--density-high & {
+    font-size: var(--amsterdam-form-label-density-high-font-size);
+    line-height: var(--amsterdam-form-label-density-high-line-height);
+  }
 }
diff --git a/packages/css/src/heading/heading.scss b/packages/css/src/heading/heading.scss
index b305b36a9b..61c3b06406 100644
--- a/packages/css/src/heading/heading.scss
+++ b/packages/css/src/heading/heading.scss
@@ -22,21 +22,41 @@
 .amsterdam-heading--1 {
   font-size: var(--amsterdam-heading-density-low-level-1-font-size);
   line-height: var(--amsterdam-heading-density-low-level-1-line-height);
+
+  .amsterdam-theme--density-high & {
+    font-size: var(--amsterdam-heading-density-high-level-1-font-size);
+    line-height: var(--amsterdam-heading-density-high-level-1-line-height);
+  }
 }
 
 .amsterdam-heading--2 {
   font-size: var(--amsterdam-heading-density-low-level-2-font-size);
   line-height: var(--amsterdam-heading-density-low-level-2-line-height);
+
+  .amsterdam-theme--density-high & {
+    font-size: var(--amsterdam-heading-density-high-level-2-font-size);
+    line-height: var(--amsterdam-heading-density-high-level-2-line-height);
+  }
 }
 
 .amsterdam-heading--3 {
   font-size: var(--amsterdam-heading-density-low-level-3-font-size);
   line-height: var(--amsterdam-heading-density-low-level-3-line-height);
+
+  .amsterdam-theme--density-high & {
+    font-size: var(--amsterdam-heading-density-high-level-3-font-size);
+    line-height: var(--amsterdam-heading-density-high-level-3-line-height);
+  }
 }
 
 .amsterdam-heading--4 {
   font-size: var(--amsterdam-heading-density-low-level-4-font-size);
   line-height: var(--amsterdam-heading-density-low-level-4-line-height);
+
+  .amsterdam-theme--density-high & {
+    font-size: var(--amsterdam-heading-density-high-level-4-font-size);
+    line-height: var(--amsterdam-heading-density-high-level-4-line-height);
+  }
 }
 
 .amsterdam-heading--inverse-color {
diff --git a/packages/css/src/icon/icon.scss b/packages/css/src/icon/icon.scss
index 3a7288b66c..b513121287 100644
--- a/packages/css/src/icon/icon.scss
+++ b/packages/css/src/icon/icon.scss
@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 .amsterdam-icon {
   align-items: center;
   display: inline-flex;
@@ -15,90 +13,113 @@
 }
 
 .amsterdam-icon--size-3 {
-  height: calc(var(--amsterdam-icon-size-3-icon-size-narrow) * var(--amsterdam-icon-size-3-container-multiplier));
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    height: calc(var(--amsterdam-icon-size-3-icon-size-wide) * var(--amsterdam-icon-size-3-container-multiplier));
-  }
+  height: calc(
+    var(--amsterdam-icon-density-low-size-3-font-size) * var(--amsterdam-icon-density-low-size-3-line-height)
+  );
 }
 
 .amsterdam-icon--size-3 svg {
-  height: var(--amsterdam-icon-size-3-icon-size-narrow);
-  width: var(--amsterdam-icon-size-3-icon-size-narrow);
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    height: var(--amsterdam-icon-size-3-icon-size-wide);
-    width: var(--amsterdam-icon-size-3-icon-size-wide);
-  }
+  height: var(--amsterdam-icon-density-low-size-3-font-size);
+  width: var(--amsterdam-icon-density-low-size-3-font-size);
 }
-.amsterdam-icon--size-4 {
-  height: calc(var(--amsterdam-icon-size-4-icon-size-narrow) * var(--amsterdam-icon-size-4-container-multiplier));
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    height: calc(var(--amsterdam-icon-size-4-icon-size-wide) * var(--amsterdam-icon-size-4-container-multiplier));
-  }
+.amsterdam-icon--size-4 {
+  height: calc(
+    var(--amsterdam-icon-density-low-size-4-font-size) * var(--amsterdam-icon-density-low-size-4-line-height)
+  );
 }
 
 .amsterdam-icon--size-4 svg {
-  height: var(--amsterdam-icon-size-4-icon-size-narrow);
-  width: var(--amsterdam-icon-size-4-icon-size-narrow);
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    height: var(--amsterdam-icon-size-4-icon-size-wide);
-    width: var(--amsterdam-icon-size-4-icon-size-wide);
-  }
+  height: var(--amsterdam-icon-density-low-size-4-font-size);
+  width: var(--amsterdam-icon-density-low-size-4-font-size);
 }
 
 .amsterdam-icon--size-5 {
-  height: calc(var(--amsterdam-icon-size-5-icon-size-narrow) * var(--amsterdam-icon-size-5-container-multiplier));
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    height: calc(var(--amsterdam-icon-size-5-icon-size-wide) * var(--amsterdam-icon-size-5-container-multiplier));
-  }
+  height: calc(
+    var(--amsterdam-icon-density-low-size-5-font-size) * var(--amsterdam-icon-density-low-size-5-line-height)
+  );
 }
 
 .amsterdam-icon--size-5 svg {
-  height: var(--amsterdam-icon-size-5-icon-size-narrow);
-  width: var(--amsterdam-icon-size-5-icon-size-narrow);
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    height: var(--amsterdam-icon-size-5-icon-size-wide);
-    width: var(--amsterdam-icon-size-5-icon-size-wide);
-  }
+  height: var(--amsterdam-icon-density-low-size-5-font-size);
+  width: var(--amsterdam-icon-density-low-size-5-font-size);
 }
 
 .amsterdam-icon--size-6 {
-  height: calc(var(--amsterdam-icon-size-6-icon-size-narrow) * var(--amsterdam-icon-size-6-container-multiplier));
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    height: calc(var(--amsterdam-icon-size-6-icon-size-wide) * var(--amsterdam-icon-size-6-container-multiplier));
-  }
+  height: calc(
+    var(--amsterdam-icon-density-low-size-6-font-size) * var(--amsterdam-icon-density-low-size-6-line-height)
+  );
 }
 
 .amsterdam-icon--size-6 svg {
-  height: var(--amsterdam-icon-size-6-icon-size-narrow);
-  width: var(--amsterdam-icon-size-6-icon-size-narrow);
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    height: var(--amsterdam-icon-size-6-icon-size-wide);
-    width: var(--amsterdam-icon-size-6-icon-size-wide);
-  }
+  height: var(--amsterdam-icon-density-low-size-6-font-size);
+  width: var(--amsterdam-icon-density-low-size-6-font-size);
 }
 
 .amsterdam-icon--size-7 {
-  height: calc(var(--amsterdam-icon-size-7-icon-size-narrow) * var(--amsterdam-icon-size-7-container-multiplier));
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    height: calc(var(--amsterdam-icon-size-7-icon-size-wide) * var(--amsterdam-icon-size-7-container-multiplier));
-  }
+  height: calc(
+    var(--amsterdam-icon-density-low-size-7-font-size) * var(--amsterdam-icon-density-low-size-7-line-height)
+  );
 }
 
 .amsterdam-icon--size-7 svg {
-  height: var(--amsterdam-icon-size-7-icon-size-narrow);
-  width: var(--amsterdam-icon-size-7-icon-size-narrow);
+  height: var(--amsterdam-icon-density-low-size-7-font-size);
+  width: var(--amsterdam-icon-density-low-size-7-font-size);
+}
+
+.amsterdam-theme--density-high {
+  .amsterdam-icon--size-3 {
+    height: calc(
+      var(--amsterdam-icon-density-high-size-3-font-size) * var(--amsterdam-icon-density-high-size-3-line-height)
+    );
+  }
+
+  .amsterdam-icon--size-3 svg {
+    height: var(--amsterdam-icon-density-high-size-3-font-size);
+    width: var(--amsterdam-icon-density-high-size-3-font-size);
+  }
+
+  .amsterdam-icon--size-4 {
+    height: calc(
+      var(--amsterdam-icon-density-high-size-4-font-size) * var(--amsterdam-icon-density-high-size-4-line-height)
+    );
+  }
+
+  .amsterdam-icon--size-4 svg {
+    height: var(--amsterdam-icon-density-high-size-4-font-size);
+    width: var(--amsterdam-icon-density-high-size-4-font-size);
+  }
+
+  .amsterdam-icon--size-5 {
+    height: calc(
+      var(--amsterdam-icon-density-high-size-5-font-size) * var(--amsterdam-icon-density-high-size-5-line-height)
+    );
+  }
+
+  .amsterdam-icon--size-5 svg {
+    height: var(--amsterdam-icon-density-high-size-5-font-size);
+    width: var(--amsterdam-icon-density-high-size-5-font-size);
+  }
+
+  .amsterdam-icon--size-6 {
+    height: calc(
+      var(--amsterdam-icon-density-high-size-6-font-size) * var(--amsterdam-icon-density-high-size-6-line-height)
+    );
+  }
+
+  .amsterdam-icon--size-6 svg {
+    height: var(--amsterdam-icon-density-high-size-6-font-size);
+    width: var(--amsterdam-icon-density-high-size-6-font-size);
+  }
+
+  .amsterdam-icon--size-7 {
+    height: calc(
+      var(--amsterdam-icon-density-high-size-7-font-size) * var(--amsterdam-icon-density-high-size-7-line-height)
+    );
+  }
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    height: var(--amsterdam-icon-size-7-icon-size-wide);
-    width: var(--amsterdam-icon-size-7-icon-size-wide);
+  .amsterdam-icon--size-7 svg {
+    height: var(--amsterdam-icon-density-high-size-7-font-size);
+    width: var(--amsterdam-icon-density-high-size-7-font-size);
   }
 }
diff --git a/packages/css/src/link/link.scss b/packages/css/src/link/link.scss
index 3634ceab37..3788b72e25 100644
--- a/packages/css/src/link/link.scss
+++ b/packages/css/src/link/link.scss
@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 @mixin reset {
   -webkit-text-size-adjust: 100%;
 }
@@ -24,8 +22,8 @@
 
 .amsterdam-link--standalone {
   display: inline-block;
-  font-size: var(--amsterdam-link-standalone-narrow-font-size);
-  line-height: var(--amsterdam-link-standalone-line-height);
+  font-size: var(--amsterdam-link-standalone-density-low-font-size);
+  line-height: var(--amsterdam-link-standalone-density-low-line-height);
   text-decoration-thickness: var(--amsterdam-link-standalone-text-decoration-thickness);
   text-underline-offset: var(--amsterdam-link-standalone-text-underline-offset);
 
@@ -34,8 +32,9 @@
     text-underline-offset: var(--amsterdam-link-standalone-hover-text-underline-offset);
   }
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-link-standalone-wide-font-size);
+  .amsterdam-theme--density-high & {
+    font-size: var(--amsterdam-link-standalone-density-high-font-size);
+    line-height: var(--amsterdam-link-standalone-density-high-line-height);
   }
 }
 
@@ -59,9 +58,9 @@
 .amsterdam-link--in-list {
   align-items: flex-start;
   display: inline-flex;
-  font-size: var(--amsterdam-link-in-list-narrow-font-size);
+  font-size: var(--amsterdam-link-in-list-density-low-font-size);
   gap: var(--amsterdam-link-in-list-gap);
-  line-height: var(--amsterdam-link-in-list-line-height);
+  line-height: var(--amsterdam-link-in-list-density-low-line-height);
   text-decoration: var(--amsterdam-link-in-list-text-decoration);
 
   &:hover {
@@ -70,8 +69,9 @@
     text-underline-offset: var(--amsterdam-link-in-list-hover-text-underline-offset);
   }
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-link-in-list-wide-font-size);
+  .amsterdam-theme--density-high & {
+    font-size: var(--amsterdam-link-in-list-density-high-font-size);
+    line-height: var(--amsterdam-link-in-list-density-high-line-height);
   }
 }
 
diff --git a/packages/css/src/ordered-list/ordered-list.scss b/packages/css/src/ordered-list/ordered-list.scss
index 4510415e4e..47e3cbf361 100644
--- a/packages/css/src/ordered-list/ordered-list.scss
+++ b/packages/css/src/ordered-list/ordered-list.scss
@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 /** Apply border box sizing, reset whitespace and list styles. */
 @mixin reset {
   box-sizing: border-box;
@@ -26,15 +24,11 @@
 .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-narrow-font-size);
+  font-size: var(--amsterdam-ordered-list-density-low-font-size);
   font-weight: var(--amsterdam-ordered-list-font-weight);
-  line-height: var(--amsterdam-ordered-list-line-height);
+  line-height: var(--amsterdam-ordered-list-density-low-line-height);
   list-style-type: var(--amsterdam-ordered-list-list-style-type);
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-ordered-list-wide-font-size);
-  }
-
   /** List items are responsible for indentation and marker positioning. */
   .amsterdam-ordered-list__item {
     margin-inline-start: var(--amsterdam-ordered-list-item-margin-inline-start);
@@ -51,3 +45,8 @@
     padding-inline-start: var(--amsterdam-ordered-list-ordered-list-item-padding-inline-start);
   }
 }
+
+.amsterdam-theme--density-high .amsterdam-ordered-list:not(.amsterdam-ordered-list--no-markers) {
+  font-size: var(--amsterdam-ordered-list-density-high-font-size);
+  line-height: var(--amsterdam-ordered-list-density-high-line-height);
+}
diff --git a/packages/css/src/page-menu/page-menu.scss b/packages/css/src/page-menu/page-menu.scss
index 9781286a1a..4f3103ec46 100644
--- a/packages/css/src/page-menu/page-menu.scss
+++ b/packages/css/src/page-menu/page-menu.scss
@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 @mixin reset-list {
   box-sizing: border-box;
   margin-block: 0;
@@ -40,17 +38,18 @@
   display: inline-flex;
   flex-direction: row;
   font-family: var(--amsterdam-page-menu-item-font-family);
-  font-size: var(--amsterdam-page-menu-item-narrow-font-size);
+  font-size: var(--amsterdam-page-menu-item-density-low-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-line-height);
+  line-height: var(--amsterdam-page-menu-item-density-low-line-height);
   outline-offset: var(--amsterdam-focus-outline-offset);
   text-align: center;
   text-decoration: var(--amsterdam-page-menu-item-text-decoration);
   touch-action: manipulation;
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-page-menu-item-wide-font-size);
+  .amsterdam-theme--density-high & {
+    font-size: var(--amsterdam-page-menu-item-density-high-font-size);
+    line-height: var(--amsterdam-page-menu-item-density-high-line-height);
   }
 }
 
diff --git a/packages/css/src/pagination/pagination.scss b/packages/css/src/pagination/pagination.scss
index 0ee17e2c3e..c3c23578c5 100644
--- a/packages/css/src/pagination/pagination.scss
+++ b/packages/css/src/pagination/pagination.scss
@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 @mixin list-reset {
   list-style-type: none;
   margin-block: 0;
@@ -16,15 +14,16 @@
   display: flex;
   flex-wrap: wrap;
   font-family: var(--amsterdam-pagination-font-family);
-  font-size: var(--amsterdam-pagination-narrow-font-size);
+  font-size: var(--amsterdam-pagination-density-low-font-size);
   font-weight: var(--amsterdam-pagination-font-weight);
   justify-content: center;
-  line-height: var(--amsterdam-pagination-line-height);
+  line-height: var(--amsterdam-pagination-density-low-line-height);
 
   @include list-reset;
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-pagination-wide-font-size);
+  .amsterdam-theme--density-high & {
+    font-size: var(--amsterdam-pagination-density-high-font-size);
+    line-height: var(--amsterdam-pagination-density-high-line-height);
   }
 }
 
diff --git a/packages/css/src/paragraph/paragraph.scss b/packages/css/src/paragraph/paragraph.scss
index 3a90019eb1..558298edcd 100644
--- a/packages/css/src/paragraph/paragraph.scss
+++ b/packages/css/src/paragraph/paragraph.scss
@@ -17,16 +17,31 @@
   line-height: var(--amsterdam-paragraph-density-low-medium-line-height);
 
   @include reset;
+
+  .amsterdam-theme--density-high & {
+    font-size: var(--amsterdam-paragraph-density-high-medium-font-size);
+    line-height: var(--amsterdam-paragraph-density-high-medium-line-height);
+  }
 }
 
 .amsterdam-paragraph--small {
   font-size: var(--amsterdam-paragraph-density-low-small-font-size);
   line-height: var(--amsterdam-paragraph-density-low-small-line-height);
+
+  .amsterdam-theme--density-high & {
+    font-size: var(--amsterdam-paragraph-density-high-small-font-size);
+    line-height: var(--amsterdam-paragraph-density-high-small-line-height);
+  }
 }
 
 .amsterdam-paragraph--large {
   font-size: var(--amsterdam-paragraph-density-low-large-font-size);
   line-height: var(--amsterdam-paragraph-density-low-large-line-height);
+
+  .amsterdam-theme--density-high & {
+    font-size: var(--amsterdam-paragraph-density-high-large-font-size);
+    line-height: var(--amsterdam-paragraph-density-high-large-line-height);
+  }
 }
 
 .amsterdam-paragraph--inverse-color {
diff --git a/packages/css/src/top-task-link/top-task-link.scss b/packages/css/src/top-task-link/top-task-link.scss
index 8efcc6461f..1b7c772a5e 100644
--- a/packages/css/src/top-task-link/top-task-link.scss
+++ b/packages/css/src/top-task-link/top-task-link.scss
@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 .amsterdam-top-task-link {
   break-inside: avoid;
   display: flex;
@@ -22,12 +20,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-narrow-font-size);
+  font-size: var(--amsterdam-top-task-link-label-density-low-font-size);
   font-weight: var(--amsterdam-top-task-link-label-font-weight);
-  line-height: var(--amsterdam-top-task-link-label-line-height);
+  line-height: var(--amsterdam-top-task-link-label-density-low-line-height);
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-top-task-link-label-wide-font-size);
+  .amsterdam-theme--density-high & {
+    font-size: var(--amsterdam-top-task-link-label-density-high-font-size);
+    line-height: var(--amsterdam-top-task-link-label-density-high-line-height);
   }
 
   @include reset;
@@ -43,12 +42,13 @@
 .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-narrow-font-size);
+  font-size: var(--amsterdam-top-task-link-description-density-low-font-size);
   font-weight: var(--amsterdam-top-task-link-description-font-weight);
-  line-height: var(--amsterdam-top-task-link-description-line-height);
+  line-height: var(--amsterdam-top-task-link-description-density-low-line-height);
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-top-task-link-description-wide-font-size);
+  .amsterdam-theme--density-high & {
+    font-size: var(--amsterdam-top-task-link-description-density-high-font-size);
+    line-height: var(--amsterdam-top-task-link-description-density-high-line-height);
   }
 
   @include reset;
diff --git a/packages/css/src/unordered-list/unordered-list.scss b/packages/css/src/unordered-list/unordered-list.scss
index 746eb70808..f20fd24b8e 100644
--- a/packages/css/src/unordered-list/unordered-list.scss
+++ b/packages/css/src/unordered-list/unordered-list.scss
@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 /** Apply border box sizing, reset whitespace and list styles. */
 @mixin reset {
   box-sizing: border-box;
@@ -26,15 +24,11 @@
 .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-narrow-font-size);
+  font-size: var(--amsterdam-unordered-list-density-low-font-size);
   font-weight: var(--amsterdam-unordered-list-font-weight);
-  line-height: var(--amsterdam-unordered-list-line-height);
+  line-height: var(--amsterdam-unordered-list-density-low-line-height);
   list-style-type: var(--amsterdam-unordered-list-list-style-type);
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-unordered-list-wide-font-size);
-  }
-
   /** List items are responsible for indentation and marker positioning. */
   .amsterdam-unordered-list__item {
     margin-inline-start: var(--amsterdam-unordered-list-item-margin-inline-start);
@@ -51,3 +45,8 @@
     padding-inline-start: var(--amsterdam-unordered-list-unordered-list-item-padding-inline-start);
   }
 }
+
+.amsterdam-theme--density-high .amsterdam-unordered-list:not(.amsterdam-unordered-list--no-markers) {
+  font-size: var(--amsterdam-unordered-list-density-high-font-size);
+  line-height: var(--amsterdam-unordered-list-density-high-line-height);
+}
diff --git a/proprietary/tokens/src/components/amsterdam/accordion.tokens.json b/proprietary/tokens/src/components/amsterdam/accordion.tokens.json
index fffb0f1f3c..58331fd19d 100644
--- a/proprietary/tokens/src/components/amsterdam/accordion.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/accordion.tokens.json
@@ -8,17 +8,18 @@
         },
         "font-family": { "value": "{amsterdam.typography.font-family}" },
         "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
-        "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" },
-        "narrow": {
-          "font-size": { "value": "{amsterdam.typography.text-level.5.narrow.font-size}" }
-        },
-        "wide": {
-          "font-size": { "value": "{amsterdam.typography.text-level.5.wide.font-size}" }
-        },
         "hover": {
           "box-shadow": {
             "value": "inset 0 0 0 2px {amsterdam.color.neutral-grey3}"
           }
+        },
+        "density-high": {
+          "font-size": { "value": "{amsterdam.typography.density-high.text-level.5.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-high.text-level.5.line-height}" }
+        },
+        "density-low": {
+          "font-size": { "value": "{amsterdam.typography.density-low.text-level.5.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-low.text-level.5.line-height}" }
         }
       }
     }
diff --git a/proprietary/tokens/src/components/amsterdam/alert.tokens.json b/proprietary/tokens/src/components/amsterdam/alert.tokens.json
index 0f4536a58f..62b13e2fd7 100644
--- a/proprietary/tokens/src/components/amsterdam/alert.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/alert.tokens.json
@@ -12,12 +12,13 @@
         "color": { "value": "{amsterdam.color.primary-black}" },
         "font-family": { "value": "{amsterdam.typography.font-family}" },
         "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
-        "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" },
-        "narrow": {
-          "font-size": { "value": "{amsterdam.typography.text-level.5.narrow.font-size}" }
+        "density-high": {
+          "font-size": { "value": "{amsterdam.typography.density-high.text-level.5.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-high.text-level.5.line-height}" }
         },
-        "wide": {
-          "font-size": { "value": "{amsterdam.typography.text-level.5.wide.font-size}" }
+        "density-low": {
+          "font-size": { "value": "{amsterdam.typography.density-low.text-level.5.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-low.text-level.5.line-height}" }
         }
       },
       "error": {
diff --git a/proprietary/tokens/src/components/amsterdam/blockquote.tokens.json b/proprietary/tokens/src/components/amsterdam/blockquote.tokens.json
index 170ce8933a..8ab6a05c48 100644
--- a/proprietary/tokens/src/components/amsterdam/blockquote.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/blockquote.tokens.json
@@ -5,12 +5,13 @@
       "font-family": { "value": "{amsterdam.typography.font-family}" },
       "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
       "inverse-color": { "value": "{amsterdam.color.primary-white}" },
-      "line-height": { "value": "{amsterdam.typography.text-level.3.line-height}" },
-      "narrow": {
-        "font-size": { "value": "{amsterdam.typography.text-level.3.narrow.font-size}" }
+      "density-high": {
+        "font-size": { "value": "{amsterdam.typography.density-high.text-level.3.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.density-high.text-level.3.line-height}" }
       },
-      "wide": {
-        "font-size": { "value": "{amsterdam.typography.text-level.3.wide.font-size}" }
+      "density-low": {
+        "font-size": { "value": "{amsterdam.typography.density-low.text-level.3.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.density-low.text-level.3.line-height}" }
       }
     }
   }
diff --git a/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json b/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json
index 578321256d..6cad828cb6 100644
--- a/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json
@@ -10,15 +10,6 @@
       "font-weight": {
         "value": "{amsterdam.typography.font-weight.normal}"
       },
-      "line-height": {
-        "value": "{amsterdam.typography.text-level.7.line-height}"
-      },
-      "narrow": {
-        "font-size": { "value": "{amsterdam.typography.text-level.7.narrow.font-size}" }
-      },
-      "wide": {
-        "font-size": { "value": "{amsterdam.typography.text-level.7.wide.font-size}" }
-      },
       "item-link": {
         "outline-offset": {
           "value": "{amsterdam.focus.outline-offset}"
@@ -39,6 +30,14 @@
             "value": "underline"
           }
         }
+      },
+      "density-high": {
+        "font-size": { "value": "{amsterdam.typography.density-high.text-level.7.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.density-high.text-level.7.line-height}" }
+      },
+      "density-low": {
+        "font-size": { "value": "{amsterdam.typography.density-low.text-level.7.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.density-low.text-level.7.line-height}" }
       }
     }
   }
diff --git a/proprietary/tokens/src/components/amsterdam/button.tokens.json b/proprietary/tokens/src/components/amsterdam/button.tokens.json
index 2947f1d9ae..3fda751f7b 100644
--- a/proprietary/tokens/src/components/amsterdam/button.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/button.tokens.json
@@ -1,11 +1,13 @@
 {
   "amsterdam": {
     "button": {
-      "narrow": {
-        "font-size": { "value": "{amsterdam.typography.text-level.6.narrow.font-size}" }
+      "density-high": {
+        "font-size": { "value": "{amsterdam.typography.density-high.text-level.6.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.density-high.text-level.6.line-height}" }
       },
-      "wide": {
-        "font-size": { "value": "{amsterdam.typography.text-level.6.wide.font-size}" }
+      "density-low": {
+        "font-size": { "value": "{amsterdam.typography.density-low.text-level.6.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.density-low.text-level.6.line-height}" }
       },
       "secondary": {
         "box-shadow": {
diff --git a/proprietary/tokens/src/components/amsterdam/checkbox.tokens.json b/proprietary/tokens/src/components/amsterdam/checkbox.tokens.json
index b18112bca4..5539219377 100644
--- a/proprietary/tokens/src/components/amsterdam/checkbox.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/checkbox.tokens.json
@@ -87,14 +87,7 @@
               "value": "{amsterdam.color.dark-blue}"
             }
           }
-        },
-        "narrow": {
-          "size": { "value": "{amsterdam.typography.text-level.6.narrow.font-size}" }
-        },
-        "wide": {
-          "size": { "value": "{amsterdam.typography.text-level.6.wide.font-size}" }
-        },
-        "multiplier": { "value": "{amsterdam.typography.text-level.6.line-height}" }
+        }
       },
       "disabled": {
         "color": {
@@ -109,12 +102,13 @@
         }
       },
       "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
-      "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" },
-      "narrow": {
-        "font-size": { "value": "{amsterdam.typography.text-level.6.narrow.font-size}" }
+      "density-high": {
+        "font-size": { "value": "{amsterdam.typography.density-high.text-level.6.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.density-high.text-level.6.line-height}" }
       },
-      "wide": {
-        "font-size": { "value": "{amsterdam.typography.text-level.6.wide.font-size}" }
+      "density-low": {
+        "font-size": { "value": "{amsterdam.typography.density-low.text-level.6.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.density-low.text-level.6.line-height}" }
       }
     }
   }
diff --git a/proprietary/tokens/src/components/amsterdam/dialog.tokens.json b/proprietary/tokens/src/components/amsterdam/dialog.tokens.json
index e8c911310a..66843e96b3 100644
--- a/proprietary/tokens/src/components/amsterdam/dialog.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/dialog.tokens.json
@@ -8,12 +8,13 @@
         "color": { "value": "{amsterdam.color.primary-black}" },
         "font-family": { "value": "{amsterdam.typography.font-family}" },
         "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
-        "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" },
-        "narrow": {
-          "font-size": { "value": "{amsterdam.typography.text-level.5.narrow.font-size}" }
+        "density-high": {
+          "font-size": { "value": "{amsterdam.typography.density-high.text-level.5.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-high.text-level.5.line-height}" }
         },
-        "wide": {
-          "font-size": { "value": "{amsterdam.typography.text-level.5.wide.font-size}" }
+        "density-low": {
+          "font-size": { "value": "{amsterdam.typography.density-low.text-level.5.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-low.text-level.5.line-height}" }
         }
       },
       "backdrop": {
diff --git a/proprietary/tokens/src/components/amsterdam/form-label.tokens.json b/proprietary/tokens/src/components/amsterdam/form-label.tokens.json
index f78f49ba98..891ac10631 100644
--- a/proprietary/tokens/src/components/amsterdam/form-label.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/form-label.tokens.json
@@ -4,12 +4,13 @@
       "color": { "value": "{amsterdam.color.primary-black}" },
       "font-family": { "value": "{amsterdam.typography.font-family}" },
       "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
-      "line-height": { "value": "{amsterdam.typography.text-level.7.line-height}" },
-      "narrow": {
-        "font-size": { "value": "{amsterdam.typography.text-level.7.narrow.font-size}" }
+      "density-high": {
+        "font-size": { "value": "{amsterdam.typography.density-high.text-level.7.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.density-high.text-level.7.line-height}" }
       },
-      "wide": {
-        "font-size": { "value": "{amsterdam.typography.text-level.7.wide.font-size}" }
+      "density-low": {
+        "font-size": { "value": "{amsterdam.typography.density-low.text-level.7.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.density-low.text-level.7.line-height}" }
       }
     }
   }
diff --git a/proprietary/tokens/src/components/amsterdam/heading.tokens.json b/proprietary/tokens/src/components/amsterdam/heading.tokens.json
index e7845d1a6b..44b14b2bcd 100644
--- a/proprietary/tokens/src/components/amsterdam/heading.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/heading.tokens.json
@@ -7,70 +7,38 @@
       "inverse-color": { "value": "{amsterdam.color.primary-white}" },
       "density-high": {
         "level-1": {
-          "line-height": {
-            "value": "{amsterdam.typography.density-high.text-level.1.line-height}"
-          },
-          "font-size": {
-            "value": "{amsterdam.typography.density-high.text-level.1.font-size}"
-          }
+          "line-height": { "value": "{amsterdam.typography.density-high.text-level.1.line-height}" },
+          "font-size": { "value": "{amsterdam.typography.density-high.text-level.1.font-size}" }
         },
         "level-2": {
-          "line-height": {
-            "value": "{amsterdam.typography.density-high.text-level.2.line-height}"
-          },
-          "font-size": {
-            "value": "{amsterdam.typography.density-high.text-level.2.font-size}"
-          }
+          "line-height": { "value": "{amsterdam.typography.density-high.text-level.2.line-height}" },
+          "font-size": { "value": "{amsterdam.typography.density-high.text-level.2.font-size}" }
         },
         "level-3": {
-          "line-height": {
-            "value": "{amsterdam.typography.density-high.text-level.3.line-height}"
-          },
-          "font-size": {
-            "value": "{amsterdam.typography.density-high.text-level.3.font-size}"
-          }
+          "line-height": { "value": "{amsterdam.typography.density-high.text-level.3.line-height}" },
+          "font-size": { "value": "{amsterdam.typography.density-high.text-level.3.font-size}" }
         },
         "level-4": {
-          "line-height": {
-            "value": "{amsterdam.typography.density-high.text-level.4.line-height}"
-          },
-          "font-size": {
-            "value": "{amsterdam.typography.density-high.text-level.4.font-size}"
-          }
+          "line-height": { "value": "{amsterdam.typography.density-high.text-level.4.line-height}" },
+          "font-size": { "value": "{amsterdam.typography.density-high.text-level.4.font-size}" }
         }
       },
       "density-low": {
         "level-1": {
-          "line-height": {
-            "value": "{amsterdam.typography.density-low.text-level.1.line-height}"
-          },
-          "font-size": {
-            "value": "{amsterdam.typography.density-low.text-level.1.font-size}"
-          }
+          "line-height": { "value": "{amsterdam.typography.density-low.text-level.1.line-height}" },
+          "font-size": { "value": "{amsterdam.typography.density-low.text-level.1.font-size}" }
         },
         "level-2": {
-          "line-height": {
-            "value": "{amsterdam.typography.density-low.text-level.2.line-height}"
-          },
-          "font-size": {
-            "value": "{amsterdam.typography.density-low.text-level.2.font-size}"
-          }
+          "line-height": { "value": "{amsterdam.typography.density-low.text-level.2.line-height}" },
+          "font-size": { "value": "{amsterdam.typography.density-low.text-level.2.font-size}" }
         },
         "level-3": {
-          "line-height": {
-            "value": "{amsterdam.typography.density-low.text-level.3.line-height}"
-          },
-          "font-size": {
-            "value": "{amsterdam.typography.density-low.text-level.3.font-size}"
-          }
+          "line-height": { "value": "{amsterdam.typography.density-low.text-level.3.line-height}" },
+          "font-size": { "value": "{amsterdam.typography.density-low.text-level.3.font-size}" }
         },
         "level-4": {
-          "line-height": {
-            "value": "{amsterdam.typography.density-low.text-level.4.line-height}"
-          },
-          "font-size": {
-            "value": "{amsterdam.typography.density-low.text-level.4.font-size}"
-          }
+          "line-height": { "value": "{amsterdam.typography.density-low.text-level.4.line-height}" },
+          "font-size": { "value": "{amsterdam.typography.density-low.text-level.4.font-size}" }
         }
       }
     }
diff --git a/proprietary/tokens/src/components/amsterdam/icon.tokens.json b/proprietary/tokens/src/components/amsterdam/icon.tokens.json
index 74d968ef2d..040905b31e 100644
--- a/proprietary/tokens/src/components/amsterdam/icon.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/icon.tokens.json
@@ -1,40 +1,49 @@
 {
   "amsterdam": {
     "icon": {
-      "size-3": {
-        "icon-size": {
-          "narrow": { "value": "{amsterdam.typography.text-level.3.narrow.font-size}" },
-          "wide": { "value": "{amsterdam.typography.text-level.3.wide.font-size}" }
+      "density-high": {
+        "size-3": {
+          "font-size": { "value": "{amsterdam.typography.density-high.text-level.3.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-high.text-level.3.line-height}" }
         },
-        "container-multiplier": { "value": "{amsterdam.typography.text-level.3.line-height}" }
-      },
-      "size-4": {
-        "icon-size": {
-          "narrow": { "value": "{amsterdam.typography.text-level.4.narrow.font-size}" },
-          "wide": { "value": "{amsterdam.typography.text-level.4.wide.font-size}" }
+        "size-4": {
+          "font-size": { "value": "{amsterdam.typography.density-high.text-level.4.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-high.text-level.4.line-height}" }
         },
-        "container-multiplier": { "value": "{amsterdam.typography.text-level.4.line-height}" }
-      },
-      "size-5": {
-        "icon-size": {
-          "narrow": { "value": "{amsterdam.typography.text-level.5.narrow.font-size}" },
-          "wide": { "value": "{amsterdam.typography.text-level.5.wide.font-size}" }
+        "size-5": {
+          "font-size": { "value": "{amsterdam.typography.density-high.text-level.5.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-high.text-level.5.line-height}" }
         },
-        "container-multiplier": { "value": "{amsterdam.typography.text-level.5.line-height}" }
-      },
-      "size-6": {
-        "icon-size": {
-          "narrow": { "value": "{amsterdam.typography.text-level.6.narrow.font-size}" },
-          "wide": { "value": "{amsterdam.typography.text-level.6.wide.font-size}" }
+        "size-6": {
+          "font-size": { "value": "{amsterdam.typography.density-high.text-level.6.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-high.text-level.6.line-height}" }
         },
-        "container-multiplier": { "value": "{amsterdam.typography.text-level.6.line-height}" }
+        "size-7": {
+          "font-size": { "value": "{amsterdam.typography.density-high.text-level.7.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-high.text-level.7.line-height}" }
+        }
       },
-      "size-7": {
-        "icon-size": {
-          "narrow": { "value": "{amsterdam.typography.text-level.7.narrow.font-size}" },
-          "wide": { "value": "{amsterdam.typography.text-level.7.wide.font-size}" }
+      "density-low": {
+        "size-3": {
+          "font-size": { "value": "{amsterdam.typography.density-low.text-level.3.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-low.text-level.3.line-height}" }
+        },
+        "size-4": {
+          "font-size": { "value": "{amsterdam.typography.density-low.text-level.4.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-low.text-level.4.line-height}" }
+        },
+        "size-5": {
+          "font-size": { "value": "{amsterdam.typography.density-low.text-level.5.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-low.text-level.5.line-height}" }
+        },
+        "size-6": {
+          "font-size": { "value": "{amsterdam.typography.density-low.text-level.6.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-low.text-level.6.line-height}" }
         },
-        "container-multiplier": { "value": "{amsterdam.typography.text-level.7.line-height}" }
+        "size-7": {
+          "font-size": { "value": "{amsterdam.typography.density-low.text-level.7.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-low.text-level.7.line-height}" }
+        }
       }
     }
   }
diff --git a/proprietary/tokens/src/components/amsterdam/link.tokens.json b/proprietary/tokens/src/components/amsterdam/link.tokens.json
index 408a360649..9fd1a233c0 100644
--- a/proprietary/tokens/src/components/amsterdam/link.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/link.tokens.json
@@ -40,12 +40,13 @@
           "text-underline-offset": { "value": "7px" }
         },
         "text-decoration": { "value": "none" },
-        "line-height": { "value": "{amsterdam.typography.text-level.7.line-height}" },
-        "narrow": {
-          "font-size": { "value": "{amsterdam.typography.text-level.7.narrow.font-size}" }
+        "density-high": {
+          "font-size": { "value": "{amsterdam.typography.density-high.text-level.7.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-high.text-level.7.line-height}" }
         },
-        "wide": {
-          "font-size": { "value": "{amsterdam.typography.text-level.7.wide.font-size}" }
+        "density-low": {
+          "font-size": { "value": "{amsterdam.typography.density-low.text-level.7.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-low.text-level.7.line-height}" }
         }
       },
       "standalone": {
@@ -55,12 +56,13 @@
           "text-decoration-thickness": { "value": "3px" },
           "text-underline-offset": { "value": "7px" }
         },
-        "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" },
-        "narrow": {
-          "font-size": { "value": "{amsterdam.typography.text-level.6.narrow.font-size}" }
+        "density-high": {
+          "font-size": { "value": "{amsterdam.typography.density-high.text-level.6.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-high.text-level.6.line-height}" }
         },
-        "wide": {
-          "font-size": { "value": "{amsterdam.typography.text-level.6.wide.font-size}" }
+        "density-low": {
+          "font-size": { "value": "{amsterdam.typography.density-low.text-level.6.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-low.text-level.6.line-height}" }
         }
       },
       "on-background-dark": {
diff --git a/proprietary/tokens/src/components/amsterdam/ordered-list.tokens.json b/proprietary/tokens/src/components/amsterdam/ordered-list.tokens.json
index 605eafd3cc..0a6002fb22 100644
--- a/proprietary/tokens/src/components/amsterdam/ordered-list.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/ordered-list.tokens.json
@@ -5,13 +5,14 @@
       "font-family": { "value": "{amsterdam.typography.font-family}" },
       "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
       "gap": { "value": "0.75rem" },
-      "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" },
       "list-style-type": { "value": "decimal" },
-      "narrow": {
-        "font-size": { "value": "{amsterdam.typography.text-level.6.narrow.font-size}" }
+      "density-high": {
+        "font-size": { "value": "{amsterdam.typography.density-high.text-level.6.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.density-high.text-level.6.line-height}" }
       },
-      "wide": {
-        "font-size": { "value": "{amsterdam.typography.text-level.6.wide.font-size}" }
+      "density-low": {
+        "font-size": { "value": "{amsterdam.typography.density-low.text-level.6.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.density-low.text-level.6.line-height}" }
       },
       "item": {
         "margin-inline-start": {
diff --git a/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json b/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json
index e4013a7ea2..6afebe9368 100644
--- a/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json
@@ -8,13 +8,14 @@
         "font-family": { "value": "{amsterdam.typography.font-family}" },
         "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
         "gap": { "value": "0.5rem" },
-        "line-height": { "value": "{amsterdam.typography.text-level.7.line-height}" },
         "text-decoration": { "value": "none" },
-        "narrow": {
-          "font-size": { "value": "{amsterdam.typography.text-level.7.narrow.font-size}" }
+        "density-high": {
+          "font-size": { "value": "{amsterdam.typography.density-high.text-level.7.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-high.text-level.7.line-height}" }
         },
-        "wide": {
-          "font-size": { "value": "{amsterdam.typography.text-level.7.wide.font-size}" }
+        "density-low": {
+          "font-size": { "value": "{amsterdam.typography.density-low.text-level.7.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-low.text-level.7.line-height}" }
         },
         "hover": {
           "color": { "value": "{amsterdam.color.primary-black}" },
diff --git a/proprietary/tokens/src/components/amsterdam/pagination.tokens.json b/proprietary/tokens/src/components/amsterdam/pagination.tokens.json
index 800f245ec7..5bf82b6318 100644
--- a/proprietary/tokens/src/components/amsterdam/pagination.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/pagination.tokens.json
@@ -8,12 +8,13 @@
       "font-weight": {
         "value": "{amsterdam.typography.font-weight.normal}"
       },
-      "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" },
-      "narrow": {
-        "font-size": { "value": "{amsterdam.typography.text-level.6.narrow.font-size}" }
+      "density-high": {
+        "font-size": { "value": "{amsterdam.typography.density-high.text-level.6.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.density-high.text-level.6.line-height}" }
       },
-      "wide": {
-        "font-size": { "value": "{amsterdam.typography.text-level.6.wide.font-size}" }
+      "density-low": {
+        "font-size": { "value": "{amsterdam.typography.density-low.text-level.6.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.density-low.text-level.6.line-height}" }
       },
       "button": {
         "current": {
diff --git a/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json b/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json
index d9cc1c2f44..5e4fb30f63 100644
--- a/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json
@@ -22,22 +22,16 @@
       },
       "density-low": {
         "small": {
-          "font-size": {
-            "value": "{amsterdam.typography.density-low.text-level.7.font-size}",
-            "line-height": { "value": "{amsterdam.typography.density-low.text-level.7.line-height}" }
-          }
+          "font-size": { "value": "{amsterdam.typography.density-low.text-level.7.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-low.text-level.7.line-height}" }
         },
         "medium": {
-          "font-size": {
-            "value": "{amsterdam.typography.density-low.text-level.6.font-size}",
-            "line-height": { "value": "{amsterdam.typography.density-low.text-level.6.line-height}" }
-          }
+          "font-size": { "value": "{amsterdam.typography.density-low.text-level.6.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-low.text-level.6.line-height}" }
         },
         "large": {
-          "font-size": {
-            "value": "{amsterdam.typography.density-low.text-level.5.font-size}",
-            "line-height": { "value": "{amsterdam.typography.density-low.text-level.5.line-height}" }
-          }
+          "font-size": { "value": "{amsterdam.typography.density-low.text-level.5.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-low.text-level.5.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 1a1ddf6710..7bc65680fc 100644
--- a/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json
@@ -11,18 +11,13 @@
         "font-weight": {
           "value": "{amsterdam.typography.font-weight.normal}"
         },
-        "line-height": {
-          "value": "{amsterdam.typography.text-level.7.line-height}"
+        "density-high": {
+          "font-size": { "value": "{amsterdam.typography.density-high.text-level.7.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-high.text-level.7.line-height}" }
         },
-        "narrow": {
-          "font-size": {
-            "value": "{amsterdam.typography.text-level.7.narrow.font-size}"
-          }
-        },
-        "wide": {
-          "font-size": {
-            "value": "{amsterdam.typography.text-level.7.wide.font-size}"
-          }
+        "density-low": {
+          "font-size": { "value": "{amsterdam.typography.density-low.text-level.7.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-low.text-level.7.line-height}" }
         }
       },
       "label": {
@@ -40,18 +35,13 @@
             "value": "{amsterdam.color.dark-blue}"
           }
         },
-        "line-height": {
-          "value": "{amsterdam.typography.text-level.4.line-height}"
+        "density-high": {
+          "font-size": { "value": "{amsterdam.typography.density-high.text-level.4.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-high.text-level.4.line-height}" }
         },
-        "narrow": {
-          "font-size": {
-            "value": "{amsterdam.typography.text-level.4.narrow.font-size}"
-          }
-        },
-        "wide": {
-          "font-size": {
-            "value": "{amsterdam.typography.text-level.4.wide.font-size}"
-          }
+        "density-low": {
+          "font-size": { "value": "{amsterdam.typography.density-low.text-level.4.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.density-low.text-level.4.line-height}" }
         }
       },
       "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 65c5d68f90..59315d0eb7 100644
--- a/proprietary/tokens/src/components/amsterdam/unordered-list.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/unordered-list.tokens.json
@@ -5,13 +5,14 @@
       "font-family": { "value": "{amsterdam.typography.font-family}" },
       "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
       "gap": { "value": "0.75rem" },
-      "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" },
       "list-style-type": { "value": "'\\2022'" },
-      "narrow": {
-        "font-size": { "value": "{amsterdam.typography.text-level.6.narrow.font-size}" }
+      "density-high": {
+        "font-size": { "value": "{amsterdam.typography.density-high.text-level.6.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.density-high.text-level.6.line-height}" }
       },
-      "wide": {
-        "font-size": { "value": "{amsterdam.typography.text-level.6.wide.font-size}" }
+      "density-low": {
+        "font-size": { "value": "{amsterdam.typography.density-low.text-level.6.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.density-low.text-level.6.line-height}" }
       },
       "item": {
         "margin-inline-start": {

From 192165f1426801d1626de3537aeda02abc6c15e6 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Fri, 24 Nov 2023 22:12:00 +0100
Subject: [PATCH 08/24] Remove deprecated breakpoint variable

---
 packages/css/utils/breakpoint.scss | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/css/utils/breakpoint.scss b/packages/css/utils/breakpoint.scss
index 775b0204e4..6466064843 100644
--- a/packages/css/utils/breakpoint.scss
+++ b/packages/css/utils/breakpoint.scss
@@ -8,12 +8,6 @@
  * We to resort to Sass variables for our breakpoint values.
  */
 
-/**
- * The breakpoint for typography is 854px = 53.375rems.
- * @deprecated To be replaced with the grid breakpoints.
-*/
-$amsterdam-breakpoint-typography: 53.375rem;
-
 /** The breakpoint at which medium screens start. */
 $amsterdam-breakpoint-medium: 36rem;
 

From c2fba53a0ba763b79b37db86ca7481ecc5d8de11 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Fri, 24 Nov 2023 23:01:20 +0100
Subject: [PATCH 09/24] Remove obsolete typography tokens

---
 .../brand/amsterdam/typography.tokens.json    | 86 -------------------
 .../amsterdam/paragraph.tokens.json           |  1 -
 .../src/components/utrecht/button.tokens.json |  4 +-
 3 files changed, 1 insertion(+), 90 deletions(-)

diff --git a/proprietary/tokens/src/brand/amsterdam/typography.tokens.json b/proprietary/tokens/src/brand/amsterdam/typography.tokens.json
index f1ee28d1b8..07fa9f0c77 100644
--- a/proprietary/tokens/src/brand/amsterdam/typography.tokens.json
+++ b/proprietary/tokens/src/brand/amsterdam/typography.tokens.json
@@ -77,92 +77,6 @@
             "line-height": { "value": "1.6" }
           }
         }
-      },
-      "text-level": {
-        "0": {
-          "narrow": {
-            "font-size": { "value": "clamp(2rem, calc(2rem + (2 * (100vw - 20rem)) / 33.3125), 4rem)" }
-          },
-          "wide": {
-            "font-size": { "value": "clamp(4rem, calc(4rem + (1 * (100vw - 53.375rem)) / 36.625), 5rem)" }
-          },
-          "line-height": { "value": "1.1" }
-        },
-        "1": {
-          "narrow": {
-            "font-size": { "value": "clamp(2rem, calc(2rem + (1 * (100vw - 20rem)) / 33.3125), 3rem)" }
-          },
-          "wide": {
-            "font-size": { "value": "clamp(3rem, calc(3rem + (0.5 * (100vw - 53.375rem)) / 36.625), 3.5rem)" }
-          },
-          "line-height": { "value": "1.2" }
-        },
-        "2": {
-          "narrow": {
-            "font-size": { "value": "clamp(1.75rem, calc(1.75rem + (0.5 * (100vw - 20rem)) / 33.3125), 2.25rem)" }
-          },
-          "wide": {
-            "font-size": { "value": "clamp(2.25rem, calc(2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625), 2.5rem)" }
-          },
-          "line-height": { "value": "1.3" }
-        },
-        "3": {
-          "narrow": {
-            "font-size": { "value": "clamp(1.5rem, calc(1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125), 1.8125rem)" }
-          },
-          "wide": {
-            "font-size": {
-              "value": "clamp(1.8125rem, calc(1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625), 2rem)"
-            }
-          },
-          "line-height": { "value": "1.4" }
-        },
-        "4": {
-          "narrow": {
-            "font-size": { "value": "clamp(1.25rem, calc(1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.4375rem)" }
-          },
-          "wide": {
-            "font-size": {
-              "value": "clamp(1.4375rem, calc(1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.5625rem)"
-            }
-          },
-          "line-height": { "value": "1.4" }
-        },
-        "5": {
-          "narrow": {
-            "font-size": { "value": "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)" }
-          },
-          "wide": {
-            "font-size": {
-              "value": "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)"
-            }
-          },
-          "line-height": { "value": "1.5" }
-        },
-        "6": {
-          "narrow": {
-            "font-size": {
-              "value": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)"
-            }
-          },
-          "wide": {
-            "font-size": {
-              "value": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)"
-            }
-          },
-          "line-height": { "value": "1.6" }
-        },
-        "7": {
-          "narrow": {
-            "font-size": { "value": "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)" }
-          },
-          "wide": {
-            "font-size": {
-              "value": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)"
-            }
-          },
-          "line-height": { "value": "1.6" }
-        }
       }
     }
   }
diff --git a/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json b/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json
index 5e4fb30f63..e30e19a8d7 100644
--- a/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json
@@ -5,7 +5,6 @@
       "font-family": { "value": "{amsterdam.typography.font-family}" },
       "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
       "inverse-color": { "value": "{amsterdam.color.primary-white}" },
-      "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" },
       "density-high": {
         "small": {
           "font-size": { "value": "{amsterdam.typography.density-high.text-level.7.font-size}" },
diff --git a/proprietary/tokens/src/components/utrecht/button.tokens.json b/proprietary/tokens/src/components/utrecht/button.tokens.json
index b0579626f9..6d28bf1b45 100644
--- a/proprietary/tokens/src/components/utrecht/button.tokens.json
+++ b/proprietary/tokens/src/components/utrecht/button.tokens.json
@@ -14,9 +14,7 @@
         "value": "{amsterdam.typography.font-family}"
       },
       "font-size": {},
-      "line-height": {
-        "value": "{amsterdam.typography.text-level.6.line-height}"
-      },
+      "line-height": {},
       "padding-inline-start": {
         "value": "{amsterdam.spacing.inset.md}"
       },

From c3c266e2720ce205fb6ae4415af17a722447d54e Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Sun, 26 Nov 2023 18:39:52 +0100
Subject: [PATCH 10/24] Improve Storybook theme further

---
 storybook/storybook-overrides.css | 28 +++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/storybook/storybook-overrides.css b/storybook/storybook-overrides.css
index f1abaf8ad2..74534bdf87 100644
--- a/storybook/storybook-overrides.css
+++ b/storybook/storybook-overrides.css
@@ -10,7 +10,7 @@
 .sbdocs-content > :is(p, a),
 .sbdocs-content > div > :is(p, a),
 .sbdocs-content :where(li:not(.sb-anchor, .sb-unstyled, .sb-unstyled li)) {
-  font-size: 1.125rem !important;
+  font-size: 1.25rem !important;
   line-height: 1.75 !important;
 }
 
@@ -40,29 +40,38 @@
 
 .sbdocs-content > :is(h1, h2, h3, h4, h5, h6),
 .sbdocs-content > div > :is(h1, h2, h3, h4, h5, h6) {
-  margin-block: 1em 0.5em !important;
+  margin-block: 2em 0.25em !important;
   padding-block: 0 !important;
 }
 
 .sbdocs-content > h1,
 .sbdocs-content > div > h1 {
-  font-size: 2rem !important;
-  margin-block: 0 1.5em !important;
+  font-size: 3rem !important;
 }
 
 .sbdocs-content > h2,
 .sbdocs-content > div > h2 {
-  font-size: 1.75rem !important;
+  font-size: 2rem !important;
+  border-bottom: none;
 }
 
 .sbdocs-content > h3,
 .sbdocs-content > div > h3 {
-  font-size: 1.375rem !important;
+  font-size: 1.5rem !important;
 }
 
 .sbdocs-content > h4,
 .sbdocs-content > div > h4 {
-  font-size: 1.125rem !important;
+  font-size: 1.25rem !important;
+}
+
+.sbdocs-content > h2 + h3,
+.sbdocs-content > div > h2 + h3,
+.sbdocs-content > h3 + h4,
+.sbdocs-content > div > h3 + h4,
+.sbdocs-content > h4 + h5,
+.sbdocs-content > div > h4 + h5 {
+  margin-block-start: 1em !important;
 }
 
 .sbdocs-content > :is(p, ul, ol),
@@ -70,4 +79,9 @@
   margin-block: 0 1rem !important;
 }
 
+.sbdocs-content > :first-child,
+.sbdocs-content > div > :first-child {
+  margin-block-start: 0 !important;
+}
+
 /* stylelint-enable */

From e4c5ff425944847046bd2bc491ae2620b1a1145e Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Sun, 26 Nov 2023 18:40:18 +0100
Subject: [PATCH 11/24] Clarify explanation of text growing

---
 storybook/storybook-docs/src/typography.stories.mdx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/storybook/storybook-docs/src/typography.stories.mdx b/storybook/storybook-docs/src/typography.stories.mdx
index 2c8ca871af..8733436b4f 100644
--- a/storybook/storybook-docs/src/typography.stories.mdx
+++ b/storybook/storybook-docs/src/typography.stories.mdx
@@ -45,15 +45,15 @@ Voorbeelden:
 
 De grootte van tekst is afhankelijk van de breedte van het venster.
 Hiermee zorgen we ervoor dat het op schermen van alle afmetingen prettig lezen is.
-Ook werkt dat goed samen met het fluïde [grid](?path=/docs/react_layout-grid--docs).
+Ook werkt dat goed samen met het responsive [grid](?path=/docs/react_layout-grid--docs).
 
-Tekst begint met groeien bij een vensterbreedte van 320 pixels.
-Daaronder wordt het niet kleiner.
+Elk niveau heeft een minimale tekstgrootte.
+Dat is actief tot een vensterbreedte van 320 pixels.
 
-Het groeien stopt bij een vensterbreedte van 1600 pixels.
+Ook is er een maximale tekstgrootte.
+Dat is van toepassing vanaf een vensterbreedte van 1600 pixels.
 
-Zo heeft elk niveau een minimale en een maximale tekstgrootte.
-Daartussen groeit die in een rechte lijn.
+Daartussen groeit de tekstgrootte in een rechte lijn.
 
 ### Typografische schaal
 

From 531d904514085427707d8ec8ffce0bfe08d3eba2 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Mon, 27 Nov 2023 18:08:37 +0100
Subject: [PATCH 12/24] Add missing styles for page heading in compact theme

---
 packages/css/src/page-heading/page-heading.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/css/src/page-heading/page-heading.scss b/packages/css/src/page-heading/page-heading.scss
index b5780f0615..35363f1565 100644
--- a/packages/css/src/page-heading/page-heading.scss
+++ b/packages/css/src/page-heading/page-heading.scss
@@ -19,6 +19,11 @@
   line-height: var(--amsterdam-page-heading-density-low-line-height);
 
   @include reset;
+
+  .amsterdam-theme--density-high & {
+    font-size: var(--amsterdam-page-heading-density-high-font-size);
+    line-height: var(--amsterdam-page-heading-density-high-line-height);
+  }
 }
 
 .amsterdam-page-heading--inverse-color {

From d74f0d23aa8cf5a85c26ea1f1c4f2dab07723310 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Mon, 27 Nov 2023 18:18:14 +0100
Subject: [PATCH 13/24] Restore table for text level components

---
 .../storybook-docs/src/typography.stories.mdx | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/storybook/storybook-docs/src/typography.stories.mdx b/storybook/storybook-docs/src/typography.stories.mdx
index 8733436b4f..e66d8dae11 100644
--- a/storybook/storybook-docs/src/typography.stories.mdx
+++ b/storybook/storybook-docs/src/typography.stories.mdx
@@ -30,16 +30,16 @@ Elk typografisch element zit op 1 zo’n niveau: titel, paragraaf, link, citaat,
 Ze zijn genummerd van 0 tot en met 7 – zo komen ze voor de diverse titels mooi overeen.
 Voorbeelden:
 
-<ol start={0}>
-  <li>Page heading</li>
-  <li>Heading 1</li>
-  <li>Heading 2</li>
-  <li>Heading 3, Blockquote</li>
-  <li>Heading 4, Top Task Link Title</li>
-  <li>Large Paragraph, Alert Title</li>
-  <li>Paragraph, Button</li>
-  <li>Small Paragraph, Link List, Form Label, Top Task Link Description, Breadcrumb</li>
-</ol>
+| Niveau | Componenten                                          |
+| -----: | :--------------------------------------------------- |
+|      0 | Page heading                                         |
+|      1 | Heading 1                                            |
+|      2 | Heading 2                                            |
+|      3 | Heading 3, Blockquote                                |
+|      4 | Heading 4, Top Task Link Label                       |
+|      5 | Large Paragraph, Alert Title                         |
+|      6 | Paragraph, Button, Link behalve InList               |
+|      7 | Small Paragraph, InList Link, Form Label, Breadcrumb |
 
 ### Responsive
 

From fda4506b90c3978a7f5bf77c6eaa93c96914d331 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Mon, 27 Nov 2023 18:18:43 +0100
Subject: [PATCH 14/24] Remove unnecessary line from documentation

---
 storybook/storybook-docs/src/typography.stories.mdx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/storybook/storybook-docs/src/typography.stories.mdx b/storybook/storybook-docs/src/typography.stories.mdx
index e66d8dae11..5b4d17bc7b 100644
--- a/storybook/storybook-docs/src/typography.stories.mdx
+++ b/storybook/storybook-docs/src/typography.stories.mdx
@@ -63,8 +63,6 @@ Voor elk naastliggende niveau is de tekst dus zo veel keer groter of kleiner.
 Bij de minimale vensterbreedte groeit de tekstgrootte voor de niveau’s 0 tot en met 4 langzamer, met een factor van 9 ÷ 8 = 1,125.
 Zo worden titels niet te groot op telefoons en andere smalle vensters.
 
-De getallen die uit deze systematiek rollen zijn niet afgerond op ronde getallen.
-
 ### Twee thema’s voor websites en applicaties
 
 #### Ruimtelijk

From f86a6c5a579677ca9306051f107639a916928130 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Mon, 27 Nov 2023 20:51:47 +0100
Subject: [PATCH 15/24] =?UTF-8?q?Rename=20low=20and=20high=20density=20to?=
 =?UTF-8?q?=20=E2=80=98spacious=E2=80=99=20and=20=E2=80=98compact=E2=80=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/css/src/accordion/accordion.scss     | 10 +--
 packages/css/src/alert/alert.scss             | 10 +--
 packages/css/src/blockquote/blockquote.scss   | 10 +--
 packages/css/src/breadcrumb/breadcrumb.scss   | 10 +--
 packages/css/src/button/button.scss           | 10 +--
 packages/css/src/checkbox/checkbox.scss       | 16 ++--
 packages/css/src/dialog/dialog.scss           | 10 +--
 packages/css/src/form-label/form-label.scss   | 10 +--
 packages/css/src/grid/grid.scss               | 10 +--
 packages/css/src/heading/heading.scss         | 40 ++++-----
 packages/css/src/icon/icon.scss               | 82 +++++++------------
 packages/css/src/link/link.scss               | 20 ++---
 .../css/src/ordered-list/ordered-list.scss    | 10 +--
 .../css/src/page-heading/page-heading.scss    | 10 +--
 packages/css/src/page-menu/page-menu.scss     | 10 +--
 packages/css/src/pagination/pagination.scss   | 10 +--
 packages/css/src/paragraph/paragraph.scss     | 30 +++----
 .../css/src/top-task-link/top-task-link.scss  | 20 ++---
 .../src/unordered-list/unordered-list.scss    | 10 +--
 packages/react/src/Grid/Grid.test.tsx         | 24 +++---
 packages/react/src/Grid/Grid.tsx              | 15 ++--
 .../brand/amsterdam/typography.tokens.json    |  4 +-
 .../amsterdam/accordion.tokens.json           | 12 +--
 .../components/amsterdam/alert.tokens.json    | 12 +--
 .../amsterdam/blockquote.tokens.json          | 12 +--
 .../amsterdam/breadcrumb.tokens.json          | 12 +--
 .../components/amsterdam/button.tokens.json   | 12 +--
 .../components/amsterdam/checkbox.tokens.json | 12 +--
 .../components/amsterdam/dialog.tokens.json   | 12 +--
 .../amsterdam/form-label.tokens.json          | 12 +--
 .../src/components/amsterdam/grid.tokens.json |  4 +-
 .../components/amsterdam/heading.tokens.json  | 52 ++++++++----
 .../src/components/amsterdam/icon.tokens.json | 44 +++++-----
 .../src/components/amsterdam/link.tokens.json | 24 +++---
 .../amsterdam/ordered-list.tokens.json        | 12 +--
 .../amsterdam/page-heading.tokens.json        | 12 +--
 .../amsterdam/page-menu.tokens.json           | 12 +--
 .../amsterdam/pagination.tokens.json          | 12 +--
 .../amsterdam/paragraph.tokens.json           | 28 +++----
 .../amsterdam/top-task-link.tokens.json       | 24 +++---
 .../amsterdam/unordered-list.tokens.json      | 12 +--
 .../storybook-react/src/Grid/Grid.docs.mdx    |  1 -
 .../storybook-react/src/Grid/Grid.stories.tsx | 20 +----
 43 files changed, 356 insertions(+), 378 deletions(-)

diff --git a/packages/css/src/accordion/accordion.scss b/packages/css/src/accordion/accordion.scss
index 8908637fb1..e16d2f0cc8 100644
--- a/packages/css/src/accordion/accordion.scss
+++ b/packages/css/src/accordion/accordion.scss
@@ -20,17 +20,17 @@
   cursor: pointer;
   display: flex;
   font-family: var(--amsterdam-accordion-button-font-family);
-  font-size: var(--amsterdam-accordion-button-density-low-font-size);
+  font-size: var(--amsterdam-accordion-button-spacious-font-size);
   font-weight: var(--amsterdam-accordion-button-font-weight);
   justify-content: space-between;
-  line-height: var(--amsterdam-accordion-button-density-low-line-height);
+  line-height: var(--amsterdam-accordion-button-spacious-line-height);
   padding-block: 0.75rem;
   padding-inline: 1rem;
   width: 100%;
 
-  .amsterdam-theme--density-high & {
-    font-size: var(--amsterdam-accordion-button-density-high-font-size);
-    line-height: var(--amsterdam-accordion-button-density-high-line-height);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-accordion-button-compact-font-size);
+    line-height: var(--amsterdam-accordion-button-compact-line-height);
   }
 
   &:focus {
diff --git a/packages/css/src/alert/alert.scss b/packages/css/src/alert/alert.scss
index 9c477bf60e..06627ca2bb 100644
--- a/packages/css/src/alert/alert.scss
+++ b/packages/css/src/alert/alert.scss
@@ -28,13 +28,13 @@
 .amsterdam-alert__title {
   color: var(--amsterdam-alert-title-color);
   font-family: var(--amsterdam-alert-title-font-family);
-  font-size: var(--amsterdam-alert-title-density-low-font-size);
+  font-size: var(--amsterdam-alert-title-spacious-font-size);
   font-weight: var(--amsterdam-alert-title-font-weight);
-  line-height: var(--amsterdam-alert-title-density-low-line-height);
+  line-height: var(--amsterdam-alert-title-spacious-line-height);
 
-  .amsterdam-theme--density-high & {
-    font-size: var(--amsterdam-alert-title-density-high-font-size);
-    line-height: var(--amsterdam-alert-title-density-high-line-height);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-alert-title-compact-font-size);
+    line-height: var(--amsterdam-alert-title-compact-line-height);
   }
 
   @include reset;
diff --git a/packages/css/src/blockquote/blockquote.scss b/packages/css/src/blockquote/blockquote.scss
index cb0bd3d33e..66454349d4 100644
--- a/packages/css/src/blockquote/blockquote.scss
+++ b/packages/css/src/blockquote/blockquote.scss
@@ -14,9 +14,9 @@
   break-inside: avoid;
   color: var(--amsterdam-blockquote-color);
   font-family: var(--amsterdam-blockquote-font-family);
-  font-size: var(--amsterdam-blockquote-density-low-font-size);
+  font-size: var(--amsterdam-blockquote-spacious-font-size);
   font-weight: var(--amsterdam-blockquote-font-weight);
-  line-height: var(--amsterdam-blockquote-density-low-line-height);
+  line-height: var(--amsterdam-blockquote-spacious-line-height);
   quotes: "“" "”";
 
   &::before {
@@ -27,9 +27,9 @@
     content: close-quote;
   }
 
-  .amsterdam-theme--density-high & {
-    font-size: var(--amsterdam-blockquote-density-low-font-size);
-    line-height: var(--amsterdam-blockquote-density-low-line-height);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-blockquote-spacious-font-size);
+    line-height: var(--amsterdam-blockquote-spacious-line-height);
   }
 
   @include reset;
diff --git a/packages/css/src/breadcrumb/breadcrumb.scss b/packages/css/src/breadcrumb/breadcrumb.scss
index e717cd4a4a..980bf6e65c 100644
--- a/packages/css/src/breadcrumb/breadcrumb.scss
+++ b/packages/css/src/breadcrumb/breadcrumb.scss
@@ -12,13 +12,13 @@
 
 .amsterdam-breadcrumb {
   font-family: var(--amsterdam-breadcrumb-font-family, inherit);
-  font-size: var(--amsterdam-breadcrumb-density-low-font-size);
+  font-size: var(--amsterdam-breadcrumb-spacious-font-size);
   font-weight: var(--amsterdam-breadcrumb-font-weight);
-  line-height: var(--amsterdam-breadcrumb-density-low-line-height);
+  line-height: var(--amsterdam-breadcrumb-spacious-line-height);
 
-  .amsterdam-theme--density-high & {
-    font-size: var(--amsterdam-breadcrumb-density-low-font-size);
-    line-height: var(--amsterdam-breadcrumb-density-low-line-height);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-breadcrumb-compact-font-size);
+    line-height: var(--amsterdam-breadcrumb-compact-line-height);
   }
 }
 
diff --git a/packages/css/src/button/button.scss b/packages/css/src/button/button.scss
index 97229dfdb6..424f61a73f 100644
--- a/packages/css/src/button/button.scss
+++ b/packages/css/src/button/button.scss
@@ -10,14 +10,14 @@
 }
 
 .amsterdam-button {
-  font-size: var(--amsterdam-button-density-low-font-size);
-  line-height: var(--amsterdam-button-density-low-line-height);
+  font-size: var(--amsterdam-button-spacious-font-size);
+  line-height: var(--amsterdam-button-spacious-line-height);
 
   @include reset;
 
-  .amsterdam-theme--density-high & {
-    font-size: var(--amsterdam-breadcrumb-density-high-font-size);
-    line-height: var(--amsterdam-breadcrumb-density-high-line-height);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-breadcrumb-compact-font-size);
+    line-height: var(--amsterdam-breadcrumb-compact-line-height);
   }
 }
 
diff --git a/packages/css/src/checkbox/checkbox.scss b/packages/css/src/checkbox/checkbox.scss
index fb7f5badcf..974a0bbcf0 100644
--- a/packages/css/src/checkbox/checkbox.scss
+++ b/packages/css/src/checkbox/checkbox.scss
@@ -19,7 +19,7 @@
   align-items: center;
   display: flex;
   flex-shrink: 0;
-  height: calc(var(--amsterdam-checkbox-density-low-font-size) * var(--amsterdam-checkbox-density-low-line-height));
+  height: calc(var(--amsterdam-checkbox-spacious-font-size) * var(--amsterdam-checkbox-spacious-line-height));
   width: 1.5rem;
 
   &::after {
@@ -32,8 +32,8 @@
     width: 100%;
   }
 
-  .amsterdam-theme--density-high & {
-    height: calc(var(--amsterdam-checkbox-density-high-font-size) * var(--amsterdam-checkbox-density-high-line-height));
+  .amsterdam-theme--compact & {
+    height: calc(var(--amsterdam-checkbox-compact-font-size) * var(--amsterdam-checkbox-compact-line-height));
   }
 }
 
@@ -46,10 +46,10 @@
   cursor: pointer;
   display: inline-flex;
   font-family: var(--amsterdam-checkbox-font-family);
-  font-size: var(--amsterdam-checkbox-density-low-font-size);
+  font-size: var(--amsterdam-checkbox-spacious-font-size);
   font-weight: 400;
   gap: 0.5rem;
-  line-height: var(--amsterdam-checkbox-density-low-line-height);
+  line-height: var(--amsterdam-checkbox-spacious-line-height);
 
   &:hover {
     color: var(--amsterdam-checkbox-hover-color);
@@ -63,9 +63,9 @@
     }
   }
 
-  .amsterdam-theme--density-high & {
-    font-size: var(--amsterdam-checkbox-density-high-font-size);
-    line-height: var(--amsterdam-checkbox-density-high-line-height);
+  .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/dialog/dialog.scss b/packages/css/src/dialog/dialog.scss
index e312587c9b..b23984acff 100644
--- a/packages/css/src/dialog/dialog.scss
+++ b/packages/css/src/dialog/dialog.scss
@@ -52,13 +52,13 @@
   color: var(--amsterdam-dialog-title-color);
   flex: auto;
   font-family: var(--amsterdam-dialog-title-font-family);
-  font-size: var(--amsterdam-dialog-title-density-low-font-size);
+  font-size: var(--amsterdam-dialog-title-spacious-font-size);
   font-weight: var(--amsterdam-dialog-title-font-weight);
-  line-height: var(--amsterdam-dialog-title-density-low-line-height);
+  line-height: var(--amsterdam-dialog-title-spacious-line-height);
 
-  .amsterdam-theme--density-high & {
-    font-size: var(--amsterdam-dialog-title-density-high-font-size);
-    line-height: var(--amsterdam-dialog-title-density-high-line-height);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-dialog-title-compact-font-size);
+    line-height: var(--amsterdam-dialog-title-compact-line-height);
   }
 
   @include reset;
diff --git a/packages/css/src/form-label/form-label.scss b/packages/css/src/form-label/form-label.scss
index 693c274a93..42d25c826e 100644
--- a/packages/css/src/form-label/form-label.scss
+++ b/packages/css/src/form-label/form-label.scss
@@ -10,14 +10,14 @@
 .amsterdam-form-label {
   color: var(--amsterdam-form-label-color);
   font-family: var(--amsterdam-form-label-font-family);
-  font-size: var(--amsterdam-form-label-density-low-font-size);
+  font-size: var(--amsterdam-form-label-spacious-font-size);
   font-weight: var(--amsterdam-form-label-font-weight);
-  line-height: var(--amsterdam-form-label-density-low-line-height);
+  line-height: var(--amsterdam-form-label-spacious-line-height);
 
   @include reset;
 
-  .amsterdam-theme--density-high & {
-    font-size: var(--amsterdam-form-label-density-high-font-size);
-    line-height: var(--amsterdam-form-label-density-high-line-height);
+  .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/grid/grid.scss b/packages/css/src/grid/grid.scss
index 86713c9c96..a739516ce9 100644
--- a/packages/css/src/grid/grid.scss
+++ b/packages/css/src/grid/grid.scss
@@ -6,8 +6,8 @@
 @import "../../utils/breakpoint";
 
 .amsterdam-grid {
-  --amsterdam-grid-gap: var(--amsterdam-grid-density-low-gap);
-  --amsterdam-grid-padding-inline: var(--amsterdam-grid-density-low-padding-inline);
+  --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);
@@ -23,9 +23,9 @@
   }
 }
 
-.amsterdam-grid--density-high {
-  --amsterdam-grid-gap: var(--amsterdam-grid-density-high-gap);
-  --amsterdam-grid-padding-inline: var(--amsterdam-grid-density-high-padding-inline);
+.amsterdam-grid--compact {
+  --amsterdam-grid-gap: var(--amsterdam-grid-compact-gap);
+  --amsterdam-grid-padding-inline: var(--amsterdam-grid-compact-padding-inline);
 }
 
 .amsterdam-grid--padding-bottom--small {
diff --git a/packages/css/src/heading/heading.scss b/packages/css/src/heading/heading.scss
index 61c3b06406..169f82640f 100644
--- a/packages/css/src/heading/heading.scss
+++ b/packages/css/src/heading/heading.scss
@@ -20,42 +20,42 @@
 }
 
 .amsterdam-heading--1 {
-  font-size: var(--amsterdam-heading-density-low-level-1-font-size);
-  line-height: var(--amsterdam-heading-density-low-level-1-line-height);
+  font-size: var(--amsterdam-heading-spacious-level-1-font-size);
+  line-height: var(--amsterdam-heading-spacious-level-1-line-height);
 
-  .amsterdam-theme--density-high & {
-    font-size: var(--amsterdam-heading-density-high-level-1-font-size);
-    line-height: var(--amsterdam-heading-density-high-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);
   }
 }
 
 .amsterdam-heading--2 {
-  font-size: var(--amsterdam-heading-density-low-level-2-font-size);
-  line-height: var(--amsterdam-heading-density-low-level-2-line-height);
+  font-size: var(--amsterdam-heading-spacious-level-2-font-size);
+  line-height: var(--amsterdam-heading-spacious-level-2-line-height);
 
-  .amsterdam-theme--density-high & {
-    font-size: var(--amsterdam-heading-density-high-level-2-font-size);
-    line-height: var(--amsterdam-heading-density-high-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);
   }
 }
 
 .amsterdam-heading--3 {
-  font-size: var(--amsterdam-heading-density-low-level-3-font-size);
-  line-height: var(--amsterdam-heading-density-low-level-3-line-height);
+  font-size: var(--amsterdam-heading-spacious-level-3-font-size);
+  line-height: var(--amsterdam-heading-spacious-level-3-line-height);
 
-  .amsterdam-theme--density-high & {
-    font-size: var(--amsterdam-heading-density-high-level-3-font-size);
-    line-height: var(--amsterdam-heading-density-high-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);
   }
 }
 
 .amsterdam-heading--4 {
-  font-size: var(--amsterdam-heading-density-low-level-4-font-size);
-  line-height: var(--amsterdam-heading-density-low-level-4-line-height);
+  font-size: var(--amsterdam-heading-spacious-level-4-font-size);
+  line-height: var(--amsterdam-heading-spacious-level-4-line-height);
 
-  .amsterdam-theme--density-high & {
-    font-size: var(--amsterdam-heading-density-high-level-4-font-size);
-    line-height: var(--amsterdam-heading-density-high-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);
   }
 }
 
diff --git a/packages/css/src/icon/icon.scss b/packages/css/src/icon/icon.scss
index b513121287..3307ac7cbf 100644
--- a/packages/css/src/icon/icon.scss
+++ b/packages/css/src/icon/icon.scss
@@ -13,113 +13,93 @@
 }
 
 .amsterdam-icon--size-3 {
-  height: calc(
-    var(--amsterdam-icon-density-low-size-3-font-size) * var(--amsterdam-icon-density-low-size-3-line-height)
-  );
+  height: calc(var(--amsterdam-icon-spacious-size-3-font-size) * var(--amsterdam-icon-spacious-size-3-line-height));
 }
 
 .amsterdam-icon--size-3 svg {
-  height: var(--amsterdam-icon-density-low-size-3-font-size);
-  width: var(--amsterdam-icon-density-low-size-3-font-size);
+  height: var(--amsterdam-icon-spacious-size-3-font-size);
+  width: var(--amsterdam-icon-spacious-size-3-font-size);
 }
 
 .amsterdam-icon--size-4 {
-  height: calc(
-    var(--amsterdam-icon-density-low-size-4-font-size) * var(--amsterdam-icon-density-low-size-4-line-height)
-  );
+  height: calc(var(--amsterdam-icon-spacious-size-4-font-size) * var(--amsterdam-icon-spacious-size-4-line-height));
 }
 
 .amsterdam-icon--size-4 svg {
-  height: var(--amsterdam-icon-density-low-size-4-font-size);
-  width: var(--amsterdam-icon-density-low-size-4-font-size);
+  height: var(--amsterdam-icon-spacious-size-4-font-size);
+  width: var(--amsterdam-icon-spacious-size-4-font-size);
 }
 
 .amsterdam-icon--size-5 {
-  height: calc(
-    var(--amsterdam-icon-density-low-size-5-font-size) * var(--amsterdam-icon-density-low-size-5-line-height)
-  );
+  height: calc(var(--amsterdam-icon-spacious-size-5-font-size) * var(--amsterdam-icon-spacious-size-5-line-height));
 }
 
 .amsterdam-icon--size-5 svg {
-  height: var(--amsterdam-icon-density-low-size-5-font-size);
-  width: var(--amsterdam-icon-density-low-size-5-font-size);
+  height: var(--amsterdam-icon-spacious-size-5-font-size);
+  width: var(--amsterdam-icon-spacious-size-5-font-size);
 }
 
 .amsterdam-icon--size-6 {
-  height: calc(
-    var(--amsterdam-icon-density-low-size-6-font-size) * var(--amsterdam-icon-density-low-size-6-line-height)
-  );
+  height: calc(var(--amsterdam-icon-spacious-size-6-font-size) * var(--amsterdam-icon-spacious-size-6-line-height));
 }
 
 .amsterdam-icon--size-6 svg {
-  height: var(--amsterdam-icon-density-low-size-6-font-size);
-  width: var(--amsterdam-icon-density-low-size-6-font-size);
+  height: var(--amsterdam-icon-spacious-size-6-font-size);
+  width: var(--amsterdam-icon-spacious-size-6-font-size);
 }
 
 .amsterdam-icon--size-7 {
-  height: calc(
-    var(--amsterdam-icon-density-low-size-7-font-size) * var(--amsterdam-icon-density-low-size-7-line-height)
-  );
+  height: calc(var(--amsterdam-icon-spacious-size-7-font-size) * var(--amsterdam-icon-spacious-size-7-line-height));
 }
 
 .amsterdam-icon--size-7 svg {
-  height: var(--amsterdam-icon-density-low-size-7-font-size);
-  width: var(--amsterdam-icon-density-low-size-7-font-size);
+  height: var(--amsterdam-icon-spacious-size-7-font-size);
+  width: var(--amsterdam-icon-spacious-size-7-font-size);
 }
 
-.amsterdam-theme--density-high {
+.amsterdam-theme--compact {
   .amsterdam-icon--size-3 {
-    height: calc(
-      var(--amsterdam-icon-density-high-size-3-font-size) * var(--amsterdam-icon-density-high-size-3-line-height)
-    );
+    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-density-high-size-3-font-size);
-    width: var(--amsterdam-icon-density-high-size-3-font-size);
+    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-density-high-size-4-font-size) * var(--amsterdam-icon-density-high-size-4-line-height)
-    );
+    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-density-high-size-4-font-size);
-    width: var(--amsterdam-icon-density-high-size-4-font-size);
+    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-density-high-size-5-font-size) * var(--amsterdam-icon-density-high-size-5-line-height)
-    );
+    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-density-high-size-5-font-size);
-    width: var(--amsterdam-icon-density-high-size-5-font-size);
+    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-density-high-size-6-font-size) * var(--amsterdam-icon-density-high-size-6-line-height)
-    );
+    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-density-high-size-6-font-size);
-    width: var(--amsterdam-icon-density-high-size-6-font-size);
+    height: var(--amsterdam-icon-compact-size-6-font-size);
+    width: var(--amsterdam-icon-compact-size-6-font-size);
   }
 
   .amsterdam-icon--size-7 {
-    height: calc(
-      var(--amsterdam-icon-density-high-size-7-font-size) * var(--amsterdam-icon-density-high-size-7-line-height)
-    );
+    height: calc(var(--amsterdam-icon-compact-size-7-font-size) * var(--amsterdam-icon-compact-size-7-line-height));
   }
 
   .amsterdam-icon--size-7 svg {
-    height: var(--amsterdam-icon-density-high-size-7-font-size);
-    width: var(--amsterdam-icon-density-high-size-7-font-size);
+    height: var(--amsterdam-icon-compact-size-7-font-size);
+    width: var(--amsterdam-icon-compact-size-7-font-size);
   }
 }
diff --git a/packages/css/src/link/link.scss b/packages/css/src/link/link.scss
index 3788b72e25..4c67d77af0 100644
--- a/packages/css/src/link/link.scss
+++ b/packages/css/src/link/link.scss
@@ -22,8 +22,8 @@
 
 .amsterdam-link--standalone {
   display: inline-block;
-  font-size: var(--amsterdam-link-standalone-density-low-font-size);
-  line-height: var(--amsterdam-link-standalone-density-low-line-height);
+  font-size: var(--amsterdam-link-standalone-spacious-font-size);
+  line-height: var(--amsterdam-link-standalone-spacious-line-height);
   text-decoration-thickness: var(--amsterdam-link-standalone-text-decoration-thickness);
   text-underline-offset: var(--amsterdam-link-standalone-text-underline-offset);
 
@@ -32,9 +32,9 @@
     text-underline-offset: var(--amsterdam-link-standalone-hover-text-underline-offset);
   }
 
-  .amsterdam-theme--density-high & {
-    font-size: var(--amsterdam-link-standalone-density-high-font-size);
-    line-height: var(--amsterdam-link-standalone-density-high-line-height);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-link-standalone-compact-font-size);
+    line-height: var(--amsterdam-link-standalone-compact-line-height);
   }
 }
 
@@ -58,9 +58,9 @@
 .amsterdam-link--in-list {
   align-items: flex-start;
   display: inline-flex;
-  font-size: var(--amsterdam-link-in-list-density-low-font-size);
+  font-size: var(--amsterdam-link-in-list-spacious-font-size);
   gap: var(--amsterdam-link-in-list-gap);
-  line-height: var(--amsterdam-link-in-list-density-low-line-height);
+  line-height: var(--amsterdam-link-in-list-spacious-line-height);
   text-decoration: var(--amsterdam-link-in-list-text-decoration);
 
   &:hover {
@@ -69,9 +69,9 @@
     text-underline-offset: var(--amsterdam-link-in-list-hover-text-underline-offset);
   }
 
-  .amsterdam-theme--density-high & {
-    font-size: var(--amsterdam-link-in-list-density-high-font-size);
-    line-height: var(--amsterdam-link-in-list-density-high-line-height);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-link-in-list-compact-font-size);
+    line-height: var(--amsterdam-link-in-list-compact-line-height);
   }
 }
 
diff --git a/packages/css/src/ordered-list/ordered-list.scss b/packages/css/src/ordered-list/ordered-list.scss
index 47e3cbf361..71cecda27e 100644
--- a/packages/css/src/ordered-list/ordered-list.scss
+++ b/packages/css/src/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-density-low-font-size);
+  font-size: var(--amsterdam-ordered-list-spacious-font-size);
   font-weight: var(--amsterdam-ordered-list-font-weight);
-  line-height: var(--amsterdam-ordered-list-density-low-line-height);
+  line-height: var(--amsterdam-ordered-list-spacious-line-height);
   list-style-type: var(--amsterdam-ordered-list-list-style-type);
 
   /** List items are responsible for indentation and marker positioning. */
@@ -46,7 +46,7 @@
   }
 }
 
-.amsterdam-theme--density-high .amsterdam-ordered-list:not(.amsterdam-ordered-list--no-markers) {
-  font-size: var(--amsterdam-ordered-list-density-high-font-size);
-  line-height: var(--amsterdam-ordered-list-density-high-line-height);
+.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/page-heading/page-heading.scss b/packages/css/src/page-heading/page-heading.scss
index 35363f1565..cdd11e568b 100644
--- a/packages/css/src/page-heading/page-heading.scss
+++ b/packages/css/src/page-heading/page-heading.scss
@@ -14,15 +14,15 @@
   break-inside: avoid;
   color: var(--amsterdam-page-heading-color);
   font-family: var(--amsterdam-page-heading-font-family);
-  font-size: var(--amsterdam-page-heading-density-low-font-size);
+  font-size: var(--amsterdam-page-heading-spacious-font-size);
   font-weight: var(--amsterdam-page-heading-font-weight);
-  line-height: var(--amsterdam-page-heading-density-low-line-height);
+  line-height: var(--amsterdam-page-heading-spacious-line-height);
 
   @include reset;
 
-  .amsterdam-theme--density-high & {
-    font-size: var(--amsterdam-page-heading-density-high-font-size);
-    line-height: var(--amsterdam-page-heading-density-high-line-height);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-page-heading-compact-font-size);
+    line-height: var(--amsterdam-page-heading-compact-line-height);
   }
 }
 
diff --git a/packages/css/src/page-menu/page-menu.scss b/packages/css/src/page-menu/page-menu.scss
index 4f3103ec46..3a4432cbfb 100644
--- a/packages/css/src/page-menu/page-menu.scss
+++ b/packages/css/src/page-menu/page-menu.scss
@@ -38,18 +38,18 @@
   display: inline-flex;
   flex-direction: row;
   font-family: var(--amsterdam-page-menu-item-font-family);
-  font-size: var(--amsterdam-page-menu-item-density-low-font-size);
+  font-size: var(--amsterdam-page-menu-item-spacious-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-density-low-line-height);
+  line-height: var(--amsterdam-page-menu-item-spacious-line-height);
   outline-offset: var(--amsterdam-focus-outline-offset);
   text-align: center;
   text-decoration: var(--amsterdam-page-menu-item-text-decoration);
   touch-action: manipulation;
 
-  .amsterdam-theme--density-high & {
-    font-size: var(--amsterdam-page-menu-item-density-high-font-size);
-    line-height: var(--amsterdam-page-menu-item-density-high-line-height);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-page-menu-item-compact-font-size);
+    line-height: var(--amsterdam-page-menu-item-compact-line-height);
   }
 }
 
diff --git a/packages/css/src/pagination/pagination.scss b/packages/css/src/pagination/pagination.scss
index c3c23578c5..b20b2019c8 100644
--- a/packages/css/src/pagination/pagination.scss
+++ b/packages/css/src/pagination/pagination.scss
@@ -14,16 +14,16 @@
   display: flex;
   flex-wrap: wrap;
   font-family: var(--amsterdam-pagination-font-family);
-  font-size: var(--amsterdam-pagination-density-low-font-size);
+  font-size: var(--amsterdam-pagination-spacious-font-size);
   font-weight: var(--amsterdam-pagination-font-weight);
   justify-content: center;
-  line-height: var(--amsterdam-pagination-density-low-line-height);
+  line-height: var(--amsterdam-pagination-spacious-line-height);
 
   @include list-reset;
 
-  .amsterdam-theme--density-high & {
-    font-size: var(--amsterdam-pagination-density-high-font-size);
-    line-height: var(--amsterdam-pagination-density-high-line-height);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-pagination-compact-font-size);
+    line-height: var(--amsterdam-pagination-compact-line-height);
   }
 }
 
diff --git a/packages/css/src/paragraph/paragraph.scss b/packages/css/src/paragraph/paragraph.scss
index 558298edcd..cafe752a58 100644
--- a/packages/css/src/paragraph/paragraph.scss
+++ b/packages/css/src/paragraph/paragraph.scss
@@ -12,35 +12,35 @@
 .amsterdam-paragraph {
   color: var(--amsterdam-paragraph-color);
   font-family: var(--amsterdam-paragraph-font-family);
-  font-size: var(--amsterdam-paragraph-density-low-medium-font-size);
+  font-size: var(--amsterdam-paragraph-spacious-medium-font-size);
   font-weight: var(--amsterdam-paragraph-font-weight);
-  line-height: var(--amsterdam-paragraph-density-low-medium-line-height);
+  line-height: var(--amsterdam-paragraph-spacious-medium-line-height);
 
   @include reset;
 
-  .amsterdam-theme--density-high & {
-    font-size: var(--amsterdam-paragraph-density-high-medium-font-size);
-    line-height: var(--amsterdam-paragraph-density-high-medium-line-height);
+  .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-density-low-small-font-size);
-  line-height: var(--amsterdam-paragraph-density-low-small-line-height);
+  font-size: var(--amsterdam-paragraph-spacious-small-font-size);
+  line-height: var(--amsterdam-paragraph-spacious-small-line-height);
 
-  .amsterdam-theme--density-high & {
-    font-size: var(--amsterdam-paragraph-density-high-small-font-size);
-    line-height: var(--amsterdam-paragraph-density-high-small-line-height);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-paragraph-compact-small-font-size);
+    line-height: var(--amsterdam-paragraph-compact-small-line-height);
   }
 }
 
 .amsterdam-paragraph--large {
-  font-size: var(--amsterdam-paragraph-density-low-large-font-size);
-  line-height: var(--amsterdam-paragraph-density-low-large-line-height);
+  font-size: var(--amsterdam-paragraph-spacious-large-font-size);
+  line-height: var(--amsterdam-paragraph-spacious-large-line-height);
 
-  .amsterdam-theme--density-high & {
-    font-size: var(--amsterdam-paragraph-density-high-large-font-size);
-    line-height: var(--amsterdam-paragraph-density-high-large-line-height);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-paragraph-compact-large-font-size);
+    line-height: var(--amsterdam-paragraph-compact-large-line-height);
   }
 }
 
diff --git a/packages/css/src/top-task-link/top-task-link.scss b/packages/css/src/top-task-link/top-task-link.scss
index 1b7c772a5e..269e4a9a27 100644
--- a/packages/css/src/top-task-link/top-task-link.scss
+++ b/packages/css/src/top-task-link/top-task-link.scss
@@ -20,13 +20,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-density-low-font-size);
+  font-size: var(--amsterdam-top-task-link-label-spacious-font-size);
   font-weight: var(--amsterdam-top-task-link-label-font-weight);
-  line-height: var(--amsterdam-top-task-link-label-density-low-line-height);
+  line-height: var(--amsterdam-top-task-link-label-spacious-line-height);
 
-  .amsterdam-theme--density-high & {
-    font-size: var(--amsterdam-top-task-link-label-density-high-font-size);
-    line-height: var(--amsterdam-top-task-link-label-density-high-line-height);
+  .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 reset;
@@ -42,13 +42,13 @@
 .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-density-low-font-size);
+  font-size: var(--amsterdam-top-task-link-description-spacious-font-size);
   font-weight: var(--amsterdam-top-task-link-description-font-weight);
-  line-height: var(--amsterdam-top-task-link-description-density-low-line-height);
+  line-height: var(--amsterdam-top-task-link-description-spacious-line-height);
 
-  .amsterdam-theme--density-high & {
-    font-size: var(--amsterdam-top-task-link-description-density-high-font-size);
-    line-height: var(--amsterdam-top-task-link-description-density-high-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);
   }
 
   @include reset;
diff --git a/packages/css/src/unordered-list/unordered-list.scss b/packages/css/src/unordered-list/unordered-list.scss
index f20fd24b8e..af73bd85f4 100644
--- a/packages/css/src/unordered-list/unordered-list.scss
+++ b/packages/css/src/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-density-low-font-size);
+  font-size: var(--amsterdam-unordered-list-spacious-font-size);
   font-weight: var(--amsterdam-unordered-list-font-weight);
-  line-height: var(--amsterdam-unordered-list-density-low-line-height);
+  line-height: var(--amsterdam-unordered-list-spacious-line-height);
   list-style-type: var(--amsterdam-unordered-list-list-style-type);
 
   /** List items are responsible for indentation and marker positioning. */
@@ -46,7 +46,7 @@
   }
 }
 
-.amsterdam-theme--density-high .amsterdam-unordered-list:not(.amsterdam-unordered-list--no-markers) {
-  font-size: var(--amsterdam-unordered-list-density-high-font-size);
-  line-height: var(--amsterdam-unordered-list-density-high-line-height);
+.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/src/Grid/Grid.test.tsx b/packages/react/src/Grid/Grid.test.tsx
index a3d39fddfd..4644bf73d2 100644
--- a/packages/react/src/Grid/Grid.test.tsx
+++ b/packages/react/src/Grid/Grid.test.tsx
@@ -24,44 +24,44 @@ describe('Grid', () => {
     expect(component).toHaveClass('amsterdam-grid')
   })
 
-  it('renders the high-density class name', () => {
-    const { container } = render(<Grid density="high" />)
+  it('renders the compact class name', () => {
+    const { container } = render(<Grid compact />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--density-high')
+    expect(component).toHaveClass('amsterdam-grid--compact')
   })
 
-  it('renders a medium vertical spacing class name for a low-density grid', () => {
+  it('renders a medium vertical spacing class name for a spacious grid', () => {
     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 high-density grid', () => {
-    const { container } = render(<Grid density="high" paddingVertical="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 low-density grid', () => {
+  it('renders a small top class name for a spacious grid', () => {
     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 high-density grid', () => {
-    const { container } = render(<Grid density="high" paddingTop="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 low-density grid', () => {
+  it('renders a large bottom class name for a spacious grid', () => {
     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 high-density grid', () => {
-    const { container } = render(<Grid density="high" paddingBottom="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')
   })
diff --git a/packages/react/src/Grid/Grid.tsx b/packages/react/src/Grid/Grid.tsx
index 6799b253aa..78cc7eea44 100644
--- a/packages/react/src/Grid/Grid.tsx
+++ b/packages/react/src/Grid/Grid.tsx
@@ -22,8 +22,6 @@ export type GridColumnNumbers = {
   wide: GridColumnNumber
 }
 
-type GridDensity = 'low' | 'high'
-
 type GridPaddingSize = 'small' | 'medium' | 'large'
 
 type GridPaddingVerticalProp = {
@@ -43,11 +41,12 @@ type GridPaddingTopAndBottomProps = {
 
 export type GridProps = {
   /**
-   * The density of the grid: low (for websites) or high (for applications).
-   * Adjusts the pace with which columns get wider, and the start width as well.
-   * This is to be implemented more generally – it will be moved into a theme soon.
+   * 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.
    */
-  density?: GridDensity
+  compact?: boolean
 } & (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) &
   PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
@@ -79,7 +78,7 @@ interface GridComponent extends ForwardRefExoticComponent<GridProps & RefAttribu
 
 export const Grid = forwardRef(
   (
-    { children, className, density = 'low', paddingBottom, paddingTop, paddingVertical, ...restProps }: GridProps,
+    { children, className, compact, paddingBottom, paddingTop, paddingVertical, ...restProps }: GridProps,
     ref: ForwardedRef<HTMLDivElement>,
   ) => (
     <div
@@ -87,7 +86,7 @@ export const Grid = forwardRef(
       ref={ref}
       className={clsx(
         'amsterdam-grid',
-        density && `amsterdam-grid--density-${density}`,
+        compact && `amsterdam-grid--compact`,
         paddingClasses(paddingBottom, paddingTop, paddingVertical),
         className,
       )}
diff --git a/proprietary/tokens/src/brand/amsterdam/typography.tokens.json b/proprietary/tokens/src/brand/amsterdam/typography.tokens.json
index 07fa9f0c77..2bc2c5c235 100644
--- a/proprietary/tokens/src/brand/amsterdam/typography.tokens.json
+++ b/proprietary/tokens/src/brand/amsterdam/typography.tokens.json
@@ -6,7 +6,7 @@
         "normal": { "value": 400 },
         "bold": { "value": 800 }
       },
-      "density-low": {
+      "spacious": {
         "text-level": {
           "0": {
             "font-size": { "value": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)" },
@@ -42,7 +42,7 @@
           }
         }
       },
-      "density-high": {
+      "compact": {
         "text-level": {
           "0": {
             "font-size": { "value": "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)" },
diff --git a/proprietary/tokens/src/components/amsterdam/accordion.tokens.json b/proprietary/tokens/src/components/amsterdam/accordion.tokens.json
index 58331fd19d..5d972e6c6b 100644
--- a/proprietary/tokens/src/components/amsterdam/accordion.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/accordion.tokens.json
@@ -13,13 +13,13 @@
             "value": "inset 0 0 0 2px {amsterdam.color.neutral-grey3}"
           }
         },
-        "density-high": {
-          "font-size": { "value": "{amsterdam.typography.density-high.text-level.5.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-high.text-level.5.line-height}" }
+        "spacious": {
+          "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
         },
-        "density-low": {
-          "font-size": { "value": "{amsterdam.typography.density-low.text-level.5.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-low.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/alert.tokens.json b/proprietary/tokens/src/components/amsterdam/alert.tokens.json
index 62b13e2fd7..c8ea218400 100644
--- a/proprietary/tokens/src/components/amsterdam/alert.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/alert.tokens.json
@@ -12,13 +12,13 @@
         "color": { "value": "{amsterdam.color.primary-black}" },
         "font-family": { "value": "{amsterdam.typography.font-family}" },
         "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
-        "density-high": {
-          "font-size": { "value": "{amsterdam.typography.density-high.text-level.5.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-high.text-level.5.line-height}" }
+        "spacious": {
+          "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
         },
-        "density-low": {
-          "font-size": { "value": "{amsterdam.typography.density-low.text-level.5.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-low.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}" }
         }
       },
       "error": {
diff --git a/proprietary/tokens/src/components/amsterdam/blockquote.tokens.json b/proprietary/tokens/src/components/amsterdam/blockquote.tokens.json
index 8ab6a05c48..01b820ad4a 100644
--- a/proprietary/tokens/src/components/amsterdam/blockquote.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/blockquote.tokens.json
@@ -5,13 +5,13 @@
       "font-family": { "value": "{amsterdam.typography.font-family}" },
       "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
       "inverse-color": { "value": "{amsterdam.color.primary-white}" },
-      "density-high": {
-        "font-size": { "value": "{amsterdam.typography.density-high.text-level.3.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.density-high.text-level.3.line-height}" }
+      "spacious": {
+        "font-size": { "value": "{amsterdam.typography.spacious.text-level.3.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.spacious.text-level.3.line-height}" }
       },
-      "density-low": {
-        "font-size": { "value": "{amsterdam.typography.density-low.text-level.3.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.density-low.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}" }
       }
     }
   }
diff --git a/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json b/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json
index 6cad828cb6..b548a32472 100644
--- a/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json
@@ -31,13 +31,13 @@
           }
         }
       },
-      "density-high": {
-        "font-size": { "value": "{amsterdam.typography.density-high.text-level.7.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.density-high.text-level.7.line-height}" }
+      "spacious": {
+        "font-size": { "value": "{amsterdam.typography.spacious.text-level.7.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.spacious.text-level.7.line-height}" }
       },
-      "density-low": {
-        "font-size": { "value": "{amsterdam.typography.density-low.text-level.7.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.density-low.text-level.7.line-height}" }
+      "compact": {
+        "font-size": { "value": "{amsterdam.typography.compact.text-level.7.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.compact.text-level.7.line-height}" }
       }
     }
   }
diff --git a/proprietary/tokens/src/components/amsterdam/button.tokens.json b/proprietary/tokens/src/components/amsterdam/button.tokens.json
index 3fda751f7b..ea6211be0e 100644
--- a/proprietary/tokens/src/components/amsterdam/button.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/button.tokens.json
@@ -1,13 +1,13 @@
 {
   "amsterdam": {
     "button": {
-      "density-high": {
-        "font-size": { "value": "{amsterdam.typography.density-high.text-level.6.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.density-high.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}" }
       },
-      "density-low": {
-        "font-size": { "value": "{amsterdam.typography.density-low.text-level.6.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.density-low.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}" }
       },
       "secondary": {
         "box-shadow": {
diff --git a/proprietary/tokens/src/components/amsterdam/checkbox.tokens.json b/proprietary/tokens/src/components/amsterdam/checkbox.tokens.json
index 5539219377..2753f45fba 100644
--- a/proprietary/tokens/src/components/amsterdam/checkbox.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/checkbox.tokens.json
@@ -102,13 +102,13 @@
         }
       },
       "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
-      "density-high": {
-        "font-size": { "value": "{amsterdam.typography.density-high.text-level.6.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.density-high.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}" }
       },
-      "density-low": {
-        "font-size": { "value": "{amsterdam.typography.density-low.text-level.6.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.density-low.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/dialog.tokens.json b/proprietary/tokens/src/components/amsterdam/dialog.tokens.json
index 66843e96b3..b1994adbc2 100644
--- a/proprietary/tokens/src/components/amsterdam/dialog.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/dialog.tokens.json
@@ -8,13 +8,13 @@
         "color": { "value": "{amsterdam.color.primary-black}" },
         "font-family": { "value": "{amsterdam.typography.font-family}" },
         "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
-        "density-high": {
-          "font-size": { "value": "{amsterdam.typography.density-high.text-level.5.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-high.text-level.5.line-height}" }
+        "spacious": {
+          "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
         },
-        "density-low": {
-          "font-size": { "value": "{amsterdam.typography.density-low.text-level.5.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-low.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}" }
         }
       },
       "backdrop": {
diff --git a/proprietary/tokens/src/components/amsterdam/form-label.tokens.json b/proprietary/tokens/src/components/amsterdam/form-label.tokens.json
index 891ac10631..8c7ad2f4cf 100644
--- a/proprietary/tokens/src/components/amsterdam/form-label.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/form-label.tokens.json
@@ -4,13 +4,13 @@
       "color": { "value": "{amsterdam.color.primary-black}" },
       "font-family": { "value": "{amsterdam.typography.font-family}" },
       "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
-      "density-high": {
-        "font-size": { "value": "{amsterdam.typography.density-high.text-level.7.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.density-high.text-level.7.line-height}" }
+      "spacious": {
+        "font-size": { "value": "{amsterdam.typography.spacious.text-level.7.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.spacious.text-level.7.line-height}" }
       },
-      "density-low": {
-        "font-size": { "value": "{amsterdam.typography.density-low.text-level.7.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.density-low.text-level.7.line-height}" }
+      "compact": {
+        "font-size": { "value": "{amsterdam.typography.compact.text-level.7.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.compact.text-level.7.line-height}" }
       }
     }
   }
diff --git a/proprietary/tokens/src/components/amsterdam/grid.tokens.json b/proprietary/tokens/src/components/amsterdam/grid.tokens.json
index 20e3b0248b..22f344cb83 100644
--- a/proprietary/tokens/src/components/amsterdam/grid.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/grid.tokens.json
@@ -4,7 +4,7 @@
       "column-count": {
         "value": "4"
       },
-      "density-low": {
+      "spacious": {
         "gap": {
           "value": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
           "comment": "Grows from 16px at 320px wide to 56px at 1600px wide."
@@ -14,7 +14,7 @@
           "comment": "Equals 1.5 times the gap."
         }
       },
-      "density-high": {
+      "compact": {
         "gap": {
           "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
           "comment": "Grows from 16px at 1088px wide to 40px at 2624px wide."
diff --git a/proprietary/tokens/src/components/amsterdam/heading.tokens.json b/proprietary/tokens/src/components/amsterdam/heading.tokens.json
index 44b14b2bcd..985d7bcbd6 100644
--- a/proprietary/tokens/src/components/amsterdam/heading.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/heading.tokens.json
@@ -5,40 +5,56 @@
       "font-family": { "value": "{amsterdam.typography.font-family}" },
       "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
       "inverse-color": { "value": "{amsterdam.color.primary-white}" },
-      "density-high": {
+      "spacious": {
         "level-1": {
-          "line-height": { "value": "{amsterdam.typography.density-high.text-level.1.line-height}" },
-          "font-size": { "value": "{amsterdam.typography.density-high.text-level.1.font-size}" }
+          "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.density-high.text-level.2.line-height}" },
-          "font-size": { "value": "{amsterdam.typography.density-high.text-level.2.font-size}" }
+          "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.density-high.text-level.3.line-height}" },
-          "font-size": { "value": "{amsterdam.typography.density-high.text-level.3.font-size}" }
+          "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.density-high.text-level.4.line-height}" },
-          "font-size": { "value": "{amsterdam.typography.density-high.text-level.4.font-size}" }
+          "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" },
+          "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" }
         }
       },
-      "density-low": {
+      "compact": {
         "level-1": {
-          "line-height": { "value": "{amsterdam.typography.density-low.text-level.1.line-height}" },
-          "font-size": { "value": "{amsterdam.typography.density-low.text-level.1.font-size}" }
+          "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.density-low.text-level.2.line-height}" },
-          "font-size": { "value": "{amsterdam.typography.density-low.text-level.2.font-size}" }
+          "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.density-low.text-level.3.line-height}" },
-          "font-size": { "value": "{amsterdam.typography.density-low.text-level.3.font-size}" }
+          "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.density-low.text-level.4.line-height}" },
-          "font-size": { "value": "{amsterdam.typography.density-low.text-level.4.font-size}" }
+          "line-height": {
+            "value": "{amsterdam.typography.compact.text-level.4.line-height}"
+          },
+          "font-size": {
+            "value": "{amsterdam.typography.compact.text-level.4.font-size}"
+          }
         }
       }
     }
diff --git a/proprietary/tokens/src/components/amsterdam/icon.tokens.json b/proprietary/tokens/src/components/amsterdam/icon.tokens.json
index 040905b31e..c4ff02a8ae 100644
--- a/proprietary/tokens/src/components/amsterdam/icon.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/icon.tokens.json
@@ -1,48 +1,48 @@
 {
   "amsterdam": {
     "icon": {
-      "density-high": {
+      "spacious": {
         "size-3": {
-          "font-size": { "value": "{amsterdam.typography.density-high.text-level.3.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-high.text-level.3.line-height}" }
+          "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.density-high.text-level.4.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-high.text-level.4.line-height}" }
+          "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.density-high.text-level.5.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-high.text-level.5.line-height}" }
+          "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.density-high.text-level.6.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-high.text-level.6.line-height}" }
+          "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
         },
         "size-7": {
-          "font-size": { "value": "{amsterdam.typography.density-high.text-level.7.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-high.text-level.7.line-height}" }
+          "font-size": { "value": "{amsterdam.typography.spacious.text-level.7.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.spacious.text-level.7.line-height}" }
         }
       },
-      "density-low": {
+      "compact": {
         "size-3": {
-          "font-size": { "value": "{amsterdam.typography.density-low.text-level.3.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-low.text-level.3.line-height}" }
+          "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.density-low.text-level.4.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-low.text-level.4.line-height}" }
+          "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.density-low.text-level.5.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-low.text-level.5.line-height}" }
+          "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.density-low.text-level.6.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-low.text-level.6.line-height}" }
+          "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
         },
         "size-7": {
-          "font-size": { "value": "{amsterdam.typography.density-low.text-level.7.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-low.text-level.7.line-height}" }
+          "font-size": { "value": "{amsterdam.typography.compact.text-level.7.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.compact.text-level.7.line-height}" }
         }
       }
     }
diff --git a/proprietary/tokens/src/components/amsterdam/link.tokens.json b/proprietary/tokens/src/components/amsterdam/link.tokens.json
index 9fd1a233c0..4eaac30d6a 100644
--- a/proprietary/tokens/src/components/amsterdam/link.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/link.tokens.json
@@ -40,13 +40,13 @@
           "text-underline-offset": { "value": "7px" }
         },
         "text-decoration": { "value": "none" },
-        "density-high": {
-          "font-size": { "value": "{amsterdam.typography.density-high.text-level.7.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-high.text-level.7.line-height}" }
+        "spacious": {
+          "font-size": { "value": "{amsterdam.typography.spacious.text-level.7.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.spacious.text-level.7.line-height}" }
         },
-        "density-low": {
-          "font-size": { "value": "{amsterdam.typography.density-low.text-level.7.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-low.text-level.7.line-height}" }
+        "compact": {
+          "font-size": { "value": "{amsterdam.typography.compact.text-level.7.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.compact.text-level.7.line-height}" }
         }
       },
       "standalone": {
@@ -56,13 +56,13 @@
           "text-decoration-thickness": { "value": "3px" },
           "text-underline-offset": { "value": "7px" }
         },
-        "density-high": {
-          "font-size": { "value": "{amsterdam.typography.density-high.text-level.6.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-high.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}" }
         },
-        "density-low": {
-          "font-size": { "value": "{amsterdam.typography.density-low.text-level.6.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-low.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}" }
         }
       },
       "on-background-dark": {
diff --git a/proprietary/tokens/src/components/amsterdam/ordered-list.tokens.json b/proprietary/tokens/src/components/amsterdam/ordered-list.tokens.json
index 0a6002fb22..7f52c60c61 100644
--- a/proprietary/tokens/src/components/amsterdam/ordered-list.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/ordered-list.tokens.json
@@ -6,13 +6,13 @@
       "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
       "gap": { "value": "0.75rem" },
       "list-style-type": { "value": "decimal" },
-      "density-high": {
-        "font-size": { "value": "{amsterdam.typography.density-high.text-level.6.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.density-high.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}" }
       },
-      "density-low": {
-        "font-size": { "value": "{amsterdam.typography.density-low.text-level.6.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.density-low.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}" }
       },
       "item": {
         "margin-inline-start": {
diff --git a/proprietary/tokens/src/components/amsterdam/page-heading.tokens.json b/proprietary/tokens/src/components/amsterdam/page-heading.tokens.json
index f2bc7e5afd..f63ba36ec5 100644
--- a/proprietary/tokens/src/components/amsterdam/page-heading.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/page-heading.tokens.json
@@ -5,20 +5,20 @@
       "font-family": { "value": "{amsterdam.typography.font-family}" },
       "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
       "inverse-color": { "value": "{amsterdam.color.primary-white}" },
-      "density-high": {
+      "spacious": {
         "font-size": {
-          "value": "{amsterdam.typography.density-high.text-level.0.font-size}"
+          "value": "{amsterdam.typography.spacious.text-level.0.font-size}"
         },
         "line-height": {
-          "value": "{amsterdam.typography.density-high.text-level.0.font-size}"
+          "value": "{amsterdam.typography.spacious.text-level.0.font-size}"
         }
       },
-      "density-low": {
+      "compact": {
         "font-size": {
-          "value": "{amsterdam.typography.density-low.text-level.0.font-size}"
+          "value": "{amsterdam.typography.compact.text-level.0.font-size}"
         },
         "line-height": {
-          "value": "{amsterdam.typography.density-low.text-level.0.font-size}"
+          "value": "{amsterdam.typography.compact.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 6afebe9368..73b1f14bfd 100644
--- a/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json
@@ -9,13 +9,13 @@
         "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
         "gap": { "value": "0.5rem" },
         "text-decoration": { "value": "none" },
-        "density-high": {
-          "font-size": { "value": "{amsterdam.typography.density-high.text-level.7.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-high.text-level.7.line-height}" }
+        "spacious": {
+          "font-size": { "value": "{amsterdam.typography.spacious.text-level.7.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.spacious.text-level.7.line-height}" }
         },
-        "density-low": {
-          "font-size": { "value": "{amsterdam.typography.density-low.text-level.7.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-low.text-level.7.line-height}" }
+        "compact": {
+          "font-size": { "value": "{amsterdam.typography.compact.text-level.7.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.compact.text-level.7.line-height}" }
         },
         "hover": {
           "color": { "value": "{amsterdam.color.primary-black}" },
diff --git a/proprietary/tokens/src/components/amsterdam/pagination.tokens.json b/proprietary/tokens/src/components/amsterdam/pagination.tokens.json
index 5bf82b6318..8727cfb69f 100644
--- a/proprietary/tokens/src/components/amsterdam/pagination.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/pagination.tokens.json
@@ -8,13 +8,13 @@
       "font-weight": {
         "value": "{amsterdam.typography.font-weight.normal}"
       },
-      "density-high": {
-        "font-size": { "value": "{amsterdam.typography.density-high.text-level.6.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.density-high.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}" }
       },
-      "density-low": {
-        "font-size": { "value": "{amsterdam.typography.density-low.text-level.6.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.density-low.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}" }
       },
       "button": {
         "current": {
diff --git a/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json b/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json
index e30e19a8d7..675202b3ce 100644
--- a/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json
@@ -5,32 +5,32 @@
       "font-family": { "value": "{amsterdam.typography.font-family}" },
       "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
       "inverse-color": { "value": "{amsterdam.color.primary-white}" },
-      "density-high": {
+      "spacious": {
         "small": {
-          "font-size": { "value": "{amsterdam.typography.density-high.text-level.7.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-high.text-level.7.line-height}" }
+          "font-size": { "value": "{amsterdam.typography.spacious.text-level.7.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.spacious.text-level.7.line-height}" }
         },
         "medium": {
-          "font-size": { "value": "{amsterdam.typography.density-high.text-level.6.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-high.text-level.6.line-height}" }
+          "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
         },
         "large": {
-          "font-size": { "value": "{amsterdam.typography.density-high.text-level.5.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-high.text-level.5.line-height}" }
+          "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
         }
       },
-      "density-low": {
+      "compact": {
         "small": {
-          "font-size": { "value": "{amsterdam.typography.density-low.text-level.7.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-low.text-level.7.line-height}" }
+          "font-size": { "value": "{amsterdam.typography.compact.text-level.7.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.compact.text-level.7.line-height}" }
         },
         "medium": {
-          "font-size": { "value": "{amsterdam.typography.density-low.text-level.6.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-low.text-level.6.line-height}" }
+          "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
         },
         "large": {
-          "font-size": { "value": "{amsterdam.typography.density-low.text-level.5.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-low.text-level.5.line-height}" }
+          "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/top-task-link.tokens.json b/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json
index 7bc65680fc..d77177849b 100644
--- a/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json
@@ -11,13 +11,13 @@
         "font-weight": {
           "value": "{amsterdam.typography.font-weight.normal}"
         },
-        "density-high": {
-          "font-size": { "value": "{amsterdam.typography.density-high.text-level.7.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-high.text-level.7.line-height}" }
+        "spacious": {
+          "font-size": { "value": "{amsterdam.typography.spacious.text-level.7.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.spacious.text-level.7.line-height}" }
         },
-        "density-low": {
-          "font-size": { "value": "{amsterdam.typography.density-low.text-level.7.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-low.text-level.7.line-height}" }
+        "compact": {
+          "font-size": { "value": "{amsterdam.typography.compact.text-level.7.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.compact.text-level.7.line-height}" }
         }
       },
       "label": {
@@ -35,13 +35,13 @@
             "value": "{amsterdam.color.dark-blue}"
           }
         },
-        "density-high": {
-          "font-size": { "value": "{amsterdam.typography.density-high.text-level.4.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-high.text-level.4.line-height}" }
+        "spacious": {
+          "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" },
+          "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" }
         },
-        "density-low": {
-          "font-size": { "value": "{amsterdam.typography.density-low.text-level.4.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.density-low.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": {
diff --git a/proprietary/tokens/src/components/amsterdam/unordered-list.tokens.json b/proprietary/tokens/src/components/amsterdam/unordered-list.tokens.json
index 59315d0eb7..9394ed13b2 100644
--- a/proprietary/tokens/src/components/amsterdam/unordered-list.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/unordered-list.tokens.json
@@ -6,13 +6,13 @@
       "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
       "gap": { "value": "0.75rem" },
       "list-style-type": { "value": "'\\2022'" },
-      "density-high": {
-        "font-size": { "value": "{amsterdam.typography.density-high.text-level.6.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.density-high.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}" }
       },
-      "density-low": {
-        "font-size": { "value": "{amsterdam.typography.density-low.text-level.6.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.density-low.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}" }
       },
       "item": {
         "margin-inline-start": {
diff --git a/storybook/storybook-react/src/Grid/Grid.docs.mdx b/storybook/storybook-react/src/Grid/Grid.docs.mdx
index 72ce1a2e03..566409d41d 100644
--- a/storybook/storybook-react/src/Grid/Grid.docs.mdx
+++ b/storybook/storybook-react/src/Grid/Grid.docs.mdx
@@ -21,7 +21,6 @@ Zo is de huisstijl ontworpen.
 
 Voor applicaties is zo veel witruimte niet nodig, zelfs contraproductief.
 Daarom bestaat er een compacte variant van het grid.
-Deze zet je aan via `density="high"`.
 
 <Canvas of={GridStories.Compact} />
 
diff --git a/storybook/storybook-react/src/Grid/Grid.stories.tsx b/storybook/storybook-react/src/Grid/Grid.stories.tsx
index 8f605e0e29..6d4e4763ba 100644
--- a/storybook/storybook-react/src/Grid/Grid.stories.tsx
+++ b/storybook/storybook-react/src/Grid/Grid.stories.tsx
@@ -43,15 +43,7 @@ export const Compact: Story = {
   ...StoryTemplate,
   args: {
     children: Array.from(Array(12).keys()).map((i) => <Grid.Cell className="amsterdam-docs-pink-box" key={i} />),
-    density: 'high',
-  },
-  argTypes: {
-    density: {
-      control: {
-        type: 'radio',
-      },
-      options: ['low', 'high'],
-    },
+    compact: true,
   },
   name: 'Compact',
   parameters: {
@@ -63,17 +55,9 @@ export const VerticalSpace: Story = {
   ...StoryTemplate,
   args: {
     children: Array.from(Array(12).keys()).map((i) => <Grid.Cell className="amsterdam-docs-pink-box" key={i} />),
-    density: 'low',
+    compact: false,
     paddingVertical: 'medium',
   },
-  argTypes: {
-    density: {
-      control: {
-        type: 'radio',
-      },
-      options: ['low', 'high'],
-    },
-  },
   name: 'Verticale witruimte',
 }
 

From e9cbd94cb4a6a4994d3fc7daf6d9c94042985e20 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Mon, 27 Nov 2023 21:28:31 +0100
Subject: [PATCH 16/24] Update text sizes to latest font scales

---
 .../storybook-docs/src/typography.stories.mdx | 73 ++++++++++++-------
 1 file changed, 46 insertions(+), 27 deletions(-)

diff --git a/storybook/storybook-docs/src/typography.stories.mdx b/storybook/storybook-docs/src/typography.stories.mdx
index 5b4d17bc7b..977ddb43cd 100644
--- a/storybook/storybook-docs/src/typography.stories.mdx
+++ b/storybook/storybook-docs/src/typography.stories.mdx
@@ -23,11 +23,11 @@ Deze zin demonstreert alle letters van het Latijnse alfabet en cijfers in de Ams
 
 ## Tekstgrootte
 
-### Acht tekstniveau’s
+### Zeven tekstniveau’s
 
-Er zijn 8 niveaus van tekstgrootte en bijbehorende regelhoogte.
+Er zijn 7 niveaus van tekstgrootte en bijbehorende regelhoogte.
 Elk typografisch element zit op 1 zo’n niveau: titel, paragraaf, link, citaat, formuliertekst, enzovoort.
-Ze zijn genummerd van 0 tot en met 7 – zo komen ze voor de diverse titels mooi overeen.
+Ze zijn genummerd van 0 tot en met 6 – zo komen ze voor de diverse titels mooi overeen.
 Voorbeelden:
 
 | Niveau | Componenten                                          |
@@ -36,10 +36,9 @@ Voorbeelden:
 |      1 | Heading 1                                            |
 |      2 | Heading 2                                            |
 |      3 | Heading 3, Blockquote                                |
-|      4 | Heading 4, Top Task Link Label                       |
-|      5 | Large Paragraph, Alert Title                         |
-|      6 | Paragraph, Button, Link behalve InList               |
-|      7 | Small Paragraph, InList Link, Form Label, Breadcrumb |
+|      4 | Heading 4, Large Paragraph                           |
+|      5 | Paragraph, Button, Link behalve InList               |
+|      6 | Small Paragraph, InList Link, Form Label, Breadcrumb |
 
 ### Responsive
 
@@ -48,20 +47,20 @@ Hiermee zorgen we ervoor dat het op schermen van alle afmetingen prettig lezen i
 Ook werkt dat goed samen met het responsive [grid](?path=/docs/react_layout-grid--docs).
 
 Elk niveau heeft een minimale tekstgrootte.
-Dat is actief tot een vensterbreedte van 320 pixels.
+Dat is actief tot en met een vensterbreedte van 320 pixels.
 
 Ook is er een maximale tekstgrootte.
 Dat is van toepassing vanaf een vensterbreedte van 1600 pixels.
 
-Daartussen groeit de tekstgrootte in een rechte lijn.
+Daartussen groeit de tekst in een rechte lijn.
 
 ### Typografische schaal
 
 De typografische schaal is gebaseerd op een factor van 5 ÷ 4 = 1,25.
 Voor elk naastliggende niveau is de tekst dus zo veel keer groter of kleiner.
 
-Bij de minimale vensterbreedte groeit de tekstgrootte voor de niveau’s 0 tot en met 4 langzamer, met een factor van 9 ÷ 8 = 1,125.
-Zo worden titels niet te groot op telefoons en andere smalle vensters.
+Bij de minimale vensterbreedte groeit de tekstgrootte langzamer, met een factor van 7 ÷ 6 ≈ 1,17.
+Zo worden titels niet te groot op telefoons en andere smalle vensters, en kleine teksten niet te klein.
 
 ### Twee thema’s voor websites en applicaties
 
@@ -77,7 +76,16 @@ De maximale tekstgroottes voor alle niveau’s in het ruimtelijke thema:
 
 <Typeset
   fontFamily="Amsterdam Sans, Arial, sans-serif"
-  fontSizes={[73.2, 58.6, 46.9, 37.5, 30.0, 30.0, 24.0, 19.2]}
+  fontSizes={[73.2, 58.6, 46.9, 37.5, 30, 24, 19.2]}
+  fontWeight={400}
+  sampleText="Jouw typograaf biedt mij zulke exquise schreven"
+/>
+
+En de minimale:
+
+<Typeset
+  fontFamily="Amsterdam Sans, Arial, sans-serif"
+  fontSizes={[38.9, 33.3, 28.6, 24.5, 21, 18, 15.4]}
   fontWeight={400}
   sampleText="Jouw typograaf biedt mij zulke exquise schreven"
 />
@@ -94,32 +102,43 @@ De maximale tekstgroottes voor alle niveau’s in het compacte thema:
 
 <Typeset
   fontFamily="Amsterdam Sans, Arial, sans-serif"
-  fontSizes={[54.9, 43.9, 35.2, 28.1, 22.5, 22.5, 18.0, 14.4]}
+  fontSizes={[54.9, 43.9, 35.2, 28.1, 22.5, 18, 14.4]}
+  fontWeight={400}
+  sampleText="Jouw typograaf biedt mij zulke exquise schreven"
+/>
+
+En de minimale:
+
+<Typeset
+  fontFamily="Amsterdam Sans, Arial, sans-serif"
+  fontSizes={[30.3, 25.9, 22.2, 19.1, 16.3, 14, 12]}
   fontWeight={400}
   sampleText="Jouw typograaf biedt mij zulke exquise schreven"
 />
 
-### Referentie-breedtes voor ontwerpers
+### Vensterbreedtes waarvoor we ontwerpen
 
-In Figma werken we met drie referentie-breedtes.
-Op die breedtes werken we het ontwerp van een scherm uit voor die drie klassen van apparaten.
-Op deze breedtes is de maatvoering als volgt, afgerond op 1 cijfer achter de komma.
+In de praktijk kan een venster elke willekeurige breedte hebben.
+Voor al die breedtes ontwerpen is wat te gek.
+Daarom werken we in Figma met drie referentie-breedtes.
+Op die maten werken we een scherm uit voor die drie klassen van apparaten.
+De tekstgroottes zijn op dat punt als volgt, afgerond op 1 cijfer achter de komma.
 
 #### Ruimtelijk
 
-| Klasse apparaat | Referentie-breedte |    0 |    1 |    2 |    3 |    4 |    5 |    6 |    7 |
-| :-------------- | :----------------- | ---: | ---: | ---: | ---: | ---: | ---: | ---: | ---: |
-| telefoon        | 320                | 28,8 | 25,6 | 22,8 | 20,3 |   18 |   20 |   16 | 12,8 |
-| tablet          | 832                | 49,3 | 40,8 | 33,9 | 28,2 | 23,5 | 24,6 | 19,7 | 15,7 |
-| desktop         | 1600               | 73,2 | 58,6 | 46,9 | 37,5 |   30 |   30 |   24 | 19,2 |
+| Klasse apparaat | Ontwerpbreedte |    0 |    1 |    2 |    3 |    4 |    5 |    6 |
+| :-------------- | :------------- | ---: | ---: | ---: | ---: | ---: | ---: | ---: |
+| telefoon        | 320            | 38,9 | 33,3 | 28,6 | 24,5 |   21 |   18 | 15,4 |
+| tablet          | 832            | 52,6 | 43,4 | 35,9 | 29,7 | 24,6 | 20,4 | 16,9 |
+| desktop         | 1600           | 73,2 | 58,6 | 46,9 | 37,5 |   30 |   24 | 19,2 |
 
 #### Compact
 
-| Klasse apparaat | Referentie-breedte |    0 |    1 |    2 |    3 |    4 |    5 |    6 |    7 |
-| :-------------- | :----------------- | ---: | ---: | ---: | ---: | ---: | ---: | ---: | ---: |
-| telefoon        | 320                | 25,2 | 22,4 | 19,9 | 17,7 | 15,8 | 17,5 | 14,0 | 11,2 |
-| tablet          | 832                | 38,8 | 32,3 | 26,9 | 22,5 | 18,9 | 19,8 | 15,8 | 12,7 |
-| desktop         | 1600               | 54,9 | 43,9 | 35,2 | 28,1 | 22,5 | 22,5 | 18,0 | 14,4 |
+| Klasse apparaat | Ontwerpbreedte |    0 |    1 |    2 |    3 |    4 |    5 |    6 |
+| :-------------- | :------------- | ---: | ---: | ---: | ---: | ---: | ---: | ---: |
+| telefoon        | 320            | 30,3 | 25,9 | 22,2 | 19,1 | 16,3 |   14 |   12 |
+| tablet          | 832            | 40,1 | 33,1 | 27,4 | 22,7 | 18,8 | 15,6 |   13 |
+| desktop         | 1600           | 54,9 | 43,9 | 35,2 | 28,1 | 22,5 |   18 | 14,4 |
 
 ## Accentuering
 

From 70e09e61b591186f1853628d4b838c83ba015ff5 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Mon, 27 Nov 2023 23:02:15 +0100
Subject: [PATCH 17/24] Simplify documentation as per feedback in #771 (after
 merging)

---
 storybook/storybook-docs/src/introduction.md  |  2 +-
 .../storybook-docs/src/typography.stories.mdx | 35 +++++++++----------
 2 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/storybook/storybook-docs/src/introduction.md b/storybook/storybook-docs/src/introduction.md
index d5e805988f..5299599505 100644
--- a/storybook/storybook-docs/src/introduction.md
+++ b/storybook/storybook-docs/src/introduction.md
@@ -48,7 +48,7 @@ De keuze om hierop aan te sluiten vergemakkelijkt ook het aanbieden van verschil
 
 ### Sluit aan in Teams
 
-Werk je bij de Gemeente Amsterdam, [meld je nu aan voor het Design System team](https://teams.microsoft.com/l/team/19%3afYKS_RD2n1q4UhguA9jwEJk0A_VjYPO4TiLQjYlG_bo1%40thread.tacv2/conversations?groupId=381b5f11-b342-4a3a-8a78-8b371a90457d&tenantId=72fca1b1-2c2e-4376-a445-294d80196804) van MS Teams. Zo blijf je gemakkelijk op de hoogte en kunnen we contact houden. Zijdelings meelezen in de kanalen kan je al helpen, meer meedoen mag natuurlijk ook.
+Werk je voor of bij de Gemeente Amsterdam, [meld je nu aan voor het Design System team](https://teams.microsoft.com/l/team/19%3afYKS_RD2n1q4UhguA9jwEJk0A_VjYPO4TiLQjYlG_bo1%40thread.tacv2/conversations?groupId=381b5f11-b342-4a3a-8a78-8b371a90457d&tenantId=72fca1b1-2c2e-4376-a445-294d80196804) van MS Teams. Zo blijf je gemakkelijk op de hoogte en kunnen we contact houden. Zijdelings meelezen in de kanalen kan je al helpen, meer meedoen mag natuurlijk ook.
 
 ### Bekijk de demo
 
diff --git a/storybook/storybook-docs/src/typography.stories.mdx b/storybook/storybook-docs/src/typography.stories.mdx
index 977ddb43cd..93c1d58870 100644
--- a/storybook/storybook-docs/src/typography.stories.mdx
+++ b/storybook/storybook-docs/src/typography.stories.mdx
@@ -6,13 +6,13 @@ import { Meta, Typeset } from "@storybook/blocks";
 
 ## Lettertype
 
-De gemeente gebruikt de Amsterdam Sans als beeldbepalend lettertype.
+We gebruiken het lettertype Amsterdam Sans.
 
 Dat is een letterfamilie met een helder, open tekstbeeld dat goed bij de Andreaskruisen past.
 Het lettertype is zowel offline als online goed leesbaar.
-Daarom wordt het in alle communicatiemiddelen ingezet.
+Daarom zetten we het voor alle communicatiemiddelen in.
 
-Deze zin demonstreert alle letters van het Latijnse alfabet en cijfers in de Amsterdam Sans:
+In deze zin zie je hoe alle letters en cijfers eruit zien:
 
 <Typeset
   fontFamily="Amsterdam Sans, Arial, sans-serif"
@@ -148,6 +148,7 @@ Hierin hebben we de volgende keuzes gemaakt.
 ### Gewicht
 
 Online gebruiken we 2 gewichten: ‘regular’ en ‘extra bold’.
+In termen van CSS: 400 en 800.
 
 <Typeset
   fontFamily="Amsterdam Sans, Arial, sans-serif"
@@ -167,10 +168,8 @@ Tekst wordt vetgedrukt in titels en decoratieve citaten.
 
 ### Stijl
 
-Gebruik de cursieve weergave uitsluitend om fragmenten in tekst te accentueren.
-Cursieve tekst is minder goed leesbaar dan reguliere of vetgedrukte tekst.
-
-Pas het niet toe op hele tekstblokken.
+Vermijd cursieve teksten zo veel mogelijk, deze zijn niet goed te lezen.
+Gebruik ze uitsluitend om een fragment te accentueren, niet voor hele tekstblokken.
 Er zijn betere manieren om lange teksten nadruk te geven.
 
 <Typeset
@@ -182,18 +181,18 @@ Er zijn betere manieren om lange teksten nadruk te geven.
 
 ### Onderstreping
 
-Uitsluitend de tekst van een hyperlink wordt onderstreept.
-Rond staartletters wordt de lijn onderbroken voor betere leesbaarheid.
+Vermijd het onderstrepen van tekst.
+Onderstreep alleen interactieve links.
 
-Onderstreepte tekst zonder hyperlink geeft toch de suggestie van een link.
-Dat is verwarrend en daarom niet toegestaan.
-Gebruik een andere manier om te accentueren.
+De lijndikte is 1/12 van de tekstgrootte, dus 2 pixels bij een standaard paragraaf van 24.
+De afstand tussen de onderstreping en de letterlijn is iets vergroot.
+Rond staartletters wordt de streep onderbroken voor betere leesbaarheid.
 
 <Typeset
   fontFamily="Amsterdam Sans, Arial, sans-serif"
   fontSizes={[24]}
   sampleText="Jouw typograaf biedt mij zulke exquise schreven"
-  style={{ color: "#004699", textDecoration: "underline" }}
+  style={{ color: "hotpink", textDecorationLine: "underline", textDecorationThickness: 2, textUnderlineOffset: 2 }}
 />
 
 ### Overhang
@@ -207,7 +206,7 @@ Het is niet toegestaan om de kerning aan te passen.
 
 Het contrast tussen tekst en achtergrondkleur moet voldoen aan de laatste wettelijke toegankelijkheidseisen van [de WCAG, niveau AA](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html).
 
-De meeste tekst in het design system is puur zwart op puur wit en dat voldoet daar ruim aan.
+De meeste tekst in de huisstijl is puur zwart op puur wit en dat voldoet daar ruim aan.
 Op de meeste donkere achtergronden maken we tekst wit; ook dat biedt voldoende contrast.
 Voor sommige achtergrondkleuren is ook zwarte tekst goed leesbaar.
 Raadpleeg de betreffende componenten voor specifieke richtlijnen.
@@ -241,12 +240,12 @@ Voor verdere informatie: [Wrapping and breaking text op MDN](https://developer.m
 
 ## Het lettertype installeren
 
-Als je de React-componenten gebruikt hoef je niets te doen.
-Deze gebruiken allemaal het juiste lettertype.
+Werk je met npm, neem dan ons package `@amsterdam/design-system-assets` op in je dependencies.
+Vervolgens importeer je `@amsterdam/design-system-assets/font/index.css` aan het begin van je stylesheet.
 
-Werk je met andere technologie, maar wel met npm, dan installeer je `@amsterdam/design-system-assets` en importeer je `@amsterdam/design-system-assets/font/index.css`.
+Je kunt het lettertype ook zelf hosten en opnemen in je applicatie.
+Vraag het dan aan via het formulier hieronder.
 
-Ook kun je het lettertype zelf hosten en opnemen in je applicatie, vraag het dan aan via het formulier hieronder.
 Als het helemaal niet mogelijk is Amsterdam Sans te gebruiken pas je het lettertype Arial toe, of het generieke sans-serif lettertype van het apparaat.
 In alle gevallen voer je die alternatieven op voor als het downloaden van het font voor de gebruiker niet lukt, of terwijl dat bezig is:
 

From 527d4cb18439dbae82fb5a26a9be85574d245a06 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Mon, 27 Nov 2023 23:18:51 +0100
Subject: [PATCH 18/24] Revert unintended change to pink text

---
 storybook/storybook-docs/src/typography.stories.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/storybook/storybook-docs/src/typography.stories.mdx b/storybook/storybook-docs/src/typography.stories.mdx
index 93c1d58870..412613ce16 100644
--- a/storybook/storybook-docs/src/typography.stories.mdx
+++ b/storybook/storybook-docs/src/typography.stories.mdx
@@ -192,7 +192,7 @@ Rond staartletters wordt de streep onderbroken voor betere leesbaarheid.
   fontFamily="Amsterdam Sans, Arial, sans-serif"
   fontSizes={[24]}
   sampleText="Jouw typograaf biedt mij zulke exquise schreven"
-  style={{ color: "hotpink", textDecorationLine: "underline", textDecorationThickness: 2, textUnderlineOffset: 2 }}
+  style={{ color: "#004469", textDecorationLine: "underline", textDecorationThickness: 2, textUnderlineOffset: 2 }}
 />
 
 ### Overhang

From de680f6f83271ab23a3f000c444899b75f3daf49 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Mon, 27 Nov 2023 23:31:17 +0100
Subject: [PATCH 19/24] Improve appearance of inline code and apply text sizes
 more broadly

---
 storybook/storybook-overrides.css | 37 ++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/storybook/storybook-overrides.css b/storybook/storybook-overrides.css
index 74534bdf87..59e456cdd5 100644
--- a/storybook/storybook-overrides.css
+++ b/storybook/storybook-overrides.css
@@ -1,87 +1,92 @@
 /* stylelint-disable */
 
 .sbdocs-content > :is(h1, h2, h3, h4, h5, h6, p),
-.sbdocs-content > div > :is(h1, h2, h3, h4, h5, h6, p),
+.sbdocs-content > div :is(h1, h2, h3, h4, h5, h6, p),
 .sbdocs-content :where(li:not(.sb-anchor, .sb-unstyled, .sb-unstyled li)) {
   color: #000000 !important;
   font-family: "Amsterdam Sans", Arial, sans-serif !important;
 }
 
 .sbdocs-content > :is(p, a),
-.sbdocs-content > div > :is(p, a),
+.sbdocs-content > div :is(p, a),
 .sbdocs-content :where(li:not(.sb-anchor, .sb-unstyled, .sb-unstyled li)) {
   font-size: 1.25rem !important;
   line-height: 1.75 !important;
 }
 
 .sbdocs-content > :is(p, ol, ul),
-.sbdocs-content > div > :is(p, ol, ul) {
+.sbdocs-content > div :is(p, ol, ul) {
   margin-block: 1.25rem !important;
   padding-block: 0 !important;
 }
 
 .sbdocs-content > h1 + p,
-.sbdocs-content > div > h1 + p {
+.sbdocs-content > div h1 + p {
   font-size: 1.375rem !important;
   margin-block-end: 2em !important;
 }
 
 .sbdocs-content > a,
-.sbdocs-content > div > a {
+.sbdocs-content > div a {
   color: #004699 !important;
   text-decoration: underline !important;
 }
 
 .sbdocs-content > a:hover,
-.sbdocs-content > div > a:hover {
+.sbdocs-content > div a:hover {
   color: #102e62 !important;
   text-decoration-thickness: 2px !important;
 }
 
 .sbdocs-content > :is(h1, h2, h3, h4, h5, h6),
-.sbdocs-content > div > :is(h1, h2, h3, h4, h5, h6) {
+.sbdocs-content > div :is(h1, h2, h3, h4, h5, h6) {
   margin-block: 2em 0.25em !important;
   padding-block: 0 !important;
 }
 
 .sbdocs-content > h1,
-.sbdocs-content > div > h1 {
+.sbdocs-content > div h1 {
   font-size: 3rem !important;
 }
 
 .sbdocs-content > h2,
-.sbdocs-content > div > h2 {
+.sbdocs-content > div h2 {
   font-size: 2rem !important;
   border-bottom: none;
 }
 
 .sbdocs-content > h3,
-.sbdocs-content > div > h3 {
+.sbdocs-content > div h3 {
   font-size: 1.5rem !important;
 }
 
 .sbdocs-content > h4,
-.sbdocs-content > div > h4 {
+.sbdocs-content > div h4 {
   font-size: 1.25rem !important;
 }
 
 .sbdocs-content > h2 + h3,
-.sbdocs-content > div > h2 + h3,
+.sbdocs-content > div h2 + h3,
 .sbdocs-content > h3 + h4,
-.sbdocs-content > div > h3 + h4,
+.sbdocs-content > div h3 + h4,
 .sbdocs-content > h4 + h5,
-.sbdocs-content > div > h4 + h5 {
+.sbdocs-content > div h4 + h5 {
   margin-block-start: 1em !important;
 }
 
 .sbdocs-content > :is(p, ul, ol),
-.sbdocs-content > div > :is(p, ul, ol) {
+.sbdocs-content > div :is(p, ul, ol) {
   margin-block: 0 1rem !important;
 }
 
 .sbdocs-content > :first-child,
-.sbdocs-content > div > :first-child {
+.sbdocs-content > div :first-child {
   margin-block-start: 0 !important;
 }
 
+.sbdocs-content > p code {
+  color: currentColor !important;
+  font-size: 1rem !important;
+}
+
 /* stylelint-enable */

From 15c049e13e6671df548620e7c7952ccea5d7fabc Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Tue, 28 Nov 2023 09:57:32 +0100
Subject: [PATCH 20/24] Remove mention of removed typographic breakpoint and
 make grid docs a bit more direct

---
 storybook/storybook-docs/src/grid.stories.mdx | 55 ++++++++-----------
 1 file changed, 23 insertions(+), 32 deletions(-)

diff --git a/storybook/storybook-docs/src/grid.stories.mdx b/storybook/storybook-docs/src/grid.stories.mdx
index 5b7587f07e..9d92fcfe59 100644
--- a/storybook/storybook-docs/src/grid.stories.mdx
+++ b/storybook/storybook-docs/src/grid.stories.mdx
@@ -11,9 +11,8 @@ Alle elementen op een pagina worden op dat grid geplaatst.
 
 ### Vier, acht of twaalf kolommen
 
-Het grid bezet steeds de volledige beschikbare breedte.
-Afhankelijk van die breedte verandert het aantal kolommen van het grid.
-Alle kolommen zijn even breed.
+Het grid verdeelt het scherm horizontaal in kolommen van gelijke breedte.
+Hoe breder het scherm, des te meer kolommen.
 
 In vensters tot 576 pixels breed levert het grid 4 kolommen.
 Tot een breedte van 1088 pixels zijn dat er 8.
@@ -26,7 +25,7 @@ Zo is 576 = 64 + 2 × 256 en 1088 = 64 + 4 × 256.
 
 Op deze breakpoints verandert alleen het aantal kolommen.
 Die worden daardoor smaller of breder en de elementen erop dus ook.
-Rond een breakpoint kunnen elementen van plaats veranderen op de pagina.
+De witruimtes tussen en naast de kolommen groeien over het hele spectrum steeds in hetzelfde tempo.
 
 ### Twee thema’s voor witruimte
 
@@ -56,13 +55,11 @@ Voor applicaties is zo veel witruimte niet nodig, zelfs contraproductief.
 Daarom is er ook een compact thema voor het grid.
 
 De minimale witruimte tussen kolommen is ook hier 16 pixels.
-Maar deze begint pas op een vensterbreedte van 1088 pixels te groeien.
+Maar deze begint pas vanaf een vensterbreedte van 1088 pixels te groeien.
 De toename gaat ook langzamer: 4 pixels per 256 pixels extra breedte.
 (Dit komt neer op 1 en 9/16 procent van de schermbreedte min 1 pixel.)
 Het maximum is hier 40 pixels en dat wordt pas bereikt bij een vensterbreedte van 2624 pixels.
 
-Alle andere eigenschappen van het compacte thema zijn gelijk aan die van het ruimtelijke.
-
 ### Marges links en rechts
 
 Aan beide zijden reserveert het grid marges van witruimte.
@@ -70,22 +67,16 @@ Aan beide zijden reserveert het grid marges van witruimte.
 #### Ruimtelijk
 
 In het ruimtelijke thema is deze ruimte 1½ keer zo breed als die tussen de kolommen.
-Zo is er genoeg ruimte tussen het grid en de randen van het scherm.
+Zo is er genoeg ruimte tussen het grid en de randen van het scherm of venster.
 
 Sommige elementen mogen over deze marges gepositioneerd worden, zoals schermvullende afbeeldingen en de voettekst van de pagina.
-Die zijn dan dus breder dan de rest van de content.
-
-Dit thema is gericht op websites.
-Het ligt voor de hand om het grid te beperken tot een maximale breedte.
-Het grid wordt dan automatisch gecentreerd.
+Die zijn dan dus iets breder dan de rest van de content.
 
 #### Compact
 
 In het compacte thema zijn de marges buiten het grid even breed als de witruimtes erbinnen.
 Hier worden geen elementen over de marges heen geplaatst.
 
-Dit thema is geschikt voor applicaties die de volledige schermbreedte benutten.
-
 ### Menubalk
 
 Applicaties hebben in het brede grid een verticale menubalk aan de linkerzijde.
@@ -99,7 +90,7 @@ In deze context neemt het grid wel de hele breedte van het venster in.
 Een maximale breedte voor het grid zorgt ervoor dat witruimte en typografie niet onbeperkt doorgroeien.
 Zo raken de elementen van een pagina niet te ver van elkaar verwijderd en blijft tekst prettig leesbaar.
 
-Voor websites, in het ruimtelijke thema, is de maximale breedte van het grid 1432 pixels.
+Voor websites is de maximale breedte van het grid 1432 pixels.
 In vensters van minimaal 1600 pixels breed heeft het grid deze breedte – de marges bedragen hier 84 pixels.
 
 Applicaties, die het compacte thema gebruiken, nemen de volledige breedte van het venster in.
@@ -111,11 +102,12 @@ Voor het gemak speelt de breedte van 320 wel een rol in de documentatie.
 
 ## Maatvoering
 
-Deze ontwerpkeuzes hebben in de praktijk het volgende resultaat.
+Deze ontwerpkeuzes leveren in de praktijk het volgende resultaat in pixels.
 
 ### Breedtes per breakpoint
 
-Op de drie breakpoints hebben de kolommen, witruimtes en marges de volgende breedtes in pixels.
+Op de drie breakpoints hebben de kolommen, witruimtes en marges de volgende breedtes.
+Nogmaals: daartussen groeien de breedtes continu.
 
 #### Ruimtelijk
 
@@ -150,17 +142,20 @@ ga er dan vanuit dat telefoons in staande modus en ‘split screen’ vensters o
 telefoons in liggende modus en tablets in staande het 8-koloms,
 en tablets in liggende modus,
 laptops en grotere beeldschermen het 12-koloms.
-Om hoeveel pixels het dan precies gaat is niet van belang.
+Om hoeveel pixels het dan precies gaat is niet zo van belang.
 
 ### Referentie-breedtes voor ontwerpers
 
-Ondanks dat is het bij het ontwerpen van een scherm toch nodig een bepaald canvas te kiezen.
-Ook is het goed om te bepalen hoe een ontwerp op ‘een dekstop’, ‘een tablet’ of ‘op mobiel’ zich houdt.
+Leuk, al die flexibiliteit.
+Maar bij het ontwerpen van een scherm is het toch nodig een bepaald canvas te kiezen.
+Voor elk ontwerp wil je bepalen hoe het zich op ‘een dekstop’, ‘een tablet’ of ‘mobiel’ houdt.
 
 Daarom werken we in Figma we met drie referentie-breedtes.
-Op die breedtes werken we het ontwerp van een scherm uit te werken voor die drie klassen van apparaten.
-We weten dat in de werkelijkheid veel meer variatie bestaat – maar we moeten toch ergens op mikken.
-Op deze breedtes is de maatvoering als volgt.
+Op die breedtes werken we het ontwerp van een scherm uit voor die drie klassen van apparaten.
+We weten dat er in de werkelijkheid veel meer variatie bestaat, maar we moeten toch ergens op mikken.
+Deze grids vind je in Figma Library onder de ‘Grid styles’.
+
+In deze drie situaties is de maatvoering als volgt.
 
 #### Ruimtelijk
 
@@ -196,19 +191,15 @@ Layout en tekst hebben op verschillende manieren met elkaar te maken.
 
 ### Schalende typografie
 
-In het grid zijn dus zowel de breedte van de kolommen, de witruimtes als de marges flexibel.
-Ook de [tekstgroottes](?path=/docs/docs-designrichtlijnen-typografie--docs) reageren op de vensterbreedte.
+Net als het grid reageren ook de [tekstgroottes](?path=/docs/docs-designrichtlijnen-typografie--docs) reageren op de vensterbreedte.
 Dat zorgt ervoor dat content op zo veel mogelijk vensterbreedtes en met diverse persoonlijke instellingen goed tot zijn recht komt.
 
-Op dit moment reageert de typografie nog op 1 breakpoint bij een vensterbreedte van 854 pixels.
-Dat was al eerder zo ontworpen en gebouwd.
-Nu het grid verder ontwikkeld is, stemmen we de typografie daar weer op af.
-Dit aparte breakpoint komt dus snel te vervallen.
-
 ### Inzoomen of vergrote tekst
 
 Mensen kunnen de weergave van een webpagina vergroten door in te zoomen of door een grotere tekstgrootte in te stellen.
-De maatvoering van het grid houdt daar rekening mee: door de breakpoints mee te laten schalen verandert het aantal kolommen eerder zodat de inhoud goed blijft passen.
+De maatvoering van het grid houdt daar rekening mee.
+De breakpoints schalen mee met de effectieve tekstgrootte.
+Zo verandert het aantal kolommen eerder en blijft grotere inhoud goed passen.
 
 ## Gerelateerde componenten
 

From 2e6e113525deb46ec96ab1f178526846d6c30974 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Tue, 28 Nov 2023 10:05:44 +0100
Subject: [PATCH 21/24] Increase horizontal whitespace on Storybook wrapper

---
 storybook/storybook-overrides.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/storybook/storybook-overrides.css b/storybook/storybook-overrides.css
index 59e456cdd5..94e83a1c2e 100644
--- a/storybook/storybook-overrides.css
+++ b/storybook/storybook-overrides.css
@@ -1,5 +1,9 @@
 /* stylelint-disable */
 
+.sbdocs-wrapper {
+  padding-inline: 8vw !important;
+}
+
 .sbdocs-content > :is(h1, h2, h3, h4, h5, h6, p),
 .sbdocs-content > div :is(h1, h2, h3, h4, h5, h6, p),
 .sbdocs-content :where(li:not(.sb-anchor, .sb-unstyled, .sb-unstyled li)) {

From 6e0acfb709e62f55da3d2cc53dc31c5772e89716 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Tue, 28 Nov 2023 10:08:12 +0100
Subject: [PATCH 22/24] Remove unnecessary word

---
 storybook/storybook-docs/src/grid.stories.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/storybook/storybook-docs/src/grid.stories.mdx b/storybook/storybook-docs/src/grid.stories.mdx
index 9d92fcfe59..888c704c4a 100644
--- a/storybook/storybook-docs/src/grid.stories.mdx
+++ b/storybook/storybook-docs/src/grid.stories.mdx
@@ -11,7 +11,7 @@ Alle elementen op een pagina worden op dat grid geplaatst.
 
 ### Vier, acht of twaalf kolommen
 
-Het grid verdeelt het scherm horizontaal in kolommen van gelijke breedte.
+Het grid verdeelt het scherm in kolommen van gelijke breedte.
 Hoe breder het scherm, des te meer kolommen.
 
 In vensters tot 576 pixels breed levert het grid 4 kolommen.

From 279e41766c261c0a12dfd59316f38b3c94737487 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Tue, 28 Nov 2023 10:08:46 +0100
Subject: [PATCH 23/24] Use window instead of screen once more

---
 storybook/storybook-docs/src/grid.stories.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/storybook/storybook-docs/src/grid.stories.mdx b/storybook/storybook-docs/src/grid.stories.mdx
index 888c704c4a..ad4d4f42f8 100644
--- a/storybook/storybook-docs/src/grid.stories.mdx
+++ b/storybook/storybook-docs/src/grid.stories.mdx
@@ -12,7 +12,7 @@ Alle elementen op een pagina worden op dat grid geplaatst.
 ### Vier, acht of twaalf kolommen
 
 Het grid verdeelt het scherm in kolommen van gelijke breedte.
-Hoe breder het scherm, des te meer kolommen.
+Hoe breder het venster, des te meer kolommen.
 
 In vensters tot 576 pixels breed levert het grid 4 kolommen.
 Tot een breedte van 1088 pixels zijn dat er 8.

From 5e4578e7cf9ff56bd2b4a4ed004c758a845c1d4e Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Tue, 28 Nov 2023 14:45:28 +0100
Subject: [PATCH 24/24] Go easy on the line breaks

---
 storybook/storybook-docs/src/typography.stories.mdx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/storybook/storybook-docs/src/typography.stories.mdx b/storybook/storybook-docs/src/typography.stories.mdx
index 412613ce16..6eff8de246 100644
--- a/storybook/storybook-docs/src/typography.stories.mdx
+++ b/storybook/storybook-docs/src/typography.stories.mdx
@@ -48,10 +48,8 @@ Ook werkt dat goed samen met het responsive [grid](?path=/docs/react_layout-grid
 
 Elk niveau heeft een minimale tekstgrootte.
 Dat is actief tot en met een vensterbreedte van 320 pixels.
-
 Ook is er een maximale tekstgrootte.
 Dat is van toepassing vanaf een vensterbreedte van 1600 pixels.
-
 Daartussen groeit de tekst in een rechte lijn.
 
 ### Typografische schaal