Illustration guidelines - Fix grammar error and update images.
This commit is contained in:
parent
c93131d3d0
commit
ff9a2a8b51
|
@ -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.
|
||||
|
||||
<img src="img/illustrations-geometric.png" width=224px alt="Example for geometric" />
|
||||
|
||||
#### 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 |
|
||||
| -------- | -------- |
|
||||
| -------- | -------- |
|
||||
| <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
|
||||
- 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.
|
||||
|
||||
<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"/>
|
||||
|
||||
#### 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 |
|
||||
| -------- | -------- |
|
||||
| <img src="img/illustrations-palette-oragne.png" width= 160px alt="Palette - Orange" /> | <img src="img/illustrations-palette-purple.png" width= 160px alt="Palette - Purple" /> |
|
||||
|
||||
|
||||
| -------- | -------- |
|
||||
| <img src="img/illustrations-palette-oragne.png" width= 160px alt="Palette - Orange" /> | <img src="img/illustrations-palette-purple.png" width= 160px alt="Palette - Purple" /> |
|
||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Binary file not shown.
Before Width: | Height: | Size: 9.7 KiB After Width: | Height: | Size: 9.8 KiB |
Loading…
Reference in New Issue