Style Guide
Use our Style Guide to test out changes in your website colors and see how they affect the various Color Palette options available. All Color Palette Variations are listed below.
NOTE: Make sure this page is always set to DISABLED so site visitors can’t land here, and Google won’t try to index it.
Color Theme: Lightest 1
Page Title - H1
Heading 2 with a Link
Heading 3 with a Link
Heading 4 with a Link
Paragraph Style 1 — This is usually ideal for larger text that you’d like to stand out. Lorem ipsum dolor with a link. This is an example of the “Highlight color.”
Paragraph Style 2 — This is standard sized text used for the majority of copy on your website. Lorem ipsum dolor with a link.
Paragraph Style 3 — This is smaller text best used for captions and footnotes. Lorem ipsum dolor sit amet with a link.
Accordion Example
-
Description text goes here
-
Description text goes here
-
Description text goes here
“Whatever it is, the way you tell your story online can make all the difference.”
Linked image with overlay.
Unlinked image without overlay.
Example of Content Trio
-
Subject 1
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.
-
Subject 2
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.
-
Subject 3
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.
Color Theme: Lightest 2
Page Title - H1
Heading 2 with a Link
Heading 3 with a Link
Heading 4 with a Link
Paragraph Style 1 — This is usually ideal for larger text that you’d like to stand out. Lorem ipsum dolor with a link. This is an example of the “Highlight color.”
Paragraph Style 2 — This is standard sized text used for the majority of copy on your website. Lorem ipsum dolor with a link.
Paragraph Style 3 — This is smaller text best used for captions and footnotes. Lorem ipsum dolor sit amet with a link.
Accordion Example
-
Description text goes here
-
Description text goes here
-
Description text goes here
“Whatever it is, the way you tell your story online can make all the difference.”
Linked image with overlay.
Unlinked image without overlay.
Example of Content Trio
-
Subject 1
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.
-
Subject 2
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.
-
Subject 3
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.
Color Theme: Light 1
Page Title - H1
Heading 2 with a Link
Heading 3 with a Link
Heading 4 with a Link
Paragraph Style 1 — This is usually ideal for larger text that you’d like to stand out. Lorem ipsum dolor with a link. This is an example of the “Highlight color.”
Paragraph Style 2 — This is standard sized text used for the majority of copy on your website. Lorem ipsum dolor with a link.
Paragraph Style 3 — This is smaller text best used for captions and footnotes. Lorem ipsum dolor sit amet with a link.
Accordion Example
-
Description text goes here
-
Description text goes here
-
Description text goes here
“Whatever it is, the way you tell your story online can make all the difference.”
Linked image with overlay.
Unlinked image without overlay.
Example of Content Trio
-
Subject 1
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.
-
Subject 2
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.
-
Subject 3
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.
Color Theme: Light 2
Page Title - H1
Heading 2 with a Link
Heading 3 with a Link
Heading 4 with a Link
Paragraph Style 1 — This is usually ideal for larger text that you’d like to stand out. Lorem ipsum dolor with a link. This is an example of the “Highlight color.”
Paragraph Style 2 — This is standard sized text used for the majority of copy on your website. Lorem ipsum dolor with a link.
Paragraph Style 3 — This is smaller text best used for captions and footnotes. Lorem ipsum dolor sit amet with a link.
Accordion Example
-
Description text goes here
-
Description text goes here
-
Description text goes here
“Whatever it is, the way you tell your story online can make all the difference.”
Linked image with overlay.
Unlinked image without overlay.
Example of Content Trio
-
Subject 1
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.
-
Subject 2
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.
-
Subject 3
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.
Color Theme: Bright 1
Page Title - H1
Heading 2 with a Link
Heading 3 with a Link
Heading 4 with a Link
Paragraph Style 1 — This is usually ideal for larger text that you’d like to stand out. Lorem ipsum dolor with a link. This is an example of the “Highlight color.”
Paragraph Style 2 — This is standard sized text used for the majority of copy on your website. Lorem ipsum dolor with a link.
Paragraph Style 3 — This is smaller text best used for captions and footnotes. Lorem ipsum dolor sit amet with a link.
Accordion Example
-
Description text goes here
-
Description text goes here
-
Description text goes here
“Whatever it is, the way you tell your story online can make all the difference.”
Linked image with overlay.
Unlinked image without overlay.
Example of Content Trio
-
Subject 1
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.
-
Subject 2
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.
-
Subject 3
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.
Color Theme: Bright 2
Page Title - H1
Heading 2 with a Link
Heading 3 with a Link
Heading 4 with a Link
Paragraph Style 1 — This is usually ideal for larger text that you’d like to stand out. Lorem ipsum dolor with a link. This is an example of the “Highlight color.”
Paragraph Style 2 — This is standard sized text used for the majority of copy on your website. Lorem ipsum dolor with a link.
Paragraph Style 3 — This is smaller text best used for captions and footnotes. Lorem ipsum dolor sit amet with a link.
Accordion Example
-
Description text goes here
-
Description text goes here
-
Description text goes here
“Whatever it is, the way you tell your story online can make all the difference.”
Linked image with overlay.
Unlinked image without overlay.
Example of Content Trio
-
Subject 1
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.
-
Subject 2
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.
-
Subject 3
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.
Color Theme: Dark 1
Page Title - H1
Heading 2 with a Link
Heading 3 with a Link
Heading 4 with a Link
Paragraph Style 1 — This is usually ideal for larger text that you’d like to stand out. Lorem ipsum dolor with a link. This is an example of the “Highlight color.”
Paragraph Style 2 — This is standard sized text used for the majority of copy on your website. Lorem ipsum dolor with a link.
Paragraph Style 3 — This is smaller text best used for captions and footnotes. Lorem ipsum dolor sit amet with a link.
Accordion Example
-
Description text goes here
-
Description text goes here
-
Description text goes here
“Whatever it is, the way you tell your story online can make all the difference.”
Linked image with overlay.
Unlinked image without overlay.
Example of Content Trio
-
Subject 1
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.
-
Subject 2
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.
-
Subject 3
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.
Color Theme: Dark 2
Page Title - H1
Heading 2 with a Link
Heading 3 with a Link
Heading 4 with a Link
Paragraph Style 1 — This is usually ideal for larger text that you’d like to stand out. Lorem ipsum dolor with a link. This is an example of the “Highlight color.”
Paragraph Style 2 — This is standard sized text used for the majority of copy on your website. Lorem ipsum dolor with a link.
Paragraph Style 3 — This is smaller text best used for captions and footnotes. Lorem ipsum dolor sit amet with a link.
Accordion Example
-
Description text goes here
-
Description text goes here
-
Description text goes here
“Whatever it is, the way you tell your story online can make all the difference.”
Linked image with overlay.
Unlinked image without overlay.
Example of Content Trio
-
Subject 1
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.
-
Subject 2
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.
-
Subject 3
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.
Color Theme: Darkest 1
Page Title - H1
Heading 2 with a Link
Heading 3 with a Link
Heading 4 with a Link
Paragraph Style 1 — This is usually ideal for larger text that you’d like to stand out. Lorem ipsum dolor with a link. This is an example of the “Highlight color.”
Paragraph Style 2 — This is standard sized text used for the majority of copy on your website. Lorem ipsum dolor with a link.
Paragraph Style 3 — This is smaller text best used for captions and footnotes. Lorem ipsum dolor sit amet with a link.
Accordion Example
-
Description text goes here
-
Description text goes here
-
Description text goes here
“Whatever it is, the way you tell your story online can make all the difference.”
Linked image with overlay.
Unlinked image without overlay.
Example of Content Trio
-
Subject 1
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.
-
Subject 2
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.
-
Subject 3
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.
Color Theme: Darkest 2
Page Title - H1
Heading 2 with a Link
Heading 3 with a Link
Heading 4 with a Link
Paragraph Style 1 — This is usually ideal for larger text that you’d like to stand out. Lorem ipsum dolor with a link. This is an example of the “Highlight color.”
Paragraph Style 2 — This is standard sized text used for the majority of copy on your website. Lorem ipsum dolor with a link.
Paragraph Style 3 — This is smaller text best used for captions and footnotes. Lorem ipsum dolor sit amet with a link.
Accordion Example
-
Description text goes here
-
Description text goes here
-
Description text goes here
“Whatever it is, the way you tell your story online can make all the difference.”
Linked image with overlay.
Unlinked image without overlay.
Example of Content Trio
-
Subject 1
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.
-
Subject 2
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.
-
Subject 3
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.