From 478c9be7b57e773348db4bb4b630b972a2dc396c Mon Sep 17 00:00:00 2001
From: Jiro Ghianni <jiro@maykinmedia.nl>
Date: Tue, 21 May 2024 14:56:14 +0200
Subject: [PATCH] [#2480] Added NLDS paragraph component, and OIP modifiers

---
 package-lock.json                             |  14 +-
 package.json                                  |   2 +-
 .../accounts/email_verification.html          |   2 +-
 .../templates/accounts/invite_accept.html     |   2 +-
 .../accounts/registration_necessary.html      |   2 +-
 .../registration_complete.html                |   2 +-
 .../registration/add_phone_number_1.html      |   2 +-
 .../registration/add_phone_number_2.html      |   2 +-
 .../templates/registration/verify_token.html  |   2 +-
 .../cms/banner/tests/test_plugin_banner.py    |   2 +-
 .../templates/components/Action/Actions.html  |   4 +-
 .../components/Card/DescriptionCard.html      |   2 +-
 .../components/Card/LocationCard.html         |   6 +-
 .../components/Card/ProductCard.html          |   2 +-
 .../components/Contact/ContactForm.html       |   2 +-
 .../components/Dashboard/Dashboard.html       |   2 +-
 .../templates/components/Faq/Faq.html         |   2 +-
 .../templates/components/File/File.html       |   2 +-
 .../templates/components/File/FileList.html   |   2 +-
 .../components/Form/Autocomplete.html         |   2 +-
 .../templates/components/Form/DateField.html  |   2 +-
 .../templates/components/Form/Error.html      |   2 +-
 .../templates/components/Form/FileInput.html  |   2 +-
 .../templates/components/Form/ImageCrop.html  |   4 +-
 .../templates/components/Form/Input.html      |   2 +-
 .../components/Form/MultipleCheckbox.html     |   2 +-
 .../components/Form/MultipleRadio.html        |   2 +-
 .../templates/components/Form/Textarea.html   |   2 +-
 .../templates/components/Header/Header.html   |   2 +-
 .../templates/components/List/ListItem.html   |   6 +-
 .../components/Messages/Message.html          |   4 +-
 .../components/Messages/Messages.html         |   8 +-
 .../components/Notification/Notification.html |   4 +-
 .../templates/components/Product/finder.html  |   6 +-
 .../components/templatetags/string_tags.py    |   2 +-
 .../components/tests/test_messages.py         |   4 +-
 .../js/components/form/FileInput.js           |   4 +-
 src/open_inwoner/js/components/map/index.js   |   6 +-
 src/open_inwoner/pdc/tests/test_views.py      |   4 +-
 .../scss/components/Button/Button.scss        |  16 ++-
 .../scss/components/Card/Card.scss            |   4 +-
 .../components/Card/LocationCardList.scss     |  13 +-
 .../CardContainer/CardContainer.scss          |  13 +-
 .../scss/components/File/File.scss            |   2 +-
 .../scss/components/File/FileList.scss        |  13 +-
 .../scss/components/Form/FileInput.scss       |   6 +-
 .../scss/components/Form/Form.scss            |   4 +-
 .../scss/components/Header/AnchorMenu.scss    |  23 +++-
 .../scss/components/Header/Header.scss        |   8 +-
 .../scss/components/List/_ListItem.scss       |  10 +-
 .../scss/components/Map/_Map.scss             |  23 +++-
 .../scss/components/Messages/_Messages.scss   |  14 +-
 .../Notification/_Notification.scss           |   6 +-
 .../components/Product/product-detail.scss    |   6 +
 .../scss/components/Status/_StatusList.scss   |   8 +-
 .../scss/components/Typography/H1.scss        |  12 +-
 .../scss/components/Typography/H2.scss        |  42 +++---
 .../scss/components/Typography/H3.scss        |   9 +-
 .../scss/components/Typography/H4.scss        |   4 +
 .../scss/components/Typography/Link.scss      |   9 +-
 .../scss/components/Typography/LinkList.scss  |   9 +-
 .../scss/components/Typography/P.scss         | 124 ++++++++++++------
 .../scss/components/Typography/wysiwyg.scss   |  11 +-
 .../scss/components/UserFeed/UserFeed.scss    |   8 +-
 .../scss/overwrites/_ckeditor.scss            |  18 ++-
 .../scss/views/_product_detail.scss           |   9 +-
 src/open_inwoner/templates/404.html           |   2 +-
 .../cms/banner/banner_text_plugin.html        |   2 +-
 .../cms/collaborate/active_plans_plugin.html  |   6 +-
 src/open_inwoner/templates/cms/fullwidth.html |   2 +-
 .../plugins/appointments/appointments.html    |   2 +-
 .../cms/products/categories_plugin.html       |   2 +-
 .../cms/products/product_location_plugin.html |   2 +-
 .../questionnaire/questionnaire_export.html   |   8 +-
 .../templates/flatpages/default.html          |   2 +-
 src/open_inwoner/templates/master.html        |   6 +-
 .../templates/pages/cases/403.html            |   2 +-
 .../templates/pages/cases/contact_form.html   |   2 +-
 .../templates/pages/cases/document_form.html  |   2 +-
 .../templates/pages/cases/status_inner.html   |   6 +-
 .../templates/pages/cases/statuses.html       |  10 +-
 .../templates/pages/category/list.html        |   2 +-
 .../templates/pages/contactmoment/list.html   |   4 +-
 .../templates/pages/plans/create.html         |   2 +-
 .../templates/pages/plans/detail.html         |   4 +-
 .../templates/pages/plans/goal_edit.html      |   2 +-
 .../templates/pages/plans/list.html           |   2 +-
 .../templates/pages/product/detail.html       |   6 +-
 .../templates/pages/product/finder.html       |   2 +-
 .../pages/product/location_detail.html        |   8 +-
 .../templates/pages/profile/categories.html   |   2 +-
 .../pages/profile/contacts/list.html          |   8 +-
 .../templates/pages/profile/me.html           |   4 +-
 .../templates/pages/profile/mydata.html       |   2 +-
 .../pages/profile/notifications.html          |   2 +-
 .../questionnaire/questionnaire-step.html     |   4 +-
 src/open_inwoner/templates/pages/search.html  |   4 +-
 .../registration/password_change_done.html    |   2 +-
 .../registration/password_change_form.html    |   2 +-
 .../registration/password_reset_complete.html |   4 +-
 .../registration/password_reset_confirm.html  |   4 +-
 .../registration/password_reset_done.html     |   4 +-
 .../registration/password_reset_form.html     |   4 +-
 103 files changed, 436 insertions(+), 248 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index bf6d26046e..41c23043af 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,7 +28,7 @@
         "@emotion/styled": "^11.3.0",
         "@fortawesome/fontawesome-free": "^6.4.2",
         "@joeattardi/emoji-button": "^4.6.4",
-        "@open-inwoner/design-tokens": "^0.0.3-alpha.0",
+        "@open-inwoner/design-tokens": "^0.0.5-alpha.4",
         "@tarekraafat/autocomplete.js": "^10.2.6",
         "bem.js": "^1.0.10",
         "emojibase-data": "^7.0.1",
@@ -4140,9 +4140,9 @@
       }
     },
     "node_modules/@open-inwoner/design-tokens": {
-      "version": "0.0.3-alpha.0",
-      "resolved": "https://registry.npmjs.org/@open-inwoner/design-tokens/-/design-tokens-0.0.3-alpha.0.tgz",
-      "integrity": "sha512-UXS6KK2onthn6+mWw7/DxzUvNHq5iGDaoKE2hLll3/O8EvsygTXm3PiTkxcsEpHQN6m9QLSY/GGSqg47Fg/Sdw=="
+      "version": "0.0.5-alpha.4",
+      "resolved": "https://registry.npmjs.org/@open-inwoner/design-tokens/-/design-tokens-0.0.5-alpha.4.tgz",
+      "integrity": "sha512-8DhJ1Tg/Hd/WFFzxn5TriX/3Lc9UC4j8wlJSGsfpRUKLsKNSvx5YKUQLqqMPYzJTeNXNebWJ5p3Km35Bu3wUdQ=="
     },
     "node_modules/@popperjs/core": {
       "version": "2.11.5",
@@ -22718,9 +22718,9 @@
       }
     },
     "@open-inwoner/design-tokens": {
-      "version": "0.0.3-alpha.0",
-      "resolved": "https://registry.npmjs.org/@open-inwoner/design-tokens/-/design-tokens-0.0.3-alpha.0.tgz",
-      "integrity": "sha512-UXS6KK2onthn6+mWw7/DxzUvNHq5iGDaoKE2hLll3/O8EvsygTXm3PiTkxcsEpHQN6m9QLSY/GGSqg47Fg/Sdw=="
+      "version": "0.0.5-alpha.4",
+      "resolved": "https://registry.npmjs.org/@open-inwoner/design-tokens/-/design-tokens-0.0.5-alpha.4.tgz",
+      "integrity": "sha512-8DhJ1Tg/Hd/WFFzxn5TriX/3Lc9UC4j8wlJSGsfpRUKLsKNSvx5YKUQLqqMPYzJTeNXNebWJ5p3Km35Bu3wUdQ=="
     },
     "@popperjs/core": {
       "version": "2.11.5",
diff --git a/package.json b/package.json
index 73dde5857c..1be6de799c 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "@emotion/styled": "^11.3.0",
     "@fortawesome/fontawesome-free": "^6.4.2",
     "@joeattardi/emoji-button": "^4.6.4",
-    "@open-inwoner/design-tokens": "^0.0.3-alpha.0",
+    "@open-inwoner/design-tokens": "^0.0.5-alpha.4",
     "@tarekraafat/autocomplete.js": "^10.2.6",
     "bem.js": "^1.0.10",
     "emojibase-data": "^7.0.1",
diff --git a/src/open_inwoner/accounts/templates/accounts/email_verification.html b/src/open_inwoner/accounts/templates/accounts/email_verification.html
index 591dbed32d..9ca1d11942 100644
--- a/src/open_inwoner/accounts/templates/accounts/email_verification.html
+++ b/src/open_inwoner/accounts/templates/accounts/email_verification.html
@@ -8,7 +8,7 @@
         {% render_card tinted=True  %}
             {% get_solo 'configurations.SiteConfiguration' as config %}
             <h1 class="utrecht-heading-1">{% trans "E-mailadres bevestigen" %}</h1><br>
-            {% if verification_text %}<p class="p">{{ verification_text|linebreaksbr }}</p><br>{% endif %}
+            {% if verification_text %}<p class="utrecht-paragraph">{{ verification_text|linebreaksbr }}</p><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/invite_accept.html b/src/open_inwoner/accounts/templates/accounts/invite_accept.html
index c874c31f88..1623f4c3c3 100644
--- a/src/open_inwoner/accounts/templates/accounts/invite_accept.html
+++ b/src/open_inwoner/accounts/templates/accounts/invite_accept.html
@@ -6,7 +6,7 @@
 <h1 class="utrecht-heading-1">
     {% trans "Accept an invitation" %}
 </h1>
-<p class="p">
+<p class="utrecht-paragraph">
     {% blocktranslate with inviter_name=object.inviter.get_full_name %}Accept invitation from {{ inviter_name }} and join Open Inwoner Platform {% endblocktranslate %}
 </p>
 
diff --git a/src/open_inwoner/accounts/templates/accounts/registration_necessary.html b/src/open_inwoner/accounts/templates/accounts/registration_necessary.html
index 373a946d63..95d0a02fbd 100644
--- a/src/open_inwoner/accounts/templates/accounts/registration_necessary.html
+++ b/src/open_inwoner/accounts/templates/accounts/registration_necessary.html
@@ -7,7 +7,7 @@
         {% 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="p">{{ config.registration_text|urlize|linebreaksbr }}</p>{% endif %}
+            {% if config.registration_text %}<p class="utrecht-paragraph">{{ config.registration_text|urlize|linebreaksbr }}</p>{% endif %}
             <form method="POST" id="necessary-form" action="{{ request.get_full_path }}" class="form" novalidate>
                 {% csrf_token %}
 
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 36256e8c53..5e9962d694 100644
--- a/src/open_inwoner/accounts/templates/django_registration/registration_complete.html
+++ b/src/open_inwoner/accounts/templates/django_registration/registration_complete.html
@@ -3,5 +3,5 @@
 
 {% block content %}
 <h1 class="utrecht-heading-1">{% trans "Succes" %}</h1>
-<p class="p">{% trans "U bent nu geregistreerd" %}</p>
+<p class="utrecht-paragraph">{% trans "U bent nu geregistreerd" %}</p>
 {% endblock content %}
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 3c78e783b0..dc8b431567 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,7 +4,7 @@
 {% block content %}
     {{ block.super }}
 
-    <p class="p">
+    <p class="utrecht-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.
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 65eca03665..4f07f305c5 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,7 +4,7 @@
 {% block content %}
     {{ block.super }}
 
-    <p class="p">
+    <p class="utrecht-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.' %}
diff --git a/src/open_inwoner/accounts/templates/registration/verify_token.html b/src/open_inwoner/accounts/templates/registration/verify_token.html
index 898259acf5..7f05ec1e29 100644
--- a/src/open_inwoner/accounts/templates/registration/verify_token.html
+++ b/src/open_inwoner/accounts/templates/registration/verify_token.html
@@ -3,7 +3,7 @@
 
 {% block content %}
     <h2 class="utrecht-heading-2">{% trans 'Account verificatie' %}</h2>
-    <p class="p">
+    <p class="utrecht-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
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 32dab5d998..cc3e380467 100644
--- a/src/open_inwoner/cms/banner/tests/test_plugin_banner.py
+++ b/src/open_inwoner/cms/banner/tests/test_plugin_banner.py
@@ -49,4 +49,4 @@ def test_banner_text_with_description_is_rendered_in_plugin(self):
         )
 
         self.assertIn(f'<h1 class="utrecht-heading-1">{title} </h1>', html)
-        self.assertIn(f'<p class="p">{description}</p>', html)
+        self.assertIn(f'<p class="utrecht-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 31eefdb828..49bb6d0c7e 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="p">{% trans "Filter op:" %}</p>
+            <p class="utrecht-paragraph">{% trans "Filter op:" %}</p>
             {% 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" %}
@@ -89,7 +89,7 @@
                 </div>
             </div>
         {% empty %}
-            <div class="table__item" colspan="4"><p class="p">{% trans "er zijn geen acties gevonden met de huidige filters of er zijn geen acties" %}</p></div>
+            <div class="table__item" colspan="4"><p class="utrecht-paragraph">{% trans "er zijn geen acties gevonden met de huidige filters of er zijn geen acties" %}</p></div>
         {% endfor %}
     </div>
 </div>
diff --git a/src/open_inwoner/components/templates/components/Card/DescriptionCard.html b/src/open_inwoner/components/templates/components/Card/DescriptionCard.html
index d42f567593..ca3816cf2e 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="p">{{ description }}</p>
+        <p class="utrecht-paragraph">{{ description }}</p>
         {% 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 a7a84acc4c..65f13ea926 100644
--- a/src/open_inwoner/components/templates/components/Card/LocationCard.html
+++ b/src/open_inwoner/components/templates/components/Card/LocationCard.html
@@ -4,9 +4,9 @@
     {% if location_name %}
         <h3 class="utrecht-heading-3 card__heading-3">{% link href=location.get_absolute_url primary=True text=location_name %}</h3>
     {% endif %}
-        <div class="card__body--flex p--no-margin">
-            <p class="p">{{ address_line_1 }}</p>
-            <p class="p">{{ address_line_2 }}</p>
+        <div class="card__body--flex container--no-margin">
+            <p class="utrecht-paragraph">{{ address_line_1 }}</p>
+            <p class="utrecht-paragraph">{{ address_line_2 }}</p>
             {% 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 a3addc8c78..02f9a1e4db 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="p">{{ description }}</p>
+            <p class="utrecht-paragraph">{{ description }}</p>
             {% 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 7a7c542283..fad8315e41 100644
--- a/src/open_inwoner/components/templates/components/Contact/ContactForm.html
+++ b/src/open_inwoner/components/templates/components/Contact/ContactForm.html
@@ -28,7 +28,7 @@
             {% endrender_form %}
 
         {% else %}
-            <p class="p">{% trans "Contact formulier niet geconfigureerd." %}</p>
+            <p class="utrecht-paragraph">{% trans "Contact formulier niet geconfigureerd." %}</p>
         {% endif %}
         </div>
     {% endrender_column %}
diff --git a/src/open_inwoner/components/templates/components/Dashboard/Dashboard.html b/src/open_inwoner/components/templates/components/Dashboard/Dashboard.html
index a8c99414cd..cf9d1ee43c 100644
--- a/src/open_inwoner/components/templates/components/Dashboard/Dashboard.html
+++ b/src/open_inwoner/components/templates/components/Dashboard/Dashboard.html
@@ -4,7 +4,7 @@
     <ul class="dashboard__list">
         {% for metric in metrics %}
             <li class="dashboard__list-item">
-                <p class="p p--compact"><span class="dashboard__item-label">{{ metric.label }}</span> {{ metric.value|default:'-' }}</p>
+                <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-compact"><span class="dashboard__item-label">{{ metric.label }}</span> {{ metric.value|default:'-' }}</p>
             </li>
         {% endfor %}
     </ul>
diff --git a/src/open_inwoner/components/templates/components/Faq/Faq.html b/src/open_inwoner/components/templates/components/Faq/Faq.html
index 5c6d544412..87fd4cc8b1 100644
--- a/src/open_inwoner/components/templates/components/Faq/Faq.html
+++ b/src/open_inwoner/components/templates/components/Faq/Faq.html
@@ -14,7 +14,7 @@ <h3 class="utrecht-heading-3">
                     {% 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"  %}
                 </h3>
-                <div id="{{ answer_id }}" class="p faq__answer">{{ question.answer|ckeditor_content|safe }}</div>
+                <div id="{{ answer_id }}" class="faq__answer">{{ question.answer|ckeditor_content|safe }}</div>
             </li>
         {% endfor %}
     </ul>
diff --git a/src/open_inwoner/components/templates/components/File/File.html b/src/open_inwoner/components/templates/components/File/File.html
index 545d5b5c8e..9622da5e14 100644
--- a/src/open_inwoner/components/templates/components/File/File.html
+++ b/src/open_inwoner/components/templates/components/File/File.html
@@ -52,7 +52,7 @@
                 {% trans "Download" as download %}
                 {% link href=url text=download primary=True download=True hide_text=True extra_classes="file__download" icon="download" icon_outlined=True icon_position="before" %}
             {% endif %}
-            {% if description %}<p class="p p--small">{{ description }}</p>{% endif %}
+            {% if description %}<p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-small">{{ description }}</p>{% endif %}
         </div>
     </div>
 </aside>
diff --git a/src/open_inwoner/components/templates/components/File/FileList.html b/src/open_inwoner/components/templates/components/File/FileList.html
index 7e1166f3dd..9dc45851fe 100644
--- a/src/open_inwoner/components/templates/components/File/FileList.html
+++ b/src/open_inwoner/components/templates/components/File/FileList.html
@@ -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="p">{% trans "Er zijn nog geen bestanden geüpload" %}</p></li>
+            <li><p class="utrecht-paragraph">{% trans "Er zijn nog geen bestanden geüpload" %}</p></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 0755f06a3f..de512e0cb8 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="p">{{ field.help_text }}</p>
+            <p class="utrecht-paragraph">{{ field.help_text }}</p>
         {% 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 d23b4b3fd0..9656931b9c 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="p">{{ field.help_text }}</p>
+            <p class="utrecht-paragraph">{{ field.help_text }}</p>
         {% endif %}
 
         {% if field.errors %}
diff --git a/src/open_inwoner/components/templates/components/Form/Error.html b/src/open_inwoner/components/templates/components/Form/Error.html
index 8496f683e0..8d90046f0d 100644
--- a/src/open_inwoner/components/templates/components/Form/Error.html
+++ b/src/open_inwoner/components/templates/components/Form/Error.html
@@ -5,7 +5,7 @@
         <div class="notification notification--warning">
             {% icon icon="warning_amber" icon_position="before" outlined=True %}
             <div class="notification__content">
-                <p class="p p--compact">{{ message.message }}</p>
+                <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-compact">{{ message.message }}</p>
             </div>
         </div>
     </div>
diff --git a/src/open_inwoner/components/templates/components/Form/FileInput.html b/src/open_inwoner/components/templates/components/Form/FileInput.html
index 0aa592f18a..f527861e20 100644
--- a/src/open_inwoner/components/templates/components/Form/FileInput.html
+++ b/src/open_inwoner/components/templates/components/Form/FileInput.html
@@ -13,7 +13,7 @@
         </label>
     {% endrender_card %}
 
-    {% if field.help_text %}<p class="p p--small p--centered">{{ field.help_text }}</p>{% endif %}
+    {% if field.help_text %}<p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-small utrecht-paragraph--oip-centered">{{ field.help_text }}</p>{% endif %}
     {% if field.errors %}{% errors errors=field.errors %}{% endif %}
 
     <div class="file-list" aria-live="polite">
diff --git a/src/open_inwoner/components/templates/components/Form/ImageCrop.html b/src/open_inwoner/components/templates/components/Form/ImageCrop.html
index 4be6e47ff3..dea4321474 100644
--- a/src/open_inwoner/components/templates/components/Form/ImageCrop.html
+++ b/src/open_inwoner/components/templates/components/Form/ImageCrop.html
@@ -5,11 +5,11 @@
         {{ field.label }}
         {{ field|addclass:"image-ratio" }}
         {% if field.help_text and not no_help %}
-            <p class="p">{{ field.help_text }}</p>
+            <p class="utrecht-paragraph">{{ field.help_text }}</p>
         {% endif %}
 
         {% if field.errors %}
             {% errors errors=field.errors %}
         {% endif %}
     </label>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/open_inwoner/components/templates/components/Form/Input.html b/src/open_inwoner/components/templates/components/Form/Input.html
index 334191aeac..28a7a5f91f 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="p">{{ field.help_text }}</p>
+            <p class="utrecht-paragraph">{{ field.help_text }}</p>
         {% 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 cf1dfd8b21..0ffeabf1ce 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="p">{{ field.help_text }}</p>
+        <p class="utrecht-paragraph">{{ field.help_text }}</p>
     {% 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 65d7bdf819..7a68c6459a 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="p">{{ field.help_text }}</p>
+        <p class="utrecht-paragraph">{{ field.help_text }}</p>
     {% 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 10ebb10def..17822ae4f8 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="p">{{ field.help_text }}</p>
+            <p class="utrecht-paragraph">{{ field.help_text }}</p>
         {% endif %}
 
         {% if field.errors %}
diff --git a/src/open_inwoner/components/templates/components/Header/Header.html b/src/open_inwoner/components/templates/components/Header/Header.html
index 450a9541c7..ad38f3eb75 100644
--- a/src/open_inwoner/components/templates/components/Header/Header.html
+++ b/src/open_inwoner/components/templates/components/Header/Header.html
@@ -85,7 +85,7 @@
                     <div class="header__text-actions">
 
                         {% if request.user.is_authenticated %}
-                            <p class="p">
+                            <p class="utrecht-paragraph">
                                 {% icon icon="person" icon_position="before" outlined=True %}{% trans "Ingelogd als" %} {{ request.user.get_short_name }}
                             </p>
                             <ul class="header__list">
diff --git a/src/open_inwoner/components/templates/components/List/ListItem.html b/src/open_inwoner/components/templates/components/List/ListItem.html
index 10b68ee793..ab415d3aa5 100644
--- a/src/open_inwoner/components/templates/components/List/ListItem.html
+++ b/src/open_inwoner/components/templates/components/List/ListItem.html
@@ -1,12 +1,12 @@
 {% load link_tags %}
 <li class="list-item{% if active %} list-item--active{% endif %}{% if compact %} list-item--compact{% endif %}{% if extra_compact %} list-item--extra-compact{% endif %}">
     {% if href %}<a class="link" href="{{ href }}">{% endif %}
-    {% if caption %}<p class="p list-item__caption">{{ caption }}</p>{% endif %}
+    {% if caption %}<p class="utrecht-paragraph list-item__caption">{{ caption }}</p>{% endif %}
     {% if strong %}
         <h4 class="utrecht-heading-4">{{ text }}</h4>
     {% else %}
-        <p class="p">{{ text }}</p>
+        <p class="utrecht-paragraph">{{ text }}</p>
     {% endif %}
-    {% if description %}<p class="p p--muted">{{ description }}</p>{% endif %}
+    {% if description %}<p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-muted">{{ description }}</p>{% endif %}
     {% if href %}</a>{% endif %}
 </li>
diff --git a/src/open_inwoner/components/templates/components/Messages/Message.html b/src/open_inwoner/components/templates/components/Messages/Message.html
index 470b74cadd..1b29f14964 100644
--- a/src/open_inwoner/components/templates/components/Messages/Message.html
+++ b/src/open_inwoner/components/templates/components/Messages/Message.html
@@ -7,11 +7,11 @@
             {% url "inbox:download" uuid=message.uuid as download_url %}
             {% link href=download_url text=message.file secondary=True download=True %}
         {% else %}
-            <p class="p">{{ message.content|linebreaksbr }}</p>
+            <p class="utrecht-paragraph">{{ message.content|linebreaksbr }}</p>
         {% endif %}
     </div>
 
     <footer class="message__footer">
-        <p class="p p--muted p--small" title="{{ message.created_on }}">{{ message.created_on|time }}</p>
+        <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-muted utrecht-paragraph--oip-small" title="{{ message.created_on }}">{{ message.created_on|time }}</p>
     </footer>
 </aside>
diff --git a/src/open_inwoner/components/templates/components/Messages/Messages.html b/src/open_inwoner/components/templates/components/Messages/Messages.html
index 2959266819..14e1ab745e 100644
--- a/src/open_inwoner/components/templates/components/Messages/Messages.html
+++ b/src/open_inwoner/components/templates/components/Messages/Messages.html
@@ -2,8 +2,8 @@
 
 <section class="messages">
     <header class="messages__header">
-        <h4 class="utrecht-heading-4">{{ subject }}</h4>
-        <p class="p p--muted">{{ status }}</p>
+        <h3 class="utrecht-heading-4">{{ subject }}</h3>
+        <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-muted">{{ status }}</p>
     </header>
 
 
@@ -17,7 +17,7 @@ <h4 class="utrecht-heading-4">{{ subject }}</h4>
             {% for day in days %}
                 <li class="messages__day">
                     <header class="messages__day-header">
-                        <h4 class="p p--muted">{{ day.text }}</h4>
+                        <p class="utrecht-paragraph utrecht-paragraph--oip-paragraph-muted">{{ day.text }}</p>
                     </header>
 
                     <ol class="messages__list">
@@ -68,7 +68,7 @@ <h4 class="p p--muted">{{ day.text }}</h4>
                 {% form_actions primary_text=_("Verzenden") primary_icon='arrow_forward' %}
             {% endrender_form %}
         {% else %}
-            <p class="p p--muted">{% trans "De gebruiker is inactief. Het is niet mogelijk een bericht te sturen." %}</p>
+            <p class="utrecht-paragraph utrecht-paragraph--oip-paragraph-muted">{% trans "De gebruiker is inactief. Het is niet mogelijk een bericht te sturen." %}</p>
         {% endif %}
     </div>
 </section>
diff --git a/src/open_inwoner/components/templates/components/Notification/Notification.html b/src/open_inwoner/components/templates/components/Notification/Notification.html
index 69f947a7ea..cea1fa2d00 100644
--- a/src/open_inwoner/components/templates/components/Notification/Notification.html
+++ b/src/open_inwoner/components/templates/components/Notification/Notification.html
@@ -8,7 +8,7 @@
 
     <div class="notification__content">
         {% if title %}<h2 class="utrecht-heading-2">{{ title }}</h2>{% endif %}
-        {% if notification %}<p class="p">{{ notification }}</p>{% endif %}
+        {% if notification %}<p class="utrecht-paragraph">{{ notification }}</p>{% endif %}
         {% if action %}{% button href=action text=action_text %}{% endif %}
         {% if contents %}
             {{ contents }}
@@ -16,7 +16,7 @@
             {% if as_markdown %}
                 {{ message|markdown|safe }}
             {% else %}
-                <p class="p p--compact">{{ message }}</p>
+                <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-compact">{{ message }}</p>
             {% endif %}
         {% endif %}
     </div>
diff --git a/src/open_inwoner/components/templates/components/Product/finder.html b/src/open_inwoner/components/templates/components/Product/finder.html
index 278f8378a8..e109662bd2 100644
--- a/src/open_inwoner/components/templates/components/Product/finder.html
+++ b/src/open_inwoner/components/templates/components/Product/finder.html
@@ -2,13 +2,13 @@
 
 {% 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="p">{{configurable_text.home_page.home_product_finder_intro|linebreaksbr}}</p>
+    <p class="utrecht-paragraph">{{configurable_text.home_page.home_product_finder_intro|linebreaksbr}}</p>
 
     <div class="product-finder__form">
         {% if not conditions_done %}
             <h3 class="utrecht-heading-3">{{ condition.question }}</h3>
             {% if condition.rule %}
-            <p class="p p--compact">{{ condition.rule }}</p>
+            <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-compact">{{ condition.rule }}</p>
             {% endif %}
 
             {% if show_previous %}
@@ -17,7 +17,7 @@ <h3 class="utrecht-heading-3">{{ condition.question }}</h3>
                 {% form id="product-finder" spaceless=True form_object=form method="POST" submit_text=primary_text %}
             {% endif %}
         {% else %}
-            <p class="p p--compact">
+            <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-compact">
                 {% trans "Er zijn geen extra vragen meer. Bekijk de producten hiernaast." %}
             </p>
             {% render_form id="product-finder" method="POST" form=form %}
diff --git a/src/open_inwoner/components/templatetags/string_tags.py b/src/open_inwoner/components/templatetags/string_tags.py
index 8d79d0e66f..5662f1c87f 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="p">{optional_text}</p>'.format(
+        '<p class="utrecht-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 65cdc7afde..5885b32378 100644
--- a/src/open_inwoner/components/tests/test_messages.py
+++ b/src/open_inwoner/components/tests/test_messages.py
@@ -143,4 +143,6 @@ def test_status(self):
         Tests that:
             - Header renders the correct status.
         """
-        self.assertTextContent(".messages__header .p", "Dolor sit amet.", self.config)
+        self.assertTextContent(
+            ".messages__header .utrecht-paragraph", "Dolor sit amet.", self.config
+        )
diff --git a/src/open_inwoner/js/components/form/FileInput.js b/src/open_inwoner/js/components/form/FileInput.js
index a6a64a9083..c941c4f62e 100644
--- a/src/open_inwoner/js/components/form/FileInput.js
+++ b/src/open_inwoner/js/components/form/FileInput.js
@@ -308,13 +308,13 @@ export class FileInput extends Component {
           ${
             typeError && sizeError
               ? `
-              <p class="p p--small error">
+              <p class="utrecht-paragraph utrecht-paragraph--oip-small error">
                 <span aria-hidden="true" class="material-icons-outlined">warning_amber</span>
                 <span class="file-error__content">Dit type bestand (${ext}) is ongeldig en te groot. Geldige bestandstypen zijn: ${uploadFileTypes}</span>
               </p>`
               : typeError || sizeError
               ? `
-              <p class="p p--small error">
+              <p class="utrecht-paragraph utrecht-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 374282dd22..49d4f31c54 100644
--- a/src/open_inwoner/js/components/map/index.js
+++ b/src/open_inwoner/js/components/map/index.js
@@ -121,9 +121,9 @@ class Map {
           ${title}
         </h4>
       </div>
-      <div class="leaflet-content-details p--no-margin">
-        <p class="p">${displayAddress1}</p>
-        <p class="p">${displayAddress2}</p>
+      <div class="leaflet-content-details container--no-margin">
+        <p class="utrecht-paragraph">${displayAddress1}</p>
+        <p class="utrecht-paragraph">${displayAddress2}</p>
         <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/pdc/tests/test_views.py b/src/open_inwoner/pdc/tests/test_views.py
index 9e9382fd7f..8632885878 100644
--- a/src/open_inwoner/pdc/tests/test_views.py
+++ b/src/open_inwoner/pdc/tests/test_views.py
@@ -242,11 +242,11 @@ def test_category_detail_description_rendered(self):
         response = self.client.get(url)
 
         self.assertIn(
-            '<p class="p">A <em>descriptive</em> description</p>',
+            "A <em>descriptive</em> description",
             response.rendered_content,
         )
         self.assertNotIn(
-            '[<p class="p">A <em>descriptive</em> description</p>, <em>descriptive</em>]',
+            "A <em>descriptive</em> description</p>, <em>descriptive",
             response.rendered_content,
         )
 
diff --git a/src/open_inwoner/scss/components/Button/Button.scss b/src/open_inwoner/scss/components/Button/Button.scss
index a9005d2b26..9670b69f06 100644
--- a/src/open_inwoner/scss/components/Button/Button.scss
+++ b/src/open_inwoner/scss/components/Button/Button.scss
@@ -212,14 +212,22 @@
   }
 }
 
-.h2 + .button,
-.h4 + .button,
-.p + .button,
 .utrecht-heading-2 + .button,
-.utrecht-heading-4 + .button {
+.utrecht-heading-4 + .button,
+.utrecht-paragraph + .button {
   margin-top: var(--spacing-large);
 }
 
 .cta-button {
   margin-bottom: var(--spacing-large);
 }
+
+///
+/// Legacy styling
+///
+
+.h2 + .button,
+.h4 + .button,
+.p + .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 7022ed1244..02de552e45 100644
--- a/src/open_inwoner/scss/components/Card/Card.scss
+++ b/src/open_inwoner/scss/components/Card/Card.scss
@@ -271,7 +271,7 @@
     flex-wrap: wrap;
     justify-content: space-between;
 
-    .p {
+    .utrecht-paragraph {
       margin-top: 4px;
     }
 
@@ -335,7 +335,7 @@
       width: 100%;
     }
 
-    .p {
+    .utrecht-paragraph {
       width: 100%;
     }
   }
diff --git a/src/open_inwoner/scss/components/Card/LocationCardList.scss b/src/open_inwoner/scss/components/Card/LocationCardList.scss
index 963369922a..40d00e4254 100644
--- a/src/open_inwoner/scss/components/Card/LocationCardList.scss
+++ b/src/open_inwoner/scss/components/Card/LocationCardList.scss
@@ -1,9 +1,4 @@
 .location-card-list {
-  .h4,
-  .utrecht-heading-4 {
-    margin-bottom: var(--spacing-large);
-  }
-
   &__list {
     grid-template-columns: repeat(2, 1fr);
     display: grid;
@@ -20,4 +15,12 @@
   .card {
     height: 100%;
   }
+
+  ///
+  /// Legacy styling
+  ///
+
+  .h4 {
+    margin-bottom: var(--spacing-large);
+  }
 }
diff --git a/src/open_inwoner/scss/components/CardContainer/CardContainer.scss b/src/open_inwoner/scss/components/CardContainer/CardContainer.scss
index d0404f1ea9..6d5b912f2d 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,
-.p + .card-container,
-.card-container + h2 {
+.card-container + .utrecht-heading-2,
+.utrecht-paragraph + .card-container {
   margin-top: var(--gutter-width);
 }
 
@@ -64,3 +64,12 @@
     }
   }
 }
+
+///
+/// Legacy styling
+///
+
+.p + .card-container,
+.card-container + .h2 {
+  margin-top: var(--gutter-width);
+}
diff --git a/src/open_inwoner/scss/components/File/File.scss b/src/open_inwoner/scss/components/File/File.scss
index 325a179c96..a1997ab955 100644
--- a/src/open_inwoner/scss/components/File/File.scss
+++ b/src/open_inwoner/scss/components/File/File.scss
@@ -49,7 +49,7 @@
   }
 
   &__file .link,
-  &__file .p {
+  &__file .utrecht-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 c9cfff5622..544a92fadb 100644
--- a/src/open_inwoner/scss/components/File/FileList.scss
+++ b/src/open_inwoner/scss/components/File/FileList.scss
@@ -34,11 +34,20 @@
 /// Contextual
 ///
 
-.file-list + .p,
-.file-list + .utrecht-heading-2 {
+.file-list + .utrecht-heading-2,
+.file-list + .utrecht-paragraph {
   margin-top: var(--spacing-large);
 }
 
 .utrecht-heading-2 + .file-list {
   margin-top: var(--spacing-extra-large);
 }
+
+///
+/// Legacy styling
+///
+
+.file-list + .h2,
+.file-list + .p {
+  margin-top: var(--spacing-large);
+}
diff --git a/src/open_inwoner/scss/components/Form/FileInput.scss b/src/open_inwoner/scss/components/Form/FileInput.scss
index 9e83bc7cd4..a690c64874 100644
--- a/src/open_inwoner/scss/components/Form/FileInput.scss
+++ b/src/open_inwoner/scss/components/Form/FileInput.scss
@@ -73,7 +73,7 @@
     height: var(--row-height-giant);
   }
 
-  > .p {
+  > .utrecht-paragraph {
     margin: calc(0.5 * var(--gutter-width)) 0;
     display: block;
     text-align: center;
@@ -91,7 +91,7 @@
     .file__file.error {
       border-color: var(--color-red-notification);
 
-      .p {
+      .utrecht-paragraph {
         color: var(--color-gray-dark-900);
       }
 
@@ -116,7 +116,7 @@
       }
     }
 
-    .p--small {
+    .utrecht-paragraph--oip-small {
       margin-top: var(--spacing-small);
       margin-bottom: var(--spacing-small);
 
diff --git a/src/open_inwoner/scss/components/Form/Form.scss b/src/open_inwoner/scss/components/Form/Form.scss
index 8994dc5c4e..7a99372cd8 100644
--- a/src/open_inwoner/scss/components/Form/Form.scss
+++ b/src/open_inwoner/scss/components/Form/Form.scss
@@ -91,11 +91,11 @@
     transform: translateY(-5px);
   }
 
-  &__control > .label .p:last-child {
+  &__control > .label .utrecht-paragraph:last-child {
     font-size: var(--font-size-body-small);
   }
 
-  &__control > .label .p.p--compact {
+  &__control > .label .utrecht-paragraph.utrecht-paragraph--oip-compact {
     font-size: var(--font-size-body);
   }
 
diff --git a/src/open_inwoner/scss/components/Header/AnchorMenu.scss b/src/open_inwoner/scss/components/Header/AnchorMenu.scss
index e1251abe14..2da27b3e4e 100644
--- a/src/open_inwoner/scss/components/Header/AnchorMenu.scss
+++ b/src/open_inwoner/scss/components/Header/AnchorMenu.scss
@@ -1,9 +1,3 @@
-.h1,
-.h2,
-.h3,
-.h4,
-.h5,
-.h6,
 .utrecht-heading-1,
 .utrecht-heading-2,
 .utrecht-heading-3,
@@ -158,3 +152,20 @@
     }
   }
 }
+
+///
+/// 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 563ec41a62..28239e9cb9 100644
--- a/src/open_inwoner/scss/components/Header/Header.scss
+++ b/src/open_inwoner/scss/components/Header/Header.scss
@@ -345,8 +345,8 @@ $vm: var(--spacing-large);
     width: 100%;
 
     // Cut text and display dots if username is very long
-    > .p {
-      display: inline-block !important;
+    > .utrecht-paragraph {
+      display: flex !important;
       max-width: 250px;
       overflow: hidden;
       white-space: nowrap;
@@ -366,7 +366,7 @@ $vm: var(--spacing-large);
     @media (min-width: 768px) {
       justify-content: flex-end;
 
-      > .p {
+      > .utrecht-paragraph {
         display: flex;
         max-width: initial;
         overflow: initial;
@@ -491,7 +491,7 @@ $vm: var(--spacing-large);
             margin: var(--spacing-large) 0 0 0;
             width: calc(100% - (var(--spacing-extra-large)));
 
-            .p {
+            .utrecht-paragraph {
               display: flex;
               align-items: center;
               justify-content: space-between;
diff --git a/src/open_inwoner/scss/components/List/_ListItem.scss b/src/open_inwoner/scss/components/List/_ListItem.scss
index e7af4e0d4f..a686b9eda8 100644
--- a/src/open_inwoner/scss/components/List/_ListItem.scss
+++ b/src/open_inwoner/scss/components/List/_ListItem.scss
@@ -46,11 +46,19 @@
     margin: 0;
   }
 
-  .p + .p {
+  .utrecht-paragraph + .utrecht-paragraph {
     margin-top: 0;
   }
 
   & + & {
     border-top: none;
   }
+
+  ///
+  /// Legacy styling
+  ///
+
+  .p + .p {
+    margin-top: 0;
+  }
 }
diff --git a/src/open_inwoner/scss/components/Map/_Map.scss b/src/open_inwoner/scss/components/Map/_Map.scss
index f04f82b47f..5e93cf3956 100644
--- a/src/open_inwoner/scss/components/Map/_Map.scss
+++ b/src/open_inwoner/scss/components/Map/_Map.scss
@@ -13,7 +13,7 @@
   }
 }
 
-.p + .map {
+.utrecht-paragraph + .map {
   margin-top: var(--spacing-large);
 }
 
@@ -28,4 +28,25 @@
   flex-direction: column;
   row-gap: var(--spacing-small);
   flex-wrap: wrap;
+
+  &.container--no-margin {
+    margin-top: var(--spacing-small);
+
+    & > .utrecht-paragraph {
+      margin: 0 !important;
+    }
+
+    /// leaflet reset
+    .link {
+      text-decoration: underline;
+    }
+  }
+}
+
+///
+/// Legacy styling
+///
+
+.p + .map {
+  margin-top: var(--spacing-large);
 }
diff --git a/src/open_inwoner/scss/components/Messages/_Messages.scss b/src/open_inwoner/scss/components/Messages/_Messages.scss
index 270d9afc46..22ae72bc72 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 .p {
+  &__header .utrecht-paragraph {
     margin-top: 0 !important;
   }
 
@@ -33,7 +33,7 @@
     justify-content: center;
   }
 
-  &__day-header > .p:first-child {
+  &__day-header > .utrecht-paragraph:first-child {
     display: flex;
     align-items: center;
     width: 100%;
@@ -42,19 +42,19 @@
     white-space: nowrap;
   }
 
-  &__day-header > .p:first-child:before,
-  &__day-header > .p:first-child:after {
+  &__day-header > .utrecht-paragraph:first-child:before,
+  &__day-header > .utrecht-paragraph:first-child:after {
     border-top: 1px solid var(--color-gray-lightest);
     content: '';
     margin: var(--spacing-large);
     width: 100%;
   }
 
-  &__day-header > .p:first-child:before {
+  &__day-header > .utrecht-paragraph:first-child:before {
     margin-left: 0;
   }
 
-  &__day-header > .p:first-child:after {
+  &__day-header > .utrecht-paragraph:first-child:after {
     margin-right: 0;
   }
 
@@ -85,7 +85,7 @@
     .message__body {
       border: 1px solid transparent;
 
-      .p::before {
+      .utrecht-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 dd83f32621..89f5e3212a 100644
--- a/src/open_inwoner/scss/components/Notification/_Notification.scss
+++ b/src/open_inwoner/scss/components/Notification/_Notification.scss
@@ -19,7 +19,7 @@
 
   [class*='icon'],
   [class*='Icon'] {
-    line-height: 1.3;
+    line-height: var(--spacing-giant);
   }
 
   /// Individual errors.
@@ -67,7 +67,7 @@
     color: var(--notification-color-text);
   }
 
-  &:not(#{&}--contents) .p {
+  &:not(#{&}--contents) .utrecht-paragraph {
     color: var(--notification-color-text);
   }
 
@@ -99,7 +99,7 @@
   }
 
   & &__content {
-    margin-top: 0.15em;
+    margin-top: var(--spacing-tiny);
 
     & * {
       margin: 0;
diff --git a/src/open_inwoner/scss/components/Product/product-detail.scss b/src/open_inwoner/scss/components/Product/product-detail.scss
index 7ef4693fc8..4acd9e3fb5 100644
--- a/src/open_inwoner/scss/components/Product/product-detail.scss
+++ b/src/open_inwoner/scss/components/Product/product-detail.scss
@@ -42,6 +42,12 @@
   }
 }
 
+.utrecht-paragraph--oip-summary {
+  margin-bottom: var(--gutter-width);
+}
+
+/// Legacy style
+
 p.p-summary {
   margin-bottom: var(--gutter-width);
 }
diff --git a/src/open_inwoner/scss/components/Status/_StatusList.scss b/src/open_inwoner/scss/components/Status/_StatusList.scss
index efb454a9b6..01cc10a1e6 100644
--- a/src/open_inwoner/scss/components/Status/_StatusList.scss
+++ b/src/open_inwoner/scss/components/Status/_StatusList.scss
@@ -54,18 +54,18 @@
       color: var(--color-gray-dark-900);
     }
 
-    .p-date {
+    .status-list__date {
       font-size: var(--font-size-body-small);
     }
 
-    .p-text {
+    .status-list__text {
       display: flex;
       flex-direction: column;
     }
 
-    .p__upload {
+    .status-list__upload {
       display: none;
-      &.p__upload--enabled {
+      &.status-list__upload--enabled {
         //hide when final status is reached
         display: block;
       }
diff --git a/src/open_inwoner/scss/components/Typography/H1.scss b/src/open_inwoner/scss/components/Typography/H1.scss
index a6556ff4ca..f2bcc7742e 100644
--- a/src/open_inwoner/scss/components/Typography/H1.scss
+++ b/src/open_inwoner/scss/components/Typography/H1.scss
@@ -17,6 +17,14 @@
   }
 }
 
+.utrecht-heading-1 + .card-container {
+  margin-top: var(--gutter-width);
+}
+
+///
+/// Legacy styling
+///
+
 .h1 {
   color: var(--utrecht-heading-1-color);
   font-family: var(--utrecht-heading-1-font-family);
@@ -38,7 +46,3 @@
     margin: 0;
   }
 }
-
-.utrecht-heading-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 0ddecfcf68..104193e7f0 100644
--- a/src/open_inwoner/scss/components/Typography/H2.scss
+++ b/src/open_inwoner/scss/components/Typography/H2.scss
@@ -27,6 +27,30 @@
   }
 }
 
+.heading-2__indicator {
+  display: flex;
+  flex-direction: row;
+}
+
+///
+/// Contextual.
+///
+
+.card + .utrecht-heading-2,
+.dashboard + .utrecht-heading-2,
+.status-list + .utrecht-heading-2,
+.table + .utrecht-heading-2 {
+  margin-top: var(--row-height);
+}
+
+.utrecht-paragraph + .utrecht-heading-2 {
+  margin-top: var(--spacing-large);
+}
+
+///
+/// Legacy styling
+///
+
 .h2 {
   color: var(--utrecht-heading-2-color);
   font-family: var(--utrecht-heading-2-font-family);
@@ -55,24 +79,10 @@
   }
 }
 
-.heading-2__indicator {
-  display: flex;
-  flex-direction: row;
-}
-
-///
-/// Contextual.
-///
-
-.table + .h2,
-.card + .utrecht-heading-2,
-.dashboard + .utrecht-heading-2,
-.status-list + .utrecht-heading-2,
-.table + .utrecht-heading-2 {
+.table + .h2 {
   margin-top: var(--row-height);
 }
 
-.p + .h2,
-.p + .utrecht-heading-2 {
+.p + .h2 {
   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 bfadb41528..bf45ca0a1c 100644
--- a/src/open_inwoner/scss/components/Typography/H3.scss
+++ b/src/open_inwoner/scss/components/Typography/H3.scss
@@ -1,6 +1,14 @@
 @import '~@utrecht/components/dist/heading-3/css/index.css';
 @import '~microscope-sass/lib/responsive';
 
+.utrecht-paragraph + .utrecht-heading-3 {
+  margin-top: var(--spacing-large);
+}
+
+///
+/// Legacy styling
+///
+
 .h3 {
   color: var(--utrecht-heading-3-color);
   font-family: var(--utrecht-heading-3-font-family);
@@ -17,7 +25,6 @@
   }
 }
 
-.p + .utrecht-heading-3,
 .p + .h3 {
   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 a6244c7623..3423ae5a1f 100644
--- a/src/open_inwoner/scss/components/Typography/H4.scss
+++ b/src/open_inwoner/scss/components/Typography/H4.scss
@@ -1,6 +1,10 @@
 @import '~@utrecht/components/dist/heading-4/css/index.css';
 @import '~microscope-sass/lib/responsive';
 
+///
+/// Legacy styling - other styling comes from NLDS
+///
+
 .h4 {
   color: var(--utrecht-heading-4-color);
   font-family: var(--utrecht-heading-4-font-family);
diff --git a/src/open_inwoner/scss/components/Typography/Link.scss b/src/open_inwoner/scss/components/Typography/Link.scss
index f560b0f95b..cd5d611e39 100644
--- a/src/open_inwoner/scss/components/Typography/Link.scss
+++ b/src/open_inwoner/scss/components/Typography/Link.scss
@@ -43,7 +43,6 @@
     color: var(--color-secondary);
   }
 
-  .leaflet-container .h4 &--primary,
   .leaflet-container .utrecht-heading-4 &--primary {
     color: var(--color-black);
   }
@@ -94,4 +93,12 @@
   *[class*='Icon']:first-child {
     transform: scale(1);
   }
+
+  ///
+  /// Legacy styling
+  ///
+
+  .leaflet-container .h4 &--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 1b742bc98a..5ecac2309c 100644
--- a/src/open_inwoner/scss/components/Typography/LinkList.scss
+++ b/src/open_inwoner/scss/components/Typography/LinkList.scss
@@ -1,5 +1,4 @@
 .link-list {
-  .h4,
   .utrecht-heading-4 {
     margin-bottom: var(--spacing-large);
   }
@@ -28,4 +27,12 @@
       margin-bottom: 0;
     }
   }
+
+  ///
+  /// Legacy styling
+  ///
+
+  .h4 {
+    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 61370fbac6..d33427c607 100644
--- a/src/open_inwoner/scss/components/Typography/P.scss
+++ b/src/open_inwoner/scss/components/Typography/P.scss
@@ -1,27 +1,33 @@
-.p {
-  color: var(--font-color-body);
-  font-family: var(--font-family-body);
-  font-size: var(--font-size-body);
-  line-height: var(--font-line-height-body);
-  font-weight: normal;
-  margin: 0;
+@import '~@utrecht/components/dist/paragraph/css/index.css';
 
-  &#{&}--compact {
-    margin-top: 0 !important;
-    margin-bottom: 0 !important;
-  }
+.utrecht-paragraph {
+  // Takes style values from NLDS community
 
-  &--small {
-    font-size: var(--font-size-body-small);
-    line-height: var(--font-line-height-body-small);
-  }
+  &--oip {
+    // Takes style values from our own design-tokens NPM package
+    margin: 0;
 
-  &--muted {
-    color: var(--color-mute);
-  }
+    &-small {
+      font-size: var(--oip-utrecht-paragraph-small-font-size);
+      line-height: var(--oip-utrecht-paragraph-small-line-height);
+    }
 
-  &--centered {
-    text-align: center;
+    &-muted {
+      color: var(--oip-utrecht-paragraph-muted-color);
+    }
+
+    &-centered {
+      text-align: var(--oip-utrecht-paragraph-centered-text-align);
+    }
+
+    &-compact {
+      margin-top: 0 !important;
+      margin-bottom: 0 !important;
+    }
+
+    &:empty {
+      margin: 0 !important;
+    }
   }
 
   &:empty {
@@ -29,35 +35,30 @@
   }
 }
 
-*[class^='h'] + .p,
-*[class^='utrecht-heading'] + .p {
+*[class^='utrecht-heading'] + .utrecht-paragraph {
   margin-top: var(--spacing-small);
 }
 
-.p + .h1,
-.p + .h2,
-.p + .h3,
-.p + .utrecht-heading-1,
-.p + .utrecht-heading-2,
-.p + .utrecht-heading-3 {
+.utrecht-paragraph + .utrecht-heading-1,
+.utrecht-paragraph + .utrecht-heading-2,
+.utrecht-paragraph + .utrecht-heading-3 {
   margin-top: var(--gutter-width);
 }
 
-.p + .h4,
-.p + .utrecht-heading-4 {
+.utrecht-paragraph + .utrecht-heading-4 {
   margin-top: var(--row-height-small);
 }
 
-.p + .p {
+.utrecht-paragraph + .utrecht-paragraph {
   margin-top: var(--font-line-height-body);
 }
 
-.tag-list + .p {
+.tag-list + .utrecht-paragraph,
+.utrecht-paragraph + .form {
   margin-top: var(--spacing-extra-large);
 }
 
-.p .link {
-  //text-decoration: underline;
+.utrecht-paragraph .link {
   .content {
     text-decoration: underline;
   }
@@ -72,15 +73,60 @@
   }
 }
 
-.p--no-margin {
-  margin-top: var(--spacing-small);
+///
+/// Legacy styling
+///
 
-  & > .p {
+.p {
+  color: var(--utrecht-paragraph-color);
+  font-family: var(--utrecht-paragraph-font-family);
+  font-size: var(--utrecht-paragraph-font-size);
+  line-height: var(--utrecht-paragraph-line-height);
+  font-weight: normal;
+  margin: 0;
+
+  &:empty {
     margin: 0 !important;
   }
+}
+
+*[class^='h1'] + .p,
+*[class^='h2'] + .p,
+*[class^='h3'] + .p,
+*[class^='h4'] + .p {
+  margin-top: var(--spacing-small);
+}
+
+.p + .h1,
+.p + .h2,
+.p + .h3 {
+  margin-top: var(--gutter-width);
+}
+
+.p + .h4 {
+  margin-top: var(--row-height-small);
+}
 
-  /// leaflet reset
-  .link {
+.p + .p {
+  margin-top: var(--font-line-height-body);
+}
+
+.tag-list + .p,
+.p + .form {
+  margin-top: var(--spacing-extra-large);
+}
+
+.p .link {
+  .content {
     text-decoration: underline;
   }
+  &:hover {
+    text-decoration: none;
+  }
+  .material-icons {
+    text-decoration: none;
+    &:hover {
+      text-decoration: none;
+    }
+  }
 }
diff --git a/src/open_inwoner/scss/components/Typography/wysiwyg.scss b/src/open_inwoner/scss/components/Typography/wysiwyg.scss
index 9629a1a7f9..7fba52f122 100644
--- a/src/open_inwoner/scss/components/Typography/wysiwyg.scss
+++ b/src/open_inwoner/scss/components/Typography/wysiwyg.scss
@@ -1,16 +1,15 @@
 .wysiwyg {
-  font-family: var(--font-family-body);
+  font-family: var(--utrecht-document-font-family);
 
   a {
     display: inline-flex;
     flex-direction: row;
     align-items: center;
-    font-size: var(--font-size-body);
-    line-height: var(--font-line-height-body);
+    font-size: var(--utrecht-document-font-size);
+    line-height: var(--utrecht-document-line-height);
     text-decoration: none;
     gap: var(--spacing-small);
     color: var(--color-secondary);
-
     word-wrap: break-word;
   }
 
@@ -20,11 +19,11 @@
   h4,
   h5,
   h6 {
-    font-family: var(--font-family-heading);
+    font-family: var(--utrecht-heading-font-family);
   }
 
   ul {
     margin: 0;
-    padding: 0 0 0 var(--font-size-body);
+    padding: 0 0 0 var(--utrecht-document-font-size);
   }
 }
diff --git a/src/open_inwoner/scss/components/UserFeed/UserFeed.scss b/src/open_inwoner/scss/components/UserFeed/UserFeed.scss
index 8eb7a7e33b..a30e7fbc29 100644
--- a/src/open_inwoner/scss/components/UserFeed/UserFeed.scss
+++ b/src/open_inwoner/scss/components/UserFeed/UserFeed.scss
@@ -16,6 +16,10 @@
     display: block;
     line-height: var(--font-line-height-body);
     position: relative;
+
+    & * {
+      color: var(--color-red-notification);
+    }
   }
 
   &__list {
@@ -106,8 +110,8 @@
     }
 
     .userfeed-card__description {
-      color: var(--font-color-heading);
-      font-family: var(--font-family-heading);
+      color: var(--utrecht-heading-color);
+      font-family: var(--utrecht-heading-font-family);
       font-size: var(--font-size-body);
       line-height: var(--font-line-height-body);
       margin: 0;
diff --git a/src/open_inwoner/scss/overwrites/_ckeditor.scss b/src/open_inwoner/scss/overwrites/_ckeditor.scss
index 6a487eff0b..f5350091d3 100644
--- a/src/open_inwoner/scss/overwrites/_ckeditor.scss
+++ b/src/open_inwoner/scss/overwrites/_ckeditor.scss
@@ -1,10 +1,26 @@
 .li .link,
-.p .link {
+.utrecht-paragraph .link {
   text-decoration: underline;
   display: inline;
 }
 
 // Style icons separately
+.utrecht-paragraph .link *[class*='icon'] {
+  text-decoration: none;
+  transform: scale(0.75);
+  display: inline-block;
+  vertical-align: bottom;
+}
+
+///
+/// Legacy styling
+///
+
+.p .link {
+  text-decoration: underline;
+  display: inline;
+}
+
 .p .link *[class*='icon'] {
   text-decoration: none;
   transform: scale(0.75);
diff --git a/src/open_inwoner/scss/views/_product_detail.scss b/src/open_inwoner/scss/views/_product_detail.scss
index c6acac7f01..ae391cb70a 100644
--- a/src/open_inwoner/scss/views/_product_detail.scss
+++ b/src/open_inwoner/scss/views/_product_detail.scss
@@ -1,5 +1,4 @@
 .view--products-category_product_detail {
-  .h4,
   .utrecht-heading-4 {
     margin: 21px 0;
   }
@@ -10,4 +9,12 @@
     width: 99%;
     display: block;
   }
+
+  ///
+  /// Legacy styling
+  ///
+
+  .h4 {
+    margin: 21px 0;
+  }
 }
diff --git a/src/open_inwoner/templates/404.html b/src/open_inwoner/templates/404.html
index 3bd58206c7..4d67b458d1 100644
--- a/src/open_inwoner/templates/404.html
+++ b/src/open_inwoner/templates/404.html
@@ -3,5 +3,5 @@
 
 {% block content %}
 <h1 class="utrecht-heading-1">{% trans "Sorry, the requested page could not be found (404)" %}</h1>
-<p class="p">{% link href="/" text=_("Ga naar de home pagina") %}</p>
+<p class="utrecht-paragraph">{% link href="/" text=_("Ga naar de home pagina") %}</p>
 {% endblock content %}
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 6b026be949..4990179086 100644
--- a/src/open_inwoner/templates/cms/banner/banner_text_plugin.html
+++ b/src/open_inwoner/templates/cms/banner/banner_text_plugin.html
@@ -3,7 +3,7 @@
         <h1 class="utrecht-heading-1">{{ instance.title }} {{ request.user.get_full_name }}</h1>
 
         {% if instance.description %}
-            <p class="p">{{ instance.description|linebreaksbr }}</p>
+            <p class="utrecht-paragraph">{{ instance.description|linebreaksbr }}</p>
         {% endif %}
     </div>
 </section>
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 72ed7c0a0e..25fa99a543 100644
--- a/src/open_inwoner/templates/cms/collaborate/active_plans_plugin.html
+++ b/src/open_inwoner/templates/cms/collaborate/active_plans_plugin.html
@@ -11,8 +11,8 @@ <h2 class="utrecht-heading-2">
                 {% 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="p">{{ plan.goal|truncatewords:20 }}</p>
-                    <p class="p">{{ plan.description|truncatewords:20 }}</p>
+                    <p class="utrecht-paragraph">{{ plan.goal|truncatewords:20 }}</p>
+                    <p class="utrecht-paragraph">{{ plan.description|truncatewords:20 }}</p>
                     <span class="spacer"></span>
                     <span class="button button--icon-before button--transparent button--secondary">
                     {% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %}
@@ -22,7 +22,7 @@ <h3 class="utrecht-heading-3 card__heading-3 plan-list">{{ plan.title }}</h3>
             {% endfor %}
         </div>
         {% else %}
-            <p class="p">{{ configurable_text.plans_page.plans_no_plans_message }}</p>
+            <p class="utrecht-paragraph">{{ configurable_text.plans_page.plans_no_plans_message }}</p>
         {% endif %}
     </section>
 {% endif %}
diff --git a/src/open_inwoner/templates/cms/fullwidth.html b/src/open_inwoner/templates/cms/fullwidth.html
index aa293b2474..b32bbcd9a7 100644
--- a/src/open_inwoner/templates/cms/fullwidth.html
+++ b/src/open_inwoner/templates/cms/fullwidth.html
@@ -25,7 +25,7 @@
     {% if not request.user.is_authenticated %}
         <section class="plugin grid__welcome">
             <h1 class="utrecht-heading-1">{{configurable_text.home_page.home_welcome_title}}</h1>
-            <p class="p">{{configurable_text.home_page.home_welcome_intro|linebreaksbr}}</p>
+            <p class="utrecht-paragraph">{{configurable_text.home_page.home_welcome_intro|linebreaksbr}}</p>
         </section>
     {% else %}
         {% placeholder 'banner_text' %}
diff --git a/src/open_inwoner/templates/cms/plugins/appointments/appointments.html b/src/open_inwoner/templates/cms/plugins/appointments/appointments.html
index 03e7fa1ab0..9594344c08 100644
--- a/src/open_inwoner/templates/cms/plugins/appointments/appointments.html
+++ b/src/open_inwoner/templates/cms/plugins/appointments/appointments.html
@@ -9,7 +9,7 @@ <h2 class="utrecht-heading-2">{{ instance.title }}</h2>
             <a href="{{ appointment_list_url }}" class="card">
                 <div class="card__body card__body--tabled">
                     {% timezone appointment.branch.timeZone %}
-                        <p class="p tabled__value">{{ appointment.start|date:"j F Y" }} {% trans "om" %} {{ appointment.start|date:"H:i"|add:" "|add:_("uur") }}</p>
+                        <p class="utrecht-paragraph tabled__value">{{ appointment.start|date:"j F Y" }} {% trans "om" %} {{ appointment.start|date:"H:i"|add:" "|add:_("uur") }}</p>
                     {% endtimezone %}
                     <h2 class="plugin-card__heading">
                         <span class="status">{{ appointment.title }}</span>
diff --git a/src/open_inwoner/templates/cms/products/categories_plugin.html b/src/open_inwoner/templates/cms/products/categories_plugin.html
index c6da83d55a..de9744f165 100644
--- a/src/open_inwoner/templates/cms/products/categories_plugin.html
+++ b/src/open_inwoner/templates/cms/products/categories_plugin.html
@@ -7,7 +7,7 @@ <h2 class="utrecht-heading-2">
             <span class="spacer"></span>
             {% button href='products:category_list' text=button_text icon="arrow_forward" icon_position="after" %}
         </h2>
-        <p class="p">{{ configurable_text.home_page.home_theme_intro|linebreaksbr }}</p>
+        <p class="utrecht-paragraph">{{ configurable_text.home_page.home_theme_intro|linebreaksbr }}</p>
 
         {% include "components/Card/CardContainer.html" with categories=categories columns=4 image_object_fit="cover" only %}
     </section>
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 62aa37e252..a574cffdd4 100644
--- a/src/open_inwoner/templates/cms/products/product_location_plugin.html
+++ b/src/open_inwoner/templates/cms/products/product_location_plugin.html
@@ -2,7 +2,7 @@
 
 <section class="plugin plugin__locations">
     <h2 class="utrecht-heading-2">{{ configurable_text.home_page.home_map_title }}</h2>
-    <p class="p">{{ configurable_text.home_page.home_map_intro|linebreaksbr }}</p>
+    <p class="utrecht-paragraph">{{ configurable_text.home_page.home_map_intro|linebreaksbr }}</p>
 
     {% 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/export/questionnaire/questionnaire_export.html b/src/open_inwoner/templates/export/questionnaire/questionnaire_export.html
index c1327216fa..f525d17750 100644
--- a/src/open_inwoner/templates/export/questionnaire/questionnaire_export.html
+++ b/src/open_inwoner/templates/export/questionnaire/questionnaire_export.html
@@ -8,9 +8,9 @@ <h1 class="utrecht-heading-1">{% trans "Zelfdiagnose results" %}</h1>
             {% for step in steps %}
             <li>
                 <h4>{% trans "Question:" %}</h4>
-                <p class="p">{{ step.question }}</p>
+                <p class="utrecht-paragraph">{{ step.question }}</p>
                 <h4>{% trans "Answer:" %}</h4>
-                <p class="p">{{ step.answer }}</p>
+                <p class="utrecht-paragraph">{{ step.answer }}</p>
             </li>
             {% endfor %}
         </ol>
@@ -18,14 +18,14 @@ <h4>{% trans "Answer:" %}</h4>
 
     <div class="qa_results">
         <h4 class="utrecht-heading-4">{{ last_step.question }}</h4>
-        <p class="p">{{ last_step.content|ckeditor_content|safe}}</p>
+        <p class="utrecht-paragraph">{{ last_step.content|ckeditor_content|safe}}</p>
         {% if related_products.exists %}
             <h4>{% trans "Related products:" %}</h4>
             <ol>
                 {% for product in related_products %}
                 <li>
                     <h4>{{ product.name }}</h4>
-                    <p class="p">{{ product.summary }}</p>
+                    <p class="utrecht-paragraph">{{ product.summary }}</p>
                 </li>
                 {% endfor %}
             </ol>
diff --git a/src/open_inwoner/templates/flatpages/default.html b/src/open_inwoner/templates/flatpages/default.html
index a6c2f34d07..1a531afe37 100644
--- a/src/open_inwoner/templates/flatpages/default.html
+++ b/src/open_inwoner/templates/flatpages/default.html
@@ -3,5 +3,5 @@
 
 {% block content %}
   <h1 class="utrecht-heading-1">{{ flatpage.title }}</h1>
-  <p class="p">{{ flatpage.content|ckeditor_content|safe }}</p>
+  <p class="utrecht-paragraph">{{ flatpage.content|ckeditor_content|safe }}</p>
 {% endblock content %}
diff --git a/src/open_inwoner/templates/master.html b/src/open_inwoner/templates/master.html
index 0b2bea03df..d8fb834262 100644
--- a/src/open_inwoner/templates/master.html
+++ b/src/open_inwoner/templates/master.html
@@ -1,5 +1,5 @@
 {% load static i18n card_tags button_tags link_tags notification_tags anchor_menu_tags view_breadcrumbs utils solo_tags session_tags django_htmx cms_tags menu_tags sekizai_tags %}<!DOCTYPE html>
-<html lang="nl" class="view openinwoner-theme {% block view_class %}view--{{ request.resolver_match.namespaces|join:'-' }}-{{ request.resolver_match.url_name }}{% endblock %}">
+<html lang="nl" class="view utrecht-document openinwoner-theme {% block view_class %}view--{{ request.resolver_match.namespaces|join:'-' }}-{{ request.resolver_match.url_name }}{% endblock %}">
     <head>
         <meta charset="utf-8">
         <title>{% block title %}{% if page_title %}{{ page_title }} - {% endif %}{{ site_name }}{% endblock %}</title>
@@ -61,7 +61,7 @@
 	{% endif %}
     </head>
 
-    <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
+    <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' class="utrecht-page">
 
         {% if cookiebanner_enabled %}
         {# render cookiebanner first #}
@@ -144,7 +144,7 @@
             <div class="footer__header">
                 {% if footer.logo_title %}
                     <div class="footer__logo-text">
-                        <p class="p">{{ footer.logo_title|linebreaksbr }}</p>
+                        <p class="utrecht-paragraph">{{ footer.logo_title|linebreaksbr }}</p>
                     </div>
                 {% endif %}
                 {% if footer.logo %}
diff --git a/src/open_inwoner/templates/pages/cases/403.html b/src/open_inwoner/templates/pages/cases/403.html
index ff2afd2c27..7ecd304f0c 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="p">{% link href="pages-root" text=_("Ga naar de home pagina") %}</p>
+<p class="utrecht-paragraph">{% link href="pages-root" text=_("Ga naar de home pagina") %}</p>
diff --git a/src/open_inwoner/templates/pages/cases/contact_form.html b/src/open_inwoner/templates/pages/cases/contact_form.html
index 9a5ec8f30d..2447350082 100644
--- a/src/open_inwoner/templates/pages/cases/contact_form.html
+++ b/src/open_inwoner/templates/pages/cases/contact_form.html
@@ -1,7 +1,7 @@
 {% load i18n form_tags button_tags icon_tags %}
 
 <h2 class="utrecht-heading-2" id="contact">{% trans 'Stel een vraag' %}</h2>
-<p class="p">
+<p class="utrecht-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.
diff --git a/src/open_inwoner/templates/pages/cases/document_form.html b/src/open_inwoner/templates/pages/cases/document_form.html
index 1342d46491..349b51ca8d 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 @@
     {% file_input form.files max_upload_size=openzaak_config.max_upload_size allowed_file_extensions=openzaak_config.allowed_file_extensions %}
     {% form_actions primary_text=_("Upload documenten") enctype="multipart/form-data" fullwidth=True %}
     <div class="non-field-error" hidden>
-        <p class="p p--small p--centered">{% trans "Verwijder eerst bestanden die niet voldoen aan de voorwaarden" %}</p>
+        <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-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/status_inner.html b/src/open_inwoner/templates/pages/cases/status_inner.html
index 1c61146061..52cef7126c 100644
--- a/src/open_inwoner/templates/pages/cases/status_inner.html
+++ b/src/open_inwoner/templates/pages/cases/status_inner.html
@@ -36,7 +36,7 @@ <h3 class="utrecht-heading-3 documents-upload__h3">{% trans "Voeg documenten toe
                     <div class="card__body document-upload-description">
                         {% icon icon="info" icon_position="after" extra_classes="icon--info" outlined=True %}
 
-                        <div class="document-upload-description__text">{{ case.case_type_document_upload_description|markdown|safe }}</div>
+                        <div class="document-upload-description__text wysiwyg">{{ case.case_type_document_upload_description|markdown|safe }}</div>
                     </div>
                 </div>
                 {% endif %}
@@ -49,9 +49,9 @@ <h3 class="utrecht-heading-3 documents-upload__h3">{% trans "Voeg documenten toe
             {% elif case.external_upload_enabled %}
                 <h2 class="utrecht-heading-2" id="documents-upload">{% trans "Document toevoegen" %}</h2>
                 {% if case.case_type_config_description %}
-                    <p class="p">{{ case.case_type_config_description }}</p>
+                    <p class="utrecht-paragraph">{{ case.case_type_config_description }}</p>
                 {% else %}
-                    <p class="p">{% 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>
+                    <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>
                 {% endif %}
                 {% button_row %}
                     {% button href=case.external_upload_url text=_("Document uploaden") title=_("Opens new window") primary=True icon="open_in_new" icon_position="after" %}
diff --git a/src/open_inwoner/templates/pages/cases/statuses.html b/src/open_inwoner/templates/pages/cases/statuses.html
index bc2469627e..3a2d3952be 100644
--- a/src/open_inwoner/templates/pages/cases/statuses.html
+++ b/src/open_inwoner/templates/pages/cases/statuses.html
@@ -18,16 +18,16 @@ <h2 class="utrecht-heading-2" id="statuses">{% trans 'Status' %}</h2>
                             <span class="link link--bold">{{ status.label }}</span>
                             {% if case.end_statustype_data %}{% icon icon="expand_more" icon_position="after" outlined=True %}{% endif %} </button>
                         <div class="status-list__notification-content {% if case.end_statustype_data %}status-content--open{% endif %} {% if not case.end_statustype_data %}status-content--open{% endif %}" id="{{ content_id }}">
-                            <p class="p p-text p--compact">
+                            <p class="utrecht-paragraph status-list__text utrecht-paragraph--oip utrecht-paragraph--oip-compact">
                                 {# Configurable texts #}
                                 {% if case.end_statustype_data %}<span>{{ status.description|default:"" }}</span>{% endif %}
                                 {% if not case.end_statustype_data %}<span class="status--result">{{ case.result_description|default:"" }}</span>{% endif %}
                             </p>
-                            <p class="p p-date p--compact">{{ status.date|date }}</p>
+                            <p class="utrecht-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="p p__upload {% if case.end_statustype_data %}p__upload--enabled{% endif %}">
+                                <p class="utrecht-paragraph status-list__upload {% if case.end_statustype_data %}status-list__upload--enabled{% endif %}">
                                 {% if case.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 %}
@@ -46,11 +46,11 @@ <h2 class="utrecht-heading-2" id="statuses">{% trans 'Status' %}</h2>
                     <div class="status-list__notification">
                         <button class="status-list__button button--borderless" aria-controls="{{ completed_id }}" aria-expanded="false" id="{{ id }}"><a href="#" class="link link-success">{{ status.label }}</a>{% icon icon="expand_more" icon_position="after" outlined=True %}</button>
                         <div class="status-list__notification-content" id="{{ completed_id }}">
-                            <p class="p p-text p--compact">
+                            <p class="utrecht-paragraph status-list__text utrecht-paragraph--oip utrecht-paragraph--oip-compact">
                                 {# Configurable texts #}
                                 <span>{{ status.description|default:"" }}</span>
                             </p>
-                            <p class="p p-date p--compact">{{ status.date|date }}</p>
+                            <p class="utrecht-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/list.html b/src/open_inwoner/templates/pages/category/list.html
index a53a6046ea..62ff889c58 100644
--- a/src/open_inwoner/templates/pages/category/list.html
+++ b/src/open_inwoner/templates/pages/category/list.html
@@ -3,7 +3,7 @@
 {% block content %}
 <div class="categories__content">
     <h1 class="utrecht-heading-1">{{configurable_text.theme_page.theme_title}}</h1>
-    <p class="p">{{configurable_text.theme_page.theme_intro|linebreaksbr}}</p>
+    <p class="utrecht-paragraph">{{configurable_text.theme_page.theme_intro|linebreaksbr}}</p>
 
     {% include "components/Card/CardContainer.html" with categories=object_list only %}
 </div>
diff --git a/src/open_inwoner/templates/pages/contactmoment/list.html b/src/open_inwoner/templates/pages/contactmoment/list.html
index e97c939ac7..263834d9d0 100644
--- a/src/open_inwoner/templates/pages/contactmoment/list.html
+++ b/src/open_inwoner/templates/pages/contactmoment/list.html
@@ -9,7 +9,7 @@ <h1 class="utrecht-heading-1" id="contactmomenten">{{ page_title }} ({{ contactm
         <div class="form-container">
             <div class="form-heading">
                 <h2 class="utrecht-heading-2">{% trans "Stel een vraag" %}</h2>
-                <p class="p">
+                <p class="utrecht-paragraph">
                 {% blocktrans trimmed %}
                     Heeft u een vraag? Dan kunt u deze hier stellen.
                     Een van onze medewerkers beantwoord uw vraag z.s.m.
@@ -72,7 +72,7 @@ <h2 class="card__heading-2">{{ contactmoment.onderwerp }}</h2>
         <div class="form-container">
             <div class="form-heading">
                 <h2 class="utrecht-heading-2">{% trans "Stel een vraag" %}</h2>
-                <p class="p">
+                <p class="utrecht-paragraph">
                 {% blocktrans trimmed %}
                     Heeft u een vraag? Dan kunt u deze hier stellen.
                     Een van onze medewerkers beantwoord uw vraag z.s.m.
diff --git a/src/open_inwoner/templates/pages/plans/create.html b/src/open_inwoner/templates/pages/plans/create.html
index 3d03c3869c..c9b10be911 100644
--- a/src/open_inwoner/templates/pages/plans/create.html
+++ b/src/open_inwoner/templates/pages/plans/create.html
@@ -71,7 +71,7 @@ <h2 class="utrecht-heading-2 modal__title" id="modal__title">{{ plan_template.na
             {% form_actions primary_text=_("Verzenden") primary_icon="arrow_forward" %}
         {% endrender_form %}
         {% else %}
-            <div class="p">
+            <div class="utrecht-paragraph">
                 {% url 'profile:contact_create' as contact_create %}
                 {% link href=contact_create text=_("Maak je eerste contact aan voordat je een samenwerking start") icon="arrow_forward" icon_position="after" primary=True %}
             </div>
diff --git a/src/open_inwoner/templates/pages/plans/detail.html b/src/open_inwoner/templates/pages/plans/detail.html
index a6b71b7836..d1ef03db08 100644
--- a/src/open_inwoner/templates/pages/plans/detail.html
+++ b/src/open_inwoner/templates/pages/plans/detail.html
@@ -56,11 +56,11 @@ <h1 class="utrecht-heading-1" id="title">
     </div>
 
     <h2 class="utrecht-heading-2" id="goals">{% trans "Doel" %}</h2>
-    <p class="p">{{ object.goal|linebreaksbr }}</p>
+    <p class="utrecht-paragraph">{{ object.goal|linebreaksbr }}</p>
 
     {% if object.description %}
     <h2 class="utrecht-heading-2" id="description">{% trans "Description" %}</h2>
-    <p class="p">{{ object.description|linebreaksbr }}</p>
+    <p class="utrecht-paragraph">{{ object.description|linebreaksbr }}</p>
     {% endif %}
 
     {% button href="collaborate:plan_edit_goal" uuid=object.uuid text=_("Doel en omschrijving bewerken") primary=True %}
diff --git a/src/open_inwoner/templates/pages/plans/goal_edit.html b/src/open_inwoner/templates/pages/plans/goal_edit.html
index b49b2a4e69..92608b8698 100644
--- a/src/open_inwoner/templates/pages/plans/goal_edit.html
+++ b/src/open_inwoner/templates/pages/plans/goal_edit.html
@@ -3,7 +3,7 @@
 
 {% block content %}
     <h1 class="utrecht-heading-1">{% trans "Doel en omschrijving aanpassen" %}</h1>
-    <p class="p">
+    <p class="utrecht-paragraph">
         {{configurable_text.plans_page.plans_edit_message}}
     </p>
 
diff --git a/src/open_inwoner/templates/pages/plans/list.html b/src/open_inwoner/templates/pages/plans/list.html
index 4a4655a3cf..31856bd523 100644
--- a/src/open_inwoner/templates/pages/plans/list.html
+++ b/src/open_inwoner/templates/pages/plans/list.html
@@ -19,7 +19,7 @@ <h1 class="utrecht-heading-1">
                 {% button text=_("Filter") type="button" bordered=True %}
             </div>
             <div class="plan-filter__container filter__container">
-                <p class="p">{% trans "Filter op:" %}</p>
+                <p class="utrecht-paragraph">{% trans "Filter op:" %}</p>
                 {% 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">
diff --git a/src/open_inwoner/templates/pages/product/detail.html b/src/open_inwoner/templates/pages/product/detail.html
index 3514d3aca3..0fc0a285d1 100644
--- a/src/open_inwoner/templates/pages/product/detail.html
+++ b/src/open_inwoner/templates/pages/product/detail.html
@@ -33,7 +33,7 @@ <h1 class="utrecht-heading-1" id="title">
         {% endif %}
     </h1>
     {% include "components/Tag/Tag.html" with tags=object.tags.all only %}
-    <p class="p p-summary">{{ object.summary }}</p>
+    <p class="utrecht-paragraph utrecht-paragraph--oip-summary">{{ object.summary }}</p>
 
     {# Collapsable content #}
     <div class="readmore">
@@ -140,7 +140,7 @@ <h4 class="utrecht-heading-4">{{ contact.first_name }} {{ contact.last_name }}</
 
                                 {% if contact.phonenumber %}
                                     {% render_column span=6 %}
-                                        <span class="p">{{ contact.role|default:_('Telefoonnummer') }}</span>
+                                        <span class="utrecht-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="p">{{ contact.organization|default:_('E-mail')}}</p>
+                                        <p class="utrecht-paragraph">{{ contact.organization|default:_('E-mail')}}</p>
                                     {% endrender_column %}
 
                                     {% render_column start=7 span=6 %}
diff --git a/src/open_inwoner/templates/pages/product/finder.html b/src/open_inwoner/templates/pages/product/finder.html
index 93daff6796..2256eb2b60 100644
--- a/src/open_inwoner/templates/pages/product/finder.html
+++ b/src/open_inwoner/templates/pages/product/finder.html
@@ -17,7 +17,7 @@ <h1 class="utrecht-heading-1" id="title">
                     </li>
 		{% empty %}
 		<li class="product-filter__item">
-		  <p class="p">{% trans "Geen producten gevonden" %}</p>
+		  <p class="utrecht-paragraph">{% trans "Geen producten gevonden" %}</p>
 		</li>
                 {% endfor %}
             </ul>
diff --git a/src/open_inwoner/templates/pages/product/location_detail.html b/src/open_inwoner/templates/pages/product/location_detail.html
index fb6c9fa8ab..fee5e0ac9c 100644
--- a/src/open_inwoner/templates/pages/product/location_detail.html
+++ b/src/open_inwoner/templates/pages/product/location_detail.html
@@ -9,16 +9,16 @@ <h1 class="utrecht-heading-1">{{ object.name }}</h1>
         <div class="location__details">
             <div class="location__address">
                 {% if object.address_line_1 %}
-                    <p class="p">{{ object.address_line_1 }}</p>
+                    <p class="utrecht-paragraph">{{ object.address_line_1 }}</p>
                 {% endif %}
-                <p class="p">{{ object.address_line_2 }}</p>
+                <p class="utrecht-paragraph">{{ object.address_line_2 }}</p>
             </div>
             <div class="location__contact">
                 {% if object.phonenumber %}
-                    <p class="p">{{ object.phonenumber }}</p>
+                    <p class="utrecht-paragraph">{{ object.phonenumber }}</p>
                 {% endif %}
                 {% if object.email %}
-                    <p class="p">{{ object.email }}</p>
+                    <p class="utrecht-paragraph">{{ object.email }}</p>
                 {% endif %}
             </div>
         </div>
diff --git a/src/open_inwoner/templates/pages/profile/categories.html b/src/open_inwoner/templates/pages/profile/categories.html
index 448cde34b7..782bff6c2f 100644
--- a/src/open_inwoner/templates/pages/profile/categories.html
+++ b/src/open_inwoner/templates/pages/profile/categories.html
@@ -5,7 +5,7 @@
 <h1 class="utrecht-heading-1" id="title">
     {% trans "Mijn Interessegebieden" %}
 </h1>
-<p class="p">
+<p class="utrecht-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>
 
diff --git a/src/open_inwoner/templates/pages/profile/contacts/list.html b/src/open_inwoner/templates/pages/profile/contacts/list.html
index 418f7b097e..7d7343c5e4 100644
--- a/src/open_inwoner/templates/pages/profile/contacts/list.html
+++ b/src/open_inwoner/templates/pages/profile/contacts/list.html
@@ -15,12 +15,12 @@ <h1 class="utrecht-heading-1" id="title">
         <div class="approval">
             <div class="approval__header">
                 <h2 class="utrecht-heading-2">{% trans "U bent toegevoegd als contactpersoon" %}</h2>
-                <p class="p">{% trans "By accepting you agree on sharing your personal data (first name, last name and phonenumber)." %}</p>
+                <p class="utrecht-paragraph">{% trans "By accepting you agree on sharing your personal data (first name, last name and phonenumber)." %}</p>
             </div>
             {% if approvals_count == 1 %}
                 {% with pending_approvals.get as pending_approval %}
                 <div class="approval__single">
-                    <p class="p">
+                    <p class="utrecht-paragraph">
                         {% blocktrans with full_name=pending_approval.get_full_name %}{{ full_name }} wil u toevoegen als contactpersoon.{% endblocktrans %}
                     </p>
                     {% url 'profile:contact_approval' uuid=pending_approval.uuid as approval_url %}
@@ -37,7 +37,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="p">{{approval.get_full_name}}</p>
+                            <p class="utrecht-paragraph">{{approval.get_full_name}}</p>
                             {% 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 %}
@@ -71,7 +71,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="p">{% trans "Filter op:" %}</p>
+            <p class="utrecht-paragraph">{% trans "Filter op:" %}</p>
             {% 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/me.html b/src/open_inwoner/templates/pages/profile/me.html
index 2742a11de3..e775d81578 100644
--- a/src/open_inwoner/templates/pages/profile/me.html
+++ b/src/open_inwoner/templates/pages/profile/me.html
@@ -119,7 +119,7 @@ <h2 class="utrecht-heading-2 title" id="notifications">{% trans "Voorkeuren voor
         <div class="tabled__section">
             <h2 class="utrecht-heading-2 title" id="newsletters">{% trans "Nieuwsbrieven" %}</h2>
         </div>
-            <p class="p">{% 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>
+            <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>
             <form method="POST" id="newsletter-form" class="form" novalidate>
                 {% csrf_token %}
                 {% with form.fields.newsletters.remarks_mapping as remarks_mapping %}
@@ -312,7 +312,7 @@ <h4 class="card__heading-4"><span class="link link__text">{% trans "Mijn afsprak
         <div class="tabled__section">
             <h2 class="utrecht-heading-2 title" id="profile-remove">{% trans "Profiel verwijderen" %}</h2></div>
             <div class="tabled">
-                <p class="p">
+                <p class="utrecht-paragraph">
                     {% trans "Hiermee worden alleen uw persoonlijke voorkeuren verwijderd. U krijgt dan bijvoorbeeld geen e-mail meer van ons over wijzigingen van uw lopende zaken. Uw persoonsgegevens en uw lopende zaken zelf worden hiermee niet verwijderd." %}
                 </p>
             </div>
diff --git a/src/open_inwoner/templates/pages/profile/mydata.html b/src/open_inwoner/templates/pages/profile/mydata.html
index 4aa02d1e49..7cab0ed534 100644
--- a/src/open_inwoner/templates/pages/profile/mydata.html
+++ b/src/open_inwoner/templates/pages/profile/mydata.html
@@ -12,7 +12,7 @@ <h1 class="utrecht-heading-1" id="title">
             {% trans "Persoonlijke gegevens" %}
         </h1>
 
-        <p class="p">
+        <p class="utrecht-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>
diff --git a/src/open_inwoner/templates/pages/profile/notifications.html b/src/open_inwoner/templates/pages/profile/notifications.html
index 6c7f367fef..e4e64ff322 100644
--- a/src/open_inwoner/templates/pages/profile/notifications.html
+++ b/src/open_inwoner/templates/pages/profile/notifications.html
@@ -7,7 +7,7 @@
         <h1 class="utrecht-heading-1" id="title">
             {% trans "Ontvang berichten over" %}
         </h1>
-        <p class="p">
+        <p class="utrecht-paragraph">
             {% trans "Kies voor welk onderwerp je meldingen wilt ontvangen" %}
         </p>
 
diff --git a/src/open_inwoner/templates/pages/questionnaire/questionnaire-step.html b/src/open_inwoner/templates/pages/questionnaire/questionnaire-step.html
index acbb58fff0..c4906409ac 100644
--- a/src/open_inwoner/templates/pages/questionnaire/questionnaire-step.html
+++ b/src/open_inwoner/templates/pages/questionnaire/questionnaire-step.html
@@ -12,7 +12,7 @@ <h1 class="utrecht-heading-1" data-title="{{ form.instance.get_title }}" data-co
             </h1>
 
             {% if form.instance.get_description %}
-                <p class="p">{{ form.instance.get_description }}</p>
+                <p class="utrecht-paragraph">{{ form.instance.get_description }}</p>
             {% endif %}
 
             {% step_indicator form.instance.depth form.instance.depth object_list=form.instance.get_tree_path object_list_str='question_subject' %}
@@ -21,7 +21,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="p p--compact">{{ form.instance.help_text }}</p>
+                <p class="utrecht-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 93ab794352..08db380435 100644
--- a/src/open_inwoner/templates/pages/search.html
+++ b/src/open_inwoner/templates/pages/search.html
@@ -52,7 +52,7 @@ <h3 class="utrecht-heading-3 search-results__item-title">{{ hit.name }}</h3>
                 {% if paginator.count and not messages %}
                     <section class="feedback" aria-label="{% trans "Pagina feedback" %}">
                         <h4 class="utrecht-heading-4">{% trans "Feedback" %}</h4>
-                        <p class="p">{% trans "Heeft u gevonden wat u zocht?" %}</p>
+                        <p class="utrecht-paragraph">{% trans "Heeft u gevonden wat u zocht?" %}</p>
                         {% render_form form=feedback_form method="POST" form_action=request.get_full_path id="feedback_form" show_notifications=True %}
                             {% csrf_token %}
                             {{ feedback_form.errors }}
@@ -83,7 +83,7 @@ <h4 class="utrecht-heading-4">{% trans "Feedback" %}</h4>
                     <h2 class="utrecht-heading-2 search-results__title">
                         {% trans "Geen zoekresultaten" %}
                     </h2>
-                    <p class="p">{% trans "Helaas, wij vonden geen resultaten voor jouw zoekopdracht." %}</p>
+                    <p class="utrecht-paragraph">{% trans "Helaas, wij vonden geen resultaten voor jouw zoekopdracht." %}</p>
                 </div>
                 <ul class="ul">
                    <li class="li">{% trans "Controleer de spelling van je zoekopdracht." %}</li>
diff --git a/src/open_inwoner/templates/registration/password_change_done.html b/src/open_inwoner/templates/registration/password_change_done.html
index 82696dcd06..5a688d97f0 100644
--- a/src/open_inwoner/templates/registration/password_change_done.html
+++ b/src/open_inwoner/templates/registration/password_change_done.html
@@ -3,5 +3,5 @@
 
 {% block content %}
     <h1 class="utrecht-heading-1">{% trans "Password reset was successful" %}</h1>
-    <p class="p">{% trans "Your password has been changed." %}</p>
+    <p class="utrecht-paragraph">{% trans "Your password has been changed." %}</p>
 {% 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 6760226d9e..2e4bf11ff5 100644
--- a/src/open_inwoner/templates/registration/password_change_form.html
+++ b/src/open_inwoner/templates/registration/password_change_form.html
@@ -11,7 +11,7 @@
         {% render_column start=0 span=8 %}
 
             <h1 class="utrecht-heading-1">{% trans "Password reset" %}</h1>
-            <p class="p">{% 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>
+            <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>
 
             {% 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 2336a209d8..8855f5ea88 100644
--- a/src/open_inwoner/templates/registration/password_reset_complete.html
+++ b/src/open_inwoner/templates/registration/password_reset_complete.html
@@ -3,9 +3,9 @@
 
 {% block content %}
     <h1 class="utrecht-heading-1">{% trans "Password reset complete" %}</h1>
-    <p class="p">{% trans "Your password has been set. You can now continue and log in." %}</p>
+    <p class="utrecht-paragraph">{% trans "Your password has been set. You can now continue and log in." %}</p>
 
     {% with login_url as login_url %}
-        <p class="p">{% button href=login_url text=_("Log in") primary=True %}</p>
+        <p class="utrecht-paragraph">{% button href=login_url text=_("Log in") primary=True %}</p>
     {% 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 b5211c1b5e..7fd4d2956d 100644
--- a/src/open_inwoner/templates/registration/password_reset_confirm.html
+++ b/src/open_inwoner/templates/registration/password_reset_confirm.html
@@ -4,10 +4,10 @@
 {% block content %}
     {% if validlink %}
         <h1 class="utrecht-heading-1">{% trans "Enter new password" %}</h1>
-        <p class="p">{% trans "Please enter your old password and your new password twice so we can make sure you have not made any typo." %}</p>
+        <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>
         {% 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="p">{% trans "The password reset link was invalid, possibly because it has already been used. Please request a new password reset." %}</p>
+        <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>
     {% 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 bf49040617..1258a16d21 100644
--- a/src/open_inwoner/templates/registration/password_reset_done.html
+++ b/src/open_inwoner/templates/registration/password_reset_done.html
@@ -3,6 +3,6 @@
 
 {% block content %}
     <h1 class="utrecht-heading-1">{% trans "Password reset email sent" %}</h1>
-    <p class="p">{% 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="p">{% 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>
+    <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>
 {% 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 14d3c745fd..f9052c9f09 100644
--- a/src/open_inwoner/templates/registration/password_reset_form.html
+++ b/src/open_inwoner/templates/registration/password_reset_form.html
@@ -6,8 +6,8 @@
     {% render_grid %}
         {% render_column start=0 span=6 %}
             <h1 class="utrecht-heading-1">{% trans "Reset password" %}</h1>
-            <p class="p">{% 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="p">{% trans "Please note: this only works if you do are not using DigiD to log in." %}</p>
+            <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>
 
             {% render_form id="password-reset-form" method="POST" form=form %}
                 {% csrf_token %}