Global Colors
These are the global colors used across the theme settings. Please note only Primary and Secondary colors are used. The rest are just placeholders and can be removed.
| Color Name |
Color Code |
| Primary Color |
1F1151 |
| Secondary Color |
F86140 |
| Tertiary Color |
090227 |
| Quaternary Color |
5D5DAC |
Global Fonts
These are the global fonts being used across the theme settings. There are primary and secondary fonts used for the headings and body text, various different elements.
| Font |
Font Name |
| Primary Font |
Nunito Sans |
| Secondary Font |
Source Sans 3 |
Spacing
This is the maximum content width of the page as well as the maximum container width which is used to centre all content on the page within a container.
| Description |
Field Value |
| Maximum Container Width |
1150px |
| Maximum Content Width |
2550px |
Typography
This is where the headings, body, lists, captions and eyebrow heading fonts and font sizes are set. Please note that buttons, tables and forms are kept separately under their own groups.
Groups under Typography
| Title |
Description |
|---|---|
| Headings |
All headings used across the theme from Hero to H6 as well as their sizes on desktop and mobile |
| Body |
Body font family and font sizes used for desktop and mobile |
| Lists |
List font family as well as font sizes used for desktop and mobile |
| Captions |
Captions font family as well as font sizes used for desktop and mobile |
| Eyebrows |
Eyebrows font family as well as font sizes used for desktop and mobile |
Headings
This is where the styling for all headings are grouped with the default font family and sizes for desktop and mobile.
Groups under Headings (Heading Hero to Heading 3)
| Title |
Values |
| Defaults |
Font Family: Nunito Sans Default Font Color: #333333 Text Transform: None |
| Heading Hero |
Desktop: Font Size: 100px Line Height: 110px Font Weight: 900
Mobile: Font Size: 52px Line Height: 64px Font Weight: 900 |
| Heading One (H1) |
Desktop: Font Size: 72px Line Height: 82px Font Weight: 900
Mobile: Font Size: 42px Line Height: 54px Font Weight: 900 |
| Heading Two (H2) |
Desktop: Font Size: 60px Line Height: 72px Font Weight: 800
Mobile: Font Size: 38px Line Height: 50px Font Weight: 900 |
| Heading Three (H3) |
Desktop: Font Size: 48px Line Height: 60px Font Weight: 800
Mobile: Font Size: 32px Line Height: 44px Font Weight: 400 |
| Title |
Values |
| Heading Four (H4) |
Desktop: Font Size: 36px Line Height: 48px Font Weight: 800
Mobile: Font Size: 28px Line Height: 40px Font Weight: 400 |
| Heading Five (h4) |
Desktop: Font Size: 30px Line Height: 42px Font Weight: 800
Mobile: Font Size: 24px Line Height: 36px Font Weight: 400 |
| Heading Six (H6) |
Desktop: Font Size: 24px Line Height: 36px Font Weight: 800
Mobile: Font Size: 20px Line Height: 32px Font Weight: 400 |
Body
| Title |
Values |
| Defaults |
Font Family: Source Sans 3 Default Font Color: #333333 Text Transform: None Font Weight: 400 Font Weight Bold: 700 |
| Small |
Desktop: Font Size: 16px Line Height: 28px
Mobile: Font Size: 16px Line Height: 28px |
| Normal |
Desktop: Font Size: 18px Line Height: 28px
Mobile: Font Size: 16px Line Height: 28px |
| Large |
Desktop: Font Size: 20px Line Height: 32px
Mobile: Font Size: 20px Line Height: 32px |
Lists
| Title |
Values |
| Defaults |
Font Family: Source Sans 3 Default Font Color: #333333 Text Transform: None Bullets Color: #F86140 |
| Desktop |
Font Size: 16px Line Height: 28px Font Weight: 400 |
| Mobile |
Font Size: 16px Line Height: 28px Font Weight: 400 |
Captions
| Title |
Values |
| Defaults |
Font Family: Nunito Sans Default Font Color: #333333 Text Transform: None |
| Desktop |
Font Size: 14px Line Height: 20px Font Weight: 700 |
| Mobile |
Font Size: 14px Line Height: 20px Font Weight: 700 |
Eyebrows
| Title |
Values |
| Defaults |
Font Family: Nunito Sans Default Font Color: #333333 Text Transform: Uppercase Stripes Color: #333333 Stripes Width: 16px Stripes Height: 2px |
| Desktop |
Font Size: 14px Line Height: 20px Font Weight: 700 |
| Mobile |
Font Size: 14px Line Height: 20px Font Weight: 700 |
Buttons
Groups under buttons:
| Title |
Description |
|---|---|
| Defaults |
Default text font family, styling and the different button maximum width / sizes. |
| Button Primary |
Styling for the primary button, Light and Dark Modes |
| Button Secondary |
Styling for the primary button, Light and Dark Modes |
| Button Tertiary |
Styling for the primary button, Light and Dark Modes |
Defaults
| Title |
Description |
|---|---|
| Text |
Font Family: Source Sans 3 Font Size: 16px Line Height: 24px Letter Spacing: 2% Font Weight: 700 Text Transform: None |
| Small |
Max Width: 125px |
| Medium |
Max Width: 145px |
| Large |
Max Width: 320px |
| Extra Large |
Max Width: 432px |
Button Primary – Light Mode
| Title |
Description |
|---|---|
| Text |
Default Font Color: #ffffff Hover Font Color: #1F115A |
| Icon |
Icon Color: #ffffff Icon Hover Color: #1F115A Icon Gap: 8px |
| Background |
Background Color Default: #F86140 Background Color Hover: #ffffff |
| Border |
Border Thickness: 2px Border Color Default: #F86140 Border Color Hovered: #F86140 |
| Corner |
Corner value: 50px |
| Spacing |
Padding Top: 8px Padding Right: 24px Padding Bottom: 8px Padding Left: 24px |
| Shadow |
Toggle Shadow: True Toggle Shadow Hover: False Shadow Color: #1F115A, 20% |
Button Primary – Dark Mode
| Title |
Description |
|---|---|
| Text |
Default Font Color: #ffffff Hover Font Color: #ffffff |
| Icon |
Icon Color: #ffffff Icon Hover Color: #ffffff Icon Gap: 8px |
| Background |
Background Color Default: #F86140 Background Color Hover: #ffffff |
| Border |
Border Thickness: 2px Border Color Default: #F86140 Border Color Hovered: #F86140 |
| Corner |
Corner value: 50px |
| Spacing |
Padding Top: 8px Padding Right: 24px Padding Bottom: 8px Padding Left: 24px |
| Shadow |
Toggle Shadow: True Toggle Shadow Hover: False Shadow Color: #1F115A, 20% |
Button Secondary – Light Mode
| Title |
Description |
|---|---|
| Text |
Default Font Color: #1F115A Hover Font Color: #ffffff |
| Icon |
Icon Color: #1F115A Icon Hover Color: #ffffff Icon Gap: 8px |
| Background |
Background Color Default: #ffffff Background Color Hover: # F86140 |
| Border |
Border Thickness: 2px Border Color Default: #F86140 Border Color Hovered: #F86140 |
| Corner |
Corner value: 50px |
| Spacing |
Padding Top: 8px Padding Right: 24px Padding Bottom: 8px Padding Left: 24px |
| Shadow |
Toggle Shadow: True Toggle Shadow Hover: False Shadow Color: #1F115A, 20% |
Button Secondary – Dark Mode
| Title |
Description |
|---|---|
| Text |
Default Font Color: #ffffff Hover Font Color: #ffffff |
| Icon |
Icon Color: #ffffff Icon Hover Color: #ffffff Icon Gap: 8px |
| Background |
Background Color Default: #ffffff Background Color Hover: # F86140 |
| Border |
Border Thickness: 2px Border Color Default: #F86140 Border Color Hovered: #F86140 |
| Corner |
Corner value: 50px |
| Spacing |
Padding Top: 8px Padding Right: 24px Padding Bottom: 8px Padding Left: 24px |
| Shadow |
Toggle Shadow: True Toggle Shadow Hover: False Shadow Color: #1F115A, 20% |
Button Tertiary – Light Mode
| Title |
Description |
|---|---|
| Text |
Default Font Color: #1F115A Hover Font Color: #1F115A |
| Icon |
Icon Color: #ffffff Icon Hover Color: #ffffff Icon Background Color: #F86140 Icon Background Hover Color: #F86140 Icon Font Size: 16px Border Corner: 50% Icon Gap: 8px – Gap Hover: 16px |
| Background |
Background Color Default: #ffffff, 0% Background Color Hover: #ffffff, 0% |
| Border |
Border Thickness: 0px Border Color Default: #ffffff, 0% Border Color Hovered: #ffffff, 0% |
| Corner |
Corner value: 0px |
| Spacing |
Padding: 0px |
| Shadow |
Toggle Shadow: False Toggle Shadow Hover: False Shadow Color: #1F115A, 20% |
Button Tertiary – Dark Mode
| Title |
Description |
|---|---|
| Text |
Default Font Color: #ffffff Hover Font Color: #ffffff |
| Icon |
Icon Color: #ffffff Icon Hover Color: #ffffff Icon Background Color: #F86140 Icon Background Hover Color: #F86140 Icon Font Size: 16px Border Corner: 50% Icon Gap: 8px – Gap Hover: 16px |
| Background |
Background Color Default: #ffffff, 0% Background Color Hover: #ffffff, 0% |
| Border |
Border Thickness: 0px Border Color Default: #ffffff, 0% Border Color Hovered: #ffffff, 0% |
| Corner |
Corner value: 0px |
| Spacing |
Padding: 0px |
| Shadow |
Toggle Shadow: False Toggle Shadow Hover: False Shadow Color: #1F115A, 20% |
Forms
Groups under forms:
| Title |
Description |
|---|---|
| Text |
Default Form Text, Titles, Labels, Help Text, Error Messages, Required, Terms of Service and Thank you message |
| Inputs |
Default Form Inputs styling for text, border, background etc. |
| Buttons |
Default Buttons Font Family Default Submit Button Checkbox Button |
Text
| Title |
Description |
|---|---|
| Form Title |
Font Family: Nunito Sans Font Color: #1F115A Text Transform: None Font Size: 30px Line Height: 42px Font Weight: 800 |
| Labels |
Font Family: Nunito Sans Font Color: #1F115A Text Transform: None Font Size: 16px Line Height: 26px Font Weight: 700 |
| Help Text |
Font Family: Source Sans 3 Font Color: #6D6C6D Text Transform: None Font Size: 14px Line Height: 24px Font Weight: 700 |
| Error Messages |
Font Family: Source Sans 3 Font Color: #F86140 Text Transform: None Font Size: 14px Line Height: 24px Font Weight: 400 |
| Required |
Font Color: #F86140 Font Size: 12px Font Weight: 400 |
| Terms of Service |
Font Family: Source Sans 3 Font Color: #6D6C6D Text Transform: None Font Size: 16px Line Height: 20px Font Weight: 400 |
| Thank you message |
Font Family: Source Sans 3 Font Color: #6D6C6D Text Transform: None Font Size: 16px Line Height: 20px Font Weight: 400 |
Inputs
| Title |
Description |
|---|---|
| Text |
Font Family: Source Sans 3 Input Font Color: #1F115A Placeholder Font Color: #828282 Text Transform: None Font Size: 16px Line Height: 24px Font Weight: 400 |
| Border |
Border Thickness: 2px Border Color: #e0e0e0 |
| Background |
Background Color: #ffffff |
| Corner |
Corner Value: 10px |
| Spacing |
Padding Top: 8px Padding Right: 16px Padding Bottom: 8px Padding Left: 16px |
Buttons
Groups under buttons:
| Title |
Description |
|---|---|
| Defaults |
Font Family: Source Sans 3 Font Size: 16px Line Height: 24px Letter Spacing: 2% Font Weight: 700 Text Transform: None |
| Submit |
Text Background Border Corner Spacing Shadow |
| Checkbox |
Checkbox Border Colors Background Corner |
Forms – Submit Button
| Title |
Description |
|---|---|
| Text |
Default Font Color: #ffffff Hover Font Color: #1F115A |
| Icon |
Icon Color: #ffffff Icon Hover Color: #1F115A Icon Gap: 8px |
| Background |
Background Color Default: #F86140 Background Color Hover: #ffffff |
| Border |
Border Thickness: 2px Border Color Default: #F86140 Border Color Hovered: #F86140 |
| Corner |
Corner value: 50px |
| Spacing |
Padding Top: 8px Padding Right: 24px Padding Bottom: 8px Padding Left: 24px |
| Shadow |
Toggle Shadow: True Toggle Shadow Hover: False Shadow Color: #1F115A, 20% |
Forms - Checkbox
| Title |
Description |
|---|---|
| Border Color |
#1F115A |
| Border Width |
2px |
| Checkbox Checkmark Color |
#785fdc |
| Checkbox Background Color |
#ffffff |
| Checkbox Corner |
5px |
Tables
Groups under tables:
| Title |
Description |
|---|---|
| Header |
Text Background |
| Body |
Text Background |
| Footer |
Text Background |
| Cells |
Border Spacing |
Tables - Header
| Title |
Description |
|---|---|
| Text |
Font Family: Nunito Sans Font Color: #1F115A Text Transform: None Font Size: 16px Line Height: 26px Font Weight: 700 |
| Background |
Background Color: #785FDC |
Tables - Body
| Title |
Description |
|---|---|
| Text |
Font Family: Source Sans 3 Font Color: #6D6C6D Text Transform: None Font Size: 16px Line Height: 26px Font Weight: 400 |
| Background |
Background Color: #ffffff |
Tables - Footer
| Title |
Description |
|---|---|
| Text |
Font Family: Source Sans 3 Font Color: #ffffff Text Transform: None Font Size: 16px Line Height: 26px Font Weight: 700 |
| Background |
Background Color: #1F115A |
Tables - Cells
| Title |
Description |
|---|---|
| Border |
Border Thickness: 1px Border Color: #6D6C6D |
| Spacing |
Padding: 8px |
