diff --git a/src/formio/components/SoftRequiredErrors.js b/src/formio/components/SoftRequiredErrors.js
index cff14099f..bbf37a36d 100644
--- a/src/formio/components/SoftRequiredErrors.js
+++ b/src/formio/components/SoftRequiredErrors.js
@@ -43,7 +43,16 @@ class SoftRequiredErrors extends FormioContentField {
       missingFields: missingFieldsMarkup,
     });
 
-    return `<div id="${this.id}-content">${content}</div>`;
+    return `
+      <div id="${this.id}-content" class="utrecht-alert utrecht-alert--warning openforms-soft-required-errors">
+        <div class="utrecht-alert__icon">
+          <i class="fa fas fa-exclamation-triangle"></i>
+        </div>
+        <div class="utrecht-alert__message">
+          ${content}
+        </div>
+      </div>
+    `;
   }
 }
 
diff --git a/src/formio/templates/missingFields.ejs b/src/formio/templates/missingFields.ejs
index 2f85f9dc0..7790e35b1 100644
--- a/src/formio/templates/missingFields.ejs
+++ b/src/formio/templates/missingFields.ejs
@@ -1,7 +1,7 @@
 <span class="sr-only" id="{{ctx.id}}-missing-fields-header">
   {{ ctx.t('Empty fields') }}
 </span>
-<ul class="utrecht-unordered-list" aria-labelledby="{{ctx.id}}-missing-fields-header">
+<ul class="utrecht-unordered-list openforms-soft-required-errors__missing-fields" aria-labelledby="{{ctx.id}}-missing-fields-header">
 {% for (const label of ctx.labels) { %}
   <li class="utrecht-unordered-list__item">{{ label }}</li>
 {% } %}
diff --git a/src/scss/components/_soft-required-errors.scss b/src/scss/components/_soft-required-errors.scss
new file mode 100644
index 000000000..11638615e
--- /dev/null
+++ b/src/scss/components/_soft-required-errors.scss
@@ -0,0 +1,17 @@
+@use 'microscope-sass/lib/bem';
+
+@import '~microscope-sass/lib/typography';
+
+.openforms-soft-required-errors {
+  // apply all wysiwyg styling
+  // TODO: parametrize this with design tokens -> check with NL DS how to approach this
+  @include wysiwyg;
+
+  // unset, takes the utrecht-alert--warning by default, but can be overridden if desired
+  color: var(--of-soft-required-errors-color);
+  background-color: var(--of-soft-required-errors-background-color);
+
+  @include bem.element('missing-fields') {
+    font-weight: var(--of-soft-required-errors-missing-fields-font-weight, 600);
+  }
+}
diff --git a/src/styles.scss b/src/styles.scss
index c81f4777e..798b623ac 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -72,3 +72,4 @@
 @import './scss/components/input-container';
 @import './scss/components/authentication-errors';
 @import './scss/components/govmetric_snippet';
+@import './scss/components/soft-required-errors';