diff --git a/package-lock.json b/package-lock.json
index 1217cda956..bdb637b3c3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,10 @@
         "@fortawesome/fontawesome-free": "^6.4.2",
         "@gemeente-denhaag/action": "^4.0.1",
         "@gemeente-denhaag/side-navigation": "^4.0.2",
+        "@nl-design-system-candidate/heading-css": "^1.1.3",
+        "@nl-design-system-candidate/heading-react": "^1.1.7",
+        "@nl-design-system-candidate/paragraph-css": "^2.1.3",
+        "@nl-design-system-candidate/paragraph-react": "^2.2.2",
         "@open-inwoner/design-tokens": "^0.0.25",
         "@tarekraafat/autocomplete.js": "^10.2.6",
         "@utrecht/button-css": "^2.3.1",
@@ -446,7 +450,6 @@
     },
     "node_modules/@babel/runtime": {
       "version": "7.28.4",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "engines": {
@@ -1354,6 +1357,41 @@
       "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
       "license": "MIT"
     },
+    "node_modules/@nl-design-system-candidate/heading-css": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@nl-design-system-candidate/heading-css/-/heading-css-1.1.3.tgz",
+      "integrity": "sha512-s4ERGrHcsBkZlCc+qz8+XDB5rCpxvkxwxI2bg4OB2GDS0DU5LzjNMWhsV1I8IPOboTvWMabvrsscxVuj5Bijuw==",
+      "license": "EUPL-1.2"
+    },
+    "node_modules/@nl-design-system-candidate/heading-react": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@nl-design-system-candidate/heading-react/-/heading-react-1.1.7.tgz",
+      "integrity": "sha512-Gvubqw8jrNj0cX5n8fY/xb/iwilvLpaDQ2aUWcGgh+y38YJDOqvckG32LHtmLTUOW+Q6Zl1g5yZ6zvX/af/UYQ==",
+      "license": "EUPL-1.2",
+      "peerDependencies": {
+        "@babel/runtime": "^7",
+        "react": "^18 || ^19"
+      }
+    },
+    "node_modules/@nl-design-system-candidate/paragraph-css": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@nl-design-system-candidate/paragraph-css/-/paragraph-css-2.1.3.tgz",
+      "integrity": "sha512-f3GHiSpisUZAcn4gSNpSX2C3Mhl7y9dg1TfTe+jGMtHAqau/tztrtE3H27FlwrZeVEtsUtvssRCYUA3UO/GDpQ==",
+      "license": "EUPL-1.2"
+    },
+    "node_modules/@nl-design-system-candidate/paragraph-react": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@nl-design-system-candidate/paragraph-react/-/paragraph-react-2.2.2.tgz",
+      "integrity": "sha512-naW+drAzlq7HPaZmhdYdgFbR06dyuB63KGg83CRDqjbCVJ40uJzLh/56hgyYzUoRrQe9m5aXZ744uFojJYngug==",
+      "license": "EUPL-1.2",
+      "dependencies": {
+        "clsx": "2.1.1"
+      },
+      "peerDependencies": {
+        "@babel/runtime": "^7",
+        "react": "^18 || ^19"
+      }
+    },
     "node_modules/@open-inwoner/design-tokens": {
       "version": "0.0.25",
       "resolved": "https://registry.npmjs.org/@open-inwoner/design-tokens/-/design-tokens-0.0.25.tgz",
diff --git a/package.json b/package.json
index e7a5edf6e8..76ca467eef 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,10 @@
     "@fortawesome/fontawesome-free": "^6.4.2",
     "@gemeente-denhaag/action": "^4.0.1",
     "@gemeente-denhaag/side-navigation": "^4.0.2",
+    "@nl-design-system-candidate/heading-css": "^1.1.3",
+    "@nl-design-system-candidate/heading-react": "^1.1.7",
+    "@nl-design-system-candidate/paragraph-css": "^2.1.3",
+    "@nl-design-system-candidate/paragraph-react": "^2.2.2",
     "@open-inwoner/design-tokens": "^0.0.25",
     "@tarekraafat/autocomplete.js": "^10.2.6",
     "@utrecht/button-css": "^2.3.1",
diff --git a/src/open_inwoner/accounts/templates/accounts/email_verification.html b/src/open_inwoner/accounts/templates/accounts/email_verification.html
index d2a69e5655..568396d093 100644
--- a/src/open_inwoner/accounts/templates/accounts/email_verification.html
+++ b/src/open_inwoner/accounts/templates/accounts/email_verification.html
@@ -7,8 +7,8 @@
     {% render_column span=9 %}
         {% render_card tinted=True  %}
             {% get_solo 'configurations.SiteConfiguration' as config %}
-            <h1 class="utrecht-heading-1">{% trans "E-mail is verzonden" %}</h1><br>
-            {% if verification_text %}<p class="utrecht-paragraph">{{ verification_text|linebreaksbr }}</p><br>{% endif %}
+            <h1 class="nl-heading nl-heading--level-1">{% trans "E-mail is verzonden" %}</h1><br>
+            {% if verification_text %}<nl-paragraph>{{ verification_text|linebreaksbr }}</nl-paragraph><br>{% endif %}
             <form method="POST" id="email-verification-form" action="{{ request.get_full_path }}" class="form" novalidate>
                 {% csrf_token %}
                 {% form_actions primary_icon='arrow_forward' primary_text=button_text %}
diff --git a/src/open_inwoner/accounts/templates/accounts/inbox.html b/src/open_inwoner/accounts/templates/accounts/inbox.html
index e8bf7ee2d2..81ae0f7731 100644
--- a/src/open_inwoner/accounts/templates/accounts/inbox.html
+++ b/src/open_inwoner/accounts/templates/accounts/inbox.html
@@ -5,7 +5,7 @@
 {% block main_inner %}
     {% render_grid %}
         {% render_column start=1 span=9 %}
-            <h1 class="utrecht-heading-1">{% trans 'Mijn berichten' %}</h1>
+            <h1 class="nl-heading nl-heading--level-1">{% trans 'Mijn berichten' %}</h1>
         {% endrender_column %}
 
         {% render_column start=10 span=3 extra_classes="fix__align-right" %}
diff --git a/src/open_inwoner/accounts/templates/accounts/inbox_start.html b/src/open_inwoner/accounts/templates/accounts/inbox_start.html
index 5d339ed941..c2666b3a75 100644
--- a/src/open_inwoner/accounts/templates/accounts/inbox_start.html
+++ b/src/open_inwoner/accounts/templates/accounts/inbox_start.html
@@ -3,7 +3,7 @@
 
 
 {% block main_inner %}
-    <h1 class="utrecht-heading-1">{% trans 'Nieuw bericht' %}</h1>
+    <h1 class="nl-heading nl-heading--level-1">{% trans 'Nieuw bericht' %}</h1>
     {{ block.super }}
 {% endblock %}
 
diff --git a/src/open_inwoner/accounts/templates/accounts/invite_accept.html b/src/open_inwoner/accounts/templates/accounts/invite_accept.html
index 1623f4c3c3..309af2f808 100644
--- a/src/open_inwoner/accounts/templates/accounts/invite_accept.html
+++ b/src/open_inwoner/accounts/templates/accounts/invite_accept.html
@@ -3,12 +3,12 @@
 
 
 {% block content %}
-<h1 class="utrecht-heading-1">
+<h1 class="nl-heading nl-heading--level-1">
     {% trans "Accept an invitation" %}
 </h1>
-<p class="utrecht-paragraph">
+<nl-paragraph>
     {% blocktranslate with inviter_name=object.inviter.get_full_name %}Accept invitation from {{ inviter_name }} and join Open Inwoner Platform {% endblocktranslate %}
-</p>
+</nl-paragraph>
 
 {% render_form id="invite-form" method="POST" form=form extra_classes="form--flex" %}
     {% csrf_token %}
diff --git a/src/open_inwoner/accounts/templates/accounts/registration_necessary.html b/src/open_inwoner/accounts/templates/accounts/registration_necessary.html
index 706c14b9af..c9e2cdbe21 100644
--- a/src/open_inwoner/accounts/templates/accounts/registration_necessary.html
+++ b/src/open_inwoner/accounts/templates/accounts/registration_necessary.html
@@ -6,8 +6,8 @@
     {% render_grid %}
         {% render_column start=5 span=5 %}
             {% get_solo 'configurations.SiteConfiguration' as config %}
-            <h1 class="utrecht-heading-1">{% trans "Registratie voltooien" %}</h1><br>
-            {% if config.registration_text %}<p class="utrecht-paragraph">{{ config.registration_text|urlize|linebreaksbr }}</p>{% endif %}
+            <h1 class="nl-heading nl-heading--level-1">{% trans "Registratie voltooien" %}</h1><br>
+            {% if config.registration_text %}<nl-paragraph>{{ config.registration_text|urlize|linebreaksbr }}</nl-paragraph>{% endif %}
             <form method="POST" id="necessary-form" action="{{ request.get_full_path }}" class="form form__choice-list" novalidate>
                 {% csrf_token %}
 
@@ -33,7 +33,7 @@ <h1 class="utrecht-heading-1">{% trans "Registratie voltooien" %}</h1><br>
 
 
                 {% if config.any_notifications_enabled %}
-                    <h3 class="utrecht-heading-3">{% trans "Notification preferences" %}</h3>
+                    <h3 class="nl-heading nl-heading--level-3">{% trans "Notification preferences" %}</h3>
 
                     {# Start of multiple checkbox fields #}
                     <ul class="choice-list choice-list-multiple">
@@ -74,7 +74,7 @@ <h3 class="utrecht-heading-3">{% trans "Notification preferences" %}</h3>
 
                     {# Choice of zaken notification channel #}
                     {% if form.case_notification_channel %}
-                        <p class="utrecht-paragraph choice-list__p">{% trans "Hoe wilt u deze meldingen ontvangen?" %}</p>
+                        <p class="nl-paragraph choice-list__p">{% trans "Hoe wilt u deze meldingen ontvangen?" %}</p>
                         {% with form.case_notification_channel as field %}
                             {% choice_list single=True cols=True %}
                                 {% for choice in field.field.choices %}
diff --git a/src/open_inwoner/accounts/templates/django_registration/registration_complete.html b/src/open_inwoner/accounts/templates/django_registration/registration_complete.html
index 5e9962d694..5a1e17dba0 100644
--- a/src/open_inwoner/accounts/templates/django_registration/registration_complete.html
+++ b/src/open_inwoner/accounts/templates/django_registration/registration_complete.html
@@ -2,6 +2,6 @@
 {% load i18n %}
 
 {% block content %}
-<h1 class="utrecht-heading-1">{% trans "Succes" %}</h1>
-<p class="utrecht-paragraph">{% trans "U bent nu geregistreerd" %}</p>
+<h1 class="nl-heading nl-heading--level-1">{% trans "Succes" %}</h1>
+    <nl-paragraph>{% trans "U bent nu geregistreerd" %}</nl-paragraph>
 {% endblock content %}
diff --git a/src/open_inwoner/accounts/templates/django_registration/registration_form.html b/src/open_inwoner/accounts/templates/django_registration/registration_form.html
index 6ae2fac769..7c96a4e3ce 100644
--- a/src/open_inwoner/accounts/templates/django_registration/registration_form.html
+++ b/src/open_inwoner/accounts/templates/django_registration/registration_form.html
@@ -3,7 +3,7 @@
 
 {% block content %}
 
-<h1 class="utrecht-heading-1">{% trans 'Registreren' %}</h1>
+<h1 class="nl-heading nl-heading--level-1">{% trans 'Registreren' %}</h1>
   {% render_grid %}
    {% if settings.DIGID_ENABLED and digid_url %}
     {% render_column start=5 span=5 %}
@@ -30,7 +30,7 @@ <h1 class="utrecht-heading-1">{% trans 'Registreren' %}</h1>
   {% if login_allow_registration %}
         {% render_column start=5 span=5 %}
             {% render_card tinted=True compact=True  %}
-                <h3 class="utrecht-heading-3">{% trans "Registreren met E-mail" %}</h3>
+                <h3 class="nl-heading nl-heading--level-3">{% trans "Registreren met E-mail" %}</h3>
                 {% form form_object=form method="POST" id="registration-form" submit_text=_('Registreren') extra_classes="form__registration" show_required=True %}
             {% endrender_card %}
         {% endrender_column %}
diff --git a/src/open_inwoner/accounts/templates/registration/add_phone_number_1.html b/src/open_inwoner/accounts/templates/registration/add_phone_number_1.html
index dc8b431567..d058057ecd 100644
--- a/src/open_inwoner/accounts/templates/registration/add_phone_number_1.html
+++ b/src/open_inwoner/accounts/templates/registration/add_phone_number_1.html
@@ -4,14 +4,14 @@
 {% block content %}
     {{ block.super }}
 
-    <p class="utrecht-paragraph">
+    <nl-paragraph>
         {% blocktrans trimmed %}
             Het nummer van uw mobiele telefoon is nog niet bij de Open Inwoner Platform bekend
             en is nodig voor toegang tot deze website.
         {% endblocktrans %}
         {% trans 'Vul alstublieft het nummer van uw mobiele telefoon in. ' %}
         {% trans 'U ontvangt nadat u op <em>bevestigen</em> klikt een SMS bericht met daarin een code.' %}
-    </p>
+    </nl-paragraph>
 
     {% render_form id="add-phonenumber-1-form" form=wizard.form no_action=True method="POST" %}
         {% csrf_token %}
diff --git a/src/open_inwoner/accounts/templates/registration/add_phone_number_2.html b/src/open_inwoner/accounts/templates/registration/add_phone_number_2.html
index 4f07f305c5..0c72ccd5d5 100644
--- a/src/open_inwoner/accounts/templates/registration/add_phone_number_2.html
+++ b/src/open_inwoner/accounts/templates/registration/add_phone_number_2.html
@@ -4,11 +4,11 @@
 {% block content %}
     {{ block.super }}
 
-    <p class="utrecht-paragraph">
+    <nl-paragraph>
         {% trans 'U ontvangt een SMS bericht op uw mobiele telefoon nummer met daarin een code. ' %}
         {% trans 'Vul hieronder de code in. Geen bericht ontvangen? ' %}
         {% trans 'Kies <em>Vorige</em> om uw telefoon nummer te controleren en eventueel aan te passen.' %}
-    </p>
+    </nl-paragraph>
 
     {% render_form id="add-phonenumber-2-form" form=wizard.form no_action=True method="POST" %}
         {% csrf_token %}
diff --git a/src/open_inwoner/accounts/templates/registration/add_phone_number_base.html b/src/open_inwoner/accounts/templates/registration/add_phone_number_base.html
index 35759db151..fad523cbb1 100644
--- a/src/open_inwoner/accounts/templates/registration/add_phone_number_base.html
+++ b/src/open_inwoner/accounts/templates/registration/add_phone_number_base.html
@@ -6,7 +6,7 @@
 {% endblock %}
 
 {% block content %}
-    <h2 class="utrecht-heading-2">
+    <h2 class="nl-heading nl-heading--level-2">
         {% blocktranslate with step=wizard.steps.step1 count=wizard.steps.count %}
             Account verificatie (stap {{ step }} van {{ count }})
         {% endblocktranslate %}
diff --git a/src/open_inwoner/accounts/templates/registration/login.html b/src/open_inwoner/accounts/templates/registration/login.html
index bb09067720..2a255971fe 100644
--- a/src/open_inwoner/accounts/templates/registration/login.html
+++ b/src/open_inwoner/accounts/templates/registration/login.html
@@ -7,7 +7,7 @@
 {% endblock header_image %}
 
 {% block content %}
-    <h1 class="utrecht-heading-1">{% trans 'Welkom' %}</h1>
+    <h1 class="nl-heading nl-heading--level-1">{% trans 'Welkom' %}</h1>
     {% if login_text.html %}
         <div class="wysiwyg">{{ login_text.html|safe }}</div>
     {% endif %}
diff --git a/src/open_inwoner/accounts/templates/registration/verify_token.html b/src/open_inwoner/accounts/templates/registration/verify_token.html
index 7f05ec1e29..4c2d817e19 100644
--- a/src/open_inwoner/accounts/templates/registration/verify_token.html
+++ b/src/open_inwoner/accounts/templates/registration/verify_token.html
@@ -2,8 +2,8 @@
 {% load i18n form_tags link_tags string_tags%}
 
 {% block content %}
-    <h2 class="utrecht-heading-2">{% trans 'Account verificatie' %}</h2>
-    <p class="utrecht-paragraph">
+    <h2 class="nl-heading nl-heading--level-2">{% trans 'Account verificatie' %}</h2>
+    <nl-paragraph>
         {% blocktrans trimmed %}
             U ontvangt binnen 1 minuut een sms-bericht op uw mobiele telefoon.
             Vul de code die in het bericht staat hieronder in en klik op
@@ -11,7 +11,7 @@ <h2 class="utrecht-heading-2">{% trans 'Account verificatie' %}</h2>
             Mocht het niet lukken om de code binnen deze tijd in te voeren, klik
             dan op <em>Verstuur nieuwe SMS</em>.
         {% endblocktrans %}
-    </p>
+    </nl-paragraph>
 
     {% render_form id="verify-token-form" form=form no_action=True method="POST" %}
         {% csrf_token %}
diff --git a/src/open_inwoner/cms/banner/tests/test_plugin_banner.py b/src/open_inwoner/cms/banner/tests/test_plugin_banner.py
index 9543e9473f..ffbb467f05 100644
--- a/src/open_inwoner/cms/banner/tests/test_plugin_banner.py
+++ b/src/open_inwoner/cms/banner/tests/test_plugin_banner.py
@@ -38,7 +38,7 @@ def test_banner_text_is_rendered_in_plugin(self):
             BannerTextPlugin, plugin_data={"title": title}
         )
 
-        self.assertIn(f'<h1 class="utrecht-heading-1">{title} </h1>', html)
+        self.assertIn(f'<h1 class="nl-heading nl-heading--level-1">{title} </h1>', html)
 
     def test_banner_text_with_description_is_rendered_in_plugin(self):
         title = "A title for the banner"
@@ -47,5 +47,5 @@ def test_banner_text_with_description_is_rendered_in_plugin(self):
             BannerTextPlugin, plugin_data={"title": title, "description": description}
         )
 
-        self.assertIn(f'<h1 class="utrecht-heading-1">{title} </h1>', html)
-        self.assertIn(f'<p class="utrecht-paragraph">{description}</p>', html)
+        self.assertIn(f'<h1 class="nl-heading nl-heading--level-1">{title} </h1>', html)
+        self.assertIn(f'<p class="nl-paragraph">{description}</p>', html)
diff --git a/src/open_inwoner/components/templates/components/Action/Actions.html b/src/open_inwoner/components/templates/components/Action/Actions.html
index e9a572d9c5..d8fc1a7183 100644
--- a/src/open_inwoner/components/templates/components/Action/Actions.html
+++ b/src/open_inwoner/components/templates/components/Action/Actions.html
@@ -7,7 +7,7 @@
             {% button text=_("Filter") type="button" bordered=True %}
         </div>
         <div class="actions__filter-container filter__container">
-            <p class="utrecht-paragraph">{% trans "Filter op:" %}</p>
+            <nl-paragraph>{% trans "Filter op:" %}</nl-paragraph>
             {% date_field action_form.end_date no_label=True no_help=True icon="today" %}
             {% input action_form.is_for no_label=True no_help=True icon="person" %}
             {% input action_form.status no_label=True no_help=True icon="expand_more" %}
@@ -19,12 +19,12 @@
             <div class="action" aria-expanded="{% if forloop.first %}true{% else %}false{% endif %}">
                 <div class="action__header">
                     <section>
-                        <h3 class="utrecht-heading-3">
+                        <h3 class="nl-heading nl-heading--level-3">
                             {% button extra_classes='action__header-button' icon="keyboard_arrow_down" text=action.name icon_position="after" icon_outlined=True transparent=True type="button" ariaExpanded=forloop.first|lower %}
                         </h3>
                     </section>
                     {% if action.description %}
-                        <p class="utrecht-paragraph">{{ action.description }}</p>
+                        <nl-paragraph>{{ action.description }}</nl-paragraph>
                     {% endif %}
                     {% if action.file %}
                         {% url "profile:action_download" uuid=action.uuid as download_url %}
@@ -89,7 +89,7 @@ <h3 class="utrecht-heading-3">
                 {% endif %}
             </div>
         {% empty %}
-            <div class="table__item"><p class="utrecht-paragraph"><strong>{% trans "er zijn geen acties gevonden met de huidige filters of er zijn geen acties" %}</strong></p></div>
+            <div class="table__item"><nl-paragraph><strong>{% trans "er zijn geen acties gevonden met de huidige filters of er zijn geen acties" %}</strong></nl-paragraph></div>
         {% endfor %}
     </div>
     {% if actions|length > 3 %}
diff --git a/src/open_inwoner/components/templates/components/Card/CategoryCard.html b/src/open_inwoner/components/templates/components/Card/CategoryCard.html
index b2c3ddda76..89e4e47cc3 100644
--- a/src/open_inwoner/components/templates/components/Card/CategoryCard.html
+++ b/src/open_inwoner/components/templates/components/Card/CategoryCard.html
@@ -6,7 +6,7 @@
 <div class="card card__category-card">
     <div class="card__body">
         {% if category %}
-            <h3 class="utrecht-heading-3 card__heading-3">
+            <h3 class="nl-heading nl-heading--level-3 card__heading-3">
                 <a href="{{ category.slug }}" class="link link__text">{{ category }}</a>
             </h3>
         {% endif %}
@@ -26,7 +26,7 @@ <h3 class="utrecht-heading-3 card__heading-3">
     <a href="{{ category.slug }}" class="card">
         <div class="card__body">
             {% if category %}
-                <p class="utrecht-heading-3 card__heading-3">
+                <p class="nl-heading nl-heading--level-3 card__heading-3">
                     <span class="link link__text">{{ category }}</span>
                 </p>
             {% endif %}
diff --git a/src/open_inwoner/components/templates/components/Card/DescriptionCard.html b/src/open_inwoner/components/templates/components/Card/DescriptionCard.html
index 86e2ec3dc7..7338ca3ae8 100644
--- a/src/open_inwoner/components/templates/components/Card/DescriptionCard.html
+++ b/src/open_inwoner/components/templates/components/Card/DescriptionCard.html
@@ -8,7 +8,7 @@ <h2 class="card__heading-2">
                 <span class="link link__text">{{ title }}</span>
             </h2>
         {% endif %}
-        <p class="utrecht-paragraph">{{ description }}</p>
+        <nl-paragraph>{{ description }}</nl-paragraph>
         {% if object.end_date %}
             <div class="card__tabled">
                 <div>{% trans "Einddatum" %}:</div>
diff --git a/src/open_inwoner/components/templates/components/Card/LocationCard.html b/src/open_inwoner/components/templates/components/Card/LocationCard.html
index c79314ade7..515b6a7930 100644
--- a/src/open_inwoner/components/templates/components/Card/LocationCard.html
+++ b/src/open_inwoner/components/templates/components/Card/LocationCard.html
@@ -2,11 +2,11 @@
 <div class="card card__location-card">
     <div class="card__body">
     {% if location_name %}
-        <h3 class="utrecht-heading-3 card__heading-3">{% link href=location.get_absolute_url primary=True text=location_name %}</h3>
+        <h3 class="nl-heading nl-heading--level-3 card__heading-3">{% link href=location.get_absolute_url primary=True text=location_name %}</h3>
     {% endif %}
         <div class="card__body--flex container--no-margin">
-            <p class="utrecht-paragraph">{{ address_line_1 }}</p>
-            <p class="utrecht-paragraph">{{ address_line_2 }}</p>
+            <nl-paragraph>{{ address_line_1 }}</nl-paragraph>
+            <nl-paragraph>{{ address_line_2 }}</nl-paragraph>
             {% if phonenumber %}
                 {% link href='tel:'|addstr:phonenumber secondary=True text=phonenumber %}
             {% endif %}
diff --git a/src/open_inwoner/components/templates/components/Card/ProductCard.html b/src/open_inwoner/components/templates/components/Card/ProductCard.html
index 94ad17a635..410f235885 100644
--- a/src/open_inwoner/components/templates/components/Card/ProductCard.html
+++ b/src/open_inwoner/components/templates/components/Card/ProductCard.html
@@ -15,7 +15,7 @@ <h2 class="card__heading-2"><span class="link link__text">{{ title }}</span></h2
             <div class="card__content">
             <h2 class="card__heading-2"><span class="link link__text">{{ title }}</span></h2>
     {% endif %}
-            <p class="utrecht-paragraph">{{ description }}</p>
+    <nl-paragraph>{{ description }}</nl-paragraph>
             {% if object.end_date %}
             <div class="card__tabled">
                 <div>{% trans "Einddatum" %}:</div>
diff --git a/src/open_inwoner/components/templates/components/Contact/ContactForm.html b/src/open_inwoner/components/templates/components/Contact/ContactForm.html
index 55dfbccc61..a062bd83ec 100644
--- a/src/open_inwoner/components/templates/components/Contact/ContactForm.html
+++ b/src/open_inwoner/components/templates/components/Contact/ContactForm.html
@@ -26,9 +26,9 @@
                 {% if form_object.captcha %}
                     <div class="form__control ">
                         <div class="captcha">
-                            <p class="utrecht-paragraph">
+                            <nl-paragraph>
                                 {{ form_object.captcha.label }}<span class="label__label--required"> * </span>
-                            </p>
+                            </nl-paragraph>
                             <label class="label captcha__label">
                                 <span class="captcha__check">
                                     {{ form_object.request_session.captcha_question }}
diff --git a/src/open_inwoner/components/templates/components/Faq/Faq.html b/src/open_inwoner/components/templates/components/Faq/Faq.html
index bf6a0c280e..510e1ead99 100644
--- a/src/open_inwoner/components/templates/components/Faq/Faq.html
+++ b/src/open_inwoner/components/templates/components/Faq/Faq.html
@@ -3,13 +3,13 @@
 {% trans "Veelgestelde vragen" as default_title %}
 <aside class="faq" aria-label="{{ default_title }}">
     {% if not hide_title %}
-        <h2 id="faq" class="utrecht-heading-2">{{ title|default:default_title }}</h2>
+        <h2 id="faq" class="nl-heading nl-heading--level-2">{{ title|default:default_title }}</h2>
     {% endif %}
 
     <ul class="faq__list">
         {% for question in questions %}
             <li class="faq__list-item">
-                <h3 class="utrecht-heading-3">
+                <h3 class="nl-heading nl-heading--level-3">
                     {% firstof question.pk|slugify as id %}
                     {% firstof 'question-'|add:id|add:'-answer' as answer_id %}
                     {% link bold=True href='#'|add:answer_id icon='keyboard_arrow_down' secondary=True text=question.question toggle="open"  %}
diff --git a/src/open_inwoner/components/templates/components/File/FileList.html b/src/open_inwoner/components/templates/components/File/FileList.html
index 9dc45851fe..0b8a9e12f1 100644
--- a/src/open_inwoner/components/templates/components/File/FileList.html
+++ b/src/open_inwoner/components/templates/components/File/FileList.html
@@ -3,9 +3,9 @@
 <div class="file-list">
     {% if title %}
         {% if h1 %}
-            <h1 class="utrecht-heading-1 utrecht-heading-1--bottom" id="files">{{ title }}</h1>
+            <h1 class="nl-heading nl-heading--level-1 nl-heading nl-heading--level-1--bottom" id="files">{{ title }}</h1>
         {% else %}
-            <h3 class="utrecht-heading-3" id="files">{{ title }}</h3>
+            <h3 class="nl-heading nl-heading--level-3" id="files">{{ title }}</h3>
         {% endif %}
     {% endif %}
     <ul class="file-list__list">
@@ -15,7 +15,7 @@ <h3 class="utrecht-heading-3" id="files">{{ title }}</h3>
                 {% file file=file.file created=created name=file.name uuid=file.uuid allow_delete=allow_delete download_url=download_url show_download=show_download %}
             </li>
         {% empty %}
-            <li><p class="utrecht-paragraph">{% trans "Er zijn nog geen bestanden geüpload" %}</p></li>
+            <li><nl-paragraph>{% trans "Er zijn nog geen bestanden geüpload" %}</nl-paragraph></li>
         {% endfor %}
     </ul>
 </div>
diff --git a/src/open_inwoner/components/templates/components/Form/Autocomplete.html b/src/open_inwoner/components/templates/components/Form/Autocomplete.html
index de512e0cb8..437572dd7c 100644
--- a/src/open_inwoner/components/templates/components/Form/Autocomplete.html
+++ b/src/open_inwoner/components/templates/components/Form/Autocomplete.html
@@ -10,7 +10,7 @@
         <input id="{{ field.auto_id }}-autocomplete" name="{{ field.name }}-autocomplete" class="input" type="search" spellcheck=false autocomplete="off" autocapitalize="off" {% include "django/forms/widgets/attrs.html" with widget=field.field.widget %}>
 
         {% if field.help_text %}
-            <p class="utrecht-paragraph">{{ field.help_text }}</p>
+            <nl-paragraph>{{ field.help_text }}</nl-paragraph>
         {% endif %}
 
         {% if field.errors %}
diff --git a/src/open_inwoner/components/templates/components/Form/DateField.html b/src/open_inwoner/components/templates/components/Form/DateField.html
index c54c3f4e16..9bf24ac2fe 100644
--- a/src/open_inwoner/components/templates/components/Form/DateField.html
+++ b/src/open_inwoner/components/templates/components/Form/DateField.html
@@ -6,7 +6,7 @@
         {% if not no_label %}{{ field.label }}{% endif %}
         {{ field|addclass:"input datefield" }}
         {% if field.help_text and not no_help %}
-            <p class="utrecht-paragraph">{{ field.help_text }}</p>
+            <nl-paragraph>{{ field.help_text }}</nl-paragraph>
         {% endif %}
 
         {% if field.errors %}
diff --git a/src/open_inwoner/components/templates/components/Form/ImageCrop.html b/src/open_inwoner/components/templates/components/Form/ImageCrop.html
index dea4321474..223fba21fd 100644
--- a/src/open_inwoner/components/templates/components/Form/ImageCrop.html
+++ b/src/open_inwoner/components/templates/components/Form/ImageCrop.html
@@ -5,7 +5,7 @@
         {{ field.label }}
         {{ field|addclass:"image-ratio" }}
         {% if field.help_text and not no_help %}
-            <p class="utrecht-paragraph">{{ field.help_text }}</p>
+            <nl-paragraph>{{ field.help_text }}</nl-paragraph>
         {% endif %}
 
         {% if field.errors %}
diff --git a/src/open_inwoner/components/templates/components/Form/Input.html b/src/open_inwoner/components/templates/components/Form/Input.html
index 28a7a5f91f..bd831b3516 100644
--- a/src/open_inwoner/components/templates/components/Form/Input.html
+++ b/src/open_inwoner/components/templates/components/Form/Input.html
@@ -9,7 +9,7 @@
         </span>
         {% field_as_widget field "input" form_id %}
         {% if field.help_text and not no_help %}
-            <p class="utrecht-paragraph">{{ field.help_text }}</p>
+            <nl-paragraph>{{ field.help_text }}</nl-paragraph>
         {% endif %}
 
         {% if field.errors %}
diff --git a/src/open_inwoner/components/templates/components/Form/MultipleCheckbox.html b/src/open_inwoner/components/templates/components/Form/MultipleCheckbox.html
index 0ffeabf1ce..9f6cc21835 100644
--- a/src/open_inwoner/components/templates/components/Form/MultipleCheckbox.html
+++ b/src/open_inwoner/components/templates/components/Form/MultipleCheckbox.html
@@ -8,7 +8,7 @@
     </div>
 
     {% if field.help_text %}
-        <p class="utrecht-paragraph">{{ field.help_text }}</p>
+        <nl-paragraph>{{ field.help_text }}</nl-paragraph>
     {% endif %}
 
     {% if field.errors %}
diff --git a/src/open_inwoner/components/templates/components/Form/MultipleRadio.html b/src/open_inwoner/components/templates/components/Form/MultipleRadio.html
index 7a68c6459a..f0467af42b 100644
--- a/src/open_inwoner/components/templates/components/Form/MultipleRadio.html
+++ b/src/open_inwoner/components/templates/components/Form/MultipleRadio.html
@@ -15,7 +15,7 @@
     </fieldset>
 
     {% if field.help_text %}
-        <p class="utrecht-paragraph">{{ field.help_text }}</p>
+        <nl-paragraph>{{ field.help_text }}</nl-paragraph>
     {% endif %}
 
     {% if field.errors %}
diff --git a/src/open_inwoner/components/templates/components/Form/Textarea.html b/src/open_inwoner/components/templates/components/Form/Textarea.html
index 17822ae4f8..30db325416 100644
--- a/src/open_inwoner/components/templates/components/Form/Textarea.html
+++ b/src/open_inwoner/components/templates/components/Form/Textarea.html
@@ -5,7 +5,7 @@
         {% firstof field.label label %}
         {{ field|addclass:"textarea" }}
         {% if field.help_text %}
-            <p class="utrecht-paragraph">{{ field.help_text }}</p>
+            <nl-paragraph>{{ field.help_text }}</nl-paragraph>
         {% endif %}
 
         {% if field.errors %}
diff --git a/src/open_inwoner/components/templates/components/Header/AccessibilitySkipLink.html b/src/open_inwoner/components/templates/components/Header/AccessibilitySkipLink.html
index f7f25d469d..354104a9e0 100644
--- a/src/open_inwoner/components/templates/components/Header/AccessibilitySkipLink.html
+++ b/src/open_inwoner/components/templates/components/Header/AccessibilitySkipLink.html
@@ -1,9 +1,9 @@
 {% load i18n link_tags %}
 
-<p class="utrecht-paragraph">
+<nl-paragraph>
     {% trans "Doorgaan naar hoofdinhoud" as link_text %}
  <a href="#content" class="utrecht-skip-link utrecht-skip-link--visible-on-focus utrecht-skip-link--focus-visible" aria-label="{{ link_text }}" title="{{ link_text }}">
     <span class="skip-link__text">{{ link_text }}</span>
     <span aria-hidden="true" class="material-icons ">south</span>
     </a>
-</p>
+</nl-paragraph>
diff --git a/src/open_inwoner/components/templates/components/Header/Header.html b/src/open_inwoner/components/templates/components/Header/Header.html
index ddc359b4e3..94d21106c7 100644
--- a/src/open_inwoner/components/templates/components/Header/Header.html
+++ b/src/open_inwoner/components/templates/components/Header/Header.html
@@ -106,7 +106,7 @@
             </section>
 
             <section class="accessibility-header__mobilenav">
-                <p class="utrecht-paragraph">Toegankelijkheid:</p>
+                <nl-paragraph>Toegankelijkheid:</nl-paragraph>
                 {% accessibility_header request=request desktop=False %}
                 <span class="spacer"></span>
             </section>
diff --git a/src/open_inwoner/components/templates/components/List/ListItem.html b/src/open_inwoner/components/templates/components/List/ListItem.html
index 4f62ebf2f5..5a7818e366 100644
--- a/src/open_inwoner/components/templates/components/List/ListItem.html
+++ b/src/open_inwoner/components/templates/components/List/ListItem.html
@@ -5,7 +5,7 @@
     {% if strong %}
         <p class="utrecht-heading-4">{{ text }}</p>
     {% else %}
-        <p class="utrecht-paragraph">{{ text }}</p>
+        <nl-paragraph>{{ text }}</nl-paragraph>
     {% endif %}
     {% if description %}<p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-muted">{{ description }}</p>{% endif %}
     {% if href %}</a>{% endif %}
diff --git a/src/open_inwoner/components/templates/components/Map/Map.html b/src/open_inwoner/components/templates/components/Map/Map.html
index 8fb62be02a..ee76861d45 100644
--- a/src/open_inwoner/components/templates/components/Map/Map.html
+++ b/src/open_inwoner/components/templates/components/Map/Map.html
@@ -2,7 +2,7 @@
 
 <aside aria-hidden="true" class="{{ classes }}" aria-label="{% trans "Locatie kaart" %}">
     {% if title %}
-        <h3 {% if id %} id="{{ id }}"{% endif %} class="utrecht-heading-3">{{ title }}</h3>
+        <h3 {% if id %} id="{{ id }}"{% endif %} class="nl-heading nl-heading--level-3">{{ title }}</h3>
     {% endif %}
 
     <div class="map__leaflet" data-lat="{{ lat|unlocalize }}" data-lng="{{ lng|unlocalize }}" data-zoom="{{ zoom }}"{% if geojson_feature_collection %} data-geojson-feature-collection="{{ geojson_feature_collection|force_escape }}"{% endif %}></div>
diff --git a/src/open_inwoner/components/templates/components/Messages/Message.html b/src/open_inwoner/components/templates/components/Messages/Message.html
index 34003b3b07..8a9a693090 100644
--- a/src/open_inwoner/components/templates/components/Messages/Message.html
+++ b/src/open_inwoner/components/templates/components/Messages/Message.html
@@ -7,7 +7,7 @@
             {% url "inbox:download" uuid=message.uuid as download_url %}
             {% link href=download_url text=message.file secondary=True download=True %}
         {% else %}
-            <p class="utrecht-paragraph">{{ message.content|linebreaksbr }}</p>
+            <nl-paragraph>{{ message.content|linebreaksbr }}</nl-paragraph>
         {% endif %}
     </div>
 
diff --git a/src/open_inwoner/components/templates/components/Notification/Notification.html b/src/open_inwoner/components/templates/components/Notification/Notification.html
index 0955a3508f..6bd42ce1e8 100644
--- a/src/open_inwoner/components/templates/components/Notification/Notification.html
+++ b/src/open_inwoner/components/templates/components/Notification/Notification.html
@@ -14,8 +14,8 @@
          {% else %}
             role="status"
          {% endif %} tabindex="-1">
-        {% if title %}<h2 class="utrecht-heading-2">{{ title }}</h2>{% endif %}
-        {% if notification %}<p class="utrecht-paragraph">{{ notification }}</p>{% endif %}
+        {% if title %}<h2 class="nl-heading nl-heading--level-2">{{ title }}</h2>{% endif %}
+        {% if notification %}<nl-paragraph>{{ notification }}</nl-paragraph>{% endif %}
         {% if action %}{% button href=action text=action_text %}{% endif %}
         {% if contents %}
             {{ contents }}
diff --git a/src/open_inwoner/components/templates/components/Product/finder.html b/src/open_inwoner/components/templates/components/Product/finder.html
index e109662bd2..56e9e71af7 100644
--- a/src/open_inwoner/components/templates/components/Product/finder.html
+++ b/src/open_inwoner/components/templates/components/Product/finder.html
@@ -1,12 +1,12 @@
 {% load i18n grid_tags form_tags button_tags %}
 
 {% render_column span=6 compact=True extra_classes="product-finder" %}
-    <h2 class="utrecht-heading-2">{{configurable_text.home_page.home_product_finder_title}}</h2>
-    <p class="utrecht-paragraph">{{configurable_text.home_page.home_product_finder_intro|linebreaksbr}}</p>
+    <h2 class="nl-heading nl-heading--level-2">{{configurable_text.home_page.home_product_finder_title}}</h2>
+    <nl-paragraph>{{configurable_text.home_page.home_product_finder_intro|linebreaksbr}}</nl-paragraph>
 
     <div class="product-finder__form">
         {% if not conditions_done %}
-            <h3 class="utrecht-heading-3">{{ condition.question }}</h3>
+            <h3 class="nl-heading nl-heading--level-3">{{ condition.question }}</h3>
             {% if condition.rule %}
             <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-compact">{{ condition.rule }}</p>
             {% endif %}
diff --git a/src/open_inwoner/components/templatetags/card_tags.py b/src/open_inwoner/components/templatetags/card_tags.py
index 01b42deeac..ed68b58c30 100644
--- a/src/open_inwoner/components/templatetags/card_tags.py
+++ b/src/open_inwoner/components/templatetags/card_tags.py
@@ -12,7 +12,7 @@ def render_card(parser, token):
 
     Usage:
         {% render_card %}
-            <h1 class="utrecht-heading-1">{% trans 'Welkom' %}</h1>
+            <h1 class="nl-heading nl-heading--level-1">{% trans 'Welkom' %}</h1>
         {% endrender_card %}
 
     Variables:
diff --git a/src/open_inwoner/components/templatetags/string_tags.py b/src/open_inwoner/components/templatetags/string_tags.py
index 5662f1c87f..8d1d2a6237 100644
--- a/src/open_inwoner/components/templatetags/string_tags.py
+++ b/src/open_inwoner/components/templatetags/string_tags.py
@@ -25,7 +25,7 @@ def optional_paragraph(optional_text: str) -> str:
     if not optional_text:
         return ""
     return format_html(
-        '<p class="utrecht-paragraph">{optional_text}</p>'.format(
+        '<p class="nl-paragraph">{optional_text}</p>'.format(
             optional_text=linebreaksbr(optional_text)
         )
     )
diff --git a/src/open_inwoner/components/tests/test_messages.py b/src/open_inwoner/components/tests/test_messages.py
index 0de05bcc2f..0034fbf706 100644
--- a/src/open_inwoner/components/tests/test_messages.py
+++ b/src/open_inwoner/components/tests/test_messages.py
@@ -145,5 +145,5 @@ def test_status(self):
             - Header renders the correct status.
         """
         self.assertTextContent(
-            ".messages__header .utrecht-paragraph", "Dolor sit amet.", self.config
+            ".messages__header .nl-paragraph", "Dolor sit amet.", self.config
         )
diff --git a/src/open_inwoner/js/components/accessibility/enlarge_font.js b/src/open_inwoner/js/components/accessibility/enlarge_font.js
index 69946df63f..28f2a04024 100644
--- a/src/open_inwoner/js/components/accessibility/enlarge_font.js
+++ b/src/open_inwoner/js/components/accessibility/enlarge_font.js
@@ -12,7 +12,7 @@ export class EnlargeFont {
     // Target specific sizes that need to be enlarged
     this.styles = {
       bodyFontSizeDefault: '--utrecht-document-font-size',
-      paragraphFontSizeDefault: '--utrecht-paragraph-font-size',
+      paragraphFontSizeDefault: '--nl-paragraph-font-size',
       paragraphFontSizeSmall: '--utrecht-paragraph-small-font-size',
       headingThreeFontSize: '--utrecht-heading-3-font-size',
       headingFourFontSize: '--utrecht-heading-4-font-size',
diff --git a/src/open_inwoner/js/components/form/FileInput.js b/src/open_inwoner/js/components/form/FileInput.js
index fb332fdd44..1c70e582c1 100644
--- a/src/open_inwoner/js/components/form/FileInput.js
+++ b/src/open_inwoner/js/components/form/FileInput.js
@@ -322,13 +322,13 @@ export class FileInput extends Component {
           ${
             typeError && sizeError
               ? `
-              <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-small error">
+              <p class="nl-paragraph nl-paragraph--oip nl-paragraph--oip-small error">
                 <span aria-hidden="true" class="material-icons-outlined">warning_amber</span>
                 <span class="file-error__content file-error__type-size">Dit type bestand (${ext}) is ongeldig en te groot. Geldige bestandstypen zijn: ${uploadFileTypes}</span>
               </p>`
               : typeError || sizeError
                 ? `
-              <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-small error">
+              <p class="nl-paragraph nl-paragraph--oip nl-paragraph--oip-small error">
                 <span aria-hidden="true" class="material-icons-outlined">warning_amber</span>
                 ${
                   typeError
diff --git a/src/open_inwoner/js/components/map/index.js b/src/open_inwoner/js/components/map/index.js
index 2a5d774dec..483b41b40c 100644
--- a/src/open_inwoner/js/components/map/index.js
+++ b/src/open_inwoner/js/components/map/index.js
@@ -124,8 +124,8 @@ class Map {
         </h4>
       </div>
       <div class="leaflet-content-details container--no-margin">
-        <p class="utrecht-paragraph">${displayAddress1}</p>
-        <p class="utrecht-paragraph">${displayAddress2}</p>
+        <nl-paragraph>${displayAddress1}</nl-paragraph>
+        <nl-paragraph>${displayAddress2}</nl-paragraph>
         <a href="tel:${displayPhonenumber}" class="link link--secondary" aria-label=${displayPhonenumber} title=${displayPhonenumber}>
           <span class="link__text">${displayPhonenumber}</span>
         </a>
diff --git a/src/open_inwoner/js/components/siteimprove/tracking.js b/src/open_inwoner/js/components/siteimprove/tracking.js
index abf4c5361d..c5fa6bc682 100644
--- a/src/open_inwoner/js/components/siteimprove/tracking.js
+++ b/src/open_inwoner/js/components/siteimprove/tracking.js
@@ -236,7 +236,7 @@ const specificClickSelectors = {
     'Click',
     'Open Aanvraag via tegel',
   ],
-  '#cases-content > .card__grid a.card ul > li > p.utrecht-paragraph': [
+  '#cases-content > .card__grid a.card ul > li > p.nl-paragraph': [
     'event',
     'Mijn zaken',
     'Click',
@@ -254,7 +254,7 @@ const specificClickSelectors = {
     'Click',
     'Open Aanvraag via tegel',
   ],
-  '#cases-content > .card__grid a.card ul > li .utrecht-paragraph': [
+  '#cases-content > .card__grid a.card ul > li .nl-paragraph': [
     'event',
     'Mijn zaken',
     'Click',
@@ -282,7 +282,7 @@ const specificClickSelectors = {
     ],
   // Detail Case view
   '.file__delete': ['event', 'Aanvraag detail', 'Click', 'Verwijder bestand'],
-  '#statuses_component .status-list__notification-content > p.utrecht-paragraph.status-list__upload.status-list__upload--enabled > a':
+  '#statuses_component .status-list__notification-content > p.nl-paragraph.status-list__upload.status-list__upload--enabled > a':
     ['event', 'Aanvraag detail', 'Scroll click', 'Scroll omlaag'],
   '#cases-detail-content .column.column--start-4.column--span-6 > section.case-detail__documents > .file-list > ul > li > aside > div > div > *':
     ['event', 'Aanvraag detail', 'Click', 'Download document'],
@@ -384,13 +384,13 @@ const specificClickSelectors = {
     'Click',
     'Filter op persoon',
   ],
-  '#profile-section-mentors .list .list-item .utrecht-paragraph': [
+  '#profile-section-mentors .list .list-item .nl-paragraph': [
     'event',
     'Mijn Profiel Overzicht',
     'Click',
     'Ga naar Begeleiders via tegel',
   ],
-  '#profile-section-contacts .list .list-item .utrecht-paragraph': [
+  '#profile-section-contacts .list .list-item .nl-paragraph': [
     'event',
     'Mijn Profiel Overzicht',
     'Click',
@@ -477,11 +477,10 @@ const partialClickSelectors = {
       category: 'Mijn berichten',
       label: 'Click naar bericht',
     },
-  '.view--inbox-index #content .grid__sidebar ul li > a > p.utrecht-paragraph':
-    {
-      category: 'Mijn berichten',
-      label: 'Click naar bericht',
-    },
+  '.view--inbox-index #content .grid__sidebar ul li > a > p.nl-paragraph': {
+    category: 'Mijn berichten',
+    label: 'Click naar bericht',
+  },
   // Hide personal data from inputs
   'input[type="text"]': { label: 'Click in invoerveld' },
   'input[type="email"]': { label: 'Click in e-mail invoerveld' },
diff --git a/src/open_inwoner/openklant/tests/test_cms_plugins.py b/src/open_inwoner/openklant/tests/test_cms_plugins.py
index 4aa0a4e58c..3d6645f47d 100644
--- a/src/open_inwoner/openklant/tests/test_cms_plugins.py
+++ b/src/open_inwoner/openklant/tests/test_cms_plugins.py
@@ -58,10 +58,10 @@ def test_contact_form_plugin_authenticated_user(self):
         )
 
         self.assertIn(
-            f'<p class="utrecht-paragraph">{description_authenticated_user}</p>', html
+            f'<p class="nl-paragraph">{description_authenticated_user}</p>', html
         )
         self.assertNotIn(
-            f'<p class="utrecht-paragraph">{description_anonymous_user}</p>', html
+            f'<p class="nl-paragraph">{description_anonymous_user}</p>', html
         )
 
     def test_contact_form_plugin_anonymous_user(self):
@@ -93,8 +93,6 @@ def test_contact_form_plugin_anonymous_user(self):
         )
 
         self.assertNotIn(
-            f'<p class="utrecht-paragraph">{description_authenticated_user}</p>', html
-        )
-        self.assertIn(
-            f'<p class="utrecht-paragraph">{description_anonymous_user}</p>', html
+            f'<p class="nl-paragraph">{description_authenticated_user}</p>', html
         )
+        self.assertIn(f'<p class="nl-paragraph">{description_anonymous_user}</p>', html)
diff --git a/src/open_inwoner/react/components/HomePluginCard/HomePluginCard.scss b/src/open_inwoner/react/components/HomePluginCard/HomePluginCard.scss
index ee8794c65b..f419b1a536 100644
--- a/src/open_inwoner/react/components/HomePluginCard/HomePluginCard.scss
+++ b/src/open_inwoner/react/components/HomePluginCard/HomePluginCard.scss
@@ -61,7 +61,7 @@
       }
     }
 
-    .utrecht-heading-2 {
+    .nl-heading--level-2 {
       font-size: 20px;
       margin-block: 0;
     }
diff --git a/src/open_inwoner/react/components/HomePluginCard/HomePluginCard.tsx b/src/open_inwoner/react/components/HomePluginCard/HomePluginCard.tsx
index b451e4319d..b6dac0ba25 100644
--- a/src/open_inwoner/react/components/HomePluginCard/HomePluginCard.tsx
+++ b/src/open_inwoner/react/components/HomePluginCard/HomePluginCard.tsx
@@ -24,7 +24,7 @@ const HomePluginCard: AC<HomepageCardTypes> = ({
           <Heading
             id={!addressLineFirst ? id : undefined}
             class={clsx({
-              ['utrecht-heading-2']: !addressLineFirst,
+              ['nl-heading--level-2']: !addressLineFirst,
               ['utrecht-paragraph']: addressLineFirst,
             })}
           >
diff --git a/src/open_inwoner/react/components/HomePluginSection/HomePluginSection.scss b/src/open_inwoner/react/components/HomePluginSection/HomePluginSection.scss
index 8e249392a1..f31508fe0a 100644
--- a/src/open_inwoner/react/components/HomePluginSection/HomePluginSection.scss
+++ b/src/open_inwoner/react/components/HomePluginSection/HomePluginSection.scss
@@ -35,7 +35,7 @@
     overflow-wrap: var(--oip-plugin-header-overflow-wrap-mobile);
   }
 
-  .utrecht-heading-2 {
+  .nl-heading--level-2 {
     color: var(--oip-plugin-header-heading-color);
     font-family: var(--oip-plugin-header-heading-font-family);
     margin-block-start: var(--oip-plugin-header-heading-margin-block-start);
diff --git a/src/open_inwoner/react/components/HomePluginSection/HomePluginSection.tsx b/src/open_inwoner/react/components/HomePluginSection/HomePluginSection.tsx
index 0f0ca9653b..6261ebbc61 100644
--- a/src/open_inwoner/react/components/HomePluginSection/HomePluginSection.tsx
+++ b/src/open_inwoner/react/components/HomePluginSection/HomePluginSection.tsx
@@ -24,7 +24,9 @@ const HomePluginSection: AC<IHomePluginSectionProps> = ({
       <header class="plugin__header">
         {title && (
           <div class={showIndicator ? 'heading-2__indicator' : ''}>
-            <h2 class={`utrecht-heading-2 ${showIndicator ? 'indicator' : ''}`}>
+            <h2
+              class={`nl-heading--level-2 ${showIndicator ? 'indicator' : ''}`}
+            >
               {title}
             </h2>
             {showIndicator && (
diff --git a/src/open_inwoner/react/components/Paragraph/Paragraph.scss b/src/open_inwoner/react/components/Paragraph/Paragraph.scss
new file mode 100644
index 0000000000..3848c3834b
--- /dev/null
+++ b/src/open_inwoner/react/components/Paragraph/Paragraph.scss
@@ -0,0 +1,72 @@
+//.nl-paragraph {
+//  // Takes style values from NLDS community
+//
+//  &--oip {
+//    // Takes style values from our own design-tokens NPM package
+//    margin: 0;
+//
+//    // Extensions of the nl-paragraph component with OIP-specific styles.
+//    &-muted {
+//      color: var(--oip-nl-paragraph-muted-color);
+//    }
+//
+//    &-centered {
+//      text-align: var(--oip-nl-paragraph-centered-text-align);
+//    }
+//
+//    &-compact {
+//      margin-top: var(--oip-nl-paragraph-compact-margin-top);
+//      margin-bottom: var(--oip-nl-paragraph-compact-margin-bottom);
+//    }
+//
+//    &:empty {
+//      margin: 0 !important;
+//    }
+//  }
+//
+//  &:empty {
+//    margin: 0 !important;
+//  }
+//}
+//
+//*[class^='utrecht-heading'] + .nl-paragraph,
+//.oip-header-group + .nl-paragraph {
+//  margin-top: var(--spacing-small);
+//}
+//
+//.nl-paragraph + .nl-heading--level-1,
+//.nl-paragraph + .nl-heading--level-2,
+//.nl-paragraph + .nl-heading--level-3 {
+//  margin-top: var(--gutter-width);
+//}
+//
+//.nl-paragraph + .nl-heading--level-4 {
+//  margin-top: var(--row-height-small);
+//}
+//
+//.nl-paragraph + .nl-paragraph {
+//  margin-top: var(--font-line-height-body);
+//}
+//
+//.oip-tag-list + .nl-paragraph,
+//.nl-paragraph + .form {
+//  margin-top: var(--spacing-extra-large);
+//}
+//
+//.nl-paragraph .link {
+//  .content {
+//    text-decoration: underline;
+//  }
+//
+//  &:hover {
+//    text-decoration: none;
+//  }
+//
+//  .material-icons {
+//    text-decoration: none;
+//
+//    &:hover {
+//      text-decoration: none;
+//    }
+//  }
+//}
diff --git a/src/open_inwoner/react/components/Paragraph/Paragraph.tsx b/src/open_inwoner/react/components/Paragraph/Paragraph.tsx
new file mode 100644
index 0000000000..407386fa6d
--- /dev/null
+++ b/src/open_inwoner/react/components/Paragraph/Paragraph.tsx
@@ -0,0 +1,21 @@
+import { Paragraph as NLDSParagraph } from '@nl-design-system-candidate/paragraph-react';
+import { AnyComponent as AC } from 'preact';
+
+export interface IParagraphProps {
+  lead?: boolean;
+  extraClasses?: string; // To add more OIP modifiers
+}
+
+const Paragraph: AC<IParagraphProps> = ({
+  children,
+  lead = false,
+  extraClasses,
+}) => {
+  return (
+    <NLDSParagraph purpose={lead ? 'lead' : undefined} className={extraClasses}>
+      {children}
+    </NLDSParagraph>
+  );
+};
+
+export default Paragraph;
diff --git a/src/open_inwoner/react/components/Paragraph/constants.ts b/src/open_inwoner/react/components/Paragraph/constants.ts
new file mode 100644
index 0000000000..55e740fcc5
--- /dev/null
+++ b/src/open_inwoner/react/components/Paragraph/constants.ts
@@ -0,0 +1,12 @@
+import { WebComponentDefinition } from '@react/lib/web-component';
+import type { IParagraphProps } from './Paragraph';
+
+export const PARAGRAPH_DEFINITION: WebComponentDefinition<
+  'nl-paragraph',
+  IParagraphProps
+> = {
+  tagName: 'nl-paragraph',
+  propNames: ['lead', 'extraClasses'],
+  options: { shadow: false },
+  importer: () => import('./Paragraph'),
+};
diff --git a/src/open_inwoner/react/components/Paragraph/index.ts b/src/open_inwoner/react/components/Paragraph/index.ts
new file mode 100644
index 0000000000..6556eef46b
--- /dev/null
+++ b/src/open_inwoner/react/components/Paragraph/index.ts
@@ -0,0 +1,8 @@
+// Preact Component
+export { default as Paragraph } from './Paragraph';
+
+// Types
+export type { IParagraphProps } from './Paragraph';
+
+// Constants
+export * from './constants';
diff --git a/src/open_inwoner/react/lib/web-component/registry.ts b/src/open_inwoner/react/lib/web-component/registry.ts
index 492fb28926..7c892ef959 100644
--- a/src/open_inwoner/react/lib/web-component/registry.ts
+++ b/src/open_inwoner/react/lib/web-component/registry.ts
@@ -8,6 +8,7 @@ import { HOME_PLUGIN_CARD_ITEM_DEFINITION } from '@react/components/HomePluginCa
 import { ACCORDION_DEFINITION } from '@react/components/Accordion/constants';
 import { TABLE_DEFINITION } from '@react/components/Table/constants';
 import { CHART_DEFINITION } from '@react/components/Chart/constants';
+import { PARAGRAPH_DEFINITION } from '@react/components/Paragraph/constants';
 
 /**
  * Web component registry
@@ -31,4 +32,5 @@ export const WEB_COMPONENT_REGISTRY = {
   [ACCORDION_DEFINITION.tagName]: ACCORDION_DEFINITION,
   [TABLE_DEFINITION.tagName]: TABLE_DEFINITION,
   [CHART_DEFINITION.tagName]: CHART_DEFINITION,
+  [PARAGRAPH_DEFINITION.tagName]: PARAGRAPH_DEFINITION,
 } as const;
diff --git a/src/open_inwoner/scss/components/Actions/Actions.scss b/src/open_inwoner/scss/components/Actions/Actions.scss
index 661f6ade42..7e58eae862 100644
--- a/src/open_inwoner/scss/components/Actions/Actions.scss
+++ b/src/open_inwoner/scss/components/Actions/Actions.scss
@@ -108,7 +108,7 @@
       }
     }
 
-    .utrecht-heading-3 {
+    .nl-heading--level-3 {
       width: 100%;
     }
 
@@ -128,8 +128,8 @@
       color: var(--color-black);
     }
 
-    .utrecht-heading-3 .button,
-    .utrecht-heading-3 .button__inner-text {
+    .nl-heading--level-3 .button,
+    .nl-heading--level-3 .button__inner-text {
       font-family: inherit;
       font-size: inherit;
     }
diff --git a/src/open_inwoner/scss/components/Button/Button.scss b/src/open_inwoner/scss/components/Button/Button.scss
index 823da84b4e..61ff4ce9a8 100644
--- a/src/open_inwoner/scss/components/Button/Button.scss
+++ b/src/open_inwoner/scss/components/Button/Button.scss
@@ -227,9 +227,9 @@
   }
 }
 
-.utrecht-heading-2 + .button,
-.utrecht-heading-4 + .button,
-.utrecht-paragraph + .button {
+.nl-heading--level-2 + .button,
+.nl-heading--level-4 + .button,
+.nl-paragraph + .button {
   margin-top: var(--spacing-large);
 }
 
diff --git a/src/open_inwoner/scss/components/Card/Card.scss b/src/open_inwoner/scss/components/Card/Card.scss
index f86bbca16a..0aeac5e10b 100644
--- a/src/open_inwoner/scss/components/Card/Card.scss
+++ b/src/open_inwoner/scss/components/Card/Card.scss
@@ -272,7 +272,7 @@
     flex-wrap: wrap;
     justify-content: space-between;
 
-    .utrecht-paragraph {
+    .nl-paragraph {
       margin-top: 4px;
     }
 
@@ -321,7 +321,7 @@
     color: var(--oip-color-fg-heading);
     font-family: var(--utrecht-heading-font-family);
     font-size: var(--font-size-heading-card);
-    line-height: var(--utrecht-heading-4-line-height);
+    line-height: var(--heading--level-4-line-height);
     margin: 0;
   }
 
@@ -337,7 +337,7 @@
       width: 100%;
     }
 
-    .utrecht-paragraph {
+    .nl-paragraph {
       width: 100%;
     }
   }
diff --git a/src/open_inwoner/scss/components/CardContainer/CardContainer.scss b/src/open_inwoner/scss/components/CardContainer/CardContainer.scss
index 722d299834..1a56a9d3e2 100644
--- a/src/open_inwoner/scss/components/CardContainer/CardContainer.scss
+++ b/src/open_inwoner/scss/components/CardContainer/CardContainer.scss
@@ -41,8 +41,8 @@
 
 .card-container + .card-container,
 .map + .card-container,
-.card-container + .utrecht-heading-2,
-.utrecht-paragraph + .card-container {
+.card-container + .nl-heading--level-2,
+.nl-paragraph + .card-container {
   margin-top: var(--gutter-width);
 }
 
diff --git a/src/open_inwoner/scss/components/Cases/CaseDetail.scss b/src/open_inwoner/scss/components/Cases/CaseDetail.scss
index 6b08b6846c..910aabfe6d 100644
--- a/src/open_inwoner/scss/components/Cases/CaseDetail.scss
+++ b/src/open_inwoner/scss/components/Cases/CaseDetail.scss
@@ -29,7 +29,7 @@
       }
     }
 
-    .utrecht-heading-2.indicator {
+    .nl-heading--level-2.indicator {
       display: inline;
       font-size: var(--font-size-heading-2);
     }
@@ -71,7 +71,7 @@
     padding-left: 0;
   }
 
-  [id='cases-contact-form-content'] > .utrecht-heading-2 {
+  [id='cases-contact-form-content'] > .nl-heading--level-2 {
     margin-top: var(--spacing-extra-large);
   }
 
diff --git a/src/open_inwoner/scss/components/Cases/Cases.scss b/src/open_inwoner/scss/components/Cases/Cases.scss
index f1c987fe71..3d867d922f 100644
--- a/src/open_inwoner/scss/components/Cases/Cases.scss
+++ b/src/open_inwoner/scss/components/Cases/Cases.scss
@@ -52,7 +52,7 @@
     cursor: pointer;
   }
 
-  > .utrecht-paragraph--oip-title-text {
+  > .nl-paragraph--oip-title-text {
     padding-top: var(--spacing-large);
     padding-bottom: var(--spacing-giant);
   }
diff --git a/src/open_inwoner/scss/components/Dashboard/Dashboard.scss b/src/open_inwoner/scss/components/Dashboard/Dashboard.scss
index 7985ae1800..07edfa2613 100644
--- a/src/open_inwoner/scss/components/Dashboard/Dashboard.scss
+++ b/src/open_inwoner/scss/components/Dashboard/Dashboard.scss
@@ -47,6 +47,6 @@
   }
 }
 
-.utrecht-heading-1 + .dashboard {
+.nl-heading--level-1 + .dashboard {
   margin-top: var(--spacing-large);
 }
diff --git a/src/open_inwoner/scss/components/Faq/_Faq.scss b/src/open_inwoner/scss/components/Faq/_Faq.scss
index ae5ba8f3c1..5c3ee1e03f 100644
--- a/src/open_inwoner/scss/components/Faq/_Faq.scss
+++ b/src/open_inwoner/scss/components/Faq/_Faq.scss
@@ -2,12 +2,12 @@
   border-radius: var(--border-radius);
   width: 100%;
 
-  .utrecht-heading-2 {
+  .nl-heading--level-2 {
     margin-top: var(--row-height);
     margin-bottom: var(--spacing-large);
   }
 
-  .utrecht-heading-3 {
+  .nl-heading--level-3 {
     margin: 0;
   }
 
@@ -65,7 +65,7 @@
   &__answer--open {
     margin-top: var(--spacing-large) !important;
 
-    .utrecht-paragraph .link {
+    .nl-paragraph .link {
       display: inline;
 
       [class*='icons'] {
@@ -92,6 +92,6 @@
 /// Contextual.
 ///
 
-.utrecht-heading-1 + .faq {
+.nl-heading--level-1 + .faq {
   margin-top: var(--row-height);
 }
diff --git a/src/open_inwoner/scss/components/File/File.scss b/src/open_inwoner/scss/components/File/File.scss
index 0f036dc837..3b774932a2 100644
--- a/src/open_inwoner/scss/components/File/File.scss
+++ b/src/open_inwoner/scss/components/File/File.scss
@@ -51,7 +51,7 @@
   }
 
   &__file .link,
-  &__file .utrecht-paragraph {
+  &__file .nl-paragraph {
     padding: var(--spacing-large);
     box-sizing: border-box;
   }
diff --git a/src/open_inwoner/scss/components/File/FileList.scss b/src/open_inwoner/scss/components/File/FileList.scss
index d0fc4c095a..85c35470df 100644
--- a/src/open_inwoner/scss/components/File/FileList.scss
+++ b/src/open_inwoner/scss/components/File/FileList.scss
@@ -1,13 +1,13 @@
 .file-list {
   margin-bottom: var(--row-height);
 
-  .utrecht-heading-1 {
+  .nl-heading--level-1 {
     &--bottom {
       margin-bottom: calc(var(--row-height) / 2) !important;
     }
   }
 
-  .utrecht-heading-4 {
+  .nl-heading--level-4 {
     margin-bottom: var(--spacing-large);
   }
 
@@ -34,11 +34,11 @@
 /// Contextual
 ///
 
-.file-list + .utrecht-heading-2,
-.file-list + .utrecht-paragraph {
+.file-list + .nl-heading--level-2,
+.file-list + .nl-paragraph {
   margin-top: var(--spacing-large);
 }
 
-.utrecht-heading-2 + .file-list {
+.nl-heading--level-2 + .file-list {
   margin-top: var(--spacing-extra-large);
 }
diff --git a/src/open_inwoner/scss/components/Form/FileInput.scss b/src/open_inwoner/scss/components/Form/FileInput.scss
index 13ddb7b811..df9aa8f076 100644
--- a/src/open_inwoner/scss/components/Form/FileInput.scss
+++ b/src/open_inwoner/scss/components/Form/FileInput.scss
@@ -91,13 +91,13 @@
     }
   }
 
-  > .utrecht-paragraph {
+  > .nl-paragraph {
     margin: calc(0.5 * var(--gutter-width)) 0;
     display: block;
     text-align: center;
   }
 
-  .utrecht-heading-4 {
+  .nl-heading--level-4 {
     margin-top: var(--spacing-large);
     margin-bottom: calc(0.5 * var(--spacing-large));
   }
@@ -109,7 +109,7 @@
     .file__file.error {
       border-color: var(--color-red-notification);
 
-      .utrecht-paragraph {
+      .nl-paragraph {
         color: var(--color-gray-dark-900);
       }
 
@@ -134,7 +134,7 @@
       }
     }
 
-    .utrecht-paragraph--oip-small {
+    .nl-paragraph--oip-small {
       margin-top: var(--spacing-small);
       margin-bottom: var(--spacing-small);
 
diff --git a/src/open_inwoner/scss/components/Form/FileInputForm.scss b/src/open_inwoner/scss/components/Form/FileInputForm.scss
index b774b7f08e..3656191737 100644
--- a/src/open_inwoner/scss/components/Form/FileInputForm.scss
+++ b/src/open_inwoner/scss/components/Form/FileInputForm.scss
@@ -43,7 +43,7 @@
     display: block;
     margin: 0;
 
-    &-selection__heading.utrecht-heading-3 {
+    &-selection__heading.nl-heading--level-3 {
       color: var(--font-color-heading-3);
       font-family: var(--font-family-heading-3);
       font-size: var(--font-size-heading-3);
diff --git a/src/open_inwoner/scss/components/Form/Form.scss b/src/open_inwoner/scss/components/Form/Form.scss
index 8f04a97222..9628fb8a45 100644
--- a/src/open_inwoner/scss/components/Form/Form.scss
+++ b/src/open_inwoner/scss/components/Form/Form.scss
@@ -98,11 +98,11 @@
     transform: translateY(-5px);
   }
 
-  &__control > .label .utrecht-paragraph:last-child {
+  &__control > .label .nl-paragraph:last-child {
     font-size: var(--font-size-body-small);
   }
 
-  &__control > .label .utrecht-paragraph.utrecht-paragraph--oip-compact {
+  &__control > .label .nl-paragraph.nl-paragraph--oip-compact {
     font-size: var(--font-size-body);
   }
 
diff --git a/src/open_inwoner/scss/components/Grid/Grid.scss b/src/open_inwoner/scss/components/Grid/Grid.scss
index a39467f724..cd2f5651a5 100644
--- a/src/open_inwoner/scss/components/Grid/Grid.scss
+++ b/src/open_inwoner/scss/components/Grid/Grid.scss
@@ -22,7 +22,7 @@
     .plugin {
       padding-top: var(--row-height);
 
-      .utrecht-heading-1 {
+      .nl-heading--level-1 {
         margin-bottom: var(--spacing-large);
       }
 
@@ -31,7 +31,7 @@
       }
 
       &.userfeed {
-        .utrecht-heading-2 {
+        .nl-heading--level-2 {
           margin-bottom: 0;
         }
       }
diff --git a/src/open_inwoner/scss/components/Header/AnchorMenu.scss b/src/open_inwoner/scss/components/Header/AnchorMenu.scss
index 328ab3fec5..c6fc3caa35 100644
--- a/src/open_inwoner/scss/components/Header/AnchorMenu.scss
+++ b/src/open_inwoner/scss/components/Header/AnchorMenu.scss
@@ -1,9 +1,9 @@
-.utrecht-heading-1,
-.utrecht-heading-2,
-.utrecht-heading-3,
-.utrecht-heading-4,
-.utrecht-heading-5,
-.utrecht-heading-6 {
+.nl-heading--level-1,
+.nl-heading--level-2,
+.nl-heading--level-3,
+.nl-heading--level-4,
+.nl-heading--level-5,
+.nl-heading--level-6 {
   scroll-margin-top: 122px;
 
   @media (min-width: 768px) {
@@ -158,20 +158,3 @@
     }
   }
 }
-
-///
-/// Legacy scroll styling
-///
-
-.h1,
-.h2,
-.h3,
-.h4,
-.h5,
-.h6 {
-  scroll-margin-top: 122px;
-
-  @media (min-width: 768px) {
-    scroll-margin-top: var(--spacing-medium);
-  }
-}
diff --git a/src/open_inwoner/scss/components/Header/Header.scss b/src/open_inwoner/scss/components/Header/Header.scss
index e3fba0ee0e..dff21f9a68 100644
--- a/src/open_inwoner/scss/components/Header/Header.scss
+++ b/src/open_inwoner/scss/components/Header/Header.scss
@@ -399,7 +399,7 @@ $vm: var(--spacing-large);
     width: 100%;
 
     // Cut text and display dots if username is very long
-    > .utrecht-paragraph {
+    > .nl-paragraph {
       display: flex !important;
       max-width: 250px;
       overflow: hidden;
@@ -420,7 +420,7 @@ $vm: var(--spacing-large);
     @media (min-width: 768px) {
       justify-content: flex-end;
 
-      > .utrecht-paragraph {
+      > .nl-paragraph {
         display: flex;
         max-width: initial;
         overflow: initial;
@@ -549,7 +549,7 @@ $vm: var(--spacing-large);
               margin: var(--spacing-extra-large) 0;
             }
 
-            .utrecht-paragraph {
+            .nl-paragraph {
               display: flex;
               align-items: center;
               justify-content: space-between;
diff --git a/src/open_inwoner/scss/components/HeaderGroup/HeaderGroup.scss b/src/open_inwoner/scss/components/HeaderGroup/HeaderGroup.scss
index 9315a54d4b..c3929d70f6 100644
--- a/src/open_inwoner/scss/components/HeaderGroup/HeaderGroup.scss
+++ b/src/open_inwoner/scss/components/HeaderGroup/HeaderGroup.scss
@@ -24,9 +24,9 @@
     overflow-wrap: break-word;
   }
 
-  .utrecht-heading-2 + .button,
-  .utrecht-heading-4 + .button,
-  .utrecht-paragraph + .button {
+  .nl-heading--level-2 + .button,
+  .nl-heading--level-4 + .button,
+  .nl-paragraph + .button {
     margin-top: 0;
   }
 }
diff --git a/src/open_inwoner/scss/components/List/_ListItem.scss b/src/open_inwoner/scss/components/List/_ListItem.scss
index 555775e001..94293cb389 100644
--- a/src/open_inwoner/scss/components/List/_ListItem.scss
+++ b/src/open_inwoner/scss/components/List/_ListItem.scss
@@ -42,11 +42,11 @@
     align-items: flex-start;
   }
 
-  .utrecht-heading-4 {
+  .nl-heading--level-4 {
     margin: 0;
   }
 
-  .utrecht-paragraph + .utrecht-paragraph {
+  .nl-paragraph + .nl-paragraph {
     margin-top: 0;
   }
 
diff --git a/src/open_inwoner/scss/components/Map/_Map.scss b/src/open_inwoner/scss/components/Map/_Map.scss
index d58c4d0e97..ced10d138e 100644
--- a/src/open_inwoner/scss/components/Map/_Map.scss
+++ b/src/open_inwoner/scss/components/Map/_Map.scss
@@ -13,12 +13,12 @@
   }
 }
 
-.utrecht-paragraph + .map {
+.nl-paragraph + .map {
   margin-top: var(--spacing-large);
 }
 
 .leaflet-content-name {
-  & > .utrecht-heading-4 {
+  & > .nl-heading--level-4 {
     margin: 0;
   }
 }
@@ -32,7 +32,7 @@
   &.container--no-margin {
     margin-top: var(--spacing-small);
 
-    & > .utrecht-paragraph {
+    & > .nl-paragraph {
       margin: 0 !important;
     }
 
diff --git a/src/open_inwoner/scss/components/Map/_leaflet.scss b/src/open_inwoner/scss/components/Map/_leaflet.scss
index 78ea356953..74648d56b2 100644
--- a/src/open_inwoner/scss/components/Map/_leaflet.scss
+++ b/src/open_inwoner/scss/components/Map/_leaflet.scss
@@ -275,7 +275,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
   color: var(--color-secondary);
 }
 
-.leaflet-container .utrecht-heading-4 .link--primary {
+.leaflet-container .nl-heading--level-4 .link--primary {
   color: var(--color-black);
 }
 .leaflet-container a.leaflet-active {
diff --git a/src/open_inwoner/scss/components/Messages/_Messages.scss b/src/open_inwoner/scss/components/Messages/_Messages.scss
index 22ae72bc72..3d4fadacf9 100644
--- a/src/open_inwoner/scss/components/Messages/_Messages.scss
+++ b/src/open_inwoner/scss/components/Messages/_Messages.scss
@@ -17,7 +17,7 @@
     overflow-y: auto;
   }
 
-  &__header .utrecht-paragraph {
+  &__header .nl-paragraph {
     margin-top: 0 !important;
   }
 
@@ -33,7 +33,7 @@
     justify-content: center;
   }
 
-  &__day-header > .utrecht-paragraph:first-child {
+  &__day-header > .nl-paragraph:first-child {
     display: flex;
     align-items: center;
     width: 100%;
@@ -42,19 +42,19 @@
     white-space: nowrap;
   }
 
-  &__day-header > .utrecht-paragraph:first-child:before,
-  &__day-header > .utrecht-paragraph:first-child:after {
+  &__day-header > .nl-paragraph:first-child:before,
+  &__day-header > .nl-paragraph:first-child:after {
     border-top: 1px solid var(--color-gray-lightest);
     content: '';
     margin: var(--spacing-large);
     width: 100%;
   }
 
-  &__day-header > .utrecht-paragraph:first-child:before {
+  &__day-header > .nl-paragraph:first-child:before {
     margin-left: 0;
   }
 
-  &__day-header > .utrecht-paragraph:first-child:after {
+  &__day-header > .nl-paragraph:first-child:after {
     margin-right: 0;
   }
 
@@ -85,7 +85,7 @@
     .message__body {
       border: 1px solid transparent;
 
-      .utrecht-paragraph::before {
+      .nl-paragraph::before {
         background-color: var(--color-primary);
         border-radius: var(--border-radius);
         bottom: 21px;
diff --git a/src/open_inwoner/scss/components/Notification/_Notification.scss b/src/open_inwoner/scss/components/Notification/_Notification.scss
index 9a3fccaa57..0eb8a41a83 100644
--- a/src/open_inwoner/scss/components/Notification/_Notification.scss
+++ b/src/open_inwoner/scss/components/Notification/_Notification.scss
@@ -62,12 +62,12 @@
     cursor: pointer;
   }
 
-  &:not(#{&}--contents) .utrecht-heading-2 {
+  &:not(#{&}--contents) .nl-heading--level-2 {
     line-height: var(--font-size-heading-2);
     color: var(--notification-color-text);
   }
 
-  &:not(#{&}--contents) .utrecht-paragraph {
+  &:not(#{&}--contents) .nl-paragraph {
     color: var(--notification-color-text);
   }
 
diff --git a/src/open_inwoner/scss/components/Plan/Plan.scss b/src/open_inwoner/scss/components/Plan/Plan.scss
index 929adcb1da..8825d01da8 100644
--- a/src/open_inwoner/scss/components/Plan/Plan.scss
+++ b/src/open_inwoner/scss/components/Plan/Plan.scss
@@ -8,7 +8,7 @@
   }
 
   &__upload-document {
-    .utrecht-heading-3 {
+    .nl-heading--level-3 {
       margin-top: var(--spacing-giant);
     }
 
diff --git a/src/open_inwoner/scss/components/Plan/PlanContact.scss b/src/open_inwoner/scss/components/Plan/PlanContact.scss
index be5c8f4a89..2bf4e016b8 100644
--- a/src/open_inwoner/scss/components/Plan/PlanContact.scss
+++ b/src/open_inwoner/scss/components/Plan/PlanContact.scss
@@ -46,7 +46,7 @@
     display: flex;
     flex-direction: column-reverse;
 
-    .utrecht-paragraph:last-child {
+    .nl-paragraph:last-child {
       font-size: var(--font-size-body-small);
       margin: var(--spacing-large) 0;
     }
diff --git a/src/open_inwoner/scss/components/Product/product-detail.scss b/src/open_inwoner/scss/components/Product/product-detail.scss
index d97cf7327d..9197b23900 100644
--- a/src/open_inwoner/scss/components/Product/product-detail.scss
+++ b/src/open_inwoner/scss/components/Product/product-detail.scss
@@ -42,6 +42,6 @@
   }
 }
 
-.utrecht-paragraph--oip-summary {
+.nl-paragraph--oip-summary {
   margin-bottom: var(--gutter-width) !important;
 }
diff --git a/src/open_inwoner/scss/components/Profile/_personal-overview.scss b/src/open_inwoner/scss/components/Profile/_personal-overview.scss
index 900a605596..1eae06e568 100644
--- a/src/open_inwoner/scss/components/Profile/_personal-overview.scss
+++ b/src/open_inwoner/scss/components/Profile/_personal-overview.scss
@@ -15,7 +15,7 @@
     }
   }
 
-  .utrecht-heading-2 + .grid {
+  .nl-heading--level-2 + .grid {
     margin-top: 0;
   }
 
diff --git a/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss b/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss
index 1a7741c19e..4d1fd8ee2e 100644
--- a/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss
+++ b/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss
@@ -6,11 +6,11 @@
       padding: 0;
     }
 
-    *[class^='utrecht-heading'] + .utrecht-paragraph--oip-compact {
+    *[class^='utrecht-heading'] + .nl-paragraph--oip-compact {
       margin-top: 0;
     }
 
-    .utrecht-paragraph + .form {
+    .nl-paragraph + .form {
       margin-top: 0;
     }
   }
@@ -32,7 +32,7 @@
     border-top: var(--border-width-thin) solid var(--color-gray);
   }
 
-  .utrecht-heading-2 {
+  .nl-heading--level-2 {
     margin-top: var(--row-height);
     margin-bottom: var(--spacing-large);
   }
diff --git a/src/open_inwoner/scss/components/SearchResults/SearchResults.scss b/src/open_inwoner/scss/components/SearchResults/SearchResults.scss
index 4f8bfca826..d8fc8e9bab 100644
--- a/src/open_inwoner/scss/components/SearchResults/SearchResults.scss
+++ b/src/open_inwoner/scss/components/SearchResults/SearchResults.scss
@@ -33,11 +33,11 @@
     line-height: var(--font-line-height-body);
     text-decoration: none;
 
-    .utrecht-heading-3.search-results__item-title {
+    .nl-heading--level-3.search-results__item-title {
       margin: 0 0 var(--spacing-large) 0;
     }
 
-    .utrecht-paragraph {
+    .nl-paragraph {
       margin: 0;
     }
   }
@@ -66,7 +66,7 @@
         padding-inline-start: 0;
       }
 
-      .utrecht-paragraph,
+      .nl-paragraph,
       .ul .li {
         color: var(--color-info-darker);
       }
diff --git a/src/open_inwoner/scss/components/Section/SectionBordered.scss b/src/open_inwoner/scss/components/Section/SectionBordered.scss
index feef823f86..dd03486177 100644
--- a/src/open_inwoner/scss/components/Section/SectionBordered.scss
+++ b/src/open_inwoner/scss/components/Section/SectionBordered.scss
@@ -20,7 +20,7 @@
     }
   }
 
-  .utrecht-heading-2 + .grid {
+  .nl-heading--level-2 + .grid {
     margin-top: 0;
   }
 }
diff --git a/src/open_inwoner/scss/components/Sitemap/sitemap.scss b/src/open_inwoner/scss/components/Sitemap/sitemap.scss
index 39b52e4f0a..e12f0a2f19 100644
--- a/src/open_inwoner/scss/components/Sitemap/sitemap.scss
+++ b/src/open_inwoner/scss/components/Sitemap/sitemap.scss
@@ -29,7 +29,7 @@
   &__section {
     margin-top: var(--spacing-large);
 
-    .utrecht-heading-2 {
+    .nl-heading--level-2 {
       margin-bottom: var(--spacing-medium);
     }
   }
diff --git a/src/open_inwoner/scss/components/Social/Social.scss b/src/open_inwoner/scss/components/Social/Social.scss
index 3b67467f67..14464c4973 100644
--- a/src/open_inwoner/scss/components/Social/Social.scss
+++ b/src/open_inwoner/scss/components/Social/Social.scss
@@ -7,7 +7,7 @@
   grid-row-gap: var(--spacing-small);
   width: 0;
 
-  .utrecht-heading-4 {
+  .nl-heading--level-4 {
     grid-column-end: span 4;
   }
 
diff --git a/src/open_inwoner/scss/components/Status/_StatusList.scss b/src/open_inwoner/scss/components/Status/_StatusList.scss
index 8daa8d0cfa..d5c911b29a 100644
--- a/src/open_inwoner/scss/components/Status/_StatusList.scss
+++ b/src/open_inwoner/scss/components/Status/_StatusList.scss
@@ -227,6 +227,6 @@
 /// Contextual
 ///
 
-.utrecht-heading-2 + .status-list {
+.nl-heading--level-2 + .status-list {
   margin-top: var(--spacing-large);
 }
diff --git a/src/open_inwoner/scss/components/TabPanel/TabPanel.scss b/src/open_inwoner/scss/components/TabPanel/TabPanel.scss
index fe4f1c6301..9fe102233f 100644
--- a/src/open_inwoner/scss/components/TabPanel/TabPanel.scss
+++ b/src/open_inwoner/scss/components/TabPanel/TabPanel.scss
@@ -174,7 +174,7 @@
     scroll-margin-top: 150px;
 
     .tab__heading-4 {
-      font-size: var(--utrecht-heading-4-font-size);
+      font-size: var(--heading--level-4-font-size);
       margin-bottom: var(--spacing-large);
       margin-top: var(--spacing-extra-large);
     }
diff --git a/src/open_inwoner/scss/components/Table/Tabled.scss b/src/open_inwoner/scss/components/Table/Tabled.scss
index a0b8ac3c33..9604ecc1ba 100644
--- a/src/open_inwoner/scss/components/Table/Tabled.scss
+++ b/src/open_inwoner/scss/components/Table/Tabled.scss
@@ -40,7 +40,7 @@
     }
   }
 
-  &.tabled--flexible + .utrecht-heading-2 {
+  &.tabled--flexible + .nl-heading--level-2 {
     margin: var(--row-height) 0 0 0;
   }
 
@@ -133,10 +133,10 @@
   }
 
   &__inner {
-    > .utrecht-heading-3 {
+    > .nl-heading--level-3 {
       margin-top: var(--spacing-giant);
     }
-    > .utrecht-paragraph strong {
+    > .nl-paragraph strong {
       display: inline-block;
       margin-top: var(--spacing-giant);
     }
diff --git a/src/open_inwoner/scss/components/Typography/H1.scss b/src/open_inwoner/scss/components/Typography/H1.scss
index 2a4061e1ac..0901ffbc9f 100644
--- a/src/open_inwoner/scss/components/Typography/H1.scss
+++ b/src/open_inwoner/scss/components/Typography/H1.scss
@@ -1,21 +1,23 @@
 @use '@utrecht/heading-1-css/dist/index.css';
 @use 'microscope-sass';
 
-.utrecht-heading-1 {
-  // Reverse font-family fallback order
-  font-family:
-    var(--utrecht-heading-font-family), var(--utrecht-heading-1-font-family);
+.nl-heading {
+  &.nl-heading--level-1 {
+    // Reverse font-family fallback order
+    font-family:
+      var(--utrecht-heading-font-family), var(--nl-heading--level-1-font-family);
 
-  @include microscope-sass.mobile-only {
-    word-break: normal;
-    overflow-wrap: break-word;
-  }
+    @include microscope-sass.mobile-only {
+      word-break: normal;
+      overflow-wrap: break-word;
+    }
 
-  &:first-of-type {
-    margin: 0;
+    &:first-of-type {
+      margin: 0;
+    }
   }
 }
 
-.utrecht-heading-1 + .card-container {
+.nl-heading--level-1 + .card-container {
   margin-top: var(--gutter-width);
 }
diff --git a/src/open_inwoner/scss/components/Typography/H2.scss b/src/open_inwoner/scss/components/Typography/H2.scss
index 69911a08c8..d01f22df31 100644
--- a/src/open_inwoner/scss/components/Typography/H2.scss
+++ b/src/open_inwoner/scss/components/Typography/H2.scss
@@ -1,34 +1,36 @@
 @use '@utrecht/heading-2-css/dist/index.css';
 @use 'microscope-sass';
 
-.utrecht-heading-2 {
-  // Reverse font-family fallback order
-  font-family:
-    var(--utrecht-heading-font-family), var(--utrecht-heading-2-font-family);
-
-  &--extra {
-    margin: var(--row-height) 0 var(--spacing-medium) 0;
-  }
-
-  @include microscope-sass.mobile-only {
-    word-break: normal;
-    overflow-wrap: break-word;
-  }
-
-  .link {
-    font-size: var(--utrecht-heading-2-font-size);
-  }
-
-  // when CMS is in edit mode
-  &.cms-plugin {
-    margin-top: var(--gutter-width);
-  }
-
-  &.indicator {
-    display: inline-block;
-    justify-content: flex-start;
-    overflow: visible;
-    position: relative;
+.nl-heading {
+  &.nl-heading--level-2 {
+    // Reverse font-family fallback order
+    font-family:
+      var(--utrecht-heading-font-family), var(--utrecht-heading-2-font-family);
+
+    &--extra {
+      margin: var(--row-height) 0 var(--spacing-medium) 0;
+    }
+
+    @include microscope-sass.mobile-only {
+      word-break: normal;
+      overflow-wrap: break-word;
+    }
+
+    .link {
+      font-size: var(--utrecht-heading-2-font-size);
+    }
+
+    // when CMS is in edit mode
+    &.cms-plugin {
+      margin-top: var(--gutter-width);
+    }
+
+    &.indicator {
+      display: inline-block;
+      justify-content: flex-start;
+      overflow: visible;
+      position: relative;
+    }
   }
 }
 
@@ -41,13 +43,13 @@
 /// Contextual.
 ///
 
-.card + .utrecht-heading-2,
-.dashboard + .utrecht-heading-2,
-.status-list + .utrecht-heading-2,
-.table + .utrecht-heading-2 {
+.card + .nl-heading--level-2,
+.dashboard + .nl-heading--level-2,
+.status-list + .nl-heading--level-2,
+.table + .nl-heading--level-2 {
   margin-top: var(--row-height);
 }
 
-.utrecht-paragraph + .utrecht-heading-2 {
+.nl-paragraph + .nl-heading--level-2 {
   margin-top: var(--spacing-large);
 }
diff --git a/src/open_inwoner/scss/components/Typography/H3.scss b/src/open_inwoner/scss/components/Typography/H3.scss
index d5e9d09f41..f827800333 100644
--- a/src/open_inwoner/scss/components/Typography/H3.scss
+++ b/src/open_inwoner/scss/components/Typography/H3.scss
@@ -1,11 +1,12 @@
 @use '@utrecht/heading-3-css/dist/index.css';
 
-.utrecht-heading-3 {
+.nl-heading--level-3 {
   // Reverse font-family fallback order
   font-family:
-    var(--utrecht-heading-font-family), var(--utrecht-heading-3-font-family);
+    var(--utrecht-heading-font-family),
+    var(--nl-heading nl-heading--level-3-font-family);
 }
 
-.utrecht-paragraph + .utrecht-heading-3 {
+.nl-paragraph + .nl-heading--level-3 {
   margin-top: var(--spacing-large);
 }
diff --git a/src/open_inwoner/scss/components/Typography/H4.scss b/src/open_inwoner/scss/components/Typography/H4.scss
index 126564ba56..39d575f80f 100644
--- a/src/open_inwoner/scss/components/Typography/H4.scss
+++ b/src/open_inwoner/scss/components/Typography/H4.scss
@@ -1,7 +1,7 @@
 @use '@utrecht/heading-4-css/dist/index.css';
 
-.utrecht-heading-4 {
+.nl-heading--level-4 {
   // Reverse font-family fallback order
   font-family:
-    var(--utrecht-heading-font-family), var(--utrecht-heading-4-font-family);
+    var(--utrecht-heading-font-family), var(--heading--level-4-font-family);
 }
diff --git a/src/open_inwoner/scss/components/Typography/Link.scss b/src/open_inwoner/scss/components/Typography/Link.scss
index 53b329434a..64f46dfdd0 100644
--- a/src/open_inwoner/scss/components/Typography/Link.scss
+++ b/src/open_inwoner/scss/components/Typography/Link.scss
@@ -47,7 +47,7 @@
     color: var(--color-secondary);
   }
 
-  .leaflet-container .utrecht-heading-4 &--primary {
+  .leaflet-container .nl-heading--level-4 &--primary {
     color: var(--color-black);
   }
 
diff --git a/src/open_inwoner/scss/components/Typography/LinkList.scss b/src/open_inwoner/scss/components/Typography/LinkList.scss
index a5c3ff4dda..93c51219c0 100644
--- a/src/open_inwoner/scss/components/Typography/LinkList.scss
+++ b/src/open_inwoner/scss/components/Typography/LinkList.scss
@@ -1,7 +1,7 @@
 @use '@utrecht/link-list-css/dist/index.css';
 
 .link-list {
-  .utrecht-heading-4 {
+  .nl-heading--level-4 {
     margin-bottom: var(--spacing-large);
   }
 
diff --git a/src/open_inwoner/scss/components/Typography/P.scss b/src/open_inwoner/scss/components/Typography/P.scss
index 9e1f83f09d..878488c55a 100644
--- a/src/open_inwoner/scss/components/Typography/P.scss
+++ b/src/open_inwoner/scss/components/Typography/P.scss
@@ -1,24 +1,24 @@
 @use '@utrecht/paragraph-css/dist/index.css';
 
-.utrecht-paragraph {
+.nl-paragraph {
   // Takes style values from NLDS community
 
   &--oip {
     // Takes style values from our own design-tokens NPM package
     margin: 0;
 
-    // Extensions of the utrecht-paragraph component with OIP-specific styles.
+    // Extensions of the nl-paragraph component with OIP-specific styles.
     &-muted {
-      color: var(--oip-utrecht-paragraph-muted-color);
+      color: var(--oip-nl-paragraph-muted-color);
     }
 
     &-centered {
-      text-align: var(--oip-utrecht-paragraph-centered-text-align);
+      text-align: var(--oip-nl-paragraph-centered-text-align);
     }
 
     &-compact {
-      margin-top: var(--oip-utrecht-paragraph-compact-margin-top);
-      margin-bottom: var(--oip-utrecht-paragraph-compact-margin-bottom);
+      margin-top: var(--oip-nl-paragraph-compact-margin-top);
+      margin-bottom: var(--oip-nl-paragraph-compact-margin-bottom);
     }
 
     &:empty {
@@ -31,31 +31,31 @@
   }
 }
 
-body [class^='utrecht-heading'] + .utrecht-paragraph,
-.oip-header-group + .utrecht-paragraph {
+body [class^='utrecht-heading'] + .nl-paragraph,
+.oip-header-group + .nl-paragraph {
   margin-top: var(--spacing-small);
 }
 
-.utrecht-paragraph + .utrecht-heading-1,
-.utrecht-paragraph + .utrecht-heading-2,
-.utrecht-paragraph + .utrecht-heading-3 {
+.nl-paragraph + .nl-heading--level-1,
+.nl-paragraph + .nl-heading--level-2,
+.nl-paragraph + .nl-heading--level-3 {
   margin-top: var(--gutter-width);
 }
 
-.utrecht-paragraph + .utrecht-heading-4 {
+.nl-paragraph + .nl-heading--level-4 {
   margin-top: var(--row-height-small);
 }
 
-.utrecht-paragraph + .utrecht-paragraph {
+.nl-paragraph + .nl-paragraph {
   margin-top: var(--font-line-height-body);
 }
 
-.oip-tag-list + .utrecht-paragraph,
-.utrecht-paragraph + .form {
+.oip-tag-list + .nl-paragraph,
+.nl-paragraph + .form {
   margin-top: var(--spacing-extra-large);
 }
 
-.utrecht-paragraph .link {
+.nl-paragraph .link {
   .content {
     text-decoration: underline;
   }
diff --git a/src/open_inwoner/scss/nlds/_nlds.scss b/src/open_inwoner/scss/nlds/_nlds.scss
new file mode 100644
index 0000000000..4ec91b87f0
--- /dev/null
+++ b/src/open_inwoner/scss/nlds/_nlds.scss
@@ -0,0 +1,3 @@
+// NLDS core components
+@import '@nl-design-system-candidate/heading-css/dist/html/heading.css';
+@import '@nl-design-system-candidate/paragraph-css/dist/html/paragraph.css';
diff --git a/src/open_inwoner/scss/overwrites/_ckeditor.scss b/src/open_inwoner/scss/overwrites/_ckeditor.scss
index 60f5e65b1e..96b164f9c9 100644
--- a/src/open_inwoner/scss/overwrites/_ckeditor.scss
+++ b/src/open_inwoner/scss/overwrites/_ckeditor.scss
@@ -1,11 +1,11 @@
 .li .link,
-.utrecht-paragraph .link {
+.nl-paragraph .link {
   text-decoration: underline;
   display: inline;
 }
 
 // Style icons separately
-.utrecht-paragraph .link *[class*='icons'] {
+.nl-paragraph .link *[class*='icons'] {
   text-decoration: none;
   transform: scale(0.75);
   display: inline-block;
diff --git a/src/open_inwoner/scss/screen.scss b/src/open_inwoner/scss/screen.scss
index 6f2aa29e12..6b7e3c4811 100644
--- a/src/open_inwoner/scss/screen.scss
+++ b/src/open_inwoner/scss/screen.scss
@@ -12,3 +12,8 @@
 @use 'views';
 @use 'overwrites';
 @use './_fixes';
+
+// NLDS
+// requires @import instead of @use due to NLDS package gen.
+@import url('../../../node_modules/@nl-design-system-candidate/heading-css/dist/html/heading.css');
+@import url('../../../node_modules/@nl-design-system-candidate/paragraph-css/dist/html/paragraph.css');
diff --git a/src/open_inwoner/scss/views/App.scss b/src/open_inwoner/scss/views/App.scss
index 2d07f1885d..5c4bee2760 100644
--- a/src/open_inwoner/scss/views/App.scss
+++ b/src/open_inwoner/scss/views/App.scss
@@ -207,25 +207,25 @@
   --font-color-heading-1: var(--font-color-heading);
   --font-family-heading-1: var(--font-family-heading);
   --font-line-height-heading-1: 41px;
-  --font-size-heading-1: var(--utrecht-heading-1-font-size);
+  --font-size-heading-1: var(--nl-heading--level-1-font-size);
   --font-weight-heading-1: var(--font-weight-heading);
 
   --font-color-heading-2: var(--font-color-heading);
   --font-family-heading-2: var(--font-family-heading);
   --font-line-height-heading-2: 34px;
-  --font-size-heading-2: var(--utrecht-heading-2-font-size);
+  --font-size-heading-2: var(--nl-heading--level-2-font-size);
   --font-weight-heading-2: var(--font-weight-heading);
 
   --font-color-heading-3: var(--font-color-heading);
   --font-family-heading-3: var(--font-family-heading);
   --font-line-height-heading-3: 30px;
-  --font-size-heading-3: var(--utrecht-heading-3-font-size);
+  --font-size-heading-3: var(--nl-heading--level-3-font-size);
   --font-weight-heading-3: var(--font-weight-heading);
 
   --font-color-heading-4: var(--font-color-heading);
   --font-family-heading-4: var(--font-family-heading);
   --font-line-height-heading-4: 26px;
-  --font-size-heading-4: var(--utrecht-heading-4-font-size);
+  --font-size-heading-4: var(--nl-heading--level-4-font-size);
   --font-weight-heading-4: var(--font-weight-heading);
 
   --font-size-heading-card: 18px;
diff --git a/src/open_inwoner/scss/views/_product_detail.scss b/src/open_inwoner/scss/views/_product_detail.scss
index 4f7469d79d..15d0090831 100644
--- a/src/open_inwoner/scss/views/_product_detail.scss
+++ b/src/open_inwoner/scss/views/_product_detail.scss
@@ -1,5 +1,5 @@
 .view--products-category_product_detail {
-  .utrecht-heading-4 {
+  .nl-heading--level-4 {
     margin: 21px 0;
   }
 
diff --git a/src/open_inwoner/templates/403.html b/src/open_inwoner/templates/403.html
index 7d49a0cf44..03d97f72fe 100644
--- a/src/open_inwoner/templates/403.html
+++ b/src/open_inwoner/templates/403.html
@@ -6,8 +6,8 @@
 
 {% block content %}
   {% if exception %}
-    <h1 class="utrecht-heading-1">{{ exception }}</h1>
+    <h1 class="nl-heading nl-heading--level-1">{{ exception }}</h1>
   {% else %}
-    <h1 class="utrecht-heading-1">Sorry, you don't have access to this page (403)</h1>
+    <h1 class="nl-heading nl-heading--level-1">Sorry, you don't have access to this page (403)</h1>
   {% endif %}
 {% endblock content %}
diff --git a/src/open_inwoner/templates/404.html b/src/open_inwoner/templates/404.html
index 5c16d17dc5..37a7c6830d 100644
--- a/src/open_inwoner/templates/404.html
+++ b/src/open_inwoner/templates/404.html
@@ -6,6 +6,6 @@
 {% endblock robots %}
 
 {% block content %}
-<h1 class="utrecht-heading-1">{% trans "Sorry, the requested page could not be found (404)" %}</h1>
-<p class="utrecht-paragraph">{% link href="/" text=_("Ga naar de home pagina") %}</p>
+<h1 class="nl-heading nl-heading--level-1">{% trans "Sorry, the requested page could not be found (404)" %}</h1>
+    <nl-paragraph>{% link href="/" text=_("Ga naar de home pagina") %}</nl-paragraph>
 {% endblock content %}
diff --git a/src/open_inwoner/templates/500.html b/src/open_inwoner/templates/500.html
index 5d9412ec8b..a0f3dc18fa 100644
--- a/src/open_inwoner/templates/500.html
+++ b/src/open_inwoner/templates/500.html
@@ -130,7 +130,7 @@
 </head>
 
 <body>
-  <h1 class="utrecht-heading-1">Sorry, a server error has occurred (500)</h1>
+  <h1 class="nl-heading nl-heading--level-1">Sorry, a server error has occurred (500)</h1>
   <p class="lead">We have been automatically notified about the problem and will investigate as soon as possible.</p>
   <p class="lead">
     <a href="/" class="button">Back to home</a>
diff --git a/src/open_inwoner/templates/503.html b/src/open_inwoner/templates/503.html
index 5f934abd18..c3f77c0f8b 100644
--- a/src/open_inwoner/templates/503.html
+++ b/src/open_inwoner/templates/503.html
@@ -191,7 +191,7 @@
       <div class="cover-container">
 
         <div class="inner cover">
-          <h1 class="utrecht-heading-1">Sorry, this website is closed for repair / is unavailable (503)</h1>
+          <h1 class="nl-heading nl-heading--level-1">Sorry, this website is closed for repair / is unavailable (503)</h1>
           <p class="lead">Please try again in a few moments.</p>
           <p class="lead">
             <a href="/" class="btn btn-lg btn-default">Back to home</a>
diff --git a/src/open_inwoner/templates/account_blocked.html b/src/open_inwoner/templates/account_blocked.html
index c544a97498..a7eeb017c2 100644
--- a/src/open_inwoner/templates/account_blocked.html
+++ b/src/open_inwoner/templates/account_blocked.html
@@ -6,7 +6,7 @@
 
 {% block content %}
 
-<h1 class="utrecht-heading-1">Sorry, your account has been blocked</h1>
+<h1 class="nl-heading nl-heading--level-1">Sorry, your account has been blocked</h1>
 
 <p>If you want your account unblocked, please contact the webmaster.</p>
 
diff --git a/src/open_inwoner/templates/admin/base_site.html b/src/open_inwoner/templates/admin/base_site.html
index ac061e841e..d14ef0604c 100644
--- a/src/open_inwoner/templates/admin/base_site.html
+++ b/src/open_inwoner/templates/admin/base_site.html
@@ -13,7 +13,7 @@
 
 {% block branding %}
     {% version as build %}
-    <h1 class="utrecht-heading-1" id="site-name">
+    <h1 class="nl-heading nl-heading--level-1" id="site-name">
         <a href="{% url 'admin:index' %}">
             {{ site_header|default:_('Administration') }}
 
diff --git a/src/open_inwoner/templates/cms/banner/banner_text_plugin.html b/src/open_inwoner/templates/cms/banner/banner_text_plugin.html
index 2e00668181..bf391c8102 100644
--- a/src/open_inwoner/templates/cms/banner/banner_text_plugin.html
+++ b/src/open_inwoner/templates/cms/banner/banner_text_plugin.html
@@ -1,9 +1,9 @@
 <section class="plugin banner__text">
     <div class="grid__welcome">
-        <h1 class="utrecht-heading-1">{{ instance.title }} {{ request.user.get_full_name }}</h1>
+        <h1 class="nl-heading nl-heading--level-1">{{ instance.title }} {{ request.user.get_full_name }}</h1>
 
         {% if instance.description %}
-            <p class="utrecht-paragraph">{{ instance.description|linebreaksbr }}</p>
+            <nl-paragraph>{{ instance.description|linebreaksbr }}</nl-paragraph>
         {% endif %}
     </div>
 </section>
diff --git a/src/open_inwoner/templates/cms/cms_flatpage.html b/src/open_inwoner/templates/cms/cms_flatpage.html
index 7992fcef38..3a52a01328 100644
--- a/src/open_inwoner/templates/cms/cms_flatpage.html
+++ b/src/open_inwoner/templates/cms/cms_flatpage.html
@@ -1,4 +1,4 @@
 {% load render_tags cms_tags %}
 
-<h1 class="utrecht-heading-1">{{ cms_flatpage_plugin.title }}</h1>
-<p class="utrecht-paragraph">{{ cms_flatpage_plugin.content|prosemirror_content|safe }}</p>
+<h1 class="nl-heading nl-heading--level-1">{{ cms_flatpage_plugin.title }}</h1>
+<nl-paragraph>{{ cms_flatpage_plugin.content|prosemirror_content|safe }}</nl-paragraph>
diff --git a/src/open_inwoner/templates/cms/collaborate/active_plans_plugin.html b/src/open_inwoner/templates/cms/collaborate/active_plans_plugin.html
index 04bcc27f29..74d14c2a66 100644
--- a/src/open_inwoner/templates/cms/collaborate/active_plans_plugin.html
+++ b/src/open_inwoner/templates/cms/collaborate/active_plans_plugin.html
@@ -2,7 +2,7 @@
 {% if request.user.is_authenticated %}
     <section class="plugin plugin__plans">
         <header class="oip-header-group">
-            <h2 class="utrecht-heading-2">{% trans 'Samenwerken' %}</h2>
+            <h2 class="nl-heading nl-heading--level-2">{% trans 'Samenwerken' %}</h2>
             {% button href="collaborate:plan_list" text=_("Naar samenwerken") transparent=True icon="arrow_forward" icon_position="after" %}
         </header>
         {% if plans %}
@@ -10,9 +10,9 @@ <h2 class="utrecht-heading-2">{% trans 'Samenwerken' %}</h2>
             {% for plan in plans %}
                 {% render_card image_object_fit="cover" href=plan.get_absolute_url %}
                 <div class="card__content">
-                    <h3 class="utrecht-heading-3 card__heading-3 plan-list">{{ plan.title }}</h3>
-                    <p class="utrecht-paragraph">{{ plan.goal|truncatewords:20 }}</p>
-                    <p class="utrecht-paragraph">{{ plan.description|truncatewords:20 }}</p>
+                    <h3 class="nl-heading nl-heading--level-3 card__heading-3 plan-list">{{ plan.title }}</h3>
+                    <nl-paragraph>{{ plan.goal|truncatewords:20 }}</nl-paragraph>
+                    <nl-paragraph>{{ plan.description|truncatewords:20 }}</nl-paragraph>
                     <span class="spacer"></span>
                     <span class="button button--icon-before button--transparent">
                     {% icon icon="arrow_forward" outlined=True %}
@@ -22,7 +22,7 @@ <h3 class="utrecht-heading-3 card__heading-3 plan-list">{{ plan.title }}</h3>
             {% endfor %}
         </div>
         {% else %}
-            <p class="utrecht-paragraph">{{ configurable_text.plans_page.plans_no_plans_message }}</p>
+            <nl-paragraph>{{ configurable_text.plans_page.plans_no_plans_message }}</nl-paragraph>
         {% endif %}
     </section>
 {% endif %}
diff --git a/src/open_inwoner/templates/cms/contactform/form_inner.html b/src/open_inwoner/templates/cms/contactform/form_inner.html
index 855d5d6293..ceaa7fae2d 100644
--- a/src/open_inwoner/templates/cms/contactform/form_inner.html
+++ b/src/open_inwoner/templates/cms/contactform/form_inner.html
@@ -1,6 +1,6 @@
 {% load cms_tags i18n render_tags %}
 {% block content %}
-    <h1 class="utrecht-heading-1">{% trans "Contactformulier" %}</h1>
-    <p class="utrecht-paragraph">{{ form_description|prosemirror_content|safe }}</p>
+    <h1 class="nl-heading nl-heading--level-1">{% trans "Contactformulier" %}</h1>
+    <nl-paragraph>{{ form_description|prosemirror_content|safe }}</nl-paragraph>
     {% include "components/Contact/ContactForm.html" with form_object=form has_form_configuration=has_form_configuration csrf_token=csrf_token only %}
 {% endblock content %}
diff --git a/src/open_inwoner/templates/cms/fullwidth.html b/src/open_inwoner/templates/cms/fullwidth.html
index b5f77a7019..845e03187c 100644
--- a/src/open_inwoner/templates/cms/fullwidth.html
+++ b/src/open_inwoner/templates/cms/fullwidth.html
@@ -33,8 +33,8 @@
                     {% block content %}
                         {% if not request.user.is_authenticated %}
                             <section class="grid__welcome">
-                                <h1 class="utrecht-heading-1">{{ configurable_text.home_page.home_welcome_title }}</h1>
-                                <p class="utrecht-paragraph">{{ configurable_text.home_page.home_welcome_intro|linebreaksbr }}</p>
+                                <h1 class="nl-heading nl-heading--level-1">{{ configurable_text.home_page.home_welcome_title }}</h1>
+                                <nl-paragraph>{{ configurable_text.home_page.home_welcome_intro|linebreaksbr }}</nl-paragraph>
                             </section>
                         {% else %}
                             {% placeholder 'banner_text' %}
diff --git a/src/open_inwoner/templates/cms/plugins/links/external-links.html b/src/open_inwoner/templates/cms/plugins/links/external-links.html
index 5e83c4491d..4299143b6e 100644
--- a/src/open_inwoner/templates/cms/plugins/links/external-links.html
+++ b/src/open_inwoner/templates/cms/plugins/links/external-links.html
@@ -2,7 +2,7 @@
 
 {% if link_plugin and link_plugin.child_plugin_instances %}
     <section class="plugin external-links">
-       <h2 class="utrecht-heading-2">{{ link_plugin.title }}</h2>
+       <h2 class="nl-heading nl-heading--level-2">{{ link_plugin.title }}</h2>
        <ul class="external-links__list">
         {% for link in link_plugin.child_plugin_instances %}
             <li class="external-links__list-item">
diff --git a/src/open_inwoner/templates/cms/plugins/tasks/tasks.html b/src/open_inwoner/templates/cms/plugins/tasks/tasks.html
index 5ed225f17e..38098f6962 100644
--- a/src/open_inwoner/templates/cms/plugins/tasks/tasks.html
+++ b/src/open_inwoner/templates/cms/plugins/tasks/tasks.html
@@ -4,7 +4,7 @@
 <section class="plugin userfeed">
     <header class="userfeed__header">
         <div class="heading-2__indicator">
-            <h2 class="utrecht-heading-2">
+            <h2 class="nl-heading nl-heading--level-2">
                 {{ instance.title }}
             </h2>
         </div>
@@ -16,7 +16,7 @@ <h2 class="utrecht-heading-2">
                 <div class="userfeed__marker userfeed__marker--info"></div>
 
                 <div class="card__body card__body--tabled">
-                <h3 class="utrecht-heading-3 userfeed__title">Status: {{ task.status }} {% if task.soort %}- Soort: {{ task.soort }}{% endif %}</h3>
+                <h3 class="nl-heading nl-heading--level-3 userfeed__title">Status: {{ task.status }} {% if task.soort %}- Soort: {{ task.soort }}{% endif %}</h3>
                   {% include "components/StatusIndicator/StatusIndicator.html" with status_indicator=info status_indicator_text="Let op!" %}
                     <p class="userfeed-card__description">
                         <span class="status">{{ task.titel }}</span>
diff --git a/src/open_inwoner/templates/cms/plugins/userfeed/userfeed.html b/src/open_inwoner/templates/cms/plugins/userfeed/userfeed.html
index af73fb656e..aadbd7f67c 100644
--- a/src/open_inwoner/templates/cms/plugins/userfeed/userfeed.html
+++ b/src/open_inwoner/templates/cms/plugins/userfeed/userfeed.html
@@ -4,7 +4,7 @@
 <section class="plugin userfeed">
     <header class="userfeed__header">
         <div class="heading-2__indicator">
-            <h2 class="utrecht-heading-2 {% if userfeed.action_required %}indicator{% endif %}">
+            <h2 class="nl-heading nl-heading--level-2 {% if userfeed.action_required %}indicator{% endif %}">
                 {{ instance.title }}
             </h2>
             {% if userfeed.action_required %}{% icon icon="fiber_manual_record" outlined=False extra_classes="file__file--recent" %}{% endif %}
diff --git a/src/open_inwoner/templates/cms/products/categories_plugin.html b/src/open_inwoner/templates/cms/products/categories_plugin.html
index b28a18f68c..8bc6abfd3b 100644
--- a/src/open_inwoner/templates/cms/products/categories_plugin.html
+++ b/src/open_inwoner/templates/cms/products/categories_plugin.html
@@ -2,12 +2,12 @@
 {% if categories %}
     <section class="plugin plugin__categories">
         <header class="oip-header-group">
-            <h2 class="utrecht-heading-2">{{ configurable_text.home_page.home_theme_title }}</h2>
+            <h2 class="nl-heading nl-heading--level-2">{{ configurable_text.home_page.home_theme_title }}</h2>
             {% trans "Alle onderwerpen" as button_text %}
             {% button href='products:category_list' text=button_text transparent=True icon="arrow_forward" icon_position="after" %}
         </header>
 
-        <p class="utrecht-paragraph">{{ configurable_text.home_page.home_theme_intro|linebreaksbr }}</p>
+        <nl-paragraph>{{ configurable_text.home_page.home_theme_intro|linebreaksbr }}</nl-paragraph>
 
         {% has_sidenav_items as has_menu %}
         {% if request.user.is_authenticated %}
diff --git a/src/open_inwoner/templates/cms/products/product_location_plugin.html b/src/open_inwoner/templates/cms/products/product_location_plugin.html
index a574cffdd4..f09f409283 100644
--- a/src/open_inwoner/templates/cms/products/product_location_plugin.html
+++ b/src/open_inwoner/templates/cms/products/product_location_plugin.html
@@ -1,8 +1,8 @@
 {% load i18n map_tags %}
 
 <section class="plugin plugin__locations">
-    <h2 class="utrecht-heading-2">{{ configurable_text.home_page.home_map_title }}</h2>
-    <p class="utrecht-paragraph">{{ configurable_text.home_page.home_map_intro|linebreaksbr }}</p>
+    <h2 class="nl-heading nl-heading--level-2">{{ configurable_text.home_page.home_map_title }}</h2>
+    <nl-paragraph>{{ configurable_text.home_page.home_map_intro|linebreaksbr }}</nl-paragraph>
 
     {% with centroid=product_locations.get_centroid %}
         {% map centroid.lat centroid.lng geojson_feature_collection=product_locations.get_geojson_feature_collection %}
diff --git a/src/open_inwoner/templates/cms/questionnaire/questionnaire_plugin.html b/src/open_inwoner/templates/cms/questionnaire/questionnaire_plugin.html
index 7572387983..50ce6509b7 100644
--- a/src/open_inwoner/templates/cms/questionnaire/questionnaire_plugin.html
+++ b/src/open_inwoner/templates/cms/questionnaire/questionnaire_plugin.html
@@ -2,7 +2,7 @@
 
 {% if questionnaire_roots.exists %}
     <section class="plugin plugin__questionnaire">
-        <h2 class="utrecht-heading-2">{{ configurable_text.home_page.home_questionnaire_title }}</h2>
+        <h2 class="nl-heading nl-heading--level-2">{{ configurable_text.home_page.home_questionnaire_title }}</h2>
         {% optional_paragraph configurable_text.home_page.home_questionnaire_intro %}
         {% include "components/Questionnaire/Questionnaire.html" with root_nodes=questionnaire_roots only %}
     </section>
diff --git a/src/open_inwoner/templates/digid_eherkenning/mock/base.html b/src/open_inwoner/templates/digid_eherkenning/mock/base.html
index a85a2ccee9..0b0cb00ed7 100644
--- a/src/open_inwoner/templates/digid_eherkenning/mock/base.html
+++ b/src/open_inwoner/templates/digid_eherkenning/mock/base.html
@@ -36,7 +36,7 @@
             <section class='main-content' id='main_content' style='outline: none' tabindex='-1'>
                 <div class="heading_with_icon"><img alt="Vignet" class="digid-logo"
                     src="{% static 'digid-mock/assets/digid_eo_rgb.svg' %}"/>
-                    <h1 class="utrecht-heading-2">
+                    <h1 class="nl-heading nl-heading--level-2">
                         <strong>Inloggen bij</strong> <br/> {{ app_title }}
                     </h1>
                 </div>
diff --git a/src/open_inwoner/templates/export/plans/plan_export.html b/src/open_inwoner/templates/export/plans/plan_export.html
index 04a1747cb7..f2b78653af 100644
--- a/src/open_inwoner/templates/export/plans/plan_export.html
+++ b/src/open_inwoner/templates/export/plans/plan_export.html
@@ -3,7 +3,7 @@
 
 {% block content %}
 
-    <h1 class="utrecht-heading-1">{% trans "Plan" %} {{ object.title }}</h1>
+    <h1 class="nl-heading nl-heading--level-1">{% trans "Plan" %} {{ object.title }}</h1>
 
     <table class="table">
         <tr>
@@ -41,12 +41,12 @@ <h1 class="utrecht-heading-1">{% trans "Plan" %} {{ object.title }}</h1>
     </table>
 
 
-    <h2 class="utrecht-heading-2 utrecht-heading-2--extra">{% trans "Bestanden" %}</h2>
+    <h2 class="nl-heading nl-heading--level-2 utrecht-heading-2--extra">{% trans "Bestanden" %}</h2>
     {% if object.get_all_files %}
         {% file_table files=object.get_all_files download_view="profile:documents_download" %}
     {% endif %}
 
-    <h2 class="utrecht-heading-2 utrecht-heading-2--extra">{% trans "Acties" %}</h2>
+    <h2 class="nl-heading nl-heading--level-2 utrecht-heading-2--extra">{% trans "Acties" %}</h2>
     {% include "export/include/actions.html" with actions=object.actions.visible %}
 
 {% endblock %}
diff --git a/src/open_inwoner/templates/export/profile/action_export.html b/src/open_inwoner/templates/export/profile/action_export.html
index 426178fc50..a173182dc2 100644
--- a/src/open_inwoner/templates/export/profile/action_export.html
+++ b/src/open_inwoner/templates/export/profile/action_export.html
@@ -3,7 +3,7 @@
 
 {% block content %}
 
-    <h1 class="utrecht-heading-1">{% trans "Action" %} {{ object }}</h1>
+    <h1 class="nl-heading nl-heading--level-1">{% trans "Action" %} {{ object }}</h1>
 
     {% url "profile:action_download" uuid=object.uuid as download_url %}
 
diff --git a/src/open_inwoner/templates/export/profile/action_list_export.html b/src/open_inwoner/templates/export/profile/action_list_export.html
index 10e4f85474..703827c8e4 100644
--- a/src/open_inwoner/templates/export/profile/action_list_export.html
+++ b/src/open_inwoner/templates/export/profile/action_list_export.html
@@ -3,7 +3,7 @@
 
 {% block content %}
 
-    <h1 class="utrecht-heading-1">{% trans "Mijn acties" %}</h1>
+    <h1 class="nl-heading nl-heading--level-1">{% trans "Mijn acties" %}</h1>
 
     {% include "export/include/actions.html" with actions=object_list %}
 
diff --git a/src/open_inwoner/templates/export/questionnaire/questionnaire_export.html b/src/open_inwoner/templates/export/questionnaire/questionnaire_export.html
index bf319b41bb..4172062283 100644
--- a/src/open_inwoner/templates/export/questionnaire/questionnaire_export.html
+++ b/src/open_inwoner/templates/export/questionnaire/questionnaire_export.html
@@ -3,29 +3,29 @@
 
 {% block content %}
     <div class="qa">
-        <h1 class="utrecht-heading-1">{% trans "Zelfdiagnose results" %}</h1>
+        <h1 class="nl-heading nl-heading--level-1">{% trans "Zelfdiagnose results" %}</h1>
         <ol>
             {% for step in steps %}
             <li>
                 <h4>{% trans "Question:" %}</h4>
-                <p class="utrecht-paragraph">{{ step.question }}</p>
+                <nl-paragraph>{{ step.question }}</nl-paragraph>
                 <h4>{% trans "Answer:" %}</h4>
-                <p class="utrecht-paragraph">{{ step.answer }}</p>
+                <nl-paragraph>{{ step.answer }}</nl-paragraph>
             </li>
             {% endfor %}
         </ol>
     </div>
 
     <div class="qa_results">
-        <h4 class="utrecht-heading-4">{{ last_step.question }}</h4>
-        <p class="utrecht-paragraph">{{ last_step.content.html|safe}}</p>
+        <h4 class="nl-heading nl-heading--level-4">{{ last_step.question }}</h4>
+        <nl-paragraph>{{ last_step.content.html|safe}}</nl-paragraph>
         {% if related_products.exists %}
             <h4>{% trans "Related products:" %}</h4>
             <ol>
                 {% for product in related_products %}
                 <li>
                     <h4>{{ product.name }}</h4>
-                    <p class="utrecht-paragraph">{{ product.summary }}</p>
+                    <nl-paragraph>{{ product.summary }}</nl-paragraph>
                 </li>
                 {% endfor %}
             </ol>
diff --git a/src/open_inwoner/templates/flatpages/default.html b/src/open_inwoner/templates/flatpages/default.html
index 0653832512..554038cba8 100644
--- a/src/open_inwoner/templates/flatpages/default.html
+++ b/src/open_inwoner/templates/flatpages/default.html
@@ -4,6 +4,6 @@
 {% block title %}{% with page_title=flatpage.title %}{{ block.super }}{% endwith %}{% endblock %}
 
 {% block content %}
-  <h1 class="utrecht-heading-1">{{ flatpage.title }}</h1>
-  <p class="utrecht-paragraph">{{ flatpage.content|prosemirror_content|safe }}</p>
+  <h1 class="nl-heading nl-heading--level-1">{{ flatpage.title }}</h1>
+    <nl-paragraph>{{ flatpage.content|prosemirror_content|safe }}</nl-paragraph>
 {% endblock content %}
diff --git a/src/open_inwoner/templates/master.html b/src/open_inwoner/templates/master.html
index 3d50718148..68bf76bfd7 100644
--- a/src/open_inwoner/templates/master.html
+++ b/src/open_inwoner/templates/master.html
@@ -158,7 +158,7 @@
             <div class="footer__header">
                 {% if footer.logo_title %}
                     <div class="footer__logo-text">
-                        <p class="utrecht-paragraph">{{ footer.logo_title|linebreaksbr }}</p>
+                        <nl-paragraph>{{ footer.logo_title|linebreaksbr }}</nl-paragraph>
                     </div>
                 {% endif %}
                 {% if footer.logo and footer.logo.url %}
diff --git a/src/open_inwoner/templates/pages/cases/403.html b/src/open_inwoner/templates/pages/cases/403.html
index 7ecd304f0c..a37bf23c51 100644
--- a/src/open_inwoner/templates/pages/cases/403.html
+++ b/src/open_inwoner/templates/pages/cases/403.html
@@ -1,4 +1,4 @@
 {% load i18n link_tags %}
 
-<h1 class="utrecht-heading-1">{% trans "Sorry, you don't have access to this page (403)" %}</h1>
-<p class="utrecht-paragraph">{% link href="pages-root" text=_("Ga naar de home pagina") %}</p>
+<h1 class="nl-heading nl-heading--level-1">{% trans "Sorry, you don't have access to this page (403)" %}</h1>
+<nl-paragraph>{% link href="pages-root" text=_("Ga naar de home pagina") %}</nl-paragraph>
diff --git a/src/open_inwoner/templates/pages/cases/contact_form.html b/src/open_inwoner/templates/pages/cases/contact_form.html
index 2447350082..3443b83f85 100644
--- a/src/open_inwoner/templates/pages/cases/contact_form.html
+++ b/src/open_inwoner/templates/pages/cases/contact_form.html
@@ -1,13 +1,13 @@
 {% load i18n form_tags button_tags icon_tags %}
 
-<h2 class="utrecht-heading-2" id="contact">{% trans 'Stel een vraag' %}</h2>
-<p class="utrecht-paragraph">
+<h2 class="nl-heading nl-heading--level-2" id="contact">{% trans 'Stel een vraag' %}</h2>
+<nl-paragraph>
     {% blocktrans trimmed %}
     Door middel van dit formulier kunt u een vraag stellen over deze zaak.
     U dient ten minste uw telefoonnummer of uw e-mailadres in te vullen.
     Indien u uw e-mailadres invult krijgt u een bevestiging per mail.
     {% endblocktrans %}
-</p>
+</nl-paragraph>
 
 {% render_form form=contact_form method="POST" id="contact-form" hxpost=hxpost_contact_action hxtarget="#cases-contact-form" extra_classes="contact-form" %}
     {% csrf_token %}
diff --git a/src/open_inwoner/templates/pages/cases/document_form.html b/src/open_inwoner/templates/pages/cases/document_form.html
index c81807a6e7..d996bbdaa7 100644
--- a/src/open_inwoner/templates/pages/cases/document_form.html
+++ b/src/open_inwoner/templates/pages/cases/document_form.html
@@ -8,6 +8,6 @@
     {# Select and POST states in fileInput component #}
     {% file_input form.files multiple=True primary_text=_("Upload documenten") max_upload_size=openzaak_config.max_upload_size allowed_file_extensions=openzaak_config.allowed_file_extensions %}
     <div class="non-field-error" hidden>
-        <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--small utrecht-paragraph--oip-centered">{% trans "Verwijder eerst bestanden die niet voldoen aan de voorwaarden" %}</p>
+        <p class="nl-paragraph utrecht-paragraph--oip utrecht-paragraph--small utrecht-paragraph--oip-centered">{% trans "Verwijder eerst bestanden die niet voldoen aan de voorwaarden" %}</p>
     </div>
 {% endrender_form %}
diff --git a/src/open_inwoner/templates/pages/cases/list_inner.html b/src/open_inwoner/templates/pages/cases/list_inner.html
index 3d2723a479..64d0ed4b8f 100644
--- a/src/open_inwoner/templates/pages/cases/list_inner.html
+++ b/src/open_inwoner/templates/pages/cases/list_inner.html
@@ -1,7 +1,7 @@
 {% load link_tags button_tags i18n grid_tags icon_tags list_tags pagination_tags utils %}
 
-<h1 class="utrecht-heading-1" id="cases">{{ page_title }} ({{ paginator.count }})</h1>
-<p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-title-text">{{ title_text }}</p>
+<h1 class="nl-heading nl-heading--level-1" id="cases">{{ page_title }} ({{ paginator.count }})</h1>
+<p class="nl-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-title-text">{{ title_text }}</p>
 
 {% if filter_form_enabled %}
 <div class="filter-bar__backdrop" id="filterBarBackdrop">
@@ -15,13 +15,13 @@ <h1 class="utrecht-heading-1" id="cases">{{ page_title }} ({{ paginator.count }}
             </div>
         </div>
         <div class="filter-bar__mobile-button">
-            <p class="utrecht-paragraph filter-bar__heading">Filters</p>
+            <p class="nl-paragraph filter-bar__heading">Filters</p>
             <div class="filter-bar__mobile-selection" id="selectionFilterBar">
                 {% button icon="filter_alt" text=_("Filters") icon_outlined=True transparent=True extra_classes="show-modal" %}
                 {% icon icon="check" icon_position="after" outlined=True %}
                 <span class="sr-only">Gekozen filters</span>
             </div>
-            <p class="utrecht-paragraph filter-bar__status-text">Status</p>
+            <p class="nl-paragraph filter-bar__status-text">Status</p>
         </div>
         <form class="form filter-bar__form" method="GET" id="filter-form" novalidate>
             <span class="filter-bar__label">{% trans 'Filter op' %}:</span>
@@ -34,7 +34,7 @@ <h1 class="utrecht-heading-1" id="cases">{{ page_title }} ({{ paginator.count }}
 <div class="card__grid">
 {% render_grid %}
     {% if not zaken %}
-        <p class="utrecht-paragraph"><strong>{% trans "U heeft op dit moment nog geen lopende zaken." %}</strong></p>
+        <nl-paragraph><strong>{% trans "U heeft op dit moment nog geen lopende zaken." %}</strong></nl-paragraph>
     {% endif %}
 
     {% for zaak in zaken %}
@@ -81,8 +81,8 @@ <h2 class="card__heading-2">{{ zaak.description }}</h2>
                                 {% list_item zaak.current_status caption=_("Status") compact=True strong=False %}
                             {% endif %}
                             <li class="list-item list-item--compact">
-                               <p class="utrecht-paragraph list-item__caption">Zaaknummer</p>
-                               <p class="utrecht-paragraph skip-phone-parsing">&zwj;{{ zaak.identification }}</p>
+                               <p class="nl-paragraph list-item__caption">Zaaknummer</p>
+                               <p class="nl-paragraph skip-phone-parsing">&zwj;{{ zaak.identification }}</p>
                             </li>
                         {% endrender_list %}
 
diff --git a/src/open_inwoner/templates/pages/cases/status_inner.html b/src/open_inwoner/templates/pages/cases/status_inner.html
index cbb5eb1370..e1ded26f4e 100644
--- a/src/open_inwoner/templates/pages/cases/status_inner.html
+++ b/src/open_inwoner/templates/pages/cases/status_inner.html
@@ -12,7 +12,7 @@
     {% render_grid %}
         {% render_column span=12 %}
             {# Title/dashboard #}
-            <h1 class="utrecht-heading-1" id="title">{{ zaak.description }}</h1>
+            <h1 class="nl-heading nl-heading--level-1" id="title">{{ zaak.description }}</h1>
             {% include "components/Dashboard/Dashboard.html" with metrics=metrics only %}
         {% endrender_column %}
 
@@ -23,8 +23,8 @@ <h1 class="utrecht-heading-1" id="title">{{ zaak.description }}</h1>
             </section>
 
             {% if zaak.internal_upload_enabled %}
-                <h2 class="utrecht-heading-2" id="documents-upload">{% trans "Documenten" %}</h2>
-                <h3 class="utrecht-heading-3 documents-upload__h3">{% trans "Voeg documenten toe" %}</h3>
+                <h2 class="nl-heading nl-heading--level-2" id="documents-upload">{% trans "Documenten" %}</h2>
+                <h3 class="nl-heading nl-heading--level-3 documents-upload__h3">{% trans "Voeg documenten toe" %}</h3>
 
                 <div class="document-upload-notification">
                 {% notifications messages show_local_messages=True closable=False %}
@@ -47,11 +47,11 @@ <h3 class="utrecht-heading-3 documents-upload__h3">{% trans "Voeg documenten toe
                 </section>
 
             {% elif zaak.external_upload_enabled %}
-                <h2 class="utrecht-heading-2" id="documents-upload">{% trans "Document toevoegen" %}</h2>
+                <h2 class="nl-heading nl-heading--level-2" id="documents-upload">{% trans "Document toevoegen" %}</h2>
                 {% if zaak.case_type_config_description %}
-                    <p class="utrecht-paragraph">{{ zaak.case_type_config_description }}</p>
+                    <nl-paragraph>{{ zaak.case_type_config_description }}</nl-paragraph>
                 {% else %}
-                    <p class="utrecht-paragraph">{% trans "By clicking the button below you can upload a document. This is an external link and you will be redirected to a different system." %}</p>
+                    <nl-paragraph>{% trans "By clicking the button below you can upload a document. This is an external link and you will be redirected to a different system." %}</nl-paragraph>
                 {% endif %}
                 {% button_row %}
                     {% button href=zaak.external_upload_url text=_("Document uploaden") title=_("Opens new window") primary=True icon="open_in_new" icon_position="after" %}
@@ -62,7 +62,7 @@ <h2 class="utrecht-heading-2" id="documents-upload">{% trans "Document toevoegen
             {% if zaak.documents %}
                 <section class="case-detail__documents">
                     <div class="heading-2__indicator">
-                        <h2 class="utrecht-heading-2 {% if zaak.new_docs %}indicator{% endif %}" id="documents">{% trans 'Eerder toegevoegde documenten' %}</h2>
+                        <h2 class="nl-heading nl-heading--level-2 {% if zaak.new_docs %}indicator{% endif %}" id="documents">{% trans 'Eerder toegevoegde documenten' %}</h2>
                         {% if zaak.new_docs %}{% icon icon="fiber_manual_record" outlined=False extra_classes="file__file--recent" %}{% endif %}
                     </div>
                     {% case_document_list zaak.documents %}
@@ -93,6 +93,6 @@ <h2 class="utrecht-heading-2 {% if zaak.new_docs %}indicator{% endif %}" id="doc
         {% endrender_column %}
     {% endrender_grid %}
 {% else %}
-    <p class="utrecht-paragraph"><strong>{% trans 'There is no available data at the moment.' %}</strong></p>
+    <nl-paragraph><strong>{% trans 'There is no available data at the moment.' %}</strong></nl-paragraph>
 {% endif %}
 </div>
diff --git a/src/open_inwoner/templates/pages/cases/statuses.html b/src/open_inwoner/templates/pages/cases/statuses.html
index c25debcb15..37add56b8e 100644
--- a/src/open_inwoner/templates/pages/cases/statuses.html
+++ b/src/open_inwoner/templates/pages/cases/statuses.html
@@ -1,7 +1,7 @@
 {% load i18n button_tags icon_tags %}
 
 {% if zaak.statuses %}
-<h2 class="utrecht-heading-2" id="statuses">{% trans 'Status' %}</h2>
+<h2 class="nl-heading nl-heading--level-2" id="statuses">{% trans 'Status' %}</h2>
 
 <aside class="status-list" aria-label="{% trans "Status lijst" %}">
     <ul class="status-list__list">
@@ -15,7 +15,7 @@ <h2 class="utrecht-heading-2" id="statuses">{% trans 'Status' %}</h2>
                     {% icon icon="circle" extra_classes="status-step" %}
                     <span class="sr-only">{% trans "Niet voltooid" %}</span>
                     <div class="status-list__notification status-list__notification--{{ status.status_indicator }}">
-                        <h3 class="utrecht-heading-3 utrecht-accordion__header">
+                        <h3 class="nl-heading nl-heading--level-3 utrecht-accordion__header">
                             {# Interactive accordion when case is ongoing, and active status is shown as expanded  #}
                             {% if zaak.end_statustype_data %}
                                 <button class="button--borderless status-list__button" aria-controls="{{ content_id }}" aria-expanded="true" id="{{ id }}">
@@ -25,23 +25,23 @@ <h3 class="utrecht-heading-3 utrecht-accordion__header">
 
                             {# Non-interactive element when case is finalized #}
                             {% if not case.end_statustype_data %}
-                                <p class="utrecht-paragraph utrecht-accordion__paragraph status-list__open-paragraph" id="{{ id }}">
+                                <p class="nl-paragraph utrecht-accordion__paragraph status-list__open-paragraph" id="{{ id }}">
                                     {{ status.label }}
                                 </p>
                             {% endif %}
                         </h3>
 
                         <div class="status-list__notification-content {% if zaak.end_statustype_data %}status-content--open{% endif %} {% if not case.end_statustype_data %}status-content--open{% endif %}" id="{{ content_id }}">
-                            <p class="utrecht-paragraph status-list__text utrecht-paragraph--oip utrecht-paragraph--oip-compact">
+                            <p class="nl-paragraph status-list__text utrecht-paragraph--oip utrecht-paragraph--oip-compact">
                                 {# Configurable texts #}
                                 {% if zaak.end_statustype_data %}<span>{{ status.description|default:"" }}</span>{% endif %}
                                 {% if not case.end_statustype_data %}<span class="status--result">{{ zaak.result_description|default:"" }}</span>{% endif %}
                             </p>
-                            <p class="utrecht-paragraph status-list__date utrecht-paragraph--oip utrecht-paragraph--oip-compact">{{ status.date|date }}</p>
+                            <p class="nl-paragraph status-list__date utrecht-paragraph--oip utrecht-paragraph--oip-compact">{{ status.date|date }}</p>
 			    {% if status.call_to_action_url %}
                                 {% button href=status.call_to_action_url text=status.call_to_action_text title=status.call_to_action_text primary=True icon="arrow_forward" icon_position="after" %}
                             {% else %}
-                                <p class="utrecht-paragraph status-list__upload {% if zaak.end_statustype_data %}status-list__upload--enabled{% endif %}">
+                                <p class="nl-paragraph status-list__upload {% if zaak.end_statustype_data %}status-list__upload--enabled{% endif %}">
                                 {% if zaak.internal_upload_enabled or case.external_upload_enabled %}
                                     {% button href="#documents-upload" text=_("Scroll omlaag") title=_("Ga direct naar document upload sectie.") primary=True icon="arrow_downward" icon_position="after" %}
                                 {% endif %}
@@ -59,15 +59,15 @@ <h3 class="utrecht-heading-3 utrecht-accordion__header">
                     {% icon icon="task_alt" %}
                     <span class="sr-only">{% trans "Voltooid" %}</span>
                     <div class="status-list__notification">
-                        <h3 class="utrecht-heading-3 utrecht-accordion__header">
+                        <h3 class="nl-heading nl-heading--level-3 utrecht-accordion__header">
                             <button class="status-list__button button--borderless" aria-controls="{{ completed_id }}" aria-expanded="false" id="{{ id }}"><span class="link link-success">{{ status.label }}</span>{% icon icon="expand_more" icon_position="after" outlined=True %}</button>
                         </h3>
                         <div class="status-list__notification-content" id="{{ completed_id }}">
-                            <p class="utrecht-paragraph status-list__text utrecht-paragraph--oip utrecht-paragraph--oip-compact">
+                            <p class="nl-paragraph status-list__text utrecht-paragraph--oip utrecht-paragraph--oip-compact">
                                 {# Configurable texts #}
                                 <span>{{ status.description|default:"" }}</span>
                             </p>
-                            <p class="utrecht-paragraph status-list__date utrecht-paragraph--oip utrecht-paragraph--oip-compact">{{ status.date|date }}</p>
+                            <p class="nl-paragraph status-list__date utrecht-paragraph--oip utrecht-paragraph--oip-compact">{{ status.date|date }}</p>
                         </div>
                     </div>
                 </li>
diff --git a/src/open_inwoner/templates/pages/category/detail.html b/src/open_inwoner/templates/pages/category/detail.html
index f4b26bd8ae..950608b150 100644
--- a/src/open_inwoner/templates/pages/category/detail.html
+++ b/src/open_inwoner/templates/pages/category/detail.html
@@ -12,7 +12,7 @@
 {% block content %}
     <div class="categories__content">
         <header class="oip-header-group">
-            <h1 class="utrecht-heading-1">
+            <h1 class="nl-heading nl-heading--level-1">
                 {{ object.name }}
             </h1>
             {% if request.user.is_staff %}
@@ -44,7 +44,7 @@ <h1 class="utrecht-heading-1">
             <div class="grid">
                 <div class="column column--start-1 column--span-6 ">
                     <aside class="questionnaire">
-                        <h2 class="utrecht-heading-2">{{configurable_text.questionnaire_page.select_questionnaire_title}}</h2>
+                        <h2 class="nl-heading nl-heading--level-2">{{configurable_text.questionnaire_page.select_questionnaire_title}}</h2>
                         {% optional_paragraph configurable_text.questionnaire_page.select_questionnaire_intro %}
                         {% include "components/Questionnaire/Questionnaire.html" with root_nodes=questionnaire_roots only %}
                     </aside>
diff --git a/src/open_inwoner/templates/pages/category/list.html b/src/open_inwoner/templates/pages/category/list.html
index e56d58d1e9..c985946d66 100644
--- a/src/open_inwoner/templates/pages/category/list.html
+++ b/src/open_inwoner/templates/pages/category/list.html
@@ -7,8 +7,8 @@
 
 {% block content %}
 <div class="categories__content">
-    <h1 class="utrecht-heading-1">{{configurable_text.theme_page.theme_title}}</h1>
-    <p class="utrecht-paragraph">{{configurable_text.theme_page.theme_intro|linebreaksbr}}</p>
+    <h1 class="nl-heading nl-heading--level-1">{{configurable_text.theme_page.theme_title}}</h1>
+    <nl-paragraph>{{configurable_text.theme_page.theme_intro|linebreaksbr}}</nl-paragraph>
 
     {% include "components/Card/CardContainer.html" with categories=object_list only %}
 </div>
diff --git a/src/open_inwoner/templates/pages/contactmoment/detail.html b/src/open_inwoner/templates/pages/contactmoment/detail.html
index 243ea1b43c..ea9126a508 100644
--- a/src/open_inwoner/templates/pages/contactmoment/detail.html
+++ b/src/open_inwoner/templates/pages/contactmoment/detail.html
@@ -5,7 +5,7 @@
     {% if question %}
         {% render_grid %}
             {% render_column span=12 %}
-                <h1 class="utrecht-heading-1" id="title">{{ question.subject }}</h1>
+                <h1 class="nl-heading nl-heading--level-1" id="title">{{ question.subject }}</h1>
                 {% include "components/Dashboard/Dashboard.html" with metrics=metrics only %}
             {% endrender_column %}
         {% endrender_grid %}
@@ -42,6 +42,6 @@ <h2 class="utrecht-heading-3 contactmoment__heading">{% trans "Antwoord" %}</h2>
         {% endrender_grid %}
 
     {% else %}
-        <p class="utrecht-paragraph"><strong>{% trans 'There is no available data at the moment.' %}</strong></p>
+        <nl-paragraph><strong>{% trans 'There is no available data at the moment.' %}</strong></nl-paragraph>
     {% endif %}
 {% endblock content %}
diff --git a/src/open_inwoner/templates/pages/contactmoment/list.html b/src/open_inwoner/templates/pages/contactmoment/list.html
index b6e6723f05..a1c92848af 100644
--- a/src/open_inwoner/templates/pages/contactmoment/list.html
+++ b/src/open_inwoner/templates/pages/contactmoment/list.html
@@ -6,20 +6,20 @@
 {% endblock %}
 
 {% block content %}
-    <h1 class="utrecht-heading-1" id="contactmomenten">{{ page_title }} ({{ paginator.count }})</h1>
+    <h1 class="nl-heading nl-heading--level-1" id="contactmomenten">{{ page_title }} ({{ paginator.count }})</h1>
 
     {% if contactmoment_contact_form_enabled %}
     {# title + scroll down button #}
     <section class="contactmomenten__scrolldown" data-testid="contactmomenten__contact_form_scrolldown">
         <div class="form-container">
             <div class="form-heading">
-                <h2 class="utrecht-heading-2">{% trans "Stel een vraag" %}</h2>
-                <p class="utrecht-paragraph">
+                <h2 class="nl-heading nl-heading--level-2">{% trans "Stel een vraag" %}</h2>
+                <nl-paragraph>
                 {% blocktrans trimmed %}
                     Heeft u een vraag? Dan kunt u deze hier stellen.
                     Een van onze medewerkers beantwoord uw vraag z.s.m.
                 {% endblocktrans %}
-                </p>
+                </nl-paragraph>
             </div>
             <div class="button-row">
                 {% button href="#question-form" text=_("Stel een vraag") title=_("Stel een vraag") primary=True icon="arrow_downward" icon_position="after" %}
@@ -33,7 +33,7 @@ <h2 class="utrecht-heading-2">{% trans "Stel een vraag" %}</h2>
         {% if paginator.count %}
             <h2 class="contactmomenten__title">{% trans "Eerder gestelde vragen" %}</h2>
         {% else %}
-            <p class="utrecht-paragraph"><strong>{% trans "U heeft op dit moment nog geen vragen." %}</strong></p>
+            <nl-paragraph><strong>{% trans "U heeft op dit moment nog geen vragen." %}</strong></nl-paragraph>
         {% endif %}
 
         {% render_grid %}
@@ -77,13 +77,13 @@ <h2 class="card__heading-2">{{ question.subject }}</h2>
     <section class="contactmomenten contactmomenten__contact-form" data-testid="contactmomenten__contact_form">
         <div class="form-container">
             <div class="form-heading">
-                <h2 class="utrecht-heading-2">{% trans "Stel een vraag" %}</h2>
-                <p class="utrecht-paragraph">
+                <h2 class="nl-heading nl-heading--level-2">{% trans "Stel een vraag" %}</h2>
+                <nl-paragraph>
                 {% blocktrans trimmed %}
                     Heeft u een vraag? Dan kunt u deze hier stellen.
                     Een van onze medewerkers beantwoord uw vraag z.s.m.
                 {% endblocktrans %}
-                </p>
+                </nl-paragraph>
             </div>
             <div>
                 <form action="{% url 'cases:contactmoment_list' %}" method="POST" id="question-form" class="form contact-form">
diff --git a/src/open_inwoner/templates/pages/faq.html b/src/open_inwoner/templates/pages/faq.html
index 431e0db2b4..956f43444a 100644
--- a/src/open_inwoner/templates/pages/faq.html
+++ b/src/open_inwoner/templates/pages/faq.html
@@ -6,7 +6,7 @@
 {% endblock %}
 
 {% block content %}
-    <h1 class="utrecht-heading-1">
+    <h1 class="nl-heading nl-heading--level-1">
         {% trans "Veelgestelde vragen" %}
     </h1>
 
diff --git a/src/open_inwoner/templates/pages/history.html b/src/open_inwoner/templates/pages/history.html
index 74affff31e..0078e56405 100644
--- a/src/open_inwoner/templates/pages/history.html
+++ b/src/open_inwoner/templates/pages/history.html
@@ -3,7 +3,7 @@
 
 
 {% block content %}
-<h1 class="utrecht-heading-1" id="title">
+<h1 class="nl-heading nl-heading--level-1" id="title">
     {% trans "History of changes" %}
 </h1>
 
diff --git a/src/open_inwoner/templates/pages/kvk/branches.html b/src/open_inwoner/templates/pages/kvk/branches.html
index 33b7d10ace..78dd21a7c4 100644
--- a/src/open_inwoner/templates/pages/kvk/branches.html
+++ b/src/open_inwoner/templates/pages/kvk/branches.html
@@ -5,9 +5,9 @@
     {% render_grid %}
         {% render_column start=4 span=6 %}
             {% if user.vestiging %}
-                <h1 class="utrecht-heading-1" id="title">{% trans "Wissel van vestiging" %}</h1>
+                <h1 class="nl-heading nl-heading--level-1" id="title">{% trans "Wissel van vestiging" %}</h1>
             {% else %}
-                <h1 class="utrecht-heading-1" id="title">{% trans "Log in" %}</h1>
+                <h1 class="nl-heading nl-heading--level-1" id="title">{% trans "Log in" %}</h1>
             {% endif %}
 
             <form method="POST" id="eherkenning-branch-form" class="form">
diff --git a/src/open_inwoner/templates/pages/mijn_afval/afval-profiel.html b/src/open_inwoner/templates/pages/mijn_afval/afval-profiel.html
index 4b4654e5b6..775b952a10 100644
--- a/src/open_inwoner/templates/pages/mijn_afval/afval-profiel.html
+++ b/src/open_inwoner/templates/pages/mijn_afval/afval-profiel.html
@@ -10,7 +10,7 @@
 {% block content %}
     {% render_grid %}
         {% render_column start=1 span=12 %}
-            <h1 class="utrecht-heading-1" id="title">{{ page_heading }}</h1>
+            <h1 class="nl-heading nl-heading--level-1" id="title">{{ page_heading }}</h1>
             {% if page_description %}
                 <p class="utrecht-paragraph utrecht-paragraph--lead">{{ page_description }}</p>
             {% endif %}
@@ -34,7 +34,7 @@ <h1 class="utrecht-heading-1" id="title">{{ page_heading }}</h1>
                     </oip-accordion>
                 </article>
             {% empty %}
-                <p class="utrecht-paragraph">{% trans "Geen afvalgegevens beschikbaar." %}</p>
+                <nl-paragraph>{% trans "Geen afvalgegevens beschikbaar." %}</nl-paragraph>
             {% endfor %}
         {% endrender_column %}
     {% endrender_grid %}
diff --git a/src/open_inwoner/templates/pages/plans/create-with-template.html b/src/open_inwoner/templates/pages/plans/create-with-template.html
index 02c3602cad..50a1b78ccd 100644
--- a/src/open_inwoner/templates/pages/plans/create-with-template.html
+++ b/src/open_inwoner/templates/pages/plans/create-with-template.html
@@ -19,7 +19,7 @@ <h1>{{ plan_template.name }}</h1>
                         {% csrf_token %}
                         {% date_field form.end_date icon="calendar_today" icon_position="after" %}
                         <div class="plan__contacts">
-                            <p class="utrecht-paragraph">Contactpersoon</p>
+                            <nl-paragraph>Contactpersoon</nl-paragraph>
                             {% checkboxes form.plan_contacts %}
                         </div>
                         <div>
diff --git a/src/open_inwoner/templates/pages/plans/create.html b/src/open_inwoner/templates/pages/plans/create.html
index 672868306d..1b09612137 100644
--- a/src/open_inwoner/templates/pages/plans/create.html
+++ b/src/open_inwoner/templates/pages/plans/create.html
@@ -4,7 +4,7 @@
 {% block content %}
     <div class="plan-create">
         <div class="plan-template__header">
-            <h1 class="utrecht-heading-1">{% trans "Start een nieuwe samenwerking" %}</h1>
+            <h1 class="nl-heading nl-heading--level-1">{% trans "Start een nieuwe samenwerking" %}</h1>
             <div class="plan-template__header-nav">
                 {% if request.user.get_active_contacts %}
                     {% button href="collaborate:plan_choose_template" text=_("Gebruik sjabloon") primary=True transparent=True extra_classes="link--bold" icon="insert_drive_file" icon_outlined=True %}
@@ -28,7 +28,7 @@ <h1 class="utrecht-heading-1">{% trans "Start een nieuwe samenwerking" %}</h1>
 
                         {% date_field form.end_date icon="calendar_today" icon_position="after" %}
                         <div class="plan__contacts">
-                            <p class="utrecht-paragraph">Contactpersoon</p>
+                            <nl-paragraph>Contactpersoon</nl-paragraph>
                             {% checkboxes form.plan_contacts %}
                         </div>
 
@@ -43,7 +43,7 @@ <h1 class="utrecht-heading-1">{% trans "Start een nieuwe samenwerking" %}</h1>
                         </div>
                     {% endrender_form %}
                 {% else %}
-                    <p class="utrecht-paragraph plan__no-contacts">
+                    <p class="nl-paragraph plan__no-contacts">
                         {% url 'profile:contact_create' as contact_create %}
                         {% link href=contact_create text=_("Maak uw eerste contact aan voordat u een samenwerking start") icon="arrow_forward" icon_position="after" primary=True %}
                     </p>
diff --git a/src/open_inwoner/templates/pages/plans/detail.html b/src/open_inwoner/templates/pages/plans/detail.html
index c34d6346a2..354e684d7b 100644
--- a/src/open_inwoner/templates/pages/plans/detail.html
+++ b/src/open_inwoner/templates/pages/plans/detail.html
@@ -7,7 +7,7 @@
 
 {% block content %}
 <div class="plan">
-    <h1 class="utrecht-heading-1" id="title">
+    <h1 class="nl-heading nl-heading--level-1" id="title">
         {{ object.title }}
     </h1>
     <div class="document-upload-notification">
@@ -17,7 +17,7 @@ <h1 class="utrecht-heading-1" id="title">
     <aside class="dashboard plan-contact" aria-label="Dashboard">
         <ul class="dashboard__list">
             <li class="dashboard__list-item">
-                <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-compact">
+                <p class="nl-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-compact">
                     <span class="dashboard__item-label">{% trans "Aangemaakt door" %}:</span>
                     <span class="plan-contact__information">
                     <span class="plan-contact__info">{{ object.created_by.get_full_name }}</span>
@@ -26,7 +26,7 @@ <h1 class="utrecht-heading-1" id="title">
                 </p>
             </li>
             <li class="dashboard__list-item">
-                <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-compact">
+                <p class="nl-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-compact">
                     <span class="dashboard__item-label">{% trans "Deelnemers" %}:</span>
                 <span class="plan-contact__information">
                 {% for user in contact_users %}
@@ -37,7 +37,7 @@ <h1 class="utrecht-heading-1" id="title">
                 </p>
             </li>
             <li class="dashboard__list-item">
-                <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-compact">
+                <p class="nl-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-compact">
                     <span class="dashboard__item-label">{% trans "Samenwerking loopt tot" %}:</span>
                 <span class="plan-contact__information">
                     <span class="plan-contact__info">{{ object.end_date }}</span>
@@ -50,7 +50,7 @@ <h1 class="utrecht-heading-1" id="title">
     <section class="tabled tabled--flexible oip-section oip-section--bordered" aria-labelledby="goal">
         <div class="tabled__section">
             <header class="oip-header-group title">
-                <h2 class="utrecht-heading-2" id="goal">{% trans "Doel en omschrijving" %}</h2>
+                <h2 class="nl-heading nl-heading--level-2" id="goal">{% trans "Doel en omschrijving" %}</h2>
                 <div class="tabled__item--mobile-big">
                     {% if is_creator %}
                         {% button href="collaborate:plan_edit_goal" uuid=object.uuid icon="edit" icon_outlined=True text=_("Bewerk") title=_("Doel en omschrijving bewerken") aria_label=_("Doel en omschrijving bewerken") transparent=True %}
@@ -59,12 +59,12 @@ <h2 class="utrecht-heading-2" id="goal">{% trans "Doel en omschrijving" %}</h2>
             </header>
         </div>
         <div class="tabled__inner">
-            <h3 class="utrecht-heading-3">{% trans "Doel" %}</h3>
-            <p class="utrecht-paragraph">{{ object.goal|linebreaksbr }}</p>
+            <h3 class="nl-heading nl-heading--level-3">{% trans "Doel" %}</h3>
+            <nl-paragraph>{{ object.goal|linebreaksbr }}</nl-paragraph>
 
             {% if object.description %}
-                <h3 class="utrecht-heading-3" id="description">{% trans "Description" %}</h3>
-                <p class="utrecht-paragraph">{{ object.description|linebreaksbr }}</p>
+                <h3 class="nl-heading nl-heading--level-3" id="description">{% trans "Description" %}</h3>
+                <nl-paragraph>{{ object.description|linebreaksbr }}</nl-paragraph>
             {% endif %}
         </div>
     </section>
@@ -72,7 +72,7 @@ <h3 class="utrecht-heading-3" id="description">{% trans "Description" %}</h3>
     <section class="tabled tabled--flexible oip-section" aria-labelledby="files">
         <div class="tabled__section">
             <header class="oip-header-group title">
-                <h2 class="utrecht-heading-2" id="files">{% trans "Samenwerkingsplan" %}</h2>
+                <h2 class="nl-heading nl-heading--level-2" id="files">{% trans "Samenwerkingsplan" %}</h2>
             </header>
         </div>
         <div class="plan__file">
@@ -88,7 +88,7 @@ <h2 class="utrecht-heading-2" id="files">{% trans "Samenwerkingsplan" %}</h2>
             {% endif %}
         </div>
         <div class="plan__upload-document">
-            <h3 class="utrecht-heading-3" id="files">{% trans "Upload een nieuwe versie" %}</h3>
+            <h3 class="nl-heading nl-heading--level-3" id="files">{% trans "Upload een nieuwe versie" %}</h3>
 
             <div id="form_upload_wrapper">
                 <div id="form_upload"
@@ -110,7 +110,7 @@ <h3 class="utrecht-heading-3" id="files">{% trans "Upload een nieuwe versie" %}<
     <section class="tabled tabled--flexible oip-section oip-section--bordered" aria-labelledby="notes">
         <div class="tabled__section">
             <header class="oip-header-group title">
-                <h2 class="utrecht-heading-2" id="notes">{% trans "Notities" %}</h2>
+                <h2 class="nl-heading nl-heading--level-2" id="notes">{% trans "Notities" %}</h2>
                 <div class="tabled__item--mobile-big">
                     {% button href="collaborate:plan_edit_note" uuid=object.uuid icon="edit" icon_outlined=True text=_("Bewerk") title=_("Notitie aanvullen") aria_label=_("Notitie aanvullen") transparent=True %}
                 </div>
@@ -119,10 +119,10 @@ <h2 class="utrecht-heading-2" id="notes">{% trans "Notities" %}</h2>
         <div class="tabled__inner">
         {% if object.note %}
             <div class="wysiwyg">
-                <p class="utrecht-paragraph">{{ object.note|linebreaksbr }}</p>
+                <nl-paragraph>{{ object.note|linebreaksbr }}</nl-paragraph>
             </div>
         {% else %}
-            <p class="utrecht-paragraph"><strong>{% trans "Er zijn nog geen notities toegevoegd." %}</strong></p>
+            <nl-paragraph><strong>{% trans "Er zijn nog geen notities toegevoegd." %}</strong></nl-paragraph>
             <p class="utrecht-paragraph--oip">
                 {% trans "Klik op 'Bewerk' om een nieuwe notitie toe te voegen. Deze kan later nog worden aangevuld." %}
             </p>
@@ -133,7 +133,7 @@ <h2 class="utrecht-heading-2" id="notes">{% trans "Notities" %}</h2>
     <section class="tabled tabled--flexible oip-section">
         <div class="tabled__section">
             <header class="oip-header-group title">
-                <h2 class="utrecht-heading-2" id="actions">{% trans "Acties" %}</h2>
+                <h2 class="nl-heading nl-heading--level-2" id="actions">{% trans "Acties" %}</h2>
                 <div class="tabled__item--mobile-big">
                     {% button href="collaborate:plan_action_create" uuid=object.uuid icon="add_circle_outlined" icon_outlined=True text=_("Nieuw actie toevoegen") transparent=True %}
                 </div>
diff --git a/src/open_inwoner/templates/pages/plans/edit.html b/src/open_inwoner/templates/pages/plans/edit.html
index b3a84337cd..16ead5a70c 100644
--- a/src/open_inwoner/templates/pages/plans/edit.html
+++ b/src/open_inwoner/templates/pages/plans/edit.html
@@ -2,7 +2,7 @@
 {% load i18n button_tags card_tags map_tags form_tags grid_tags string_tags %}
 
 {% block content %}
-    <h1 class="utrecht-heading-1">{% trans "Samenwerken" %}</h1>
+    <h1 class="nl-heading nl-heading--level-1">{% trans "Samenwerken" %}</h1>
     {% optional_paragraph configurable_text.plans_page.plans_intro %}
 
     {% render_form id="plan-form" form=form method="POST" %}
diff --git a/src/open_inwoner/templates/pages/plans/goal_edit.html b/src/open_inwoner/templates/pages/plans/goal_edit.html
index f779f89bd3..acf6d2b7bb 100644
--- a/src/open_inwoner/templates/pages/plans/goal_edit.html
+++ b/src/open_inwoner/templates/pages/plans/goal_edit.html
@@ -2,10 +2,10 @@
 {% load i18n button_tags card_tags map_tags form_tags grid_tags %}
 
 {% block content %}
-    <h1 class="utrecht-heading-1">{% trans "Doel en omschrijving aanpassen" %}</h1>
-    <p class="utrecht-paragraph">
+    <h1 class="nl-heading nl-heading--level-1">{% trans "Doel en omschrijving aanpassen" %}</h1>
+    <nl-paragraph>
         {{configurable_text.plans_page.plans_edit_message}}
-    </p>
+    </nl-paragraph>
 
     {% render_grid %}
         {% render_column start=4 span=6 %}
diff --git a/src/open_inwoner/templates/pages/plans/list.html b/src/open_inwoner/templates/pages/plans/list.html
index 1f43033a24..7708074103 100644
--- a/src/open_inwoner/templates/pages/plans/list.html
+++ b/src/open_inwoner/templates/pages/plans/list.html
@@ -11,7 +11,7 @@
 
 {% block content %}
     <header class="oip-header-group">
-        <h1 class="utrecht-heading-1">
+        <h1 class="nl-heading nl-heading--level-1">
             {{ page_title }}
         </h1>
         {% button href="collaborate:plan_choose_template" text=_("Start een nieuwe samenwerking") primary=True icon="group" icon_outlined=True %}
@@ -25,7 +25,7 @@ <h1 class="utrecht-heading-1">
                     {% button text=_("Filter") type="button" bordered=True %}
                 </div>
                 <div class="plan-filter__container filter__container">
-                    <p class="utrecht-paragraph">{% trans "Filter op:" %}</p>
+                    <nl-paragraph>{% trans "Filter op:" %}</nl-paragraph>
                     {% input plan_filter_form.plan_contacts no_label=True no_help=True icon="person" %}
                     {% input plan_filter_form.status no_label=True no_help=True icon="expand_more" %}
                     <div class="plan-filter__search-container">
@@ -74,7 +74,7 @@ <h1 class="utrecht-heading-1">
         {% if plans.plan_list %}
             {% include "components/Card/CardContainer.html" with plans=plans.plan_list columns=2 only %}
         {% else %}
-            <p class="utrecht-paragraph"><strong>{% trans "U heeft op dit moment nog geen samenwerkingsplannen." %}</strong></p>
+            <nl-paragraph><strong>{% trans "U heeft op dit moment nog geen samenwerkingsplannen." %}</strong></nl-paragraph>
         {% endif %}
     {% endif %}
 
diff --git a/src/open_inwoner/templates/pages/plans/note_edit.html b/src/open_inwoner/templates/pages/plans/note_edit.html
index b33ea9874c..f2497f6d34 100644
--- a/src/open_inwoner/templates/pages/plans/note_edit.html
+++ b/src/open_inwoner/templates/pages/plans/note_edit.html
@@ -2,10 +2,10 @@
 {% load i18n button_tags card_tags map_tags form_tags grid_tags %}
 
 {% block content %}
-    <h1 class="utrecht-heading-1">{% trans "Notitie maken en aanvullen" %}</h1>
-    <p class="utrecht-paragraph">
+    <h1 class="nl-heading nl-heading--level-1">{% trans "Notitie maken en aanvullen" %}</h1>
+    <nl-paragraph>
         {% trans "Voeg een notitie toe en/of vul een bestaande notitie aan met nieuwe tekst." %}
-    </p>
+    </nl-paragraph>
 
     {% render_grid %}
         {% render_column start=4 span=7 %}
diff --git a/src/open_inwoner/templates/pages/plans/template-choice.html b/src/open_inwoner/templates/pages/plans/template-choice.html
index 9022abdfb2..e2ef05f026 100644
--- a/src/open_inwoner/templates/pages/plans/template-choice.html
+++ b/src/open_inwoner/templates/pages/plans/template-choice.html
@@ -3,7 +3,7 @@
 
 {% block content %}
     <div class="plan-create">
-        <h1 class="utrecht-heading-1">{% trans "Kies een voorstel" %}</h1>
+        <h1 class="nl-heading nl-heading--level-1">{% trans "Kies een voorstel" %}</h1>
         {% optional_paragraph configurable_text.plans_page.plans_intro %}
 
         {% if request.user.get_active_contacts %}
@@ -65,7 +65,7 @@ <h3 class="utrecht-heading-4">{{ plan_template.name }}</h3>
                     <div class="modal modal--no-reset" id="template-{{ plan_template.id }}">
                         <div class="modal__container">
                             <header class="oip-header-group">
-                                <h2 class="utrecht-heading-2 modal__title" id="modal__title">{% trans "Kies een voorstel" %}</h2>
+                                <h2 class="nl-heading nl-heading--level-2 modal__title" id="modal__title">{% trans "Kies een voorstel" %}</h2>
                                 <div class="modal__actions">
                                     {% button type="button" text=_("Sluiten") hide_text=True icon="close" outlined=True extra_classes="modal__button modal__close-title button__icon-close" %}
                                 </div>
diff --git a/src/open_inwoner/templates/pages/product/detail.html b/src/open_inwoner/templates/pages/product/detail.html
index b2be489ba9..28a4c0d92e 100644
--- a/src/open_inwoner/templates/pages/product/detail.html
+++ b/src/open_inwoner/templates/pages/product/detail.html
@@ -26,14 +26,14 @@
 {% endblock sidebar_content %}
 
 {% block content %}
-    <h1 class="utrecht-heading-1" id="title">
+    <h1 class="nl-heading nl-heading--level-1" id="title">
     {{ object.name }}
         {% if request.user.is_staff %}
             {% button icon="edit" text=_("Bewerken in de Admin") hide_text=True href="admin:pdc_product_change" object_id=object.pk %}
         {% endif %}
     </h1>
     {% include "components/Tag/Tag.html" with tags=object.tags.all only %}
-    <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-summary">{{ object.summary }}</p>
+    <p class="nl-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-summary">{{ object.summary }}</p>
 
     {# Collapsable content #}
     <div class="readmore">
@@ -73,12 +73,12 @@ <h1 class="utrecht-heading-1" id="title">
         {% if object.conditions.exists %}
             {% render_grid %}
                 {% render_column span=6 compact=True %}
-                    <h3 class="utrecht-heading-3">{% trans "U komt in aanmerking" %}</h3>
+                    <h3 class="nl-heading nl-heading--level-3">{% trans "U komt in aanmerking" %}</h3>
                     {% include "components/Condition/ConditionList.html" with conditions=object.conditions.all only %}
                 {% endrender_column %}
 
                 {% render_column start=7 span=6 compact=True %}
-                    <h3 class="utrecht-heading-3">{% trans "U komt niet in aanmerking" %}</h3>
+                    <h3 class="nl-heading nl-heading--level-3">{% trans "U komt niet in aanmerking" %}</h3>
                     {% include "components/Condition/ConditionList.html" with conditions=object.conditions.all negative=True only %}
                 {% endrender_column %}
             {% endrender_grid %}
@@ -98,7 +98,7 @@ <h3 class="utrecht-heading-3">{% trans "U komt niet in aanmerking" %}</h3>
                 {# Links. #}
                 {% if product_links.exists %}
                     <nav class="link-list" aria-label="{% trans "links" %}">
-                        <h3 class="utrecht-heading-3" id="links">{% trans "Links" %}</h3>
+                        <h3 class="nl-heading nl-heading--level-3" id="links">{% trans "Links" %}</h3>
                         <ul class="link-list__list">
                             {% for link in product_links %}
                                 <li class="link-list__list-item link-list__list-item--wrap">
@@ -114,7 +114,7 @@ <h3 class="utrecht-heading-3" id="links">{% trans "Links" %}</h3>
                 {# Related products. #}
                 {% if object.related_products.published.exists %}
                     <nav class="link-list" aria-label="{% trans "Gerelateerde links" %}">
-                        <h3 class="utrecht-heading-3" id="see">{% trans "Zie ook" %}</h3>
+                        <h3 class="nl-heading nl-heading--level-3" id="see">{% trans "Zie ook" %}</h3>
                         <ul class="link-list__list">
                             {% for related in object.related_products.published %}
                                 <li class="link-list__list-item link-list__list-item--wrap">
@@ -130,17 +130,17 @@ <h3 class="utrecht-heading-3" id="see">{% trans "Zie ook" %}</h3>
             {% render_column span=9 %}
                 {% if object.contacts.exists %}
                     <div class="contact-block">
-                        <h3 class="utrecht-heading-3" id="contact">{% trans 'Contact' %}</h3>
+                        <h3 class="nl-heading nl-heading--level-3" id="contact">{% trans 'Contact' %}</h3>
 
                         {% for contact in object.contacts.all %}
                             {% render_grid compact=True %}
                                 {% render_column span=12 %}
-                                    <h4 class="utrecht-heading-4">{{ contact.first_name }} {{ contact.last_name }}</h4>
+                                    <h4 class="nl-heading nl-heading--level-4">{{ contact.first_name }} {{ contact.last_name }}</h4>
                                 {% endrender_column %}
 
                                 {% if contact.phonenumber %}
                                     {% render_column span=6 %}
-                                        <span class="utrecht-paragraph">{{ contact.role|default:_('Telefoonnummer') }}</span>
+                                        <span class="nl-paragraph">{{ contact.role|default:_('Telefoonnummer') }}</span>
                                     {% endrender_column %}
 
                                     {% render_column start=7 span=6 %}
@@ -150,7 +150,7 @@ <h4 class="utrecht-heading-4">{{ contact.first_name }} {{ contact.last_name }}</
 
                                 {% if contact.email %}
                                     {% render_column span=6 %}
-                                        <p class="utrecht-paragraph">{{ contact.organization|default:_('E-mail')}}</p>
+                                        <nl-paragraph>{{ contact.organization|default:_('E-mail')}}</nl-paragraph>
                                     {% endrender_column %}
 
                                     {% render_column start=7 span=6 %}
@@ -166,7 +166,7 @@ <h4 class="utrecht-heading-4">{{ contact.first_name }} {{ contact.last_name }}</
 
         {% if display_social %}
             <nav class="sharing-list" aria-label="{% trans "Deel dit artikel" %}">
-                <h3 class="utrecht-heading-3" id="sharing">{% trans "Deel dit artikel" %}</h3>
+                <h3 class="nl-heading nl-heading--level-3" id="sharing">{% trans "Deel dit artikel" %}</h3>
                 {% with request.build_absolute_uri as page_url %}
                     {% include "components/ShareButton/ShareButton.html" with platform="facebook" platform_verbose="Facebook" text_to_share=page_url %}
                     {% include "components/ShareButton/ShareButton.html" with platform="x-twitter" platform_verbose="X" text_to_share=page_url %}
diff --git a/src/open_inwoner/templates/pages/product/finder.html b/src/open_inwoner/templates/pages/product/finder.html
index 2256eb2b60..005a11fe0f 100644
--- a/src/open_inwoner/templates/pages/product/finder.html
+++ b/src/open_inwoner/templates/pages/product/finder.html
@@ -6,7 +6,7 @@
         {% product_finder condition=condition form=form show_previous=show_previous conditions_done=conditions_done %}
 
         {% render_column start=7 span=6 compact=True %}
-            <h1 class="utrecht-heading-1" id="title">
+            <h1 class="nl-heading nl-heading--level-1" id="title">
                 {% trans "Producten" %}
             </h1>
 
@@ -17,13 +17,13 @@ <h1 class="utrecht-heading-1" id="title">
                     </li>
 		{% empty %}
 		<li class="product-filter__item">
-		  <p class="utrecht-paragraph">{% trans "Geen producten gevonden" %}</p>
+            <nl-paragraph>{% trans "Geen producten gevonden" %}</nl-paragraph>
 		</li>
                 {% endfor %}
             </ul>
 
             {% if possible_products %}
-                <h1 class="utrecht-heading-1" id="title">
+                <h1 class="nl-heading nl-heading--level-1" id="title">
                     {% trans "Mogelijke producten" %}
                 </h1>
 
diff --git a/src/open_inwoner/templates/pages/product/form.html b/src/open_inwoner/templates/pages/product/form.html
index 684a1f2f23..104bb64c1e 100644
--- a/src/open_inwoner/templates/pages/product/form.html
+++ b/src/open_inwoner/templates/pages/product/form.html
@@ -13,7 +13,7 @@
 
 {% block content %}
 
-    <h1 class="utrecht-heading-1" id="title">
+    <h1 class="nl-heading nl-heading--level-1" id="title">
         {{ object.name }}
         {% if request.user.is_staff %}
             {% button icon="edit" text=_("Bewerken in de Admin") hide_text=True href="admin:pdc_product_change" object_id=object.pk %}
diff --git a/src/open_inwoner/templates/pages/product/location_detail.html b/src/open_inwoner/templates/pages/product/location_detail.html
index fee5e0ac9c..41082cdffc 100644
--- a/src/open_inwoner/templates/pages/product/location_detail.html
+++ b/src/open_inwoner/templates/pages/product/location_detail.html
@@ -4,21 +4,21 @@
 
 {% block content %}
     <div class="location">
-        <h1 class="utrecht-heading-1">{{ object.name }}</h1>
+        <h1 class="nl-heading nl-heading--level-1">{{ object.name }}</h1>
 
         <div class="location__details">
             <div class="location__address">
                 {% if object.address_line_1 %}
-                    <p class="utrecht-paragraph">{{ object.address_line_1 }}</p>
+                    <nl-paragraph>{{ object.address_line_1 }}</nl-paragraph>
                 {% endif %}
-                <p class="utrecht-paragraph">{{ object.address_line_2 }}</p>
+                <nl-paragraph>{{ object.address_line_2 }}</nl-paragraph>
             </div>
             <div class="location__contact">
                 {% if object.phonenumber %}
-                    <p class="utrecht-paragraph">{{ object.phonenumber }}</p>
+                    <nl-paragraph>{{ object.phonenumber }}</nl-paragraph>
                 {% endif %}
                 {% if object.email %}
-                    <p class="utrecht-paragraph">{{ object.email }}</p>
+                    <nl-paragraph>{{ object.email }}</nl-paragraph>
                 {% endif %}
             </div>
         </div>
diff --git a/src/open_inwoner/templates/pages/profile/actions/edit.html b/src/open_inwoner/templates/pages/profile/actions/edit.html
index c9b35e464b..a23bed9e6c 100644
--- a/src/open_inwoner/templates/pages/profile/actions/edit.html
+++ b/src/open_inwoner/templates/pages/profile/actions/edit.html
@@ -5,7 +5,7 @@
 {% block content %}
     <div class="plan-edit">
         <div class="plan-template__header">
-            <h1 class="utrecht-heading-1">
+            <h1 class="nl-heading nl-heading--level-1">
                 {% if action %}
                     {% trans "Wijzig actie" %}
                 {% else %}
diff --git a/src/open_inwoner/templates/pages/profile/actions/list.html b/src/open_inwoner/templates/pages/profile/actions/list.html
index 0f0b28fe4e..3eac67dd8b 100644
--- a/src/open_inwoner/templates/pages/profile/actions/list.html
+++ b/src/open_inwoner/templates/pages/profile/actions/list.html
@@ -5,7 +5,7 @@
 {% block content %}
     {% render_grid %}
         {% render_column span=9 %}
-            <h1 class="utrecht-heading-1" id="title">
+            <h1 class="nl-heading nl-heading--level-1" id="title">
                 {% trans "Mijn acties" %}
                 {% button href="profile:action_create" text=_("Nieuwe actie toevoegen") icon="date_range" primary=True %}
             </h1>
diff --git a/src/open_inwoner/templates/pages/profile/appointments.html b/src/open_inwoner/templates/pages/profile/appointments.html
index 04e5c2dd86..48bb3174b2 100644
--- a/src/open_inwoner/templates/pages/profile/appointments.html
+++ b/src/open_inwoner/templates/pages/profile/appointments.html
@@ -7,7 +7,7 @@
 
 {% block content %}
 
-<h1 class="utrecht-heading-1" id="title">{% trans "Mijn balie-afspraken" %}</h1>
+<h1 class="nl-heading nl-heading--level-1" id="title">{% trans "Mijn balie-afspraken" %}</h1>
 
 {% if appointments %}
     <p class="tabled__key">{% trans "Een overzicht van uw afspraken" %}</p>
@@ -43,7 +43,7 @@ <h2 class="card__heading-2">{{ appointment.services.0.name|default:appointment.t
     {% endrender_grid %}
     </div>
 {% else %}
-    <p class="utrecht-paragraph"><strong>{% trans "Geen afspraken beschikbaar" %}</strong></p>
+    <nl-paragraph><strong>{% trans "Geen afspraken beschikbaar" %}</strong></nl-paragraph>
 {% endif %}
 
 {% endblock %}
diff --git a/src/open_inwoner/templates/pages/profile/categories.html b/src/open_inwoner/templates/pages/profile/categories.html
index 782bff6c2f..136ac20e8d 100644
--- a/src/open_inwoner/templates/pages/profile/categories.html
+++ b/src/open_inwoner/templates/pages/profile/categories.html
@@ -2,12 +2,12 @@
 {% load i18n form_tags %}
 
 {% block content %}
-<h1 class="utrecht-heading-1" id="title">
+<h1 class="nl-heading nl-heading--level-1" id="title">
     {% trans "Mijn Interessegebieden" %}
 </h1>
-<p class="utrecht-paragraph">
+<nl-paragraph>
     {% trans "Selecteer hier welke onderwerpen u interesseren, om op maat gemaakte inhoud voorgeschoteld te krijgen en nog beter te kunnen zoeken en vinden" %}
-</p>
+</nl-paragraph>
 
 {% form form_object=form method="POST" id="change-categories" submit_text=_("Opslaan") secondary_href='profile:detail' secondary_text=_('Terug') secondary_icon='arrow_backward' secondary_icon_position="before" extra_classes="select-grid" %}
 {% endblock content %}
diff --git a/src/open_inwoner/templates/pages/profile/contacts/edit.html b/src/open_inwoner/templates/pages/profile/contacts/edit.html
index 8fbfd23385..5b3fca801e 100644
--- a/src/open_inwoner/templates/pages/profile/contacts/edit.html
+++ b/src/open_inwoner/templates/pages/profile/contacts/edit.html
@@ -6,7 +6,7 @@
 
 
 {% block content %}
-    <h1 class="utrecht-heading-1">{% trans "Creëer contact" %}</h1>
+    <h1 class="nl-heading nl-heading--level-1">{% trans "Creëer contact" %}</h1>
     {% render_grid %}
         {% render_column span=9 %}
             {% form columns=2 id="contact-form" form_object=form method="POST" show_notifications=True submit_text=_("Opslaan") secondary_href='profile:contact_list' secondary_text=_('Terug') secondary_icon='arrow_backward' secondary_icon_position="before" %}
diff --git a/src/open_inwoner/templates/pages/profile/contacts/list.html b/src/open_inwoner/templates/pages/profile/contacts/list.html
index 3a8a24974e..81ec117a46 100644
--- a/src/open_inwoner/templates/pages/profile/contacts/list.html
+++ b/src/open_inwoner/templates/pages/profile/contacts/list.html
@@ -4,7 +4,7 @@
 
 {% block content %}
 <header class="oip-header-group">
-    <h1 class="utrecht-heading-1" id="title">
+    <h1 class="nl-heading nl-heading--level-1" id="title">
         {% trans "Mijn contacten" %}
 
     </h1>
@@ -17,15 +17,15 @@ <h1 class="utrecht-heading-1" id="title">
     <div class="approval-container{% if approvals_count == 1 %}--solo{% endif %}">
         <div class="approval">
             <div class="approval__header">
-                <h2 class="utrecht-heading-2">{% trans "U bent toegevoegd als contactpersoon" %}</h2>
-                <p class="utrecht-paragraph">{% trans "By accepting you agree on sharing your personal data (first name, last name and phonenumber)." %}</p>
+                <h2 class="nl-heading nl-heading--level-2">{% trans "U bent toegevoegd als contactpersoon" %}</h2>
+                <nl-paragraph>{% trans "By accepting you agree on sharing your personal data (first name, last name and phonenumber)." %}</nl-paragraph>
             </div>
             {% if approvals_count == 1 %}
                 {% with pending_approvals.get as pending_approval %}
                 <div class="approval__single">
-                    <p class="utrecht-paragraph">
+                    <nl-paragraph>
                         {% blocktrans with full_name=pending_approval.get_full_name %}{{ full_name }} wil u toevoegen als contactpersoon.{% endblocktrans %}
-                    </p>
+                    </nl-paragraph>
                     {% url 'profile:contact_approval' uuid=pending_approval.uuid as approval_url %}
                     {% render_form form=None method="POST" form_action=approval_url id="approval_form" spaceless=True show_notifications=True %}
                         {% csrf_token %}
@@ -40,7 +40,7 @@ <h2 class="utrecht-heading-2">{% trans "U bent toegevoegd als contactpersoon" %}
                 <ul class="approval__list">
                     {% for approval in pending_approvals %}
                         <li class="approval__list-item">
-                            <p class="utrecht-paragraph">{{approval.get_full_name}}</p>
+                            <nl-paragraph>{{approval.get_full_name}}</nl-paragraph>
                             {% url 'profile:contact_approval' uuid=approval.uuid as approval_url %}
                             {% render_form form=None method="POST" form_action=approval_url id="approval_form" spaceless=True show_notifications=True %}
                                 {% csrf_token %}
@@ -74,7 +74,7 @@ <h2 class="utrecht-heading-2">{% trans "U bent toegevoegd als contactpersoon" %}
             {% button text=_("Filter") type="button" bordered=True %}
         </div>
         <div class="contacts__filter-container filter__container">
-            <p class="utrecht-paragraph">{% trans "Filter op:" %}</p>
+            <nl-paragraph>{% trans "Filter op:" %}</nl-paragraph>
             {% input form.type no_label=True no_help=True icon="expand_more" class="label input" id="id_type" %}
         </div>
     </div>
diff --git a/src/open_inwoner/templates/pages/profile/edit.html b/src/open_inwoner/templates/pages/profile/edit.html
index 5fc9400e14..a099c135f1 100644
--- a/src/open_inwoner/templates/pages/profile/edit.html
+++ b/src/open_inwoner/templates/pages/profile/edit.html
@@ -12,7 +12,7 @@
 {% block content %}
 
     <div class="profile__grid">
-        <h1 class="utrecht-heading-1" id="title">
+        <h1 class="nl-heading nl-heading--level-1" id="title">
             {% trans "Bewerk contactgegevens" %}
         </h1>
 
diff --git a/src/open_inwoner/templates/pages/profile/me.html b/src/open_inwoner/templates/pages/profile/me.html
index 84847acba9..95fed14991 100644
--- a/src/open_inwoner/templates/pages/profile/me.html
+++ b/src/open_inwoner/templates/pages/profile/me.html
@@ -12,7 +12,7 @@
 {% get_solo 'configurations.SiteConfiguration' as siteconfig %}
 
 <section class="tabled tabled--flexible">
-    <h1 class="utrecht-heading-1" id="title">{% trans "Welkom" %}{% if not user.is_eherkenning_user %}, {{ user.display_name }}{% endif %}</h1>
+    <h1 class="nl-heading nl-heading--level-1" id="title">{% trans "Welkom" %}{% if not user.is_eherkenning_user %}, {{ user.display_name }}{% endif %}</h1>
     <p class="tabled__key">
     {% trans "Voor het laatst ingelogd op" %}: <span
     class="tabled__value">{% firstof user.previous_login|date:"j F Y" user.last_login|date:"j F Y" %} om {% firstof user.previous_login|date:"G:i" user.last_login|date:"G:i" %} uur</span>
@@ -24,7 +24,7 @@ <h1 class="utrecht-heading-1" id="title">{% trans "Welkom" %}{% if not user.is_e
     <section class="tabled tabled--flexible profile-section profile-section--bordered profile-section__business-overview">
         <div class="tabled__section">
             <header class="oip-header-group title">
-                <h2 class="utrecht-heading-2" id="business-overview">{% trans "Bedrijfsgegevens" %}</h2>
+                <h2 class="nl-heading nl-heading--level-2" id="business-overview">{% trans "Bedrijfsgegevens" %}</h2>
                 <div class="tabled__item--mobile-big">
                     {% session_is_branch_restricted as is_branch_restricted %}
                     {% if not is_branch_restricted %}
@@ -77,7 +77,7 @@ <h2 class="utrecht-heading-2" id="business-overview">{% trans "Bedrijfsgegevens"
     <section class="tabled tabled--flexible profile-section profile-section--bordered profile-section__personal-info" id="personal-info">
         <div class="tabled__section">
             <header class="oip-header-group title">
-                <h2 class="utrecht-heading-2 " id="personal-overview">{% trans "Persoonlijke gegevens" %}</h2>
+                <h2 class="nl-heading nl-heading--level-2 " id="personal-overview">{% trans "Persoonlijke gegevens" %}</h2>
                 <div class="tabled__item--mobile-big">
                     {% button href="profile:edit" text=_("Bewerk") aria_label=_("Bewerk persoonsgegevens") icon="edit" transparent=True icon_outlined=True %}
                     {% if user.is_bsn_user_with_brp and view.config.my_data %}
@@ -123,7 +123,7 @@ <h2 class="utrecht-heading-2 " id="personal-overview">{% trans "Persoonlijke geg
         <section class="tabled tabled--flexible profile-section profile-section--bordered profile-section__notifications" id="profile-notifications">
             <div class="tabled__section">
                 <header class="oip-header-group title">
-                    <h2 class="utrecht-heading-2" id="notifications">{% trans "Voorkeuren voor meldingen" %}
+                    <h2 class="nl-heading nl-heading--level-2" id="notifications">{% trans "Voorkeuren voor meldingen" %}
                     </h2>
                     <div class="tabled__item--mobile-big">
                         {% button href="profile:notifications" text=_("Bewerk") aria_label=_("Bewerk meldingsvoorkeuren") icon="edit" transparent=True icon_outlined=True %}
@@ -149,10 +149,10 @@ <h2 class="utrecht-heading-2" id="notifications">{% trans "Voorkeuren voor meldi
     <section class="tabled tabled--flexible profile-section profile-section--bordered profile-section__newsletters" id="profile-newsletters">
         <div class="tabled__section">
             <header class="oip-header-group title">
-                <h2 class="utrecht-heading-2" id="newsletters">{% trans "Nieuwsbrieven" %}</h2>
+                <h2 class="nl-heading nl-heading--level-2" id="newsletters">{% trans "Nieuwsbrieven" %}</h2>
             </header>
         </div>
-            <p class="utrecht-paragraph">{% trans "Vink de nieuwsbrieven aan die u wilt ontvangen. Wilt u een nieuwsbrief niet meer ontvangen? Haal het vinkje dan weg. Sla daarna uw keuze op." %}</p>
+        <nl-paragraph>{% trans "Vink de nieuwsbrieven aan die u wilt ontvangen. Wilt u een nieuwsbrief niet meer ontvangen? Haal het vinkje dan weg. Sla daarna uw keuze op." %}</nl-paragraph>
             <form method="POST" id="newsletter-form" class="form" novalidate>
                 {% csrf_token %}
                 {% with form.fields.newsletters.remarks_mapping as remarks_mapping %}
@@ -184,7 +184,7 @@ <h2 class="utrecht-heading-2" id="newsletters">{% trans "Nieuwsbrieven" %}</h2>
     {# Overview #}
     <section class="profile-section profile-section__overview">
         <header class="oip-header-group title">
-            <h2 class="utrecht-heading-2" id="overview">{% trans "Overzicht" %}</h2>
+            <h2 class="nl-heading nl-heading--level-2" id="overview">{% trans "Overzicht" %}</h2>
         </header>
         <div class="profile-cards card-container card-container--columns-3">
             {# Selected categories #}
@@ -354,13 +354,13 @@ <h2 class="utrecht-heading-2" id="overview">{% trans "Overzicht" %}</h2>
     <section class="tabled profile-section profile-section--bordered profile-section__remove">
         <div class="tabled__section">
             <header class="oip-header-group title">
-                <h2 class="utrecht-heading-2" id="profile-remove">{% trans "Profiel verwijderen" %}</h2>
+                <h2 class="nl-heading nl-heading--level-2" id="profile-remove">{% trans "Profiel verwijderen" %}</h2>
             </header>
         </div>
             <div class="tabled">
-                <p class="utrecht-paragraph">
+                <nl-paragraph>
                     {% trans "Wilt u uw profiel verwijderen? Dan worden al uw persoonlijke voorkeuren verwijderd binnen deze MijnOmgeving. Uw persoonsgegevens en uw zaken worden niet verwijderd." %}
-                </p>
+                </nl-paragraph>
             </div>
             {% render_form form=form method="POST" id="delete-form" extra_classes="confirm" spaceless=True data_confirm_title=_("Weet u zeker dat u uw profiel wilt verwijderen?") data_confirm_text=_("Hiermee worden alleen uw persoonlijke voorkeuren binnen deze MijnOmgeving verwijderd. Uw persoonsgegevens en uw zaken worden niet verwijderd.") data_confirm_cancel=_("Nee, annuleren") data_confirm_default=_("Ja, verwijderen") %}
             {% csrf_token %}
diff --git a/src/open_inwoner/templates/pages/profile/mydata.html b/src/open_inwoner/templates/pages/profile/mydata.html
index a730f22f1e..494bafd7f1 100644
--- a/src/open_inwoner/templates/pages/profile/mydata.html
+++ b/src/open_inwoner/templates/pages/profile/mydata.html
@@ -8,21 +8,21 @@
 {% block content %}
 
     <div class="profile__grid">
-        <h1 class="utrecht-heading-1" id="title">
+        <h1 class="nl-heading nl-heading--level-1" id="title">
             {% trans "Persoonlijke gegevens" %}
         </h1>
 
-        <p class="utrecht-paragraph">
+        <nl-paragraph>
             {% trans "Hier ziet u een beperkte set van gegevens die van u zijn opgeslagen in de Basisregistratie Personen (BRP). Al uw persoonlijke gegevens kunt u vinden op " %}
             {% link href="https://mijn.overheid.nl" text="mijn.overheid.nl" primary=True %}
-        </p>
+        </nl-paragraph>
 
         <!-- BRP personal data -->
         {% with request.user as user %}
             <section class="tabled tabled--flexible profile-section" id="profile-notifications">
                 <div class="tabled__section">
                     <header class="oip-header-group title">
-                        <h2 class="utrecht-heading-2" id="notifications">{% trans "Mijn BRP gegevens" %}</h2>
+                        <h2 class="nl-heading nl-heading--level-2" id="notifications">{% trans "Mijn BRP gegevens" %}</h2>
                     </header>
                 </div>
                 <div class="tabled__row tabled__row--blank">
@@ -63,7 +63,7 @@ <h2 class="utrecht-heading-2" id="notifications">{% trans "Mijn BRP gegevens" %}
             <section class="tabled tabled--flexible profile-section" id="profile-notifications">
                 <div class="tabled__section">
                     <header class="oip-header-group title">
-                        <h2 class="utrecht-heading-2" id="notifications">{% trans "Inschrijfadres" %}</h2>
+                        <h2 class="nl-heading nl-heading--level-2" id="notifications">{% trans "Inschrijfadres" %}</h2>
                     </header>
                 </div>
                 <div class="tabled__row tabled__row--blank">
@@ -94,7 +94,7 @@ <h2 class="utrecht-heading-2" id="notifications">{% trans "Inschrijfadres" %}</h
             <section class="tabled tabled--flexible profile-section" id="profile-notifications">
                 <div class="tabled__section">
                     <header class="oip-header-group title">
-                        <h2 class="utrecht-heading-2 title" id="notifications">{% trans "Contactgegevens" %}</h2>
+                        <h2 class="nl-heading nl-heading--level-2 title" id="notifications">{% trans "Contactgegevens" %}</h2>
                         <div class="tabled__item--force-right tabled__item--mobile-big">
                             {% button href="profile:edit" text=_("Bewerk") icon="edit" transparent=True icon_outlined=True %}
                         </div>
diff --git a/src/open_inwoner/templates/pages/profile/notifications.html b/src/open_inwoner/templates/pages/profile/notifications.html
index ee051c99f1..5f7faec82f 100644
--- a/src/open_inwoner/templates/pages/profile/notifications.html
+++ b/src/open_inwoner/templates/pages/profile/notifications.html
@@ -4,7 +4,7 @@
 {% block content %}
     {% render_grid %}
         {% render_column start=5 span=5 %}
-        <h1 class="utrecht-heading-1" id="title">
+        <h1 class="nl-heading nl-heading--level-1" id="title">
             {% trans "Meldingsvoorkeuren" %}
         </h1>
 
@@ -14,8 +14,8 @@ <h1 class="utrecht-heading-1" id="title">
             {# Start of multiple checkbox fields #}
             <ul class="choice-list choice-list-multiple">
 
-            <h3 class="utrecht-heading-3">{% trans "Ontvang berichten over" %}</h3>
-                <p class="utrecht-paragraph">{% trans "Kies voor welk onderwerp u meldingen wilt ontvangen" %}</p>
+            <h3 class="nl-heading nl-heading--level-3">{% trans "Ontvang berichten over" %}</h3>
+                <nl-paragraph>{% trans "Kies voor welk onderwerp u meldingen wilt ontvangen" %}</nl-paragraph>
 
                 {% if form.cases_notifications %}
                     <li class="choice-list-multiple__item">
@@ -52,7 +52,7 @@ <h3 class="utrecht-heading-3">{% trans "Ontvang berichten over" %}</h3>
 
                 {# Choice of zaken notification channel #}
                 {% if form.case_notification_channel %}
-                    <p class="utrecht-paragraph choice-list__p">{% trans "Hoe wilt u deze meldingen ontvangen?" %}</p>
+                    <p class="nl-paragraph choice-list__p">{% trans "Hoe wilt u deze meldingen ontvangen?" %}</p>
                     {% with form.case_notification_channel as field %}
                         {% choice_list single=True cols=True %}
                             {% for choice in field.field.choices %}
diff --git a/src/open_inwoner/templates/pages/profile/questionnaire.html b/src/open_inwoner/templates/pages/profile/questionnaire.html
index a18838c311..034c4d0bf5 100644
--- a/src/open_inwoner/templates/pages/profile/questionnaire.html
+++ b/src/open_inwoner/templates/pages/profile/questionnaire.html
@@ -2,7 +2,7 @@
 {% load i18n string_tags %}
 
 {% block content %}
-    <h1 class="utrecht-heading-1">{{configurable_text.questionnaire_page.select_questionnaire_title}}</h1>
+    <h1 class="nl-heading nl-heading--level-1">{{configurable_text.questionnaire_page.select_questionnaire_title}}</h1>
     {% optional_paragraph configurable_text.questionnaire_page.select_questionnaire_intro %}
     {% include "components/Questionnaire/Questionnaire.html" with root_nodes=root_nodes only %}
 {% endblock content %}
diff --git a/src/open_inwoner/templates/pages/questionnaire/questionnaire-step.html b/src/open_inwoner/templates/pages/questionnaire/questionnaire-step.html
index 8b9719940a..502431e74c 100644
--- a/src/open_inwoner/templates/pages/questionnaire/questionnaire-step.html
+++ b/src/open_inwoner/templates/pages/questionnaire/questionnaire-step.html
@@ -5,7 +5,7 @@
     {% render_grid %}
         {% render_column span=9 %}
             <header class="oip-header-group">
-                <h1 class="utrecht-heading-1" data-title="{{ form.instance.get_title }}" data-code="{{ form.instance.code }}">
+                <h1 class="nl-heading nl-heading--level-1" data-title="{{ form.instance.get_title }}" data-code="{{ form.instance.code }}">
                     <span>{{ form.instance.get_title }}</span>
                 </h1>
                 {% if not form.instance.get_children %}
@@ -14,7 +14,7 @@ <h1 class="utrecht-heading-1" data-title="{{ form.instance.get_title }}" data-co
             </header>
 
             {% if form.instance.get_description %}
-                <p class="utrecht-paragraph">{{ form.instance.get_description }}</p>
+                <nl-paragraph>{{ form.instance.get_description }}</nl-paragraph>
             {% endif %}
 
             {% step_indicator form.instance.depth form.instance.depth object_list=form.instance.get_tree_path object_list_str='question_subject' %}
@@ -23,7 +23,7 @@ <h1 class="utrecht-heading-1" data-title="{{ form.instance.get_title }}" data-co
             <legend class="utrecht-heading-4" id="question">{{ form.instance.question }}</legend>
 
             {% if form.instance.help_text %}
-                <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-compact">{{ form.instance.help_text }}</p>
+                <p class="nl-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-compact">{{ form.instance.help_text }}</p>
             {% endif %}
 
             {% firstof form.instance.get_parent.get_absolute_url as secondary_href %}
diff --git a/src/open_inwoner/templates/pages/search.html b/src/open_inwoner/templates/pages/search.html
index 370914eded..aa4dd5637a 100644
--- a/src/open_inwoner/templates/pages/search.html
+++ b/src/open_inwoner/templates/pages/search.html
@@ -3,7 +3,7 @@
 
 {% block main_inner %}
     {#  search term section #}
-    <h1 class="utrecht-heading-1">{% trans "Zoekresultaten voor " %} "{% firstof search_form.query.value "" %}"</h1>
+    <h1 class="nl-heading nl-heading--level-1">{% trans "Zoekresultaten voor " %} "{% firstof search_form.query.value "" %}"</h1>
     <p class="search-results__title-small">{{ paginator.count }} {% trans "resultaten" %} </p>
 
     {#  facets and results section #}
@@ -27,8 +27,8 @@ <h1 class="utrecht-heading-1">{% trans "Zoekresultaten voor " %} "{% firstof sea
                     {% for hit in page_obj %}
                     <a href="{{ hit.link }}" class="card card__description-card search-results__item">
                         <div class="card__body card__body--tabled">
-                            <h3 class="utrecht-heading-3 search-results__item-title">{{ hit.title }}</h3>
-                            <p class="utrecht-paragraph search-results__item-intro">{{ hit.summary }}</p>
+                            <h3 class="nl-heading nl-heading--level-3 search-results__item-title">{{ hit.title }}</h3>
+                            <p class="nl-paragraph search-results__item-intro">{{ hit.summary }}</p>
                             <span class="link link--icon link--primary">
                                 <span class="link__text">Bekijk resultaat</span>
                                 {% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %}
@@ -45,7 +45,7 @@ <h3 class="utrecht-heading-3 search-results__item-title">{{ hit.title }}</h3>
                 {% render_grid %}
                     {% render_column start=1 span=7 %}
                         <section class="feedback" aria-label="{% trans "Pagina feedback" %}">
-                            <h2 class="utrecht-heading-2">{% trans "Heeft u gevonden wat u zocht?" %}</h2>
+                            <h2 class="nl-heading nl-heading--level-2">{% trans "Heeft u gevonden wat u zocht?" %}</h2>
                             {% render_form form=feedback_form method="POST" form_action=request.get_full_path id="feedback_form" show_notifications=True %}
                                 {% csrf_token %}
                                 {{ feedback_form.errors }}
@@ -73,7 +73,7 @@ <h2 class="utrecht-heading-2">{% trans "Heeft u gevonden wat u zocht?" %}</h2>
                                 <div class="feedback__remark">
                                     <div class="form__control">
                                         <label class="label">
-                                            <span class="feedback__label-text utrecht-paragraph"></span>
+                                            <span class="feedback__label-text nl-paragraph"></span>
                                             {{ feedback_form.remark|addclass:"textarea" }}
                                         </label>
                                     </div>
@@ -94,13 +94,13 @@ <h2 class="utrecht-heading-2">{% trans "Heeft u gevonden wat u zocht?" %}</h2>
                 <div class="search-results search-results--no-results">
                     <div class="search-results--no-results-column">{% icon icon="info" icon_position="before" extra_classes="icon--info" outlined=True %}</div>
                     <div class="search-results--no-results-column">
-                        <h2 class="utrecht-heading-2 search-results__title">
+                        <h2 class="nl-heading nl-heading--level-2 search-results__title">
                             {% trans "We konden geen zoekresultaten vinden" %}
                         </h2>
                         {% if configurable_text.search_page.search_zero_results_text.html %}
                             {{ configurable_text.search_page.search_zero_results_text.html|safe }}
                         {% else %}
-                            <p class="utrecht-paragraph">{% trans "Probeer het nog eens met deze tips:" %}</p>
+                            <nl-paragraph>{% trans "Probeer het nog eens met deze tips:" %}</nl-paragraph>
                             <ul class="ul">
                                 <li class="li">{% trans "Zorg ervoor dat alle woorden goed gespeld zijn." %}</li>
                                 <li class="li">{% trans "Probeer andere zoektermen." %}</li>
diff --git a/src/open_inwoner/templates/pages/sitemap/sitemap.html b/src/open_inwoner/templates/pages/sitemap/sitemap.html
index ab8e1e9c93..132e20f029 100644
--- a/src/open_inwoner/templates/pages/sitemap/sitemap.html
+++ b/src/open_inwoner/templates/pages/sitemap/sitemap.html
@@ -2,7 +2,7 @@
 {% load i18n list_tags icon_tags %}
 
 {% block content %}
-    <h1 class="utrecht-heading-1">{% trans "Links naar pagina's op " %}{{ site_name }}</h1>
+    <h1 class="nl-heading nl-heading--level-1">{% trans "Links naar pagina's op " %}{{ site_name }}</h1>
 
     <div class="sitemap">
         {# All pages - flat list, alphabetically sorted #}
diff --git a/src/open_inwoner/templates/pages/ssd/reports_base.html b/src/open_inwoner/templates/pages/ssd/reports_base.html
index bee554dcac..a2c5fef421 100644
--- a/src/open_inwoner/templates/pages/ssd/reports_base.html
+++ b/src/open_inwoner/templates/pages/ssd/reports_base.html
@@ -8,7 +8,7 @@
 {% block content %}
     {% render_grid %}
         {% render_column span=9 %}
-            <h1 class="utrecht-heading-1" id="title">
+            <h1 class="nl-heading nl-heading--level-1" id="title">
                 {{ page_title }}
             </h1>
             <p>
diff --git a/src/open_inwoner/templates/registration/password_change_done.html b/src/open_inwoner/templates/registration/password_change_done.html
index 5a688d97f0..c4d7bb5785 100644
--- a/src/open_inwoner/templates/registration/password_change_done.html
+++ b/src/open_inwoner/templates/registration/password_change_done.html
@@ -2,6 +2,6 @@
 {% load i18n %}
 
 {% block content %}
-    <h1 class="utrecht-heading-1">{% trans "Password reset was successful" %}</h1>
-    <p class="utrecht-paragraph">{% trans "Your password has been changed." %}</p>
+    <h1 class="nl-heading nl-heading--level-1">{% trans "Password reset was successful" %}</h1>
+    <nl-paragraph>{% trans "Your password has been changed." %}</nl-paragraph>
 {% endblock content %}
diff --git a/src/open_inwoner/templates/registration/password_change_form.html b/src/open_inwoner/templates/registration/password_change_form.html
index 2e4bf11ff5..e689de9850 100644
--- a/src/open_inwoner/templates/registration/password_change_form.html
+++ b/src/open_inwoner/templates/registration/password_change_form.html
@@ -10,8 +10,8 @@
     {% render_grid %}
         {% render_column start=0 span=8 %}
 
-            <h1 class="utrecht-heading-1">{% trans "Password reset" %}</h1>
-            <p class="utrecht-paragraph">{% trans "For security reasons, please enter your old password and your new password twice so we can make sure you have not made any typo." %}</p>
+            <h1 class="nl-heading nl-heading--level-1">{% trans "Password reset" %}</h1>
+            <nl-paragraph>{% trans "For security reasons, please enter your old password and your new password twice so we can make sure you have not made any typo." %}</nl-paragraph>
 
             {% render_form id="password-change-form" method="POST" form=form %}
                 {% csrf_token %}
diff --git a/src/open_inwoner/templates/registration/password_reset_complete.html b/src/open_inwoner/templates/registration/password_reset_complete.html
index 8855f5ea88..2003c56487 100644
--- a/src/open_inwoner/templates/registration/password_reset_complete.html
+++ b/src/open_inwoner/templates/registration/password_reset_complete.html
@@ -2,10 +2,10 @@
 {% load i18n button_tags %}
 
 {% block content %}
-    <h1 class="utrecht-heading-1">{% trans "Password reset complete" %}</h1>
-    <p class="utrecht-paragraph">{% trans "Your password has been set. You can now continue and log in." %}</p>
+    <h1 class="nl-heading nl-heading--level-1">{% trans "Password reset complete" %}</h1>
+    <nl-paragraph>{% trans "Your password has been set. You can now continue and log in." %}</nl-paragraph>
 
     {% with login_url as login_url %}
-        <p class="utrecht-paragraph">{% button href=login_url text=_("Log in") primary=True %}</p>
+        <nl-paragraph>{% button href=login_url text=_("Log in") primary=True %}</nl-paragraph>
     {% endwith %}
 {% endblock content %}
diff --git a/src/open_inwoner/templates/registration/password_reset_confirm.html b/src/open_inwoner/templates/registration/password_reset_confirm.html
index 7fd4d2956d..ab62d75d79 100644
--- a/src/open_inwoner/templates/registration/password_reset_confirm.html
+++ b/src/open_inwoner/templates/registration/password_reset_confirm.html
@@ -3,11 +3,11 @@
 
 {% block content %}
     {% if validlink %}
-        <h1 class="utrecht-heading-1">{% trans "Enter new password" %}</h1>
-        <p class="utrecht-paragraph">{% trans "Please enter your old password and your new password twice so we can make sure you have not made any typo." %}</p>
+        <h1 class="nl-heading nl-heading--level-1">{% trans "Enter new password" %}</h1>
+        <nl-paragraph>{% trans "Please enter your old password and your new password twice so we can make sure you have not made any typo." %}</nl-paragraph>
         {% form form_object=form method="POST" submit_text=_('Change my password') id="password-reset-confirm" %}
     {% else %}
-        <h1 class="utrecht-heading-1">{% trans "Password reset failed" %}</h1>
-        <p class="utrecht-paragraph">{% trans "The password reset link was invalid, possibly because it has already been used. Please request a new password reset." %}</p>
+        <h1 class="nl-heading nl-heading--level-1">{% trans "Password reset failed" %}</h1>
+        <nl-paragraph>{% trans "The password reset link was invalid, possibly because it has already been used. Please request a new password reset." %}</nl-paragraph>
     {% endif %}
 {% endblock content %}
diff --git a/src/open_inwoner/templates/registration/password_reset_done.html b/src/open_inwoner/templates/registration/password_reset_done.html
index 1258a16d21..1ebe94ff6d 100644
--- a/src/open_inwoner/templates/registration/password_reset_done.html
+++ b/src/open_inwoner/templates/registration/password_reset_done.html
@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block content %}
-    <h1 class="utrecht-heading-1">{% trans "Password reset email sent" %}</h1>
-    <p class="utrecht-paragraph">{% trans "We have sent you instructions on how to set your password, if an account exists with the email address you entered. You should receive this shortly." %}</p>
-    <p class="utrecht-paragraph">{% trans "If you did not receive an email, please make sure you entered the email address you registered with and check your spam folder." %}</p>
+    <h1 class="nl-heading nl-heading--level-1">{% trans "Password reset email sent" %}</h1>
+    <nl-paragraph>{% trans "We have sent you instructions on how to set your password, if an account exists with the email address you entered. You should receive this shortly." %}</nl-paragraph>
+    <nl-paragraph>{% trans "If you did not receive an email, please make sure you entered the email address you registered with and check your spam folder." %}</nl-paragraph>
 {% endblock content %}
diff --git a/src/open_inwoner/templates/registration/password_reset_form.html b/src/open_inwoner/templates/registration/password_reset_form.html
index f9052c9f09..945e9c4474 100644
--- a/src/open_inwoner/templates/registration/password_reset_form.html
+++ b/src/open_inwoner/templates/registration/password_reset_form.html
@@ -5,9 +5,9 @@
 
     {% render_grid %}
         {% render_column start=0 span=6 %}
-            <h1 class="utrecht-heading-1">{% trans "Reset password" %}</h1>
-            <p class="utrecht-paragraph">{% trans "Forgot your password? Enter your email address below. Then you will receive an email with instructions to set a new password." %}</p>
-            <p class="utrecht-paragraph">{% trans "Please note: this only works if you do are not using DigiD to log in." %}</p>
+            <h1 class="nl-heading nl-heading--level-1">{% trans "Reset password" %}</h1>
+            <nl-paragraph>{% trans "Forgot your password? Enter your email address below. Then you will receive an email with instructions to set a new password." %}</nl-paragraph>
+            <nl-paragraph>{% trans "Please note: this only works if you do are not using DigiD to log in." %}</nl-paragraph>
 
             {% render_form id="password-reset-form" method="POST" form=form %}
                 {% csrf_token %}
diff --git a/src/open_inwoner/utils/html.py b/src/open_inwoner/utils/html.py
index c20cb9dd44..a1fe644f4d 100644
--- a/src/open_inwoner/utils/html.py
+++ b/src/open_inwoner/utils/html.py
@@ -5,15 +5,15 @@
 from bs4 import BeautifulSoup
 
 CLASS_ADDERS = [
-    ("h1", "utrecht-heading-1"),
-    ("h2", "utrecht-heading-2"),
+    ("h1", "nl-heading nl-heading--level-1"),
+    ("h2", "nl-heading--level-2"),
     ("h3", "utrecht-heading-3"),
     ("h4", "utrecht-heading-4"),
     ("h5", "utrecht-heading-5"),
     ("h6", "utrecht-heading-6"),
     ("img", "image"),
     ("li", "li"),
-    ("p", "utrecht-paragraph"),
+    ("p", "nl-paragraph"),
     ("a", "link link--secondary"),
     ("table", "table table--content"),
     ("thead", "table__heading"),
diff --git a/src/open_inwoner/utils/tests/test_product_content_rendering.py b/src/open_inwoner/utils/tests/test_product_content_rendering.py
index ff7fe06a37..f01a6565ae 100644
--- a/src/open_inwoner/utils/tests/test_product_content_rendering.py
+++ b/src/open_inwoner/utils/tests/test_product_content_rendering.py
@@ -28,7 +28,7 @@ def test_renders_basic_content(self):
         html = str(rendered)
 
         # Check that paragraph has proper class
-        self.assertIn('class="utrecht-paragraph"', html)
+        self.assertIn('class="nl-paragraph"', html)
         self.assertIn("This is a test paragraph", html)
 
     def test_renders_ctabutton_with_link(self):