gitlab-org--gitlab-foss/doc/development/ux_guide/illustrations.md
2017-09-22 08:57:51 -07:00

1.7 KiB

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