diff --git a/en/Community-Products/UKUI/Design-Guidelines/assets/.keep b/en/Community-Products/UKUI/Design-Guidelines/assets/.keep
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/en/Community-Products/UKUI/Design-Guidelines/assets/color/.keep b/en/Community-Products/UKUI/Design-Guidelines/assets/color/.keep
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/en/Community-Products/UKUI/Design-Guidelines/assets/color/image.png b/en/Community-Products/UKUI/Design-Guidelines/assets/color/image.png
new file mode 100644
index 0000000000000000000000000000000000000000..2aeef8c98302849987044592f08732633feaf0e8
Binary files /dev/null and b/en/Community-Products/UKUI/Design-Guidelines/assets/color/image.png differ
diff --git a/en/Community-Products/UKUI/Design-Guidelines/assets/color/image1.png b/en/Community-Products/UKUI/Design-Guidelines/assets/color/image1.png
new file mode 100644
index 0000000000000000000000000000000000000000..fec74797449eb50ea0873268dacd353ea268f22e
Binary files /dev/null and b/en/Community-Products/UKUI/Design-Guidelines/assets/color/image1.png differ
diff --git a/en/Community-Products/UKUI/Design-Guidelines/assets/color/image2.png b/en/Community-Products/UKUI/Design-Guidelines/assets/color/image2.png
new file mode 100644
index 0000000000000000000000000000000000000000..f440227a91f38f1af8d3c65549923b5fb4ad5c8c
Binary files /dev/null and b/en/Community-Products/UKUI/Design-Guidelines/assets/color/image2.png differ
diff --git a/en/Community-Products/UKUI/Design-Guidelines/assets/color/image3.png b/en/Community-Products/UKUI/Design-Guidelines/assets/color/image3.png
new file mode 100644
index 0000000000000000000000000000000000000000..fe2f357870f7ca60ed333ebf24ac10368af8a14b
Binary files /dev/null and b/en/Community-Products/UKUI/Design-Guidelines/assets/color/image3.png differ
diff --git a/en/Community-Products/UKUI/Design-Guidelines/assets/color/image4.png b/en/Community-Products/UKUI/Design-Guidelines/assets/color/image4.png
new file mode 100644
index 0000000000000000000000000000000000000000..77eed293363023f2f7611c6bb3c6ab45a5998883
Binary files /dev/null and b/en/Community-Products/UKUI/Design-Guidelines/assets/color/image4.png differ
diff --git a/en/Community-Products/UKUI/Design-Guidelines/assets/color/image5.png b/en/Community-Products/UKUI/Design-Guidelines/assets/color/image5.png
new file mode 100644
index 0000000000000000000000000000000000000000..f6ebe4302f1aae449e32d078fb8d554dd8ff6f73
Binary files /dev/null and b/en/Community-Products/UKUI/Design-Guidelines/assets/color/image5.png differ
diff --git a/en/Community-Products/UKUI/Design-Guidelines/color.md b/en/Community-Products/UKUI/Design-Guidelines/color.md
new file mode 100644
index 0000000000000000000000000000000000000000..91ade89c1af3b3e43ef3f6da010ef3350c6fffc2
--- /dev/null
+++ b/en/Community-Products/UKUI/Design-Guidelines/color.md
@@ -0,0 +1,31 @@
+## Theme Color Palette of System
+The use of color in interface design should have both brand recognition and interface design functionality. Color is a very emotional thing, and the use of color in design should first consider brand level expression. Another important point is that the use of color should achieve the purpose of information transmission, action guidance, interactive feedback, or strengthening and highlighting a certain element. The selection and use of any color should be meaningful.
+
+
+
+Theme colors commonly used in current popular systems（The following image shows the system's light themed color palette）：
+
+![image.png](./assets/color/image.png)
+
+## Color recognition
+Appropriate color comparison adds points to information communication, while also taking into account the needs of people with color recognition barriers. We have labeled the colors derived from each main color, and when considering the selection of contrasting colors, it is recommended that the difference in label values between the two colors should be greater than or equal to 5. (The system default control color corresponds to the number 6 columns)
+
+![image1.png](./assets/color/image1.png)
+
+## Neutral color board
+Neutral colors include black, white, and gray. Reasonable selection of neutral colors can ensure a good primary and secondary relationship between page information and aid in the reading experience.
+
+![image2.png](./assets/color/image2.png)
+
+## Functional color
+![image3.png](./assets/color/image3.png)
+
+
+## Colors and Interactions
+The design elements themselves can trigger a series of subtle visual changes due to their interactive behavior, and the color changes of the elements themselves can sometimes achieve this goal well. When carrying out such designs, it is recommended to add black or white to the color and increase it in increments of n+5%. As an example, when the mouse hovers over a specific element, it is considered floating, and the corresponding color is added with a white overlay. On the contrary, the clicking behavior can be understood as pressing down, and the corresponding black overlay is added to the color.
+
+![image4.png](./assets/color/image4.png)
+
+![image5.png](./assets/color/image5.png)
+
+