Style Guide

Create Consistent Visual Elements Across Our On-line Marketing Channels

Get Started

Introduction

Sonovate's brand is shaped in many ways; one of which is through maintaining the coherence and consistency of our visual elements.

This style guide documents the core UI elements and gives guidance on how they should be implemented.

Use this style guide to help create consistent experiences across our on-line marketing channels.

Note: If you are a Designer or Developer always refer back to this site to ensure you use the most up-to-date information for your projects.

Production Process

Pages are developed locally by creating HTML prototypes. When this first stage has been approved, a WordPress template is built, and published to the live site in draft mode. The draft mode version of the page is then viewed in context by stakeholders and changes made. Once this version is approved, the page is changed from draft status to live. This process allows us to quickly react to Marketing requests for changes and updates and iterations of the page design.

Landing page styles are added via an additional internal style sheet embedded within the page. This allows modular rapid development of pages without having to update and manage the main site style sheet.

Note: We use an agile production process creating a local HTML prototype, then a WP template that is published to the live site. There is no staging or test version of the site. Developers should take care to ensure they can 'roll back' any changes to the live site if they need to.

Front End Framework

The Sonovate marketing website is built using Twitter Bootstrap and WordPress.

We use use Bootstrap's 12 column grid to create page layouts. Custom layouts are created using additional class structure: '.main-layer-name .custom-padding' class so we can revert back to Bootstrap's defaults easily.

Note: You can find examples of how the Bootstrap grid works here:

Boostrap

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 small print

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.

The Paragraph Below is a Lead Paragraph

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.

Note: Normally there should only be one lead paragraph under a level 1 heading. In circumstances where two lead paragraphs are required, apply the 'last' class depending on the top spacing of the next element.

Writing Style

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

Example: the first letter of each 'main' word is capitalised.

Which Letters of This Headline Should be Capitalised?

Note: 'Main' words have over three letters should be capitalised.

Colours

The Primary Palette should be applied in all of Sonovate's marketing communications. We have four core brand colours. Blue, teal, orange and dark slate. Tints can also be used to allow for flexibility and variety when creating advertising materials.

Sonovate Blue

Hex: #148cd2

RGB: 20, 140, 210

CSS: bc1

Sonovate Teal

Hex: #00c8ac

RGB: 0, 200, 172

CSS: bc2

Sonovate Orange

Hex: #ff8c00

RGB: 255, 140, 0

CSS: bc3

Sonovate Dark Slate

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

Hex: #00c8ac

RGB: 0, 200, 172

CSS: bc2

Hex: #40d6c1

RGB: 79, 169, 221

CSS: bc2t1

Hex: #7fe3d5

RGB: 137, 197, 232

CSS: bc2t2

Hex: #bff1ea

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

Hex: #efefef

RGB: 239, 239, 239

CSS: bc-cust-1

Photography

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.

Note: Where possible try to avoid images that are too obviously London.

Colour Overlays

Colour overlays are used primarily for web page intro sections. Overlays are used to make copy more legible where a background image is used for illustration. An opacity setting of 60% is used with Sonovate Blue or Dark Slate.

Blue tint

Dark slate tint

Brand Gradient tint

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 created where industry specific jargon is used, for example 'turnover', 'concentration', 'cashflow' or when illustrating feature concepts such as 'flexibility' 'easy' 'unlock' etc.

Note: Download the AI file and follow the instruction for creating icons.

Icon money notes
Icon currency symbol on conveyour belt
Icon money unlocked
Icon money notes
Icon currency symbol on conveyour belt
Icon money unlocked
Icon money notes
Icon currency symbol on conveyour belt
Icon money unlocked
Icon money notes
Icon currency symbol on conveyour belt
Icon money notes
Icon money notes
Icon currency symbol on conveyour belt
Icon money unlocked
Icon money notes
Icon currency symbol on conveyour belt
Icon pound sign with arrows
Icon money unlocked
Icon cloud inside desktop computer
Icon money unlocked
Icon money unlocked
Icon cloud inside desktop computer
Icon pound sign with arrows
Icon cloud inside desktop computer
Icon cloud inside desktop computer
Icon desk phone

Buttons

The button colours are derived from the main brand colour palette. Hover styles are a shade lighter. Blue 'Call to Action' 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.

Call To Action

Class: btn-primary

Use on white and light backgrounds.

Call To Action

Class: btn-primary-contrast

Use on blue backgrounds.

Call To Action

Class: btn-primary-contrast-dark

Use on custom backgrounds.

Call To Action

Class: btn-primary-contrast-custom

Use on custom backgrounds.

Forms

We currently use WP Contact From 7 to create form on the site. It's not possible to completely replicate the form because some of the styling is dynamically generated. The form is responsive on phone and tablet, then a fixed width on desktop.

Form Title

Lists

There three styles of lists on the site. A tick list which comes in two colour options and a list where markers are replaced with dashes.

  • List Item One
  • List Item two
  • List Item Three
  • ...
  • List Item One
  • List Item two
  • List Item Three
  • ...
  • List Item One
  • List Item two
  • List Item Three
  • ...

Helper Classes

Use these classes to create consistent section layouts.

.increase-row-padding-top { padding-top:40px; }

.increase-row-padding-bottom { padding-bottom:40px; }

.layer { padding:40px 0; } /* Smaller on mobile */

@media ( min-width: 992px) { .layer{padding:80px 0} }

.divder-bottom-light{ border-bottom:1px #e7e7e7 solid; } /* Light grey full width layer divider */

.first-heading { margin-top: 0; } /* Remove the default top margin of the first heading so the text block horizontally aligns to an adjacent element */

Favicons and touch icons

Favicons and touch icons are an important branding element that should not be overlooked.

Icon

Note: You can find the latest info on favicon and touch support as well as a tool for creating touch and favicons using the source image here:

realfavicongenerator.net

Icon Download Source Image

Logos

The Sonovate logo is our most important branding element. SVG versions of the blue and white versions of the logo without an exclusion zone can be downloaded here. It's important to note these files do not include an exclusion zone around the logo. This allows the logos to be aligned vertically with other page elements. When using the logos ensure the correct padding values are used to create the proportionate exclusion zone.

Sonovate colour

Note: Logos for UI use don't have an exclusion zone so they can be aligned vertically to other UI elements.

Icon Download Logo

Product Screenshots

Product screenshots can be used for illustrative purposes.

Note: 1. Care should be taken that any figures should reflect accurately real life agency numbers.

Screenshot

App screenshot Macbook photorealistic angled

Screenshot

App screenshot iPad 'ghost' horizontal

Screenshot

App screenshot Macbook 'ghost'

Screenshot

App screenshot Macbook flat

Screenshot

App screenshot iPad partial in office

Screenshot

App screenshot iPad photorealistic isometric