diff --git a/doc/development/ux_guide/illustrations.md b/doc/development/ux_guide/illustrations.md
index 7df8e918e60..b9c98277120 100644
--- a/doc/development/ux_guide/illustrations.md
+++ b/doc/development/ux_guide/illustrations.md
@@ -8,39 +8,39 @@ 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
#### Shapes
-- All illustrations are geometric rather than organic.
-- The illustrations are made by circles, rectangles, squares, and triangles.
+- All illustrations are geometric rather than organic.
+- The illustrations are made by circles, rectangles, squares, and triangles.
#### 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 |
-| -------- | -------- |
+| -------- | -------- |
| | |
#### 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.
-
+
#### 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 |
| -------- | -------- | -------- |
@@ -50,7 +50,5 @@ For consistency, we suggest to pick the colors from the color palette.
---
| Orange | Purple |
-| -------- | -------- |
-| | |
-
-
+| -------- | -------- |
+| | |
diff --git a/doc/development/ux_guide/img/illustrations-palette-oragne.png b/doc/development/ux_guide/img/illustrations-palette-oragne.png
index 58df4459c24..15f35912646 100755
Binary files a/doc/development/ux_guide/img/illustrations-palette-oragne.png and b/doc/development/ux_guide/img/illustrations-palette-oragne.png differ
diff --git a/doc/development/ux_guide/img/illustrations-palette-purple.png b/doc/development/ux_guide/img/illustrations-palette-purple.png
index da5c1e245c9..e0f5839705e 100755
Binary files a/doc/development/ux_guide/img/illustrations-palette-purple.png and b/doc/development/ux_guide/img/illustrations-palette-purple.png differ