A website’s style guide is an essential roadmap for ensuring visual and functional consistency across all posts and pages, creating a cohesive and user-friendly experience.
By standardizing typography, typefaces, color palette, and elements such as headings, link styles, and button styles, a style guide maintains brand identity and improves accessibility.
Additionally, it provides clear guidelines for both native WordPress and custom block styles, ensuring that all content aligns with the site’s overall aesthetic and usability objectives.
Typefaces
Headings
IvyPresto Display
Old Style Display Serif
font-family: ivypresto-display, serif;Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 1 2 3 4 5 6 7 8 9
Body & UI Elements
Sofia Pro
Friendly Sans-Serif
font-family: sofia-pro, sans-serif;Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 1 2 3 4 5 6 7 8 9
Typography
kicker
Heading 1
Here is a regular paragraph at default Medium size, and here is some bold text. Here is some italicized text. Just some more regular paragraph text and now here is how a paragraph link looks.
Heading 2
Here is a regular paragraph at Medium Small size, and here is some bold text. Here is some italicized text. Just some more regular paragraph text and now here is how a paragraph link looks.
Heading 3
Here is a regular paragraph at Medium Smaller size, and here is some bold text. Here is some italicized text. Just some more regular paragraph text and now here is how a paragraph link looks.
Font Sizes
xxxx-small
The quick brown fox jumps over the lazy dog
xxx-small
The quick brown fox jumps over the lazy dog
xx-small
The quick brown fox jumps over the lazy dog
x-small
The quick brown fox jumps over the lazy dog
small
The quick brown fox jumps over the lazy dog
Medium small
The quick brown fox jumps over the lazy dog
Medium
The quick brown fox jumps over the lazy dog
Medium Large
The quick brown fox jumps over the lazy dog
Large
The quick brown fox jumps over the lazy dog
x-Large
The quick brown fox jumps over the lazy dog
xx-Large
The quick brown fox jumps over the lazy dog
xxx-Large
The quick brown fox jumps over the lazy dog
xxxx-Large
The quick brown fox jumps over the lazy dog
Color Palette
#ffffff
White
#f2f5f8
Light Blue
#000000
Black
#d9e5e0
Light Green
#9ebfb1
Green
#134649
Dark Green
#f4eeeb
Light Tan
#e1dbd5
Tan
#716c56
Dark Tan
#ecd6cd
Light Amber
#d49f8c
Amber
#b65b3a
Dark Amber
Buttons
Default Form & CTA Button
Default Content Block Buttons
Images
Image Gallery
Media & Text
Heading
Some regular body text.
List Styles
Unordered (bulleted) list
- Here’s a regular unordered list item
- Another normal unordered list item
- Yet another list item for good measure
Unordered (Arrows) style
- Here’s a checkmark list item
- Another checkmark list item
- Yet another checkmark list item
Unordered (Checkmark) style
- Here’s a checkmark list item
- Another checkmark list item
- Yet another checkmark list item
Unordered (X mark) style
- Here’s a xmark list item
- Another xmark list item
- Yet another xmark list item
Ordered (numbered) list
- Here’s an ordered list item
- Another ordered list item
- Yet another ordered list item
Group & Paragraph Styles
Group block set to the Border style with background color
Use a group block as a container if you want to wrap multiple blocks inside of it (like this). To get the correct group block padding make sure to set a background color, even if it’s white.
Paragraph set to the Boxshadow style. You can use this style for a single paragraph, but if you need to wrap it in multiple blocks, use the group block version instead.
Paragraph set to the Boxshadow + Border style. You can use this style for a single paragraph, but if you need to wrap it in multiple blocks, use the group block version instead.
Quote Style
“Quote or otherwise known as a blockquote. I have quote marks in your primary brand color. This one shows an optional citation line.”
Optional Citation Line
Plain
“Quote or otherwise known as a blockquote. I have quote marks in your primary brand color. This one shows an optional citation line.”
Optional Citation Line
