Style Guide

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

Consistent typography helps visitors read comfortably and recognize the brand at a glance. This section documents the typefaces used for headings, body text, and UI elements, along with where each applies.

Headings

Yeseva One

Serif

font-family: "Yeseva One", 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

DM Sans

Sans-Serif

font-family: "DM Sans", 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

Typography is more than font choice — size, weight, and spacing work together to create clear hierarchy and readable content. The examples below show how headings, paragraphs, and UI text should look on the front end as well as back end.

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 smaller

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

Color Palette

#f8f4f2

Neutral Light

#f8f4f2

Neutral Dark

#2e200f

Contrast

#5e5655

Contrast Muted

#d6cebf

Borderline

#5d725a

Hyperlink

#cf5e27

Brand

#faaf1c

Accent

Buttons

Default

Outlined Button

Images

Colorful mid-century modern living room with plants and flowers — Optional image caption text

Image Gallery

Clean mid-century modern living room

Mid-century modern chair and piano

Media & Text

Light colored mid-century modern living room

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 (arrow) 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 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 with background color

Use a group block as a container if you want to wrap multiple blocks inside of it. Simply set a background color to automatically apply padding inside the group block container and bottom margin to keep it separate from content below it.

Group block set with Border style and background color

Use a group block as a container if you want to wrap multiple blocks inside of it. To get the correct group block padding and bottom margin, make sure to set a background color, even if it’s white.

Group block set with Box Shadow style and background color

Use a group block as a container if you want to wrap multiple blocks inside of it. To get the correct group block padding and bottom margin, make sure to set a background color, even if it’s white.

Group block set with Box Shadow + Border style and background color

Use a group block as a container if you want to wrap multiple blocks inside of it. To get the correct group block padding and bottom margin, make sure to set a background color, even if it’s white.

Paragraph with a background color. 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 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.

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