diff options
| author | Hazel Yang <hazel@gitlab.com> | 2017-05-19 05:39:20 +0000 |
|---|---|---|
| committer | tauriedavis <taurie@gitlab.com> | 2017-09-22 09:12:51 -0700 |
| commit | 85efbd1f0792b4d69e90de665e3e37345159ff47 (patch) | |
| tree | 7c60c6c7265db8b6bec47edb7198840b3404691f /doc | |
| parent | f09a7b0bbb179a15890705667366f7f9dc2a4e24 (diff) | |
| download | gitlab-ce-85efbd1f0792b4d69e90de665e3e37345159ff47.tar.gz | |
Add some images to illustrations.md
Diffstat (limited to 'doc')
| -rw-r--r-- | doc/development/ux_guide/illustrations.md | 12 |
1 files changed, 6 insertions, 6 deletions
diff --git a/doc/development/ux_guide/illustrations.md b/doc/development/ux_guide/illustrations.md index 5e7d243805d..cd0d61a9d3d 100644 --- a/doc/development/ux_guide/illustrations.md +++ b/doc/development/ux_guide/illustrations.md @@ -20,7 +20,7 @@ The illustrations should always align with topics and goals in specific context. - All illustrations are geometric rather than organic. - The illustrations are made by circles, rectangles, squares, and triangles. -![example-shapes]() +<img src="img/illustrations-geometric.png" width=224px alt="Example for geometric" /> #### Stroke - Standard border thickness: **4px** @@ -29,14 +29,14 @@ The illustrations should always align with topics and goals in specific context. | Do | Don't | | -------- | -------- | -| ![example-caps-and-corner--do]() | ![example-caps-and-corner--dont]() | +| <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. -![example-radius]() +<img src="img/illustrations-border-radius.png" width= 464px alt="Example for border radius"/> #### Colors palette @@ -44,13 +44,13 @@ For consistency, we suggest to pick the colors from the color palette. | Orange | Purple | Grey | | -------- | -------- | -------- | -| ![color-orange]() | ![color-purple]() | ![color-grey]() | +| <img src="img/illustrations-color-orange.png" width= 320 alt="Orange" /> | <img src="img/illustrations-color-purple.png" width= 320 alt="Purple" /> | <img src="img/illustrations-color-grey.png" width= 320 alt="Grey" /> | | #FC6D26 | #6B4FBB | #EEEEEE | - +--- | Orange | Purple | | -------- | -------- | -| ![palette-orange]() | ![palette-purple]() | +| <img src="img/illustrations-palette-oragne.png" width= 320 alt="Palette - Orange" /> | <img src="img/illustrations-palette-purple.png" width= 320 alt="Palette - Purple" /> | |