diff --git a/src/app/[locale]/components/FormProgress.tsx b/src/app/[locale]/components/FormProgress.tsx
index 271ae9c9..ae0f8a05 100644
--- a/src/app/[locale]/components/FormProgress.tsx
+++ b/src/app/[locale]/components/FormProgress.tsx
@@ -47,12 +47,12 @@ const FormProgress = ({ children }: FormProgressProps) => {
 
         <div className="flex flex-col gap-3 pb-2">
           {children}
-          <div className="overflow-hidden w-full background-gray-200">
+          <div className="overflow-hidden w-full disabled-fill-1">
             <div
               style={{
                 width: `${percentage}%`,
               }}
-              className="h-2 background-primary"
+              className="h-2 primary-fill-1"
             />
           </div>
         </div>
diff --git a/src/app/[locale]/incident/add/components/FeatureListItem.tsx b/src/app/[locale]/incident/add/components/FeatureListItem.tsx
index 2be0d653..9f7c14ee 100644
--- a/src/app/[locale]/incident/add/components/FeatureListItem.tsx
+++ b/src/app/[locale]/incident/add/components/FeatureListItem.tsx
@@ -86,7 +86,7 @@ export const FeatureListItem = ({
 
   // TODO: iets van een label toevoegen zodat voor een SR duidelijk wordt om welke lantaarnpaal, adres etc het gaat?
   return featureDescription ? (
-    <li className="py-4 border-t bordercolor-gray-200">
+    <li className="py-4 border-t disabled-border-1">
       <FormField
         className="flex flex-row items-center gap-2"
         onFocus={(e) => {
diff --git a/src/app/globals.css b/src/app/globals.css
index 9ca0b84b..1c5d778a 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -158,20 +158,16 @@
 }
 
 /* colors */
-.background-gray-200 {
-  background-color: var(--basis-color-gray-200);
+.disabled-fill-1 {
+  background-color: var(--basis-color-disabled-fill-1);
 }
 
-.background-primary {
+.primary-fill-1 {
   background-color: var(--basis-color-primary-fill-1);
 }
 
-.background-white {
-  background-color: var(--basis-color-white);
-}
-
-.bordercolor-gray-200 {
-  border-color: var(--basis-color-gray-200);
+.disabled-border-1 {
+  border-color: var(--basis-color-disabled-fill-1);
 }
 
 /* spinner */
diff --git a/src/components/ui/Divider.tsx b/src/components/ui/Divider.tsx
index cb56d728..c1ac6564 100644
--- a/src/components/ui/Divider.tsx
+++ b/src/components/ui/Divider.tsx
@@ -1,3 +1,3 @@
 export const Divider = () => {
-  return <div className="border-t-2 bordercolor-gray-200"></div>
+  return <div className="border-t-2 disabled-border-1"></div>
 }