Favicon and touch icon

Favicons should use 16x16, while touch icons should never be below 32x32.

Logos

White on blue

Blue on white

The Livedrive Logo should never be shown below the minimum size of 190 pixels in the Portal.

Fonts and font weights

'Open Sans' - Weight 700

'Open Sans' - Weight 400

'Open Sans' - Weight 100

Colour palette

Branded

#0d7cd6

Accents

Branded darker

#0667b5

Grayscale

Dark grey

#304150

Grey

#647685

Light grey

#b4c3d1

Off white

#f9fafb

Alerts

Success

#37cca0

Error

#ff6e6e

Warning

#f2b131

Usage

"Branded" Used to define the page top bar and the primary highlight accent on icons.

"Branded darker" Used as the accessible colour for links as "Branded" is not contrast compliant for copy below 18px.

"Dark grey" Used as the colour for page headers, along with the copy of the page body.

"Grey" Used as the colour for new links and neutral, non-branded iconography.

Heading defaults

H1 - 32px - Font used is 'Open Sans' with a weight of 700.

H2 - 24px - Font used is 'Open Sans' with a weight of 700.

H3 - 20px - Font used is 'Open Sans' with a weight of 700.

Usage

H1 Used to define the page header, i.e. "Latest files"..

H2 Used to define each content section's header, i.e. "Change password"..

H3 Used to define important options side by side, i.e. "Public, Private, No Sharing"..

Body copy

16px This is intro paragraph using Open Sans as the font with the font weight of 400 as normal. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi purus justo, facilisis et dictum eget, sollicitudin ut lectus. Donec ultrices augue.

Accessibility alert colour

Use this colour to signify success text on white backgrounds.

Use this colour to signify error text on white backgrounds.

Use this colour to signify warning text on white backgrounds.

In order to be compliant, the accessibility alerts above should only be used on a white background.

Buttons

Usage

Primary is used to draw attention to the main call of action against a particular event. I.e. Logging in, confirming an action and/or performing an event.

Secondary is used to offer the lesser alternative alongisde Primary, such as a "Cancel" button. It is also used in circumstances where a page may have several buttons of similar importance next to each other, i.e the update button(s) on the account details page.

Inactive is used to show that an action is currently not avaiable. For example, the "View files" button on the backup state UI, when the files are not yet ready to be viewed.

Text links

If you haven't already done so in-store, you can take our 30-second challenge now. In less time than it takes to boil the kettle, you'll know if you stand to save money.

None of the above?

Lists

Damage to your phone, including liquid damage
Theft
Loss
Dolphins are nice...
I have a pet monkey, it has the cymbals, I like its fur.
Worldwide cover
Trouser snakes have one eye

Forms

Placeholder field no visible label

Short select

Select field

Text field

Email address *

Password *

Text area

Example

Email address *

Password *

Checkbox

Our personalised checkbox styles currently override browser defaults in a compliant and effective way.

Radio buttons

We currently adopt the browser default for radio buttons as demonstrated above.

Alerts / Notification

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

In order to be compliant, the text within the alert banners above should always be font-size 18px.

Search box