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

# 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. 

<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.
- 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.

<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.

| Orange | Purple | Grey |
| -------- | -------- | -------- |
| <img src="img/illustrations-color-orange.png" width= 320px alt="Orange" /> | <img src="img/illustrations-color-purple.png" width= 320px alt="Purple" /> | <img src="img/illustrations-color-grey.png" width= 320 alt="Grey" /> |
| #FC6D26   | #6B4FBB | #EEEEEE |

---

| Orange | Purple |
| -------- | -------- | 
| <img src="img/illustrations-palette-oragne.png" width= 320px alt="Palette - Orange" /> | <img src="img/illustrations-palette-purple.png" width= 320px alt="Palette - Purple" /> |