Brand Guidelines

Guidance for partners and media on logo usage, typography and brand colours.

This document is a guide to Saasu’s visual identity, the elements that come together to form this and their correct usage.

Grid

  • 8px/16px/48px
  • Increments of 4 acceptable
  • Preferred design grid is 48px
  • line height is 1.5em = 2x font-height

Devices

Mobile

  • Min-width:480px
  • Hamburger menu swipe in left
  • Button menu tap to appear instantly

Desktop

  • 1920 x 1080 background images to fill 27″ target screen at full res.
  • Align content left but fill entire screen in content+whitespace balance.
  • Darken background images to 50% of contrast approximately.

Colours

Saasu Colour Hex RGB
Orange #ff850d R: 255 G: 133 B:13
Black #1b1b1b R: 27 G: 27 B: 27
Grey 3 #6b6b6b R:107 G:107 B:107
Grey 4 #979797 R:151 G:151 B:151
Grey 5 #c3c3c3 R:195 G:195 B:195
Grey 6 #f0f0f0 R:240 G:240 B:240

Fonts

Font Family: normal 100% ‘Roboto’,sans-serif

Material Font: https://fonts.google.com/specimen/Roboto

Material Icon Font: https://design.google.com/icons/

 

Use HTML Weight Size Weight Hex Color
Page Title H1 200 48px Light #1b1b1b
Header H2 200 32px Light #1b1b1b
Sub-Header H3 200 24px Normal #1b1b1b
Para/Table-Header H4 500 16px Slightly Bold #1b1b1b
Text P 200 16px Normal #6b6b6b
Quote EM 200 16px Normal #1b1b1b