Style guide

Colours

Colours

Primary colours

Ve Green

RGB 188, 207, 0
HEX #bccf00

Ve Green is the primary brand colour. It defines our brand aesthetic. Use this colour to draw attention to something on the page. Avoid using Ve Green for small text on white backgrounds.

Platform Grey

RGB 57, 64, 73
HEX #394049

Platform Grey is our dark neutral colour. A sort of off-black. Used for title text and statistics. As a block colour this should be used to represent our underlying platform of data. Colour scales are listed below.

Secondary colours

Mint Green

RGB 26, 188, 156
HEX #1abc9c

Mint Green is used online to draw attention to a specific element – usually to signify that something is a clickable link.

Illustration Blue

RGB 62, 150, 210
HEX #3e96d2

This blue is primarily used for illustrations and diagrams. Colour scales are listed below.

Purple

RGB 116, 0, 207
HEX #7400cf

A new colour that we are currently experimenting with.

Neutral greys

Light Grey

RGB 248, 249, 250
HEX #f8f9fa

A light, neutral colour used in addition to and also as an alternative to white in order to create white-space.

Interface Grey

RGB 110, 129, 150
HEX #6e8196

This grey is used online for paragraph text as a way of making large blocks of copy softer on the eye. Different tones of this colour are used for interfaces – mainly on forms. Colour scales are listed below.

Colour scales

Platform Grey +80

RGB 11, 13, 15
HEX #0b0d0f

Platform Grey +60

RGB 23, 26, 29
HEX #171a1d

Platform Grey +40

RGB 34, 38, 44
HEX #22262c

This darker shade of Platform Grey is used as part of our core dark gradient.

Platform Grey +20

RGB 46, 51, 58
HEX #2e333a

Default form field border colour for forms on a dark background.

Platform Grey

RGB 57, 64, 73
HEX #394049

Platform Grey is our dark neutral colour.

Platform Grey -20

RGB 97, 102, 109
HEX #61666d

Platform Grey -40

RGB 136, 140, 146
HEX #888c92

Platform Grey -60

RGB 176, 179, 182
HEX #b0b3b6

Platform Grey -80

RGB 215, 217, 219
HEX #d7d9db

Interface Grey +80

RGB 22, 26, 30
HEX #161a1e

Interface Grey +60

RGB 44, 52, 60
HEX #2c343c

Interface Grey +40

RGB 66, 77, 90
HEX #424d5a

Interface Grey +20

RGB 88, 103, 120
HEX #586778

This darker shade of Interface Grey is used as part of our core dark gradient.

Interface Grey

RGB 110, 129, 150
HEX #6e8196

Interface Grey is our online paragraph colour. Also used as the focus state border colour for form fields on a dark background.

Interface Grey -20

RGB 139, 154, 171
HEX #8b9aab

Focus state border colour for form fields on a light background.

Interface Grey -40

RGB 168, 179, 192
HEX #a8b3c0

Hover state border colour for form fields on a light background.

Interface Grey -60

RGB 197, 205, 213
HEX #c5cdd5

Default form field border colour for forms on a light background.

Interface Grey -80

RGB 226, 230, 234
HEX #e2e6ea

Border colour used to divide sections of Light Grey from sections of white.

Illustration Blue +80

RGB 12, 30, 42
HEX #0c1e2a

Illustration Blue +60

RGB 25, 60, 84
HEX #193c54

Illustration Blue +40

RGB 37, 90, 126
HEX #255a7e

Illustration Blue +20

RGB 50, 120, 168
HEX #3278a8

Illustration Blue

RGB 62, 150, 210
HEX #3e96d2

This blue is primarily used for illustrations and diagrams.

Illustration Blue -20

RGB 101, 171, 219
HEX #65abdb

Illustration Blue -40

RGB 139, 192, 228
HEX #8bc0e4

Illustration Blue -60

RGB 178, 213, 237
HEX #b2d5ed

Illustration Blue -80

RGB 216, 234, 246
HEX #d8eaf6

Primary gradients

Dark gradient

background color: #394049, Gradient overlay orientation: Horizontal, Overlay color: #22262c, Overlay color end: #586778, Overlay color mask opacity: 1.
Class=”dark”

Green gradient

background color: #bccf00, Gradient overlay orientation: Horizontal, Overlay color: #bccf00, Overlay color end: #1abc9c, Overlay color mask opacity: 1.
Class=”dark”

Secondary gradients

Mint-Blue gradient

background color: #1abc9c, Gradient overlay orientation: Horizontal, Overlay color: #1abc9c, Overlay color end: #3e96d2, Overlay color mask opacity: 1.
Class=”dark”

Blue-Purple gradient

background color: #3e96d2, Gradient overlay orientation: Horizontal, Overlay color: #3e96d2, Overlay color end: #7400cf, Overlay color mask opacity: 1.
Class=”dark”

Typography

Typography

Fonts

For our web-based content we use the sophisticated aesthetic of Din in various weights, combined with the friendly web-safe legibility of Arial.

Din Light

class=”veLight”

Din Regular

class=”veRegular”

Din Medium

class=”veMedium”

Din Bold

class=”veBold”

Din Black

class=”veBlack”

Headings

Page title H1

font-family: ‘din_otlight’; font-size: 90px; letter-spacing: -4px;

Heading level two H2

font-family: ‘din_otlight’; font-size: 60px; letter-spacing: -3px; background: linear-gradient(to right,#bccf00 0%, #1abc9c 100%);

Heading level three H3

font-family: ‘din_otmedium’; font-size: 28px; letter-spacing: -1px; color: #394049;

Heading level four H4

font-family: ‘din_otmedium’; font-size: 22px; letter-spacing: -1px; color: #394049;

Heading level five H5

Do not use! Structure your paragraphs better!

Heading level six H6

Do not use! Structure your paragraphs better!

Paragraphs

Feature text

Cupcake ipsum dolor sit. Amet bear claw chocolate bar cheesecake cake. Jelly-o jelly-o chocolate bar sweet roll liquorice. Muffin tiramisu fruitcake jelly-o gingerbread. Cupcake cake macaroon tart jujubes gummi bears jelly-o powder.

class=”bodyVeryBigText”
font-family: ‘din_otlight’; font-size: 30px; color: #6e8196;

Intro text

Cupcake ipsum dolor sit. Amet bear claw chocolate bar cheesecake cake. Jelly-o jelly-o chocolate bar sweet roll liquorice. Muffin tiramisu fruitcake jelly-o gingerbread. Cupcake cake macaroon tart jujubes gummi bears jelly-o powder.

class=”bodyBigText”
font-family: Arial; font-size: 20px; color: #6e8196;

Default body copy

Cupcake ipsum dolor sit. Amet bear claw chocolate bar cheesecake cake. Jelly-o jelly-o chocolate bar sweet roll liquorice. Muffin tiramisu fruitcake jelly-o gingerbread. Cupcake cake macaroon tart jujubes gummi bears jelly-o powder.

font-family: Arial; font-size: 16px; color: #6e8196;

Small text

Cupcake ipsum dolor sit. Amet bear claw chocolate bar cheesecake cake. Jelly-o jelly-o chocolate bar sweet roll liquorice. Muffin tiramisu fruitcake jelly-o gingerbread. Cupcake cake macaroon tart jujubes gummi bears jelly-o powder.

class=”bodySmallText”
font-family: Arial; font-size: 14px; color: #6e8196;

Very small text

Cupcake ipsum dolor sit. Amet bear claw chocolate bar cheesecake cake. Jelly-o jelly-o chocolate bar sweet roll liquorice. Muffin tiramisu fruitcake jelly-o gingerbread. Cupcake cake macaroon tart jujubes gummi bears jelly-o powder.

class=”bodyVerySmallText”
font-family: Arial; font-size: 13px; color: #6e8196;

Inline elements

Within default body copy this is link text.
Within default body copy strong is used to indicate strong importance.
Within default body copy this is emphasized or italicized text.

link color: #1abc9c;

Lists

Checklists

This is a checklist item
Checklist items have no full stop at the end
Checklist items have a check icon at the start

Bulleted lists

  • This is a bulleted list item
  • Bulleted list items have no full stop at the end
  • The order of bulleted list items is unimportant

Numbered lists

  1. This is a numbered list item
  2. Numbered list items have no full stop at the end
  3. The order of numbered list items is important
CTA buttons

CTA buttons

Gradient button

Gradient Button, Style: 2D, Corner style: Full rounded, From: #bccf00 to #1abc9c, Style: Linear,  Angle: Diagonal (top left to bottom right), Gradient fallback color: #bccf00, Button text color: Light.

3D button

Button, Style: 3D, Corner style: Full rounded, Button background color: #1abc9c, Button text color: Light.

Coloured outline button

Button, Style: Outline, Corner style: Full rounded, Button skin: Custom color; Button background color: #1abc9e, Button text color: #1abc9c, Button hover background color: #48c9b0, Button hover text color: #ffffff.

On dark backgrounds use: Button text color: #ffffff,

Grey outline button

Button, Style: Outline, Corner style: Full rounded, Button skin: Custom color; Button background color: #c5cdd5, Button text color: #a8b3c0, Button hover background color: #e2e6ea, Button hover text color: #8b9aab.

Light button

Button, Style: 3D, Corner style: Full rounded, Button background color: #f8f9fa, Button text color: Dark.

Button class=”hoverShadow”

Container class=”dark”

Images

Images

Treatments

No treatment

Image example - no treatment

Dark overlay

Image example - dark overlay

Layers:
Layer 1: Solid #22262C rectangle set to 70-80% opacity.
Layer 2: Full colour photograph.

Colour gradient overlay

Image example - colour gradient overlay

Layers:
Layer 1: Rectangle set to Fill: 0%, Gradient Blend Mode set to ‘Color’.
Layer 2: Desaturated photograph set to 50% opacity.
Layer 3: Solid #394049 rectangle.

In this example there is a three colour gradient:
Ve Green (#bccf00) to Mint Green (#1abc9c) to Illustration Blue (#3e96d2), set at a scale of 150% at an angle of 45°.

Colour gradient fade

Image example - colour gradient fade

Layers:
Layer 1: Rectangle set to Fill: 0%, Gradient Blend Mode set to ‘Color’. Layer masked and faded in from one side.
Layer 2: Full colour photograph set to 70% opacity.
Layer 3: Solid #394049 rectangle.

In this example there is a three colour gradient:
Ve Green (#bccf00) to Mint Green (#1abc9c) to Illustration Blue (#3e96d2), set at a scale of 150% at an angle of 45°.

Contact us

Get in touch to find out more about how we can help you improve your website's performance.

Not readable? Change text.

Start typing and press Enter to search