diff --git a/components/form-field-description/bem.js b/components/form-field-description/bem.js
index 1d8a81da6fa..2a52c123859 100644
--- a/components/form-field-description/bem.js
+++ b/components/form-field-description/bem.js
@@ -9,6 +9,7 @@ export const FormFieldDescription = ({ id = null, innerHTML = '', status = null
   `<div${id ? ` id="${id}"` : ''} class="${clsx(
     'utrecht-form-field-description',
     'utrecht-form-field-description--distanced',
-    status === 'valid' && 'utrecht-form-field-description--valid',
     status === 'invalid' && 'utrecht-form-field-description--invalid',
+    status === 'valid' && 'utrecht-form-field-description--valid',
+    status === 'warning' && 'utrecht-form-field-description--warning',
   )}">${innerHTML}</div>`;
diff --git a/components/form-field-description/bem.scss b/components/form-field-description/bem.scss
index 45b00d1a7c2..fd9d9c30245 100644
--- a/components/form-field-description/bem.scss
+++ b/components/form-field-description/bem.scss
@@ -31,3 +31,7 @@
     var(--utrecht-feedback-valid-color, var(--utrecht-feedback-safe-color))
   );
 }
+
+.utrecht-form-field-description--warning {
+  color: var(--utrecht-form-field-description-warning-color, var(--utrecht-feedback-warning-color));
+}