Sonovate Website Style Guide

Sonovate's brand is shaped in many ways; one of which is through maintaining the consistency and coherence of our visual assets. Refer to this site when developing pages for the Sonovate Marketing Website.

Let's Get Started

Front End Development Framework

The Sonovate marketing website is built using Twitter Bootstrap and WordPress. The stylesheet style.css is loaded after bootstrap.css when we want to overwrite Bootstrap's styles.

Landing page styles are added via an internal style sheet embedded within the landing page. This allows modular development of pages without affecting the main site styles. Pages are developed locally using flat HTML. When a design is finalised and approved, a WP template is built, uploaded then published in draft mode. Once the draft version of the page is approved, the page is put live. This process allows us to quickly react to Marketing requests for changes. It should be noted however we don't have a test site so make sure you can 'roll back' any changes to the live site if you need to.

Grid

We use mostly use Bootstrap's 12 column grid to create page layouts. Custom layouts are sometimes created when we need to develop bespoke solutions. You can find examples of how the Bootstrap grid works here: http://getbootstrap.com/examples/grid/

You can also find a starter template here:

Typography

Bootstrap's default typography is used with some scaling adjustments to make the typographic scale to enable more generous use of white space.

This is a heading level 1

Body copy: Lorem ipsum dolor sit amet, ea timeam audire percipit pri, mel id amet dissentiet, no nec solum fabulas. No mea omnis aeterno vidisse, ad saperet adolescens mel. Et sit dolore rationibus, his cu justo disputationi, vix facilisis expetendis contentiones ne. Nibh solet pri cu, eu nam error docendi. Putent perfecto inciderint ut mel, ne vis alii vero fabulas.

This is a heading level 2

Body copy: Lorem ipsum dolor sit amet, ea timeam audire percipit pri, mel id amet dissentiet, no nec solum fabulas. No mea omnis aeterno vidisse, ad saperet adolescens mel. Et sit dolore rationibus, his cu justo disputationi, vix facilisis expetendis contentiones ne. Nibh solet pri cu, eu nam error docendi. Putent perfecto inciderint ut mel, ne vis alii vero fabulas.

This is a heading level 3

Body copy: Lorem ipsum dolor sit amet, ea timeam audire percipit pri, mel id amet dissentiet, no nec solum fabulas. No mea omnis aeterno vidisse, ad saperet adolescens mel. Et sit dolore rationibus, his cu justo disputationi, vix facilisis expetendis contentiones ne. Nibh solet pri cu, eu nam error docendi. Putent perfecto inciderint ut mel, ne vis alii vero fabulas.

This is a heading level 4

Body copy: Lorem ipsum dolor sit amet, ea timeam audire percipit pri, mel id amet dissentiet, no nec solum fabulas. No mea omnis aeterno vidisse, ad saperet adolescens mel. Et sit dolore rationibus, his cu justo disputationi, vix facilisis expetendis contentiones ne. Nibh solet pri cu, eu nam error docendi. Putent perfecto inciderint ut mel, ne vis alii vero fabulas.

This is a heading level 5

Body copy: Lorem ipsum dolor sit amet, ea timeam audire percipit pri, mel id amet dissentiet, no nec solum fabulas. No mea omnis aeterno vidisse, ad saperet adolescens mel. Et sit dolore rationibus, his cu justo disputationi, vix facilisis expetendis contentiones ne. Nibh solet pri cu, eu nam error docendi. Putent perfecto inciderint ut mel, ne vis alii vero fabulas.

This is a lead paragraph

Guidance: Generally speaking there should only be one lead paragraph. You may also need to apply the 'last' class depending on the top spacing of the next element.

Writing Style

We capitalise the first letter of main words for titles and buttons.

Example:

What Part of our Solution are you Interested in?

The first letter of each main word is capitalised.

Guidance: Not sure if a word is 'main' enough to be capitalised? Don't worry about just use your common sense.

Colours

We have four brand colours. Blue, teal orange and dark slate. Tints are also available for illustrative banners and other advertising collateral.

Hex: #148cd2

RGB: 20, 140, 210

CSS: bc1

Hex: #00c8ac

RGB: 0, 200, 172

CSS: bc2

Hex: #ff8c00

RGB: 255, 140, 0

CSS: bc3

Hex: #22262e

RGB: 34, 38, 46

CSS: bc4

Hex: #148cd2

RGB: 20, 140, 210

CSS: bc1

Hex: #4fa9dd

RGB: 79, 169, 221

CSS: bc1t1

Hex: #89c5e8

RGB: 137, 197, 232

CSS: bc1t2

Hex: #c4e2f4

RGB: 196, 226, 244

CSS: bc1t3

Greens

Hex: #00c8ac

RGB: 0, 200, 172

CSS: bc2

Hex: #4fa9dd

RGB: 79, 169, 221

CSS: bc2t1

Hex: #89c5e8

RGB: 137, 197, 232

CSS: bc2t2

Hex: #c4e2f4

RGB: 196, 226, 244

CSS: bc2t3

Hex: #ff8c00

RGB: 255, 140, 0

CSS: bc3

Hex: #ffa940

RGB: 255, 169, 64

CSS: bc3t1

Hex: #ffc57f

RGB: 255, 197, 127

CSS: bc3t2

Hex: #ffe2bf

RGB: 255, 226, 191

CSS: bc3t3

Hex: #22262e

RGB: 34, 38, 46

CSS: bc4

Hex: #595c62

RGB: 89, 92, 98

CSS: bc4t1

Hex: #909296

RGB: 144, 146, 150

CSS: bc4t2

Hex: #c8c9cb

RGB: 200, 201, 203

CSS: bc4t3

Imagery

Three core images are used to represent a typical digital worker. When choosing new images, care should be taken that images where possible have same lighting and feel as the rest of the library.

Guidance: Try to avoid images that are too 'London centric'.

Overlays

Use a 60% opacity setting in either the main brand blue or dark slate colour over background images. Overlays allow us to make the text legible where light text is over light areas of the background image.

Brand blue tint

Dark slate tint

Gradient tint

Product Images

Lorum

Icons

The Sonovate site uses a custom set of icons based on the 'streamline' icon set. This strategy allows us to leverage the entire 'streamline' library as well as well as creating custom icons when required.

Custom icons are required for marketing messages where industry specific jargon is used for example 'turnover', 'concentration', 'cashflow' or when illustrating concepts such as 'flexibility' 'easy' 'unlock' etc.

Icon money notes

icon-abc-in-circle-58.svg

It's easy to get started with Sonovate...

Icon currency symbol on conveyour belt

icon-pound-sign-multidirectional-arrows-58.svg

We provide flexible finance...

Icon money unlocked

icon-money-with-padlock-58.svg

We allow you to unlock money from invoices...

Icon money notes

icon-calculator-58.svg

It's easy to get started with Sonovate...

Icon currency symbol on conveyour belt

icon-cloud-inside-computer-58.svg

We provide flexible finance...

Icon money unlocked

icon-hand-cash-fast.svg

We allow you to unlock money from invoices...

Icon money notes

icon-currency-in-heart-58.svg

It's easy to get started with Sonovate...

Icon currency symbol on conveyour belt

icon-money-with-padlock-locked-58.svg

We provide flexible finance...

Icon money unlocked

icon-hand-currency-sign-sterling.svg

We allow you to unlock money from invoices...

Icon money notes

currency-sign-rotating-lines.svg

It's easy to get started with Sonovate...

Icon currency symbol on conveyour belt

currency-sign-rotating-arrows.svg.svg

We provide flexible finance...

Icon money unlocked

icon-hand-currency-sign-sterling.svg

We allow you to unlock money from invoices...

Guidance: Download the AI file and follow the istruction for creating icons.

Buttons

The button colours are derived from the main brand colour palette. Hover styles are a shade lighter. Blue CTA buttons should be used on pages with white backgrounds. Alternative buttons colours should be used to increase visual contrast when used on background colours other than white.

Class: btn-primary

Call To Action Button

Guidance: for use on white and light backgrounds

Class: btn-primary-contrast

Call To Action Button

Guidance: for use on blue and dark backgrounds.

Class: btn-primary-contrast-dark

Call To Action Button

Guidance: for use on light backgrounds.

Class: btn-primary-contrast-custom

Call To Action Button

Guidance: for use on dark backgrounds.

Forms

There are two type of form used on the site.

Regular style

Lists

List with SVG marker black

  • Stripped back finance
  • Provide a tech platform that is friendly and simple to use
  • Create the best customer experience

List with SVG marker white

  • Stripped back finance
  • Provide a tech platform that is friendly and simple to use
  • Create the best customer experience

List with SVG marker green

  • Stripped back finance
  • Provide a tech platform that is friendly and simple to use
  • Create the best customer experience

List with ticks using font awesome

  • 100% profit released to you
  • Pay-as-you-go model
  • Market-leading cloud technology
  • Option to fund who you want
  • Bad debt insurance included
  • No intro, exit or additional fees
  • Flexible contracts
  • No personal guarantees
  • No debt concentration

List with ticks small blue

  • Two DoFollow backlinks to your website
  • Author picture with bio and professional links
  • A brief company/personal bio promoted in the footer
  • The opportunity to become a regular contributor

List with ticks graphic background image

  • Online timesheets
  • Payroll
  • Confidential factoring
  • Perm factoring
  • Your own dedicated account manager
  • An award winning cloud platform
  • Free credit checking facility
  • On-hand customer service
  • IR35 regulated terms of business for clients & contractors

List with ticks graphic background image - thick

  • Online timesheets
  • Payroll
  • Confidential factoring
  • Perm factoring
  • Your own dedicated account manager
  • An award winning cloud platform
  • Free credit checking facility
  • On-hand customer service
  • IR35 regulated terms of business for clients & contractors

List with ticks graphic background image

  • Online timesheets
  • Payroll
  • Confidential factoring
  • Perm factoring
  • Your own dedicated account manager
  • An award winning cloud platform
  • Free credit checking facility
  • On-hand customer service
  • IR35 regulated terms of business for clients & contractors

Utility / Helper Classes

h2.increase-padding-bottom { padding-bottom: 40px;} /* Increase the padding bottom */ .first-heading { margin-top: 0; } /* Remove the default top margin so the first h2 aligns to the top of the element */

Favicons and touch icons

Favicons and touch icons are a critical branding element that should not be overlooked. You can find the latest info on favicon support here: http://realfavicongenerator.net/

Insert the following code in the head section of your pages:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/manifest.json"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> <meta name="theme-color" content="#ffffff">

Download the ZIP file and extract into the root of your site.

Icon