Theme Settings
Global Colors
These are the global colors used across the theme settings.
|
Color Name |
Default Value |
|
Primary Color |
Brand settings Primary Color |
|
Secondary Color |
Brand settings Secondary Color |
|
Accent Color |
Brand settings Accent Color 1 |
Primary color:
By default the primary color is inherited from your Branding settings.
This controls colors for the body text and link hover text.
Secondary color:
By default the secondary color is inherited from the second color in your Branding settings.
This controls colors for your heading text (H1 - H6).
Accent color:
By default the accent color is inherited from the first color in your list of accent colors in Branding settings.
This controls colors for your default link text and background color for some elements.
All theme settings colors can be overwritten by individual module style options.
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 Family |
|
Primary Font |
Source Sans Pro |
|
Secondary Font |
Source Sans Pro |
Primary font:
The Primary font sets all text, excluding the heading text.
Secondary font:
The Secondary font sets the heading text.
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 |
|---|---|
|
Body |
Body font family and font sizes used for desktop and mobile |
|
Headings |
All headings used across the theme from Display to H6 as well as their sizes on desktop and mobile |
|
Links |
Link font family as well as font sizes used for desktop and mobile |
Body
|
Title |
Values |
|
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 |
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 |
|
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 |
|
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 (H5) |
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 |
Links
|
Title |
Values |
|
Text |
Default: Font Family: Primary Font Default Font Color: Accent Color 1 Default Text Decoration: Underline
Hover: Hover Font Family: Primary Font Hover Font Color: Primary Color Hover Text Decoration: None |
Navigation
Groups under navigation:
|
Title |
Description |
|---|---|
|
Type 1 |
Type 1 styling for the header and navigation should be used to style this global element for when it appears on top of a dark colored hero section. |
|
Type 2 |
Type 2 styling for the header and navigation should be used to style this global element for when it appears on top of a light colored hero section. |
|
Dropdown Menu Items |
Style your navigation dropdown menu items |
Type 1
|
Title |
Description |
|---|---|
|
Top Level Text |
Default Font Color: #FFFFFF Default Font Color (on scroll): Accent Color 1 |
Type 2
|
Title |
Description |
|---|---|
|
Top Level Text |
Default Font Color: Accent Color 1 Default Font Color (on scroll): Accent Color 1 |
Dropdown Menu Items
|
Title |
Description |
|---|---|
|
Dropdown Text |
Default Font Color: Accent Color 1 |
|
Dropdown Background |
Default Background Color: #FFFFFF |
Footer
Groups under navigation:
|
Title |
Description |
|---|---|
|
Text |
|
|
Background |
|
Text
|
Title |
Description |
|---|---|
|
Paragraph Text |
Default Font Color: #FFFFFF Link (Default): #FFFFFF Link (Hovered): #8B8B8B |
Background
|
Title |
Description |
|---|---|
|
Background Color 1 |
Background Color: #FFFFFF |
|
Background Color 2 |
Background Color: #FFFFFF |
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, Type 1 and 2 |
|
Button Secondary |
Styling for the primary button, Type 1 and 2 |
|
Button Accent |
Styling for the primary button, Type 1 and 2 |
Defaults
|
Title |
Description |
|---|---|
|
Text |
Font Family: Primary Font Font Size: 16px Font Weight: 700 Line Height: 24px Letter Spacing: 0.5px Text Transform: None |
|
Small |
Max Width: 155px |
|
Medium |
Max Width: 180px |
|
Large |
Max Width: 225px |
|
Extra Large |
Max Width: 432px |
Button Primary – Type 1
|
Title |
Description |
|---|---|
|
Text |
Default Font Color: #FFFFFF Hover Font Color: Accent Color 1 |
|
Icon |
Icon Color: #FFFFFF Icon Hover Color: Accent Color 1 Icon Gap: 8px |
|
Background |
Background Color Default: Accent Color 1 Background Color Hover: #FFFFFF |
|
Border |
Border Thickness: 2px Border Color Default: Accent Color 1 Border Color Hovered: #FFFFFF |
|
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: #000000, 20% |
Button Primary – Type 2
|
Title |
Description |
|---|---|
|
Text |
Default Font Color: Accent Color 1 Hover Font Color: #FFFFFF |
|
Icon |
Icon Color: Accent Color 1 Icon Hover Color: #FFFFFF Icon Gap: 8px |
|
Background |
Background Color Default: #FFFFFF Background Color Hover: Accent Color 1 |
|
Border |
Border Thickness: 2px Border Color Default: Accent Color 1 Border Color Hovered: Accent Color 1 |
|
Corner |
Corner value: 6px |
|
Spacing |
Padding Top: 8px Padding Right: 24px Padding Bottom: 8px Padding Left: 24px |
|
Shadow |
Toggle Shadow: True Toggle Shadow Hover: False Shadow Color: #000000, 20% |
Button Secondary – Type 1
|
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: Accent Color 1, 0% Background Color Hover: Accent Color 1 |
|
Border |
Border Thickness: 2px Border Color Default: Accent Color 1 Border Color Hovered: Accent Color 1 |
|
Corner |
Corner value: 6px |
|
Spacing |
Padding Top: 8px Padding Right: 24px Padding Bottom: 8px Padding Left: 24px |
|
Shadow |
Toggle Shadow: True Toggle Shadow Hover: False Shadow Color: #000000, 20% |
Button Secondary – Type 2
|
Title |
Description |
|---|---|
|
Text |
Default Font Color: Accent Color 1 Hover Font Color: Accent Color 1 |
|
Icon |
Icon Color: Accent Color 1 Icon Hover Color: Accent Color 1 Icon Gap: 8px |
|
Background |
Background Color Default: #FFFFFF, 0% Background Color Hover: # FFFFFF |
|
Border |
Border Thickness: 2px Border Color Default: Accent Color 1 Border Color Hovered: #FFFFFF |
|
Corner |
Corner value: 6px |
|
Spacing |
Padding Top: 8px Padding Right: 24px Padding Bottom: 8px Padding Left: 24px |
|
Shadow |
Toggle Shadow: True Toggle Shadow Hover: False Shadow Color: #000000, 20% |
Button Tertiary – Type 1
|
Title |
Description |
|---|---|
|
Text |
Default Font Color: #000000 Hover Font Color: Accent Color 1 |
|
Icon |
Icon Color: #FFFFFF Icon Hover Color: #FFFFFF Icon Background Color: Accent Color 1 Icon Background Hover Color: #000000 Icon Font Size: 8px Icon Size (W x H): 16px Border Corner: 50% Icon Gap: 8px Icon Gap Hover: 16px |
|
Background |
Background Color Default: Accent Color 1, 0% Background Color Hover: Accent Color 1, 0% |
|
Border |
Border Thickness: 0px Border Color Default: Accent Color 1, 0% Border Color Hovered: Accent Color 1, 0% |
|
Corner |
Corner value: 0px |
|
Spacing |
Padding: 8px 0px |
|
Shadow |
Toggle Shadow: False Toggle Shadow Hover: False Shadow Color: #000000, 20% |
Button Tertiary – Type 2
|
Title |
Description |
|---|---|
|
Text |
Default Font Color: #FFFFFF Hover Font Color: Accent Color 1 |
|
Icon |
Icon Color: #FFFFFF Icon Hover Color: #FFFFFF Icon Background Color: Accent Color 1 Icon Background Hover Color: Accent Color 1 Icon Font Size: 8px Icon Size (W x H): 16px Border Corner: 50% Icon Gap: 8px Icon Gap Hover: 16px |
|
Background |
Background Color Default: Accent Color 1, 0% Background Color Hover: Accent Color 1, 0% |
|
Border |
Border Thickness: 0px Border Color Default: Accent Color 1, 0% Border Color Hovered: Accent Color 1, 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 Styles Default Submit Button Checkbox Button |
|
Border |
Border Thickness: 0px Border Color: #E0E0E0 |
|
Background |
Background Color: #FFFFFF |
Text
|
Title |
Description |
|---|---|
|
Form Title |
Font Family: Primary Font Font Color: Secondary Color Text Transform: None Font Size: 30px Line Height: 42px Font Weight: 700 |
|
Labels |
Font Family: Primary Font Font Color: #000000 Text Transform: None Font Size: 16px Line Height: 26px Font Weight: 700 |
|
Help Text |
Font Family: Primary Font Font Color: #8b8b8b Text Transform: None Font Size: 14px Line Height: 24px Font Weight: 700 |
|
Error Messages |
Font Family: Primary Font Font Color: #FF4545 Font Size: 14px Line Height: 24px Font Weight: 400 Text Transform: None |
|
Required |
Font Size: 14px Font Color: #FF4545 |
|
Terms of Service |
Font Family: Primary Font Font Color: #8B8B8B Font Size: 16px Line Height: 20px Font Weight: 400 Text Transform: None |
|
Thank you message |
Font Family: Primary Font Font Color: #8B8B8B Font Size: 16px Line Height: 20px Font Weight: 400 Text Transform: None |
Inputs
|
Title |
Description |
|---|---|
|
Text |
Font Family: Primary Font Input Font Color: #000000 Placeholder Font Color: #8B8B8B Font Weight: 400 Text Transform: None Font Size: 16px Line Height: 24px |
|
Border |
Border Thickness: 2px Border Color: #E1E1E1 |
|
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: Primary Font Font Size: 16px Font Weight: 700 Line Height: 24px Letter Spacing: 0.5px Text Transform: None |
|
Submit |
Text Background Border Corner Spacing Shadow |
|
Checkbox |
Border Color Border Width Checkmark Color Background Color Corner |
Forms – Submit Button
|
Title |
Description |
|---|---|
|
Text |
Default Font Color: #FFFFFF Hover Font Color: Accent Color 1 |
|
Background |
Background Color Default: Accent Color 1 Background Color Hover: #FFFFFF |
|
Border |
Border Thickness: 2px Border Color Default: Accent Color 1 Border Color Hovered: Accent Color 1 |
|
Corner |
Corner value: 6px |
|
Spacing |
Padding Top: 8px Padding Right: 24px Padding Bottom: 8px Padding Left: 24px |
|
Shadow |
Toggle Shadow: True Toggle Shadow Hover: False Shadow Color: #000000, 20% |
Forms - Checkbox
|
Title |
Description |
|---|---|
|
Border Color |
#000000 |
|
Border Width |
2px |
|
Checkbox Checkmark Color |
#000000 |
|
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: Source Sans Pro Font Color: #000000 Text Transform: None Font Size: 16px Line Height: 26px Font Weight: 700 |
|
Background |
Background Color: #000000 |
Tables - Body
|
Title |
Description |
|---|---|
|
Text |
Font Family: Source Sans Pro Font Weight: 400 Font Color: #8B8B8B Text Transform: None Font Size: 16px Line Height: 26px |
|
Background |
Background Color: #FFFFFF |
Tables - Footer
|
Title |
Description |
|---|---|
|
Text |
Font Family: Source Sans Pro Font Weight: 700 Font Color: #FFFFFF Text Transform: None Font Size: 16px Line Height: 26px |
|
Background |
Background Color: #000000 |
Tables - Cells
|
Title |
Description |
|---|---|
|
Border |
Border Thickness: 1px Border Color: #8B8B8B |
|
Spacing |
Padding: 8px |