Basics

Our logo

Our logo incorporates our values, history and mission, so it’s more than just a graphic device. It’s an accessible asset that reflects trust, stability and security.

Primary logo

Our Primary logo should be used where possible, ensuring contrast and making it stand out.

Simplified primary logo

For any logo size lower than 325px, the simplified version should be used. This version has the ‘Since 1853’ removed as it becomes illegible.

Max width: 325px

Max width: 325px

Secondary logo (stacked)

A secondary blue logo is stacked and centrally aligned. It should be used on narrow screens, where the Primary logo is not appropriate.

Simplified secondary logo

For any logo size lower than 200px, the simplified version should be used. This version has the ‘Since 1853’ removed as it becomes illegible.

Max width: 200px

Max width: 200px

Exclusion zones

An exclusion zone offers the logo ample space to make an impression.

Standard exclusion zone

The Standard exclusion zone is the width of a castle leg. This is the equivalent to 13.5% of the Primary logo width.

This also applies to use of the logo over images. The exclusion zone ensures that any images are positioned in a way that allows the logos to sit in clear space.

Reduced exclusion zone

The Reduced exclusion zone is the width of the castle door. This is the equivalent to 5.75% of the Primary logo width.

This exclusion zone should only be used with the Simplified versions of the logo, and when using the Standard exclusion zone would impair the integrity of the logo.

Colours

The Skipton digital colour palette is based on the Skipton core colour palette, with digital display and accessibility in mind.

Core palette

Greys

Utility colours

Colour combinations

It's important that we achieve a suitable level of colour contrast to ensure that text remains legible.

• Regular/body text must have a minimum colour contrast level of 4.5:1 with the background
• Larger text (24px+) may have a lower colour contrast level of 3:1
• Logos and incidental text are exempt from colour contrast guidelines

Universal colour combinations

The colour combinations below meet the minimum 4.5:1 colour contrast ratio, and can be used for any sized text.

Large text colour combinations

The colour combinations below can only be used for text that is larger than 24px rather than blocks of body text, as they meet the 3:1 colour contrast threshold but are below 4:5.1

Colour contrast matrix

The table below indicates which combination of text and background colours are fully AA accessible or partially AA accessible, using the WebAIM Color Contrast Checker.

Typography

Typography is critical in developing a consistent look and feel across all our platforms. Only the typography listed below should be used for any Skipton Building Society branded digital asset.

Typefaces

Turret 1853 is our principal brand font and is unique to Skipton. It should be used for larger headings (H1-3).

Roboto has been chosen as our Sans-Serif font due to its flexibility of weights, and its legibility. Roboto should be used for all other copy and headings.

Turret 1853

Roboto

Text styles

Our typeface sizing is based on the Major Third Scale, and we utilise the Major Second Scale for mobile only to maximise use of space. For more information, visit type-scale.com

Heavier weights such as bold and semibold should only be used for headings, lead paragraphs, text links, and to emphasis key messages where necessary. Italics should only be used for footnotes.

Lists

Lists are a great way to display key content in a digestible way and we've developed multiple styles with various visual aids to make them even easier to understand.

<ul>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>

<ul class="unstyled">
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>

<ol>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ol>

<ol class="roundel-list">
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ol>

<ul class="ticks">
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>

Iconography

Icons provide useful visual cues to accompany key messages or actions.

Brand icons

System icons

We use the opensource Material Icons vector icon set for all of our universal system and utility icons.

Buttons

The styling of the buttons brings together the typography, colour palette and iconography to unify the styling across our digital channels.

Primary button

The Primary button is used specifically to highlight the main call to action on a page. This can vary from the main "apply" link on a page, to the "next" button in an application process.

Skipton Blue has been chosen as the primary button colour because it provides a strong level of contrast against a pale background. Where a primary button is used on a vivid background, white is used instead with Font Grey text.

The use of the primary button should be minimised where possible to maximise the impact of its presence.

Default button

The default button should be used when there are multiple objectives to a page, as they are less prominent. These will predominantly be navigational links, but could also be used for interactive elements like "search" buttons, or the "back" link of an application process.

Default buttons combine a purple keyline and text colour to achieve a suitable level of contrast while not compromising on legibility.

Text button

The text button is used when a Default button is not appropriate - these will predominantly be navigational links.