Logo
Logo
Favicon
Reverse use
The logo should be black on both dark and light backgrounds. Having said this, it is important to ensure there is enough contrast for at least AA accessibility
color
Brand
The two brand colours serve as the foundation of the visual identity, ensuring a consistent and recognisable look across all digital platforms. The primary brand colour is typically used for the most prominent elements, such as the logo, headers, and call-to-action buttons, reinforcing the brand's core message and values.
Primary
HEX: #0057FF
Secondary
HEX: #6767A7
Text
The text colours for headers and body content play a crucial role in readability and visual hierarchy. The header text colour is often more bold and distinct, designed to capture attention and differentiate titles or important sections from the rest of the content. It ensures that headings stand out, guiding users through the page structure. The body text colour, on the other hand, is typically a more neutral tone, optimised for readability over long passages of text.
Body text
HEX: #000000
Body text light
HEX: #4D4D4D
White
HEX: #FFFFFF
Background
Background tones are essential for creating depth and contrast in the design. Background tone is usually a neutral or subtle colour that provides a clean and unobtrusive canvas for content, ensuring that text and images stand out clearly and help define the layout, maintain a balanced visual flow, and enhance the overall user experience.
Background
HEX: #EDEDED
Background dark
HEX: #6767A7
Background white
HEX: #FFFFFF
Alert / Error Colour
Signal Colours are used solely for warnings and status messages.
Success
HEX: #28a745
Info
HEX: #17a2b8
Alert
HEX: #ffc107
Fail red
HEX: #dc3545
Fonts
Heading: Arial
Ab
Info
This heading font will be used for other headings across the website and is a key element of the brand's visual identity, setting the tone for the overall design. It ensures that headings stand out, providing clear visual hierarchy and guiding users through the content.
Symbols and Numbers
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz0123456789
$£€/&@#%^*•()_+:;™
Weights
Bold
Body: Verdana
Ab
Info
This body font will be used for body text throughout the website based on readability and consistency, ensuring that long passages of text are easy to read and visually appealing. This font is typically more neutral and understated than the primary heading font, focusing on clarity and comfort for the user.
Symbols and Numbers
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz0123456789
$£€/&@#%^*•()_+:;™
Weights
Regular
Text styles
Heading 0
Heading 0 Mobile
Heading 1
Heading 1 Mobile
Heading 2
Heading 2 Mobile
Heading 3
Heading 3 Mobile
Heading 4
Heading 4 Mobile
Heading 5
Heading 5 Mobile
Heading 6
Heading 6 Mobile
Paragraph Default. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Laoreet donec sed faucibus amet mauris, mus. Magna sed vulputate diam purus.
Paragraph Small. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Laoreet donec sed faucibus amet mauris, mus. Magna sed vulputate diam purus.
Blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Laoreet donec sed faucibus amet mauris, mus. Magna sed vulputate diam purus.
Paragraph with inline links. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Laoreet donec sed faucibus amet mauris, mus.
Ordered list
- Ordered list item 1
- Ordered list item 2
- Ordered list item 3
- Ordered list item 4
Unordered list
- Unordered list item 1
- Unordered list item 2
- Unordered list item 3
- Unordered list item 4
Input
Label
Caption
Ui components
Inputs
Forms allow people to enter data for further use or to configure options. They are used to obtain information and guide users through a series of steps.
Use a single column design and divide fields into semantic groups.
Ui components
Checkbox
Checkboxes are input controls for making selections that are not mutually exclusive.
Radios
Radio buttons are input controls for making selections that are mutually exclusive, allowing for only a single input to be selected.