Illustration guidelines - Fix grammar error and update images.

doc/development/ux_guide/illustrations.md

@@ -8,10 +8,10 @@ The illustrations should always align with topics and goals in specific context.
 - For clarity, we use simple and specific elements to create our illustrations.
 
 #### Be optimistic.
-- We are an open-minded, optimistic, and friendly team. We should reflect those values on our illustrations to connect with our brand experience.
+- We are an open-minded, optimistic, and friendly team. We should reflect those values in our illustrations to connect with our brand experience.
 
 #### Be gentle.
-- Our illustrations assist users understand context and guide users to the right direction. Illustrations are supportive, so it should be obvious but not aggressive. 
+- Our illustrations assist users in understanding context and guide users in the right direction. Illustrations are supportive, so they should be obvious but not aggressive.
 
 
 ## Style
@@ -24,7 +24,7 @@ The illustrations should always align with topics and goals in specific context.
 
 #### Stroke
 - Standard border thickness: **4px**
-- Depends on different situations, border thickness can be changed to **3px**. For example, when the illustration size is small, the illustration with 4px border thickness would look tight. In this case, the border thickness can be changed to 3px.
+- Depending on the situation, border thickness can be changed to **3px**. For example, when the illustration size is small, an illustration with 4px border thickness would look tight. In this case, the border thickness can be changed to 3px.
 - We use **rounded caps** and **rounded corner**.
 
 | Do | Don't |
@@ -34,13 +34,13 @@ The illustrations should always align with topics and goals in specific context.
 
 #### Radius
 - Standard corner radius: **10px**
-- Depends on different situations, corner radius can be changed to **5px**. For example, when the illustration size is small, the illustration with 10px corner radius would be over-rounded. In this case, the corner radius can be changed to 5px.
+- Depending on the situation, corner radius can be changed to **5px**. For example, when the illustration size is small, an illustration with 10px corner radius would be over-rounded. In this case, the corner radius can be changed to 5px.
 
 <img src="img/illustrations-border-radius.png" width= 464px alt="Example for border radius"/>
 
 #### Colors palette
 
-For consistency, we suggest to pick the colors from the color palette.
+For consistency, we recommend choosing colors from our color palette.
 
 | Orange | Purple | Grey |
 | -------- | -------- | -------- |
@@ -52,5 +52,3 @@ For consistency, we suggest to pick the colors from the color palette.
 | Orange | Purple |
 | -------- | -------- |
 | <img src="img/illustrations-palette-oragne.png" width= 160px alt="Palette - Orange" /> | <img src="img/illustrations-palette-purple.png" width= 160px alt="Palette - Purple" /> |
-
-