Colours
Colours used across all interface elements on the website.
Primary
primary / 100%
#1F4D8F
primary / 70%
#6283B0
primary / 10%
#E9EDF4
primary / 5%
#F4F6F9
Grey
grey / 100%
#262626
grey / 70%
#676767
grey / 10%
#E9E9E9
grey / 5%
#F4F6F9
Beige
beige
#F7F6F1
beige / dark
#F4F2EC
white
#FFFFFF
Shadows
Shadow elevations used for static elements on the website.
ELEVATION LEVELS
2dp
#262626 24%
4dp
#262626 24%
8dp
#262626 20%
16dp
#262626 16%
24dp
#262626 12%
Typography
Headings, body and other common text elements.
Heading One tag
Heading One class
Heading Two tag
Heading Two class
Heading Three tag
Heading Three class
Heading Four tag
Heading Four class
Heading Five tag
Heading Five class
Heading Six tag
Heading Six class
Heading Six caps
Text large
Link largeBody
Body linkLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Text small
Text small linktext caps
grey-100
grey-70
grey-10
grey-5
primary-100
primary-70
primary-10
primary-5
Lists
Headings, body and other common text elements.
Unstyled <ul></ul>
- List item
- List item
- List item
Colored Bullets
- List item
- List item
- List item
Checklist
List item- List item
- List item
Icons - Interface
Headings, body and other common text elements.
Icons - Social
Icons for popular social networks.
Badges
Combine with other components to display metadata
Default
Theme Colors
primary / 100
primary / 70
grey / 100
grey / 70
Feedback Colors
Success
Warning
Error
Cards
A multipurpose component used to display content in boxed format.
Default Styles
With Image
.jpg)
Form Inputs
Styles for form inputs and form feedback states.
Input Sizes
Labelled Input
Input with Icon
Radio & Checkbox
Form Feedback
The form submission was a success!
There was an issue with the form submission!
Dropdowns
Preset styles to imply depth on interface components
Basic
Multi Column
With Footer
Tooltips
Provide additional information in a small pop-up.
Hover on this icon
?
Avatars
Multiple sizes and styles to represent users around the interface.
Avatar Sizes
Avatar Group
Avatar Indicators
Avatar with name
Alicia Vikander