diff --git a/packages/documentation/pages/usage/components/banner.vue b/packages/documentation/pages/usage/components/banner.vue
index bbde943775..18b0117353 100644
--- a/packages/documentation/pages/usage/components/banner.vue
+++ b/packages/documentation/pages/usage/components/banner.vue
@@ -65,7 +65,7 @@ interface.
 
 ### Background
 
-You can use `banner-grey` to change the banner's background color,
+You can use `banner-gray` to change the banner's background color,
 this style is useful when you want add contrast to the page.
 
 <div class="element-example white">
diff --git a/packages/documentation/pages/usage/components/steps.vue b/packages/documentation/pages/usage/components/steps.vue
index 35577a4faf..a2ba64fb6c 100644
--- a/packages/documentation/pages/usage/components/steps.vue
+++ b/packages/documentation/pages/usage/components/steps.vue
@@ -32,7 +32,7 @@ Each `KtStep` has four elements:
 1. Indicator: The icon on the left, can be changed with the `icon` prop
 2. Line: The line under the icon, if the step is last in the group, you may want to use `hideLine` to disable the line
 3. Title: The bold text on the right side, given via `title` props.
-4. Description: The grey text under tilte, given via `description` props.
+4. Description: The gray text under title, given via `description` props.
 
 ## Steps
 
diff --git a/packages/documentation/pages/usage/components/toaster.vue b/packages/documentation/pages/usage/components/toaster.vue
index 0e0ca7008a..66e627f128 100644
--- a/packages/documentation/pages/usage/components/toaster.vue
+++ b/packages/documentation/pages/usage/components/toaster.vue
@@ -9,7 +9,7 @@ Toasters can deliver messages that the user needs to pay attention to without in
 
 ![Toaster Structure](~/assets/img/toaster_structure.png)
 
-1. Type Colour: Depends on the type of toaster. There are three colors:
+1. Type Color: Depends on the type of toaster. There are three colors:
 
    - `Green-500`: for success information
    - `Orange-500`: for warning message
diff --git a/packages/documentation/pages/usage/utilities.vue b/packages/documentation/pages/usage/utilities.vue
index 7624be5912..8a6ed898e9 100644
--- a/packages/documentation/pages/usage/utilities.vue
+++ b/packages/documentation/pages/usage/utilities.vue
@@ -8,7 +8,7 @@
     <div class="element-example white">
     	<h4>Text Color</h4>
     	<div class="text-primary">Text Primary</div>
-    	<div class="text-grey ">Text Grey</div>
+    	<div class="text-gray ">Text Gray</div>
     	<div class="text-success">Text Succes</div>
     	<div class="text-error">Text Error</div>
     	<div class="text-warning">Text Warning</div>
@@ -16,7 +16,7 @@
 
     ```html
     <div class="text-primary">Text Primary</div>
-    <div class="text-grey ">Text Grey</div>
+    <div class="text-gray ">Text Gray</div>
     <div class="text-success">Text Succes</div>
     <div class="text-error">Text Error</div>
     <div class="text-warning">Text Warning</div>
diff --git a/packages/kotti-ui/source/kotti-style/utilities/_text.scss b/packages/kotti-ui/source/kotti-style/utilities/_text.scss
index 7715cfebd1..bae709ed82 100644
--- a/packages/kotti-ui/source/kotti-style/utilities/_text.scss
+++ b/packages/kotti-ui/source/kotti-style/utilities/_text.scss
@@ -12,7 +12,7 @@
 
 $text-colors: (
 	text-primary: $primary-500,
-	text-grey: $lightgray-500,
+	text-gray: $lightgray-500,
 	text-success: $green-500,
 	text-error: $red-500,
 	text-warning: $orange-500,