gitlab-org--gitlab-foss/doc/development/ux_guide/illustrations.md

57 lines
1.8 KiB
Markdown
Raw Normal View History

2017-05-18 06:15:47 +00:00
# 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**.
2017-05-19 05:21:27 +00:00
| Do | Don't |
| -------- | -------- |
| ![example-caps-and-corner--do]() | ![example-caps-and-corner--dont]() |
2017-05-18 06:15:47 +00:00
#### 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]()
2017-05-19 05:21:27 +00:00
#### Colors palette
For consistency, we suggest to pick the colors from the color palette.
2017-05-18 06:15:47 +00:00
| Orange | Purple | Grey |
| -------- | -------- | -------- |
| ![color-orange]() | ![color-purple]() | ![color-grey]() |
| #FC6D26 | #6B4FBB | #EEEEEE |
2017-05-19 05:21:27 +00:00
2017-05-18 06:15:47 +00:00
| Orange | Purple |
| -------- | -------- |
| ![palette-orange]() | ![palette-purple]() |