Diagram Guide

Primary Examples

Simple white blocks may be used on a gray background. If the software you use allows, use rounded corners and a very light gray shadow pointed directly to the bottom. This sample diagram was created with Google Drawing. To open the source diagram, see Primary Example Source file.

You may use screenshots with a wider gray border, around 20px to 40px. Light or dark gray 1px borders can be used as well. In addition, some space around the image would be beneficial to emphasise its content.

Secondary Example

You may use colours in your diagrams. For more information on colours to be used, see Colours. If the contrast between the colours are too high, a lighter shade or lower opacity may be used.

Naming Convention

File naming convention for diagrams follow the exact same logic as images. For more information, see Image Naming Convention.

Icons

Icons can be used to clarify or to highlight specific points in the documentation. It is, however, important to use icons of the same color. Depending on the use case it can be green, gray if it should be subtle, and orange or red for alerts.

• For icon fonts, see Font Awesome.
• For icon library, see Noun Project.
• Large professional icon-packs can also be bought to ensure consistency and style.

Fonts

The following fonts may be used when contributing to the HubRise website documentation.

• Ubuntu – Good option for regular text, with Font Gray colour HEX: #555555, RGB: 85 85 85.
• Ubuntu Mono – Can be used for code.
• Exo 2 – This one is a custom font, good option to emphasise identity. Could be used for titles.

Colours

Should you want to use colours in your diagrams, these are the colours that should be used.