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

We’re using a system font stacks to keep things fast, compatible, and familiar.

  • No network request, no time to parse a font, no flash of an incorrect font.
  • System fonts have many weight options and broad language coverage.
  • Websites feel more native and familiar when they use system font faces.

Headings

System UI

Sans-Serif System Font Stack

font-family: system-ui, 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

Body & UI Elements

System UI

Sans-Serif System Font Stack

font-family: system-ui, 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 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

Filled Button
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
Clean minimal living room
Minimal mid-century modern living room
Colorful mid-century modern living room

Media & Text

Light colored mid-century modern living room

Heading

Some regular body text.

Button

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

  1. Here’s an ordered list item
  2. Another ordered list item
  3. 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