diff --git a/src/open_inwoner/components/readme.md b/src/open_inwoner/components/readme.md
index a5b62a711a..6bfbcbe478 100644
--- a/src/open_inwoner/components/readme.md
+++ b/src/open_inwoner/components/readme.md
@@ -96,7 +96,7 @@ Given an example of a hyperlink with an icon:
 
 ```html
 {% load i18n %}
-<a class="utrecht-button button button--primary" href="{% url 'inbox:index' %}">
+<a class="utrecht-link-button button button--primary" href="{% url 'inbox:index' %}">
     <span class="material-icon">arrow_forward</span>
     {% trans 'My messages' %}
 </a>
diff --git a/src/open_inwoner/components/templates/components/Button/Button.html b/src/open_inwoner/components/templates/components/Button/Button.html
index 0bd8eab738..37b6a527d4 100644
--- a/src/open_inwoner/components/templates/components/Button/Button.html
+++ b/src/open_inwoner/components/templates/components/Button/Button.html
@@ -2,7 +2,7 @@
 
 {% if href %}
     <a
-        class="utrecht-button {{ classes }}"
+        class="utrecht-link-button {{ classes }}"
         href="{{ href }}"
         title="{% firstof title text %}"
         aria-label="{% firstof text title %}"
diff --git a/src/open_inwoner/components/templatetags/button_tags.py b/src/open_inwoner/components/templatetags/button_tags.py
index 61174df883..cdb40b0d30 100644
--- a/src/open_inwoner/components/templatetags/button_tags.py
+++ b/src/open_inwoner/components/templatetags/button_tags.py
@@ -68,7 +68,7 @@ def button(text, **kwargs):
 
     def get_classes():
         extra_classes = kwargs.get("extra_classes")
-        classnames = "button"
+        classnames = "utrecht-button"
 
         if extra_classes:
             classnames += f" {extra_classes}"
diff --git a/src/open_inwoner/scss/components/Button/Button.scss b/src/open_inwoner/scss/components/Button/Button.scss
index d21ff5a05a..b25c33a162 100644
--- a/src/open_inwoner/scss/components/Button/Button.scss
+++ b/src/open_inwoner/scss/components/Button/Button.scss
@@ -1,6 +1,6 @@
 @import '~@utrecht/components/dist/button/css/index.css';
 
-.button {
+.utrecht-button {
   align-items: center;
   border-radius: var(--border-radius);
   box-sizing: border-box;
diff --git a/src/open_inwoner/scss/components/Typography/H1.scss b/src/open_inwoner/scss/components/Typography/H1.scss
index 6c5cfc573b..202ed1aa2c 100644
--- a/src/open_inwoner/scss/components/Typography/H1.scss
+++ b/src/open_inwoner/scss/components/Typography/H1.scss
@@ -1,4 +1,3 @@
-@import '~@utrecht/components/dist/heading-1/css/index.css';
 @import '~microscope-sass/lib/responsive';
 
 .utrecht-heading-1 {
diff --git a/src/open_inwoner/scss/components/Typography/H2.scss b/src/open_inwoner/scss/components/Typography/H2.scss
index daddce905c..a0c73a036d 100644
--- a/src/open_inwoner/scss/components/Typography/H2.scss
+++ b/src/open_inwoner/scss/components/Typography/H2.scss
@@ -1,4 +1,3 @@
-@import '~@utrecht/components/dist/heading-2/css/index.css';
 @import '~microscope-sass/lib/responsive';
 
 .utrecht-heading-2 {
diff --git a/src/open_inwoner/scss/components/Typography/H3.scss b/src/open_inwoner/scss/components/Typography/H3.scss
index 46f73b9cfc..23db255805 100644
--- a/src/open_inwoner/scss/components/Typography/H3.scss
+++ b/src/open_inwoner/scss/components/Typography/H3.scss
@@ -1,4 +1,3 @@
-@import '~@utrecht/components/dist/heading-3/css/index.css';
 @import '~microscope-sass/lib/responsive';
 
 .h3 {
diff --git a/src/open_inwoner/scss/components/Typography/H4.scss b/src/open_inwoner/scss/components/Typography/H4.scss
index a6244c7623..455fc1cf5c 100644
--- a/src/open_inwoner/scss/components/Typography/H4.scss
+++ b/src/open_inwoner/scss/components/Typography/H4.scss
@@ -1,4 +1,3 @@
-@import '~@utrecht/components/dist/heading-4/css/index.css';
 @import '~microscope-sass/lib/responsive';
 
 .h4 {
diff --git a/src/open_inwoner/scss/views/_index.scss b/src/open_inwoner/scss/views/_index.scss
index 9b5eeda4d0..414cd240b9 100644
--- a/src/open_inwoner/scss/views/_index.scss
+++ b/src/open_inwoner/scss/views/_index.scss
@@ -2,6 +2,8 @@
 @import './App.scss';
 @import './body';
 @import './Categories.scss';
+@import './nl-design-system-community';
+@import './nl-design-system-oip-theme';
 @import './Plans.scss';
 @import './product_detail';
 @import './view';
diff --git a/src/open_inwoner/scss/views/_nl-design-system-community.scss b/src/open_inwoner/scss/views/_nl-design-system-community.scss
new file mode 100644
index 0000000000..f0403594f0
--- /dev/null
+++ b/src/open_inwoner/scss/views/_nl-design-system-community.scss
@@ -0,0 +1,9 @@
+@import '@utrecht/components/dist/document/css/index.css';
+@import '~@utrecht/components/dist/heading-1/css/index.css';
+@import '~@utrecht/components/dist/heading-2/css/index';
+@import '~@utrecht/components/dist/heading-3/css/index';
+@import '~@utrecht/components/dist/heading-4/css/index';
+@import '~@utrecht/components/dist/heading-5/css/index';
+@import '@utrecht/components/dist/button/css/index.css';
+@import '@utrecht/components/dist/link-button/css/index.css';
+@import '@utrecht/components/dist/paragraph/css/index.css';
diff --git a/src/open_inwoner/scss/views/_nl-design-system-oip-theme.scss b/src/open_inwoner/scss/views/_nl-design-system-oip-theme.scss
new file mode 100644
index 0000000000..51ded51abd
--- /dev/null
+++ b/src/open_inwoner/scss/views/_nl-design-system-oip-theme.scss
@@ -0,0 +1,6 @@
+.openinwoner-theme {
+  --oip-color-primary: var(--color-primary);
+  --oip-color-secondary: var(--color-secondary);
+  --oip-color-primary-darker: var(--color-primary-darker);
+  --oip-color-secondary-darker: var(--color-secondary-darker);
+}
diff --git a/src/open_inwoner/templates/500.html b/src/open_inwoner/templates/500.html
index c02517375b..69725ba93a 100644
--- a/src/open_inwoner/templates/500.html
+++ b/src/open_inwoner/templates/500.html
@@ -136,7 +136,7 @@ <h1 >Sorry, a server error has occurred (500)</h1>
     <strong>{{ request.sentry.id }}</strong>.</p>
   {% endif %}
   <p class="lead">
-    <a href="/" class="utrecht-button button">Back to home</a>
+    <a href="/" class="button">Back to home</a>
   </p>
 </body>
 
diff --git a/src/open_inwoner/templates/djangocms_link/arrow/link.html b/src/open_inwoner/templates/djangocms_link/arrow/link.html
index 8fe6d21873..686e5f1ec1 100644
--- a/src/open_inwoner/templates/djangocms_link/arrow/link.html
+++ b/src/open_inwoner/templates/djangocms_link/arrow/link.html
@@ -1,4 +1,4 @@
 {% load cms_tags button_tags icon_tags i18n %}{% spaceless %}
 {# copied and modified from 'default' #}
 {# this needs to be in one line for rendering purpose #}
-{% endspaceless %}<a class="utrecht-button button button--textless button--icon button--icon-before button--transparent"  href="{{ link }}"{% if instance.target %} target="{{ instance.target }}"{% endif %}{% if instance.attributes %} {{ instance.attributes_str }}{% endif %}>{% icon icon="arrow_forward" %}{% for plugin in instance.child_plugin_instances %}{% render_plugin plugin %}{% empty %}{{ instance.name }}{% endfor %}</a>
+{% endspaceless %}<a class="utrecht-link-button button button--textless button--icon button--icon-before button--transparent"  href="{{ link }}"{% if instance.target %} target="{{ instance.target }}"{% endif %}{% if instance.attributes %} {{ instance.attributes_str }}{% endif %}>{% icon icon="arrow_forward" %}{% for plugin in instance.child_plugin_instances %}{% render_plugin plugin %}{% empty %}{{ instance.name }}{% endfor %}</a>
diff --git a/src/open_inwoner/templates/pages/cases/status_inner.html b/src/open_inwoner/templates/pages/cases/status_inner.html
index 388428b94a..8ba15a0885 100644
--- a/src/open_inwoner/templates/pages/cases/status_inner.html
+++ b/src/open_inwoner/templates/pages/cases/status_inner.html
@@ -74,7 +74,7 @@ <h2 class="h2 {% if case.new_docs %}indicator{% endif %}" id="documents">{% tran
                 {% include "pages/questions/questions.html" with questions=case.questions only %}
                 {% if case.questions|length > 3 %}
                     <div class="expand">
-                        <a id="toggle-hide-elements" class="utrecht-button button button--textless button--icon button--icon-after button--secondary button--transparent" data-label-reveal="{% trans 'Toon alle vragen' %}" data-label-collapse="{% trans 'Toon minder' %}" data-label-num-elems={{ case.questions|length }} aria-expanded=false>
+                        <a id="toggle-hide-elements" class="utrecht-link-button button button--textless button--icon button--icon-after button--secondary button--transparent" data-label-reveal="{% trans 'Toon alle vragen' %}" data-label-collapse="{% trans 'Toon minder' %}" data-label-num-elems={{ case.questions|length }} aria-expanded=false>
                             {% icon extra_classes="expand-icon" icon="expand_more" icon_position="after" icon_outlined=True %}
                         </a>
                     </div>
diff --git a/src/open_inwoner/templates/pages/contactmoment/detail.html b/src/open_inwoner/templates/pages/contactmoment/detail.html
index c425efe527..08b79db81f 100644
--- a/src/open_inwoner/templates/pages/contactmoment/detail.html
+++ b/src/open_inwoner/templates/pages/contactmoment/detail.html
@@ -26,13 +26,13 @@ <h2 class="contactmoment__heading">{% trans "Antwoord" %}</h2>
                         {% endif %}
                     </div>
                     <div>
-                        <a href="{{ origin.url }}" id="origin_link" class="utrecht-button button button--primary contactmoment__actions">
+                        <a href="{{ origin.url }}" id="origin_link" class="utrecht-link-button button button--primary contactmoment__actions">
                             {% icon "arrow_backward" %}{{ origin.label }}
                         </a>
                     </div>
                     {% if destination %}
                         <div>
-                            <a href="{{ destination.url }}" id="destination_link" class="utrecht-button button button--transparent contactmoment__actions">
+                            <a href="{{ destination.url }}" id="destination_link" class="utrecht-link-button button button--transparent contactmoment__actions">
                                 <span>{{ destination.label }}</span>{% icon "arrow_forward" %}
                             </a>
                         </div>