diff --git a/doc/development/ux_guide/illustrations.md b/doc/development/ux_guide/illustrations.md
index b9c98277120..818076900a6 100644
--- a/doc/development/ux_guide/illustrations.md
+++ b/doc/development/ux_guide/illustrations.md
@@ -31,13 +31,38 @@ The illustrations should always align with topics and goals in specific context.
| -------- | -------- |
|
|
|
-
#### Radius
- Standard corner radius: **10px**
- 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.
+#### Size
+Depends on the situation, the illustration size can be the 3 types below:
+
+**Large**
+* Use case: Empty states, error pages(e.g. 404, 403)
+* For vertical layout, the illustration should not larger than **430*300 px**.
+* For horizontal layout, the illustration should not larger than **430*380 px**
+
+| Vertocal layout | Horizontal layout |
+| --------------- | ----------------- |
+|
|
+
+**Medium**
+* Use case: Banner
+* The illustration should not larger than **240*160 px**
+* The illustration should keep simple and clear. We recommend not including too many elements in the medium size illustration.
+
+
+
+**Small**
+* Use case: Graphics for explanatory text, graphics for status
+* The illustration should not larger than **160*90 px**
+* The illustration should keep simple and clear. We recommend not including too many elements in the small size illustration.
+
+
+
#### Colors palette
For consistency, we recommend choosing colors from our color palette.
@@ -47,6 +72,10 @@ For consistency, we recommend choosing colors from our color palette.
|
|
|
|
| #FC6D26 | #6B4FBB | #EEEEEE |
+#### Don't
+- Don't include the typography in the illustration.
+- Don't include tanuki in the illustration. If necessary, we recommend having tanuki monochromatic.
+
---
| Orange | Purple |
diff --git a/doc/development/ux_guide/img/illustration-size-large-horizontal.png b/doc/development/ux_guide/img/illustration-size-large-horizontal.png
new file mode 100755
index 00000000000..8aa835adccc
Binary files /dev/null and b/doc/development/ux_guide/img/illustration-size-large-horizontal.png differ
diff --git a/doc/development/ux_guide/img/illustration-size-large-vertical.png b/doc/development/ux_guide/img/illustration-size-large-vertical.png
new file mode 100644
index 00000000000..813b6a065e5
Binary files /dev/null and b/doc/development/ux_guide/img/illustration-size-large-vertical.png differ
diff --git a/doc/development/ux_guide/img/illustration-size-medium.png b/doc/development/ux_guide/img/illustration-size-medium.png
new file mode 100755
index 00000000000..55cfe1dcb91
Binary files /dev/null and b/doc/development/ux_guide/img/illustration-size-medium.png differ
diff --git a/doc/development/ux_guide/img/illustration-size-small.png b/doc/development/ux_guide/img/illustration-size-small.png
new file mode 100644
index 00000000000..0124f58f48e
Binary files /dev/null and b/doc/development/ux_guide/img/illustration-size-small.png differ