Design System

Our living, breathing design system helps us work together to create a consistent and delightful experience for our customers and our employees.

Get started

Logo

The Arnold Clark logo consists of specially drawn letterforms. These letterforms and their relationships must never be altered or modified in any way.

Download logo pack

Usage


The Arnold Clark logo is most effective when positioned in clear space, which helps to protect its integrity.

Primary Logo


The Primary Logo should always be used where possible to maintain brand consistency.

Stacked Logo


If space is limited and it’s impossible to use the Primary Logo the Stacked Logo can be used to give the logo prominence.

Exclusion Zone


The Arnold Clark logo is most effective when positioned in clear space, which helps to protect its integrity. The minimum space around the logo should at least be equivalent to ‘X’ - see illustration. If possible the space should be increased.

Colours


The Arnold Clark logo must only appear as grey or white to allow a clear contrast with the background colour or image.

Colour should never be applied to the logo.

White logo

Grey logo

Black logo

This version can only be used for mono jobs.

Background colours

The Arnold Clark logo should always have a strong contrast with the background.

White logos should always be used when using the Arnold Clark secondary colour palette.

The grey Arnold Clark logo should only be placed on very light backgrounds such yellow or white.

Misuse


It is important that the appearance of the logo remains consistent. The logo must never be redrawn, adjusted or modified in any way.

Do

Do not distort the logo

Do not apply colour to the logo

Do not place the logo in a box with yellow line.(Yellow line is design feature for use on branch signage and ArnoldClark.com only)

Do not use historic versions of the logo

Do not adjust the spacing between the letters of the logo

Do not adjust the spacing of the stacked logo

Assets


Download a zip file of the Arnold Clark logos for both digital and print use. Please refer to the guidelines for how the logo is to be used correctly.

Download logo pack

Chassis / CSS

A utility-first CSS framework for rapidly building user interfaces.

Download core latest version Download UI latest version

Colours

When applying the primary colour palette white text should be placed on grey. Yellow may be used to highlight design features such as icons or key words.

Yellow text or icons should only be used on a grey background.

Primary


AC Black

#2D3737

AC Yellow

#FFDE00

Secondary


AC Blue

#00A3E0

AC Teal

#00B4BB

AC Magenta

#D41568

AC Purple

#87189D

Greys


AC Grey 1

#FAFAFA

AC Grey 2

#F2F2F2

AC Grey 3

#E5E5E5

AC Grey 4

#CCCCCC

AC Grey 5

#999999

Typography

Text should be set in sentence case using the approved weights below with optical kerning.

Gotham


a b c d

Light


abcdefghijklmnopqrstuvwx

ABCDEFGHIJKLMNOPQRST

12345678910

Book


abcdefghijklmnopqrstuvwx

ABCDEFGHIJKLMNOPQRST

12345678910

Medium


abcdefghijklmnopqrstuvwx

ABCDEFGHIJKLMNOPQRST

12345678910

Bold


abcdefghijklmnopqrstuvwx

ABCDEFGHIJKLMNOPQRST

12345678910