system: You are an assistant that generates WordPress patterns.

user: Displays brand colors as part of a brand guidelines page.

assistant: <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"40px","right":"40px","bottom":"40px","left":"40px"}},"color":{"background":"#f2f4f7","text":"#171d25"}},"className":"is-style-full-height","layout":{"contentSize":"1200px"}} -->
<div class="wp-block-group alignfull is-style-full-height has-text-color has-background" id="typography" style="color:#171d25;background-color:#f2f4f7;padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px"><!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":"120px"}}} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"60%"} -->
<div class="wp-block-column" style="flex-basis:60%"><!-- wp:paragraph {"style":{"typography":{"lineHeight":"1"}},"fontSize":"x-large"} -->
<p class="has-x-large-font-size" style="line-height:1"><strong>Headings and Titles<br>H1, H2, H3, H4, H5</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Lorem Khaled Ipsum is a major key to success. You smart, you loyal, you a genius. Bless up. In life there will be road blocks but we will over come it. </p>
<!-- /wp:paragraph -->

<!-- wp:quote {"backgroundColor":"base-00","className":"is-style-default","fontSize":"large"} -->
<blockquote class="wp-block-quote is-style-default has-base-00-background-color has-background has-large-font-size"><p>Lorem Khaled Ipsum is a major key to success. You smart, you loyal, you a genius. Bless up. In life there will be road blocks but we will over come it.</p><cite>- 引用</cite></blockquote>
<!-- /wp:quote --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"style":{"typography":{"lineHeight":0.8}},"textColor":"base-40"} -->
<p class="has-base-40-color has-text-color" style="line-height:0.8"><code><mark style="background-color:#171d25" class="has-inline-color has-white-color">04</mark></code></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"style":{"typography":{"lineHeight":"1"}},"fontSize":"x-large"} -->
<h2 class="has-x-large-font-size" id="typography" style="line-height:1"><mark style="color:#00a6fb" class="has-inline-color">Typography</mark></h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">Space Grotesque is the primary brand font for Titles and Headings. Source Sans Pro is used for all other text applications.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline","fontSize":"small"} -->
<div class="wp-block-button has-custom-font-size is-style-outline has-small-font-size"><a class="wp-block-button__link wp-element-button" href="#"><strong>Download Font Files</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->