Sonovate Design System

Helping Designers and Developers create consistent web pages.

Get Started

Introduction

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

Use this resource to create consistent pages and assets for the Sonovate Marketing website and across our digital channels.

Front End 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 by rapidly developing HTML prototypes. 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 and updates to the site.

Note: We don't have a test site or staging server. We use an agile publishing process creating a local HTML prototype, then a WP template that is published to the live site. Make 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 this happens target the element using '.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 a heading level 5

This is 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. 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, you should 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 of capitalisation:

Which Letters of This Headline Should be Capitalised?

The first letter of each 'main' word is capitalised.

Note: Not sure if a word is 'main' enough to be capitalised? Words with over three letters should be capitalised.

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 - Blue

Hex: #00c8ac

RGB: 0, 200, 172

CSS: bc2 - Teal

Hex: #ff8c00

RGB: 255, 140, 0

CSS: bc3 - Orange

Hex: #22262e

RGB: 34, 38, 46

CSS: bc4 - Dark Slate

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

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

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.

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

Icon money notes

icon-abc-in-circle-58.svg

Icon currency symbol on conveyour belt

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

Icon money unlocked

icon-money-with-padlock-58.svg

Icon money notes

icon-calculator-58.svg

Icon currency symbol on conveyour belt

icon-cloud-inside-computer-58.svg

Icon money unlocked

icon-hand-cash-fast-58.svg

Icon money notes

icon-currency-in-heart-58.svg

Icon currency symbol on conveyour belt

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

Icon money unlocked

icon-hand-currency-sign-sterling-58.svg

Icon money notes

icon-hand-credit-card-58.svg

Icon currency symbol on conveyour belt

currency-sign-rotating-arrows-58.svg

Icon money notes

icon-hand-heart-58.svg

Icon money notes

icon-calandar-58.svg

Icon currency symbol on conveyour belt

icon-currency-sign-conveyor-belt-58.svg

Icon money unlocked

icon-currency-sign-double-conveyor-belt-58.svg

Icon money notes

icon-currency-sign-rotating-arrows-square-58.svg

Icon currency symbol on conveyour belt

icon-clock-plus-sign-58.svg

Icon pound sign with arrows

icon-hand-holdding-credit-card-58.svg

Icon money unlocked

icon-people-management-58.svg

Icon cloud inside desktop computer

icon-hands-currency-sterling-58.svg

Icon money unlocked

icon-hand-document-58.svg

Icon money unlocked

icon-clock-in-computer-58.svg

Icon cloud inside desktop computer

icon-graph-in-computer-58.svg

Icon pound sign with arrows

icon-bell-in-computer-58.svg

Icon cloud inside desktop computer

icon-document-pen-58.svg

Icon cloud inside desktop computer

icon-documents-multiple-58.svg

Icon desk phone

icon-person-heart-58.svg

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.

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
Icon

Lists

There two styles of lists on the site. A tick list which comes in two colour schemes and a dash list.

  • 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 adjecent element */

Favicons and touch icons

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

How to add a favicon / touch icon to your site

  1. Download the Sonovate favicon ZIP file and extract into the root of your site.
  2. 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">

Note: You can find the latest info on favicon support here:

realfavicongenerator.net

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.

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

Sonovate colour
Sonovate colour

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 flat

Screenshot

App screenshot iPad partial in office

Screenshot

App screenshot ipad 'ghost' horizontal

Screenshot

App screenshot Macbook 'ghost'

Screenshot

App screenshot iPad photorealistic isometric

Screenshot

App screenshot Macbook photorealistic angled