Update illustrations.md

doc/development/ux_guide/illustrations.md

@@ -0,0 +1,52 @@
+# Illustrations
+
+The illustrations should always align with topics and goals in specific context.
+
+## Principles
+
+#### Be simple.
+- 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.
+
+#### 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. 
+
+
+## Style
+
+#### Shapes
+- All illustrations are geometric rather than organic. 
+- The illustrations are made by circles, rectangles, squares, and triangles. 
+
+![example-shapes]()
+
+#### 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.
+- We use **rounded caps** and **rounded corner**.
+
+![example-caps-and-corner]()
+
+#### 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.
+
+![example-radius]()
+
+#### Colors
+
+| Orange | Purple | Grey |
+| -------- | -------- | -------- |
+| ![color-orange]() | ![color-purple]() | ![color-grey]() |
+| #FC6D26   | #6B4FBB | #EEEEEE |
+
+##### Color palette
+We suggest that pick the colors from the color palette. 
+
+| Orange | Purple |
+| -------- | -------- | 
+| ![palette-orange]() | ![palette-purple]() | 
+
+