Back to index

Pattern Library

Colours

Main Palette

#312c62

CIPFA Blue 1
jacarta

#00857e

CIPFA Green 1
emerald

#e12a19

CIPFA Crimson
crimson

#c0046c

CIPFA Magenta
magenta

#565656

CIPFA Grey 1
scorpion

#5a4b9a

CIPFA Blue 2
buddleia

#49b9b1

CIPFA Green 2
teal

#f8af61

CIPFA Orange
rajah

#eb3397

CIPFA Magenta 2
lipstick

#958b87

CIPFA Grey 2
schooner

#83c0ea

CIPFA Blue 3
seagull

#a8d7cc

CIPFA Green 3
sinbad

#ffe085

CIPFA Yellow
salomie

#f8c9df

CIPFA Magenta 3
pink

##7c4c3

CIPFA Grey 3
silver

Typography

The font used for Headers/titles/quotes is Noto Serif JP, available from Google Fonts

AbCdEfGhIjKlMnOpQrStUvWxYz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

The font used for body copy is Arial, which is a standard web font

AbCdEfGhIjKlMnOpQrStUvWxYz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Header 1

Header 2

Header 3

Intro text: The quick brown fox jumps over the lazy dog so many times that he cannot keep count

Body text: The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Buttons

Default

Lists

  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item

Form Elements

This is what an error message would look like Or given name
Select your pizza toppings: Additionl desc


This is what an error message would look like
Choose a shipping method:

This is what an error message would look like
This is what an error message would look like
Inline inputs For example 31 3 1980
Inline radios

Table

Table caption
A header Second header Third header Fourth header
one two three four
one two three four
one two three four