Global Style Guide
Client: PortalFuse
This global style guide is used throughout the website to build all the Pages. It encompasses all the major design pieces that are needed to build a modern web page, colors, typography, forms, calls-to-action, and much more.
Once the styles are finalized, we convert each reference into a global preset that can quickly and easily be accessed through the Divi Page Builder.
We hope you enjoy following style guide!
Produced by Uplyft
Emilio Gagliardi, M.Sc.
emilio@uplyft.ca
Color palette
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
#
Text styles on white
Font Families
#
#
Heading 1
Heading 1
Heading 2
Heading 2
Heading 3
Heading 3
Heading 4
Heading 4
Body
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. 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
All in one on White
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorum ipsum dolor sit amet 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:
- Social Media Generation
- Email Marketing Campaigns
- Excellent Customer Support
Lorum ipsum dolor sit amet 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:
- Ordered list item one goes first
- Ordered list item two goes second
- Ordered list item three goes third
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
Text styles on dark
Heading 1
Heading 1
Heading 2
Heading 2
Heading 3
Heading 3
Heading 4
Heading 4
Body
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. 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
All in one on Dark
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorum ipsum dolor sit amet 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:
- Social Media Generation
- Email Marketing Campaigns
- Excellent Customer Support
Lorum ipsum dolor sit amet 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:
- Ordered list item one goes first
- Ordered list item two goes second
- Ordered list item three goes third
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
Divider modules
Divider 1
Divider 2
Divider 3
Button 1
Button 2
Button 3
Button 4
Button 5
Image modules
Image 1
Image 2
Image 3
Blurb modules
Blurb 1
Manage Devices
Blurb 2
Consectetur sed, convallis at tellus
Quisque velit nisi, pretium ut lacinia in, elementum id enim. Proin eget tortor risus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Quisque velit nisi, pretium ut lacinia in
Blurb 3
Suite 2500, 500 4th Avenue SW
Calgary, Alberta, Canada. T2P 2V6
Blurb 4
Consectetur sed, convallis at tellus
Quisque velit nisi, pretium ut lacinia in, elementum id enim. Proin eget tortor risus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Quisque velit nisi, pretium ut lacinia in
CTA modules
CTA 1
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
CTA 2
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Email optin module
Email optin form 1
Email optin form 2
Other modules
Person
Jennifer May
Director of Design
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mi nunc, facilisis sed erat sed, interdum suscipit nisl.
Toggle 1
Diligence
Toggle 2
Learn More
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mi nunc, facilisis sed erat sed, interdum suscipit nisl. Donec ut ligula sed dolor accumsan placerat. Ut sed felis vitae augue condimentum viverra. Praesent condimentum magna sit amet dui interdum sodales. Ut tincidunt ipsum leo, nec hendrerit odio fermentum at. Cras sit amet nibh lacus. Ut a risus id libero pellentesque consectetur. Vestibulum ornare pulvinar laoreet. Cras non scelerisque tortor, et rutrum sapien.
Social media follow
Testimonial
Contact form
Section 1 & Row 1
Both 100% width – 0 padding
Section 2 – Row 2
1140 max width – 0px padding top/bottom – centered
Row 3 – Left
800 max width – 0px padding top/bottom – left aligned
Row 4 – Right
800 max width – 0px padding top/bottom – right aligned
Section 3
100% width – 0 padding – Dark background
Section 4
100% width – 6vw padding top/bottom
Specialty Section Dark/Light
100% width
0 padding top/bottom
Row: White section + 60px top/bottom+ 80 px left/right