Template Style Guide
This style guide is an overview of the different colors, typography styles, buttons & other elements used in the template.
Colors
- Colors defined here are global.
- Please edit the colors below to match the office color scheme. If you need to add more color, save them as swatches and add them here.
- You can use this "Coolors" Tool to generate the palette.
White
White 050
Text
CTA
CTA Hover
Primary Darker
Primary Dark
Primary
Primary Medium
Primary Light
Primary Light Medium
Primary Soft
Primary Soft Medium
Secondary
Shadow
Body gray
Body gray
Text Color
Text White
Text Primary
Text Size
Text Large
Text Small
Typography
- Default font is Arial. This is to prevent loading unused fonts in the project.
- Default font size is 16px for Desktop, Tablet and Mobile. 18px for Large Desktops.
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Headings: Section Headings Class
Section Heading
Section Subheading
Section Subtitle
Section Subheading + Smaller (combo class)
Section Subheading + Larger (combo class)
pre title
Section Tagline
Other Elements
Paragraph
- List Item 1
- List Item 2
- List Item
- List Item
Blockquote
Grids
- Grids are created to be reused throughout the project.
- Grids with gap default value is 2rem, modify as needed.
Grid: 1 Column
Grid 2 Columns
- Tablet & Mobile Landscape: 2 columns
- Mobile: 1 Column
Grid 2 (No Gap) Columns
- Tablet & Mobile Landscape: 2 columns
- Mobile: 1 Column
Grid 3 Columns
- Tablet, Mobile Landscape, Mobile: 1 column
Grid 3 (No Gap) Columns
- Tablet, Mobile Landscape, Mobile: 1 column
Grid 4 Columns
- Tablet: 2 columns
- Mobile Landscape & Mobile: 1 Column
Grid 4 (No Gap) Columns
- Tablet: 2 columns
- Mobile Landscape & Mobile: 1 Column
Grid 5 Columns
- Tablet: 2 columns
- Mobile Landscape & Mobile: 1 Column
Grid 5 Columns
- Tablet: 2 columns
- Mobile Landscape & Mobile: 1 Column
Grid 6 Columns
- Tablet: 3 columns
- Mobile Landscape & Mobile: 1 Column
Grid 6 Columns
- Tablet: 3 columns
- Mobile Landscape & Mobile: 1 Column
Helpers
Text Alignment: Text Center
Text Center
Text Center Tablet
Text Center Landscape
Text Center Mobile
Text Alignment: Text Left
Text Left
Text Left Tablet
Text Left Landscape
Text Left Mobile
Text Alignment: Text Right
Text Right
Text Right Tablet
Text Right Landscape
Text Right Mobile
Margin: X
MX-Auto: Margin X Auto
Margin: Y
MY-0: Margin Y 0
Margin: Top
MT-0: Margin Top 0
MT-0: Margin Top 0
MT-1: Margin Top 1 Unit
MT-2: Margin Top 2 Units
MT-3: Margin Top 3 Units
MT-4: Margin Top 4 Units
MT-5: Margin Top 5 Units
MT-6: Margin Top 6 Units
MT-7: Margin Top 7 Units
MT-8: Margin Top 8 Units
Margin: Bottom
MB-0: Margin Bottom 0
MB-0: Margin Bottom 0
MB-1: Margin Bottom 1 Unit
MB-2: Margin Bottom 2 Units
MB-3: Margin Bottom 3 Units
MB-4: Margin Bottom 4 Units
MB-5: Margin Bottom 5 Units
MB-6: Margin Bottom 6 Units
MB-7: Margin Bottom 7 Units
MB-8: Margin Bottom 8 Units
Display: Responsive
Display Desktop
Display Tablet
Display Tablet
Display Landscape
Display Landscape
Display Mobile
Display Desktop
Display: Hide
Hide
Rounded Corners
Icons
- In order to avoid impacting on the page speed load we will now use SVG icon with the "currentColor" feature.
- Below you can find some of the icons use, feel free to include any additional icon if needed.
Forms
Form: Dark
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Form: White
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Sections
Section: General Section
General Section: Setup with margins. Margin top and bottom: 4 units
Section: Filled Section
Filled Section: Base for filled sections, setup with padding. Padding top and bottom: 4 units
Combo Class: Filled Section + Background Main Darker + Color:White;
Combo Class: Filled Section + Background Main + Color:White;
Combo Class: Filled Section + Background Main Soft Medium
Combo Class: Filled Section + Background Gradient + Text White
Combo Class: Filled Section + Background Gradient + Text White
Combo Class: Filled Section + Filled Section Padless + Background Main Dark+ Color:White;
Boxed Content
Boxed Content: Normal
Boxed Content: Base for boxed sections, setup with padding. Padding top and bottom: 4 units
Boxed Content + Background Main Dark + Text White
Boxed Content: Medium
Boxed Content: Base for boxed sections, setup with padding. Padding top and bottom: 2 units
Boxed Content MD+ Background Main Dark + Text White
Containers
Container: Max Width: 1600px, Padding X: 2rem
Container + Container Full on Mobile: Max Width: 1600px, Padding X: 2rem / Padding X on mobile: 0
Container Full on Desktop
Container + Container Full on Desktop: Max Width: none, Padding X: 4rem / Padding X on mobile: 0
Container + Container Narrow: Max Width: 800px;
Container + Mobile: Max Width: 800px;
Actions
Close Modal
Open Book Modal
Open Bio 1 Modal
Open Bio 2 Modal
Open Bio 3 Modal
Open Bio 4 Modal
Open Bio 5 Modal
