Sonovate UI Toolbox

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

This UI toolbox enables Designers and Developers to quickly create consistent web 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 and updates to the site.

Headsup: 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. You can find examples of how the Bootstrap grid works here: http://getbootstrap.com/examples/grid/

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.

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

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

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

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.

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

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

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.

Regular style

Arrange Your Demo
Icon
or

Lists

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

  • 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
  • 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
  • Transfer / setup fees
  • Additional fees
  • Hidden fees
  • Service fees
  • Exit fees
  • Credit check fees
  • Re-factoring charges
  • Cost to renew your facility
  • Overpayment charges
  • Late payment fees

Utility / Helper Classes

Use these utility classes to increase row and section padding.

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

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

.layer {padding:40px 0}

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

.divder-bottom-light{border-bottom:1px #e7e7e7 solid} /* Full width layer divider */

.first-heading { margin-top: 0; } /* Remove the default top margin of the first heading */

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/

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

Icon

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

Logos

Blue and white versions of the logo without an exclusion zone can be found here.

Guidance: Logos for UI use don't have an exclusion zone so they can be aligned flush left to other UI elements. You should however make you use a suitable padding values to give the logo proportionate exclusion zone.

Sonovate colour
Sonovate colour

Product Screenshots

Product screenshots can be used for illustrative purposes

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

App screenshot Macbook flat

Screenshot

App screenshot iPad partial in office

Screenshot

App screenshot ipad 'ghost'

Screenshot

App screenshot ipad 'ghost' horizontal

Screenshot

App screenshot Macbook 'ghost'

Screenshot

App screenshot iPad photorealistic isometric

Screenshot

App screenshot Macbook photorealistic angled

Screenshot