Our partners often receive a new style guide through our design process. When delivering the completed site, the final style guide for the website can be very helpful for partners to reference.

The style guide pattern here is an easy way to add the default heading, text, color, and sample design treatment with an image cover.

Create a private page on a partner’s site using the style guide provided in the design files from the designer, matching the fonts and colors. If requested, a more robust style guide can be created to show more detailed design adherence, such as: recommended image sizes, quotes, formatting, or more.

Sample Style Guides on Partner Sites

• ███████████████
• ███████████████

Note: Style guides are private, so you will need to login to the partner’s site to view.

Begin Style Guide

Typography

---

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph typography with bold and italic samples. Did you hear that? They’ve shut down the main reactor. We’ll be destroyed for sure. This is madness! We’re doomed! There’ll be no escape for the Princess this time. What’s that? Artoo! Artoo-Detoo, where are you? At last! Where have you been? They’re heading in this direction. What are we going to do? We’ll be sent to the spice mine of Kessel or smashed into who knows what!

---

Colors

---

Buttons

---

Sample Text and Color Treatment

Style Guide Code

Copy the HTML below and paste into the block editor on a new, private page on partner site.

<!-- wp:heading -->
<h2>Typography</h2>
<!-- /wp:heading -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":1} -->
<h1>Heading 1</h1>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2>Heading 2</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3>Heading 3</h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":4} -->
<h4>Heading 4</h4>
<!-- /wp:heading -->

<!-- wp:heading {"level":5} -->
<h5>Heading 5</h5>
<!-- /wp:heading -->

<!-- wp:heading {"level":6} -->
<h6>Heading 6</h6>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Paragraph typography with <strong>bold</strong> and <em>italic</em> samples. Did you hear that? They've shut down the main reactor. We'll be destroyed for sure. This is madness! We're doomed! There'll be no escape for the Princess this time. What's that? Artoo! Artoo-Detoo, where are you? At last! Where have you been? They're heading in this direction. What are we going to do? We'll be sent to the spice mine of Kessel or smashed into who knows what!</p>
<!-- /wp:paragraph -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2>Colors</h2>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:cover {"overlayColor":"black","minHeight":148,"minHeightUnit":"px","className":"is-style-default"} -->
<div class="wp-block-cover is-style-default" style="min-height:148px"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"medium"} -->
<p class="has-text-align-center has-medium-font-size">000000</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:cover {"customOverlayColor":"#006199","minHeight":148,"minHeightUnit":"px","className":"is-style-default"} -->
<div class="wp-block-cover is-style-default" style="min-height:148px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#006199"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"medium"} -->
<p class="has-text-align-center has-medium-font-size">006199</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:cover {"customOverlayColor":"#909090","minHeight":148,"minHeightUnit":"px","isDark":false,"className":"is-style-default"} -->
<div class="wp-block-cover is-light is-style-default" style="min-height:148px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#909090"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"medium"} -->
<p class="has-text-align-center has-medium-font-size">909090</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:cover {"customOverlayColor":"#008ee7","minHeight":148,"minHeightUnit":"px","className":"is-style-default"} -->
<div class="wp-block-cover is-style-default" style="min-height:148px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#008ee7"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"medium"} -->
<p class="has-text-align-center has-medium-font-size">008EE7</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:cover {"customOverlayColor":"#dcdcdc","minHeight":148,"minHeightUnit":"px","isDark":false,"className":"is-style-default"} -->
<div class="wp-block-cover is-light is-style-default" style="min-height:148px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#dcdcdc"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"medium"} -->
<p class="has-text-align-center has-medium-font-size">DCDCDC</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:cover {"customOverlayColor":"#90d6ff","minHeight":148,"minHeightUnit":"px","isDark":false,"className":"is-style-default"} -->
<div class="wp-block-cover is-light is-style-default" style="min-height:148px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#90d6ff"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"medium"} -->
<p class="has-text-align-center has-medium-font-size">90D6FF</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:cover {"overlayColor":"white","minHeight":148,"minHeightUnit":"px","isDark":false,"className":"is-style-default"} -->
<div class="wp-block-cover is-light is-style-default" style="min-height:148px"><span aria-hidden="true" class="wp-block-cover__background has-white-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"medium"} -->
<p class="has-text-align-center has-medium-font-size">FFFFFF</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:cover {"customOverlayColor":"#ebf7ff","minHeight":148,"minHeightUnit":"px","isDark":false,"className":"is-style-default"} -->
<div class="wp-block-cover is-light is-style-default" style="min-height:148px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#ebf7ff"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"medium"} -->
<p class="has-text-align-center has-medium-font-size">EBF7FF</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2>Buttons</h2>
<!-- /wp:heading -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">Button Solid</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link">Button Outline</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"width":25} -->
<div class="wp-block-button has-custom-width wp-block-button__width-25"><a class="wp-block-button__link">Button 25%</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"width":50} -->
<div class="wp-block-button has-custom-width wp-block-button__width-50"><a class="wp-block-button__link">Button 50%</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"width":75} -->
<div class="wp-block-button has-custom-width wp-block-button__width-75"><a class="wp-block-button__link">Button 75%</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"width":100} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link">Button 100%</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2>Sample Text and Color Treatment</h2>
<!-- /wp:heading -->

<!-- wp:cover {"url":"https://wpspecialprojectsp2.files.wordpress.com/2022/06/milky-way-starry-sky-night-sky-star-956981.jpeg","id":9015,"dimRatio":30,"contentPosition":"bottom left","isDark":false,"align":"full","className":"is-style-default"} -->
<div class="wp-block-cover alignfull is-light has-custom-content-position is-position-bottom-left is-style-default"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-30 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-9015" alt="" src="https://wpspecialprojectsp2.files.wordpress.com/2022/06/milky-way-starry-sky-night-sky-star-956981.jpeg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"padding":{"left":"40px"}}},"layout":{"contentSize":"500px"}} -->
<div class="wp-block-group" style="padding-left:40px"><!-- wp:heading {"level":5,"style":{"typography":{"lineHeight":"0"},"color":{"text":"#ebf7ff"}}} -->
<h5 class="has-text-color" style="color:#ebf7ff;line-height:0">Category or Subheading</h5>
<!-- /wp:heading -->

<!-- wp:heading {"style":{"spacing":{"margin":{"top":"5px"}}},"textColor":"white"} -->
<h2 class="has-white-color has-text-color" style="margin-top:5px">A compelling headline that draws readers into your content.</h2>
<!-- /wp:heading -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"white","className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-white-color has-text-color">Call to Action</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

<!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->