diff options
| author | Hazel Yang <hazel@gitlab.com> | 2017-05-18 09:15:47 +0300 |
|---|---|---|
| committer | tauriedavis <taurie@gitlab.com> | 2017-09-22 18:57:51 +0300 |
| commit | a7b1779c45d9d1eae57d4bcf6613059bfa0b5ace (patch) | |
| tree | 3e5d2aa329321d9fbae0355de0bb2d71a468b8d3 /doc | |
| parent | fb664d3732c690f9c36c82fd187982f92a15b3a2 (diff) | |
Update illustrations.md
Diffstat (limited to 'doc')
| -rw-r--r-- | doc/development/ux_guide/illustrations.md | 52 |
1 files changed, 52 insertions, 0 deletions
diff --git a/doc/development/ux_guide/illustrations.md b/doc/development/ux_guide/illustrations.md index e69de29bb2d..168a3cd33f4 100644 --- a/doc/development/ux_guide/illustrations.md +++ b/doc/development/ux_guide/illustrations.md @@ -0,0 +1,52 @@ +# 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**. + +![example-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. + +![example-radius]() + +#### Colors + +| Orange | Purple | Grey | +| -------- | -------- | -------- | +| ![color-orange]() | ![color-purple]() | ![color-grey]() | +| #FC6D26 | #6B4FBB | #EEEEEE | + +##### Color palette +We suggest that pick the colors from the color palette. + +| Orange | Purple | +| -------- | -------- | +| ![palette-orange]() | ![palette-purple]() | + + |