Digital Guidelines

This webpage outlines the digital brand guidelines for Ballinger & Co. These guidelines have been established to ensure brand consistency across all digital platforms and mediums.

If you are unsure how to apply these guidelines, or you are using a platform with restricted style access please contact info@helpme.com.

Contents

Global Styles

Portal & Email Styles

Global Styles

The global styles and attributes are applicable across all mediums.

Colours

Blue 01

#0E0E2C

14 14 44

Blue 02

#00358E

0 53 142

Blue 03

#0062D6

10 98 214

Blue 04

#2D8BFC

45 139 252

Blue 05

#56B7EF

86 183 230

Blue 06

#A4EBFE

164 235 254

Blue 07

#E5F9FF

223 247 255

Grey 01

#5B5B5B

14 14 44

Grey 02

#DCDCDC

0 53 142

Grey 03

#EDEDED

10 98 214

Font Families

Primary Font:
Lato

  • Font Weights
    300 (default), 500 (medium), 700 (bold)
  • Download Link
    Available via Google Fonts

Secondary Font:
Libre Baskerville

  • Font Weights
    400 (default)
  • Download Link
    Available via Google Fonts

Fallback Primary Font:
Arial

  • Font Weights
    Normal (default), Bold (bold)
  • Download Link
    Available via Download Fonts

Fallback Secondary Font:
Times

Portal & Email Styles

Font Sizes / Line Height

Default

  • Font Family:
    Lato
  • Desktop & Laptop:
    14px / 150%
  • Smartphone & Tablet:
    14px / 150%

H1

  • Font Family:
    Libre Baskerville
  • Desktop & Laptop:
    26px / 34px
  • Smartphone & Tablet:
    30px / 38px

H2

  • Font Family:
    Libre Baskerville
  • Desktop & Laptop:
    20px / 26px
  • Smartphone & Tablet:
    20px / 28px

H3

  • Font Family:
    Libre Baskerville
  • Desktop & Laptop:
    16px / 22px
  • Smartphone & Tablet:
    18px / 24px

View Example/Screenshot

Table Styles

Table

  • Outer Border:
    1px All, Solid, Blue 02
  • Inner Border:
    None

Table Head (thead)

  • Background:
    Blue 02
  • Font Colour:
    White (#FFFFFF)

Cell (td)

  • Padding:
  • 10px / 15px / 10px / 15px (T,R,B,L)

Row (tr)

  • Border:
    1px Bottom, Solid, Grey 02
  • Row Hover:
    Background: Blue 07

View Example/Screenshot

Form Elements

The following styles are for form elements on a white background.

Input/Text

  • Background:
    #fff
  • Border:
    1px Bottom, Solid, Grey 03
  • Padding:
    10px 20px 10px 20px
  • Notes:
    No border-radius.
    No box/drop shadow.
    Uppercase / Caps

Input/Button

  • Background:
    #fff
  • Border:
    1px Bottom, Solid, Grey 03
  • Border (Focus):
    1px Bottom, Solid, Blue 02
  • Padding:
    10px 20px 10px 20px
  • Notes:
    No border-radius.
    No box/drop shadow.
    Uppercase / Caps

Textarea

  • Background:
    #fff
  • Border:
    1px All, Solid, Grey 03
  • Border (Focus):
    1px All, Solid, Blue 02
  • Padding:
    10px 20px 10px 20px
  • Notes:
    No border-radius.
    No box/drop shadow.

Select

  • Background:
    #fff
  • Border:
    1px All, Solid, Grey 03
  • Border (Focus):
    1px All, Solid, Blue 02
  • Padding:
    10px 20px 10px 20px
  • Notes:
    No border-radius.
    No box/drop shadow.
    Uppercase / Caps

View Example/Screenshot