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>Überschriften und Titel<br>H1, H2, H3, H4, H5</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Lorem Khaled Ipsum ist ein wichtiger Schlüssel zum Erfolg. Du bist klug, du bist loyal, du bist ein Genie. Sei gesegnet. Im Leben wird es immer wieder Hindernisse geben, aber wir werden sie überwinden.</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 ist ein wichtiger Schlüssel zum Erfolg. Du bist klug, du bist loyal, du bist ein Genie. Sei gesegnet. Im Leben wird es immer wieder Hindernisse geben, aber wir werden sie überwinden.</p><cite>— Zitat</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">Typografie</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>Schriftdateien herunterladen</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->