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
Soleil
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
Soleil
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.
Color Palette
#222244
Foreground
#56556D
Foreground Tint
#ffffff
Background
#ecf7f8
Background Shade
#E6E6F5
Borderline
#bf1f3c
CTA
#1A62FF
Hyperlink
#f5f8ff
Hyperlink Tint
#2d2a6d
Primary
#DBDAF1
Primary Tint
Buttons
Default
CTA
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 (Checkmark) style
- Here’s a checkmark list item
- Another checkmark list item
- Yet another checkmark list item
Unordered (X mark) style
- Here’s a checkmark list item
- Another checkmark list item
- Yet another checkmark list item
Ordered (numbered) list
- Here’s an ordered list item
- Another ordered list item
- Yet another ordered list item
Paragraph Styles
Here is a paragraph set to the 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.
Here is a 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.
Here is a 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
I’m a 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
I’m a quote or otherwise known as a blockquote. I have quote marks in your primary brand color. This one does not show the citation line.
Group Styles
Here’s a group block set to the Border style.
You can also set a single paragraph to the Border style, but use a Group block if you need to wrap more than one block inside of it (like this).
Here’s a group block set to the Boxshadow style.
You can also set a single paragraph to the Boxshadow style, but use a Group block if you need to wrap more than one block inside of it (like this).
Here’s a group block set to the Boxshadow + Border style.
You can set a single paragraph to the Boxshadow + Border style, but use a Group block if you need to wrap more than one block inside of it (like this).