Diagram Guide

Introduction

This guide includes useful guidance and specifications when including diagrams to the HubRise website.

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.

HubRise primary diagram example with no colors

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.

Example of a screenshot

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.

Example of a diagram with colours

Diagram Naming Convention

File naming convention for diagrams follow the exact same logic as images. To know how to name video files you create, refer to the screenshooting guide Image Naming Convention section.

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.

Colours
Main GreenDarkest Green
HEX: #6cb14fHEX: #262b24
RGB: 108 177 79RGB: 38 43 36
Dark GrayRegular Gray
HEX: #f8f8f8HEX: #cccccc
RGB: 248 248 248RGB: 204 204 204
Light GrayFont Gray
HEX: #888888HEX: #555555
RGB: 136 136 136RGB: 85 85 85
Sky BlueRegular Blue
HEX: #3ca4c6HEX: #4f79b1
RGB: 60 164 198RGB: 79 121 177
VioletPurple
HEX: #584fb1HEX: #944fb1
RGB: 88 79 177RGB: 148 79 177
YellowOrange
HEX: #d4b443HEX: #eb7323
RGB: 212 180 67RGB: 235 115 35
Regular RedDarker Red
HEX: #d95147HEX: #b2564f
RGB: 217 81 71RGB: 178 86 79