Colors
Brand Interface Colors
pRIMARY
Secondary
tertiary
Baseline Interface Colors
Black#000000
Dark Grey#4D4D4D
Medium grey#787878
Light Grey#CCCCCC
Off White#F7F7F7
White#ffffff
Validation Interface Colors
Error rED#D94B7E
Success green#31AE6B
Typography
Large Screens
Display
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph
Body
Small Screens
Display
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
N/A
N/A
N/A
N/A
Unordered List
- List item text goes here
- List item text goes here
- List item text goes here
- List item text goes here
- List item text goes here
Ordered List
- List item text goes here
- List item text goes here
- List item text goes here
- List item text goes here
- List item text goes here
Iconography
Functional
Display sizes = 50x50px or 34x34px
Graphic
Display size = 240x220px(retina display) — Generally uploaded as a .png image within the CMS
Buttons, Links & CTAs
Form Elements
Input Fields
Icon=False
Error message goes here
Success message goes here
Icon=True
Error message goes here
Success message goes here if any
Dropdown & Search Box Field
Dropdown Field
Error message goes here
Success message goes here if any
Search Box
Error message goes here
Success message goes here if any
Message Field
Icon=False
Error message goes here
Success message goes here
Icon=True
Error message goes here
Success message goes here if any
Switch
Checkbox
Radio Button
Lists & Selections
Listed Menu
Date Selection
In-page Navigation
Accordion
Body text for this section will go here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non mi magna. Pellentesque lobortis tempus massa a tincidunt. Duis id dui eget ante volutpat ultrices imperdiet eu felis. Fusce imperdiet urna felis, sed rhoncus sem feugiat nec. Praesent suscipit urna a arcu aliquam congue.
Phasellus nec luctus urna. Aenean suscipit imperdiet sem. Vestibulum vel sapien eleifend, posuere justo a, facilisis metus. Aenean volutpat justo non sodales dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a sem nibh. Sed porttitor dui ultricies, fringilla ipsum ac, congue magna. Morbi nisi nisi, efficitur ac porttitor fringilla, finibus finibus ipsum.
Body text for this section will go here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non mi magna. Pellentesque lobortis tempus massa a tincidunt. Duis id dui eget ante volutpat ultrices imperdiet eu felis. Fusce imperdiet urna felis, sed rhoncus sem feugiat nec. Praesent suscipit urna a arcu aliquam congue.
Phasellus nec luctus urna. Aenean suscipit imperdiet sem. Vestibulum vel sapien eleifend, posuere justo a, facilisis metus. Aenean volutpat justo non sodales dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a sem nibh. Sed porttitor dui ultricies, fringilla ipsum ac, congue magna. Morbi nisi nisi, efficitur ac porttitor fringilla, finibus finibus ipsum.
Body text for this section will go here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non mi magna. Pellentesque lobortis tempus massa a tincidunt. Duis id dui eget ante volutpat ultrices imperdiet eu felis. Fusce imperdiet urna felis, sed rhoncus sem feugiat nec. Praesent suscipit urna a arcu aliquam congue.
Phasellus nec luctus urna. Aenean suscipit imperdiet sem. Vestibulum vel sapien eleifend, posuere justo a, facilisis metus. Aenean volutpat justo non sodales dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a sem nibh. Sed porttitor dui ultricies, fringilla ipsum ac, congue magna. Morbi nisi nisi, efficitur ac porttitor fringilla, finibus finibus ipsum.
Tab Navigation
Icon=False
Icon=True
Pagenation
Progress & Descriptors
Progress Bar
Step Progress
Tooltip
Scroll-Line
Scroll
Progress Dots
Preloaders
Eyebrow
* Small descriptive title text that sits above H1,H2,H3 and H4 text only.For accessibility reasons, its hierarchy should be adjusted accordingly for screen readers.
Max characters with spaces = 50
Caption
Caption Label
Scroll-Arrow
Scroll for more
Cards
Product Card
*Clicks through to page
Desktop - Default
Product title goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod incididunt ut labore et dolore magna aliqua, enim ad minim veniam quis nostrud.
News Card
*Clicks through to page
Desktop - Default
News title goes here
Profile Card
*Opens modal content
Desktop - Default
Name Surname
Listed Item Card
Desktop, tablet & mobile
Item Title
Header menu
Solid Bar Menu
Transparent Menu
Footer
Cookies Notice
Images
Caption Label
Media Embed
Video - Media Handling & Rules
Audio - Media Handling & Rules
FOrms
*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
Hero banner slider
Page banner
Elements & Rules
Best positioned at the top of the page.
Jumbotron
We create bold ideas that change behaviour
We create bold ideas that change behaviour
We create bold ideas that change behaviour
Content highlight
Elements & Rules
Best positioned at the bottom of the page.
Introduction module
We combine strategy, technology and creativity to deliver on opportunities that make the world a healthier place.
Explore Our ServicesText
One Column
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.
Two Column
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Three Column
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.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card listing
Title goes here
Name Surname
Name Surname
Name Surname
Name Surname
Name Surname
Name Surname
Item listing
Logo slider
news slider
Title goes here
View All
News title goes here
News title goes here
News title goes here
News title goes here
News title goes here
Contact module
Multi-Contact module
Testimonial module
Title goes here
Multi-stats grid
Title goes here
100
title goes here
100
title goes here
100
title goes here
100
title goes here
100
title goes here
100
title goes here
Call-out stat
564
Big number description
Gallery
Title goes here
