Visual Identity System for Baselist

A Guide to applying the Baselist brand across platforms.

Find Out More

Introduction

Baselist is a Customer Relationship Management ( CRM ) tool developed in-house for Sonovate.

This site contains resources to support the consistent application of the Baselist brand across digital platforms.

Objectives

Communicate and maintain the core graphic elements of the Baselist brand

Provide guidance on using the elements

Support the application of the Baselist brand cohesively across platforms

Audience

The entended audience for this site is Marketing professionals, Designers and Developers.

Baselist Logo

The Baselist logo is based on the Roboto Font with a modified letter 'B'. The horizontal lines incorporated into the the letter 'B' represent a list, echoing the core nature of the product.

Logo Exclusion Zone

It is important to create the correct exclusion zone when using the logo.

Baselist logo exclusion zone

Baselist logo showing exclusion zone.

Logo Colours

The logo can be used in vaious combinations of the brand colours depending on the situation. The recommended colour combintion is an orange logo on purple background.

Baselist desktop wallpaper
Baselist desktop wallpaper
Baselist desktop wallpaper
Baselist desktop wallpaper

Download Logos

Download files SVG and PNG versions of logo in various colours.

If you require additional artwork advice or assitance please contact the design team who will be happy to help.

DOWNLOAD

Type

Roboto

Roboto is a geometric sans serif font available from Google Fonts. Roboto black is used for the logotype. Roboto medium is used for headings and Roboto regular is used for body copy.

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

1234567890!@£$%^&*()_+?

Heading Level 1

Body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading Level 2

Body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading Level 3

Body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading Level 4

Body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

'Lead' copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Small print copy: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Colour

Baselist's core colours are purple and orange. The colour choice bold and is designed to differentiate Baselist from other CRM products. Other CRM products generally consist of a palette of blues and greys.

The colours can be used in vaious combinations, the preferred combination is the orange logo on a purple background. This combination is particularly effective on splash screens background headers and footers.

Hex: #402546

RGB: 64, 37, 70

CSS: bc1

Name: purple

Hex: #fc6f65

RGB: 252, 111, 101

CSS: bc2

Name: orange

Hex: #333333

RGB: 51, 51, 51

CSS: bc3

Name: off-black

Hex: #efefef

RGB: 239, 239, 239

CSS: bc4

Name: grey

Download ASE swatch

DOWNLOAD

Imagery

Baselist's photography should show the product being used in conjunction with a variety of tools which are used in agile work environments. Baselist should be seen alongside tools such as Slack, Trello etc.

Baselist desktop wallpaper

Wallpaper for desktop and iPad ( 1920 x 1080 px )

Baselist desktop wallpaper

Baselist in use ( 1920 x 1080 px )

Baselist desktop wallpaper

Baselist in use purple tint ( 1920 x 1080 px )

Baselist desktop wallpaper

Baselist in use orange tint ( 1920 x 1080 px )

Favicons and touch icons

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

Add favicon and touch icon support to your site

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

DOWNLOAD

2. Add the following code to the head section of your site's 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">

Latest info on favicon and touch icon support here: http://realfavicongenerator.net/