Add size part to the guideline
This commit is contained in:
parent
ff9a2a8b51
commit
05ddd46c86
|
@ -31,13 +31,38 @@ The illustrations should always align with topics and goals in specific context.
|
||||||
| -------- | -------- |
|
| -------- | -------- |
|
||||||
| <img src="img/illustrations-caps-do.png" width= 133px alt="Do: caps and corner" /> | <img src="img/illustrations-caps-don't.png" width= 133px alt="Don't: caps and corner"/> |
|
| <img src="img/illustrations-caps-do.png" width= 133px alt="Do: caps and corner" /> | <img src="img/illustrations-caps-don't.png" width= 133px alt="Don't: caps and corner"/> |
|
||||||
|
|
||||||
|
|
||||||
#### Radius
|
#### Radius
|
||||||
- Standard corner radius: **10px**
|
- 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.
|
- 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"/>
|
<img src="img/illustrations-border-radius.png" width= 464px alt="Example for border radius"/>
|
||||||
|
|
||||||
|
#### 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 |
|
||||||
|
| --------------- | ----------------- |
|
||||||
|
| <img src="img/illustration-size-large-vertical.png" /> | <img src="img/illustration-size-large-horizontal.png" />
|
||||||
|
|
||||||
|
**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.
|
||||||
|
|
||||||
|
<img src="img/illustration-size-medium.png" width=983px />
|
||||||
|
|
||||||
|
**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.
|
||||||
|
|
||||||
|
<img src="img/illustration-size-small.png" width=983px />
|
||||||
|
|
||||||
#### Colors palette
|
#### Colors palette
|
||||||
|
|
||||||
For consistency, we recommend choosing colors from our color 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.
|
||||||
| <img src="img/illustrations-color-orange.png" width= 160px alt="Orange" /> | <img src="img/illustrations-color-purple.png" width= 160px alt="Purple" /> | <img src="img/illustrations-color-grey.png" width= 160px alt="Grey" /> |
|
| <img src="img/illustrations-color-orange.png" width= 160px alt="Orange" /> | <img src="img/illustrations-color-purple.png" width= 160px alt="Purple" /> | <img src="img/illustrations-color-grey.png" width= 160px alt="Grey" /> |
|
||||||
| #FC6D26 | #6B4FBB | #EEEEEE |
|
| #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 |
|
| Orange | Purple |
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
After Width: | Height: | Size: 42 KiB |
Loading…
Reference in New Issue