Style Guide
[simple v0.30]
link to page 3 link to page 4 link to page 5 link to page 6 link to page 7 link to page 8 link to page 9 link to page 10 link to page 11 link to page 12
Contents
Logo Primary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Logo Black and white . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Logo Don’ts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Colour Primary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Colour Secondary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Colour Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Typography Primary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Typography Default . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Brand Device Graphic Elements . . . . . . . . . . . . . . . . . . . . . . . 11
Brand Device Layout Examples . . . . . . . . . . . . . . . . . . . . . . . . 12
2
National Rail Skills Hub Style Guide [simple v0.30]
Logo Primary
Primary logo
Primary logo (inverse)
Colour breakdown
NRSH Blue
NRSH Charcoal
R62 G128 B226
R36 G39 B42
#3E80E2
#24272A
3
National Rail Skills Hub Style Guide [simple v0.30]
Logo Black and white
Black and white logo
Black and white logo (inverse)
4
National Rail Skills Hub Style Guide [simple v0.30]
Logo Don’ts
Don’t change the colours of the logo
Don’t rearrange the logo elements
Don’t stretch the logo
Don’t place the logo over busy imagery
5
National Rail Skills Hub Style Guide [simple v0.30]
Colour Primary
100% - #3E80E2
75% - #6EA0E9
50% - #9EBFF0
25% - #CFDFF8
100% - #24272A
75% - #5B5D5F
50% - #919394
25% - #C8C9CA
NRSH Blue
NRSH Charcoal
R62 G128 B226
R36 G39 B42
#3E80E2
#24272A
White
R255 G255 B255
#FFFFFF
6
National Rail Skills Hub Style Guide [simple v0.30]
Colour Secondary
100% - #FA7217
75% - #FB9551
50% - #FCB88B
25% - #FEDCC5
100% - #FAC717
75% - #FBD551
50% - #FCE38B
25% - #FEF1C5
NRSH Orange
NRSH Yellow
R250 G114 B23
R250 G199 B23
#FA7217
#FAC717
100% - #2C59AB
75% - #6183C0
50% - #95ACD5
25% - #CAD5EA
100% - #5E3FA4
75% - #866FBB
50% - #AE9FD1
25% - #D7CFE8
NRSH Dark-Blue
NRSH Purple
R44 G89 B171
R94 G63 B164
#2C59AB
#5E3FA4
7
National Rail Skills Hub Style Guide [simple v0.30]
Colour Accessibility
#FFFFFF
#FFFFFF
#6EA0E9
#FFFFFF
#6EA0E9
#9EBFF0
#FFFFFF
#FFFFFF
#FA7217
#FA7217
#FCB88B
#FEDCC5
#FEDCC5
#FAC717
#FAC717
#FAC717
#FBD551
#D7CFE8
#FBD551
#AE9FD1
#AE9FD1
Headings
Sub-headings
Body copy
Headings
Sub-headings
NRSH Charcoal background
NRSH Dark-Blue background
#24272A
#2C59AB
#24272A
#24272A
#2C59AB
#2C59AB
#24272A
#5E3FA4
#5E3FA4
#5E3FA4
Headings
Sub-headings
Body copy
White background
#FFFFFF
8
National Rail Skills Hub Style Guide [simple v0.30]
Typography Primary
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890.,!?/
1234567890.,!?/
Headings
Sub-headings
Interstate Bold | Tracking: -50 (in thousands of an em)
Interstate Regular | Tracking: -50 (in thousands of an em)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890.,!?/
Body copy
Arial Regular
9
National Rail Skills Hub Style Guide [simple v0.30]
Typography Default
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890.,!?/
1234567890.,!?/
Headings
Sub-headings
Arial Black
Arial Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890.,!?/
Body copy
Arial Regular
10
National Rail Skills Hub Style Guide [simple v0.30]
Brand Device Graphic Elements
Graphic device application
Symbol slices may be uniquely positioned, scaled,
rotated, re-masked (shape form), combined, layered,
extended where rectangular, or recoloured based on
the NRSH Style Guide colours.
=
11
National Rail Skills Hub Style Guide [simple v0.30]
Brand Device Layout Examples
Digital ad
Square based
digital ad copy
12
National Rail Skills Hub Style Guide [simple v0.30]
Brand Device Layout Examples
Tile (1)
13
National Rail Skills Hub Style Guide [simple v0.30]
Brand Device Layout Examples
Tile (2)
Primary statement copy
Subheading text
14
National Rail Skills Hub Style Guide [simple v0.30]
Brand Device Layout Examples
Spread (1)
Heading one style
Lorem ipsum dolor sit
Suspendisse consectetur, libero vitae molestie egestas, nisl arcu
maximus odio, eu elementum orci ex ac justo. Nunc mauris purus,
amet, consectetur
hendrerit eget lectus non, vulputate cursus enim. Vestibulum ante
adipiscing elit. Integer
ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
Proin ut turpis quis mauris tempor sagittis. Maecenas venenatis
elementum posuere
bibendum sapien ut ornare. Integer est est, aliquam vel tellus in,
nunc vel vulputate.
sodales rhoncus ante. Nullam eget justo egestas, accumsan nisl
quis, efficitur quam. Sed congue vehicula orci, dapibus rhoncus est
Phasellus porta lectus
maximus et. Etiam vestibulum nibh nec massa euismod, eget
et ante feugiat, et
dictum erat dignissim. Mauris a lacinia augue. Cras a leo
ullamcorper, aliquet est in, ultricies odio. Orci varius natoque
vulputate odio
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Sed id massa non tortor bibendum rutrum.
hendrerit. Vivamus
accumsan elit id
Nunc ultricies blandit enim eget euismod. Morbi pulvinar enim in
dictum tristique. Nunc fermentum ut tellus sed finibus. Fusce ultrices
efficitur iaculis. Nam
id mi et congue. Quisque et lobortis justo. Aliquam quis mattis lacus.
mattis ac magna a
Vestibulum porttitor vulputate mauris ultrices vehicula. Quisque
tempor massa convallis dui semper tristique. Proin malesuada lacus
ullamcorper. Duis ac
dui, in lobortis ligula maximus at. Praesent urna neque, aliquam id
tortor tellus. Ut nec
gravida non, sodales eu est. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Quisque ut
eros eu purus blandit
iaculis sem. Proin elementum condimentum ex eget vulputate.
Donec tempus magna sed tellus auctor, ut hendrerit ex molestie.
lacinia vel eu ipsum.
Mauris sagittis
Integer iaculis rhoncus augue, at consequat ligula placerat eget.
Donec aliquet accumsan erat eget blandit. Morbi faucibus diam a
vulputate velit nec
ante ullamcorper finibus. Integer augue atugue, porta vitae eleifend
consectetur. Phasellus
vel, lobortis eu urna. Fusce posuere, turpis non euismod tincidunt,
dolor dolor convallis dui, eu feugiat purus mauris non lectus. Nulla
ullamcorper rutrum
vel volutpat diam. Maecenas tempus ante nec sem interdum iaculis.
dui, ut hendrerit leo
Pellentesque eleifend fringilla dictum.
ultricies sit amet.
15
National Rail Skills Hub Style Guide [simple v0.30]
Brand Device Layout Examples
Spread (2)
Heading primary
Lorem ipsum dolor sit
Suspendisse consectetur, libero vitae molestie egestas, nisl arcu
Integer iaculis rhoncus augue, at consequat ligula placerat eget.
maximus odio, eu elementum orci ex ac justo. Nunc mauris purus,
Donec aliquet accumsan erat eget blandit. Morbi faucibus diam a
amet, consectetur
hendrerit eget lectus non, vulputate cursus enim. Vestibulum ante
ante ullamcorper finibus. Integer augue atugue, porta vitae eleifend
adipiscing elit. Integer
ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
vel, lobortis eu urna. Fusce posuere, turpis non euismod tincidunt,
Proin ut turpis quis mauris tempor sagittis. Maecenas venenatis
dolor dolor convallis dui, eu feugiat purus mauris non lectus. Nulla
elementum posuere
bibendum sapien ut ornare. Integer est est, aliquam vel tellus in,
vel volutpat diam. Maecenas tempus ante nec sem interdum iaculis.
nunc vel vulputate.
sodales rhoncus ante. Nullam eget justo egestas, accumsan nisl
Pellentesque eleifend fringilla dictum.
quis, efficitur quam. Sed congue vehicula orci, dapibus rhoncus est
Phasellus porta lectus
maximus et. Etiam vestibulum nibh nec massa euismod, eget
Mauris et erat malesuada nibh malesuada convallis in ut metus.
et ante feugiat, et
dictum erat dignissim. Mauris a lacinia augue. Cras a leo
Donec luctus odio at lacus porta lacinia sit amet id turpis. Mauris
ullamcorper, aliquet est in, ultricies odio. Orci varius natoque
quis feugiat ligula, sit amet ultrices ante. Donec sollicitudin gravida
vulputate odio
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
diam in euismod. Suspendisse potenti. Nullam eu bibendum erat, at
Sed id massa non tortor bibendum rutrum.
porttitor massa. Fusce placerat et arcu in tristique. Aenean et tellus
hendrerit. Vivamus
velit. Mauris sodales lectus ac quam lacinia dignissim.
accumsan elit id
Nunc ultricies blandit enim eget euismod. Morbi pulvinar enim in
dictum tristique. Nunc fermentum ut tellus sed finibus. Fusce ultrices
Vulputate mauris ultrices vehicula. Quisque tempor massa convallis
efficitur iaculis. Nam
id mi et congue. Quisque et lobortis justo. Aliquam quis mattis lacus.
dui semper tristique. Proin malesuada lacus dui, in lobortis ligula
mattis ac magna a
Vestibulum porttitor vulputate mauris ultrices vehicula. Quisque
maximus at. Praesent urna neque, aliquam id gravida non, sodales
tempor massa convallis dui semper tristique. Proin malesuada lacus
eu est. Class aptent taciti sociosqu ad litora torquent per conubia
ullamcorper.
dui, in lobortis ligula maximus at. Praesent urna neque, aliquam id
nostra, per inceptos himenaeos.
gravida non, sodales eu est.
16
National Rail Skills Hub Style Guide [simple v0.30]
Brand Device Layout Examples
Spread (3)
Heading primary
Lorem ipsum dolor sit
Suspendisse consectetur, libero vitae molestie egestas, nisl arcu
Integer iaculis rhoncus augue, at consequat ligula placerat eget.
maximus odio, eu elementum orci ex ac justo. Nunc mauris purus,
Donec aliquet accumsan erat eget blandit. Morbi faucibus diam a
amet, consectetur
hendrerit eget lectus non, vulputate cursus enim. Vestibulum ante
ante ullamcorper finibus. Integer augue atugue, porta vitae eleifend
adipiscing elit. Integer
ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
vel, lobortis eu urna. Fusce posuere, turpis non euismod tincidunt,
Proin ut turpis quis mauris tempor sagittis. Maecenas venenatis
dolor dolor convallis dui, eu feugiat purus mauris non lectus. Nulla
elementum posuere
bibendum sapien ut ornare. Integer est est, aliquam vel tellus in,
vel volutpat diam. Maecenas tempus ante nec sem interdum iaculis.
nunc vel vulputate.
sodales rhoncus ante. Nullam eget justo egestas, accumsan nisl
Pellentesque eleifend fringilla dictum.
quis, efficitur quam. Sed congue vehicula orci, dapibus rhoncus est
Phasellus porta lectus
maximus et. Etiam vestibulum nibh nec massa euismod, eget
Mauris et erat malesuada nibh malesuada convallis in ut metus.
et ante feugiat, et
dictum erat dignissim. Mauris a lacinia augue. Cras a leo
Donec luctus odio at lacus porta lacinia sit amet id turpis. Mauris
ullamcorper, aliquet est in, ultricies odio. Orci varius natoque
quis feugiat ligula, sit amet ultrices ante. Donec sollicitudin gravida
vulputate odio
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
diam in euismod. Suspendisse potenti. Nullam eu bibendum erat, at
Sed id massa non tortor bibendum rutrum.
porttitor massa. Fusce placerat et arcu in tristique. Aenean et tellus
hendrerit. Vivamus
velit. Mauris sodales lectus ac quam lacinia dignissim.
accumsan elit id
Nunc ultricies blandit enim eget euismod. Morbi pulvinar enim in
dictum tristique. Nunc fermentum ut tellus sed finibus. Fusce ultrices
Vulputate mauris ultrices vehicula. Quisque tempor massa convallis
efficitur iaculis. Nam
id mi et congue. Quisque et lobortis justo. Aliquam quis mattis lacus.
dui semper tristique. Proin malesuada lacus dui, in lobortis ligula
mattis ac magna a
Vestibulum porttitor vulputate mauris ultrices vehicula. Quisque
maximus at. Praesent urna neque, aliquam id gravida non, sodales
tempor massa convallis dui semper tristique. Proin malesuada lacus
eu est. Class aptent taciti sociosqu ad litora torquent per conubia
ullamcorper.
dui, in lobortis ligula maximus at. Praesent urna neque, aliquam id
nostra, per inceptos himenaeos.
gravida non, sodales eu est.
17
National Rail Skills Hub Style Guide [simple v0.30]
Document Outline