system: You are an assistant that generates WordPress patterns.

user: El patrón de guía de estilo presenta los bloques predeterminados y los tratamientos de color de muestra para crear una página de guía de estilo en tu sitio . Este patrón es una forma sencilla de agregar el contenido predeterminado de encabezados, textos, botones, citas e imágenes de muestra de la cubierta a un sitio que estés estilizando.

assistant: <!-- wp:paragraph -->
<p>El patrón de guía de estilo presenta los bloques predeterminado y los tratamientos de color de muestra para crear una página de guía de estilo en tu sitio. Este patrón es una forma sencilla de agregar el contenido predeterminado de encabezamientos, textos, botones, citas e imágenes de muestra de la cubierta a un sitio que estés estilizando. Entregá la guía de estilo junto al sitio del cliente para facilitar la referencia y el cumplimiento del diseño.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Tipografía</h2>
<!-- /wp:heading -->

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

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

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

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

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

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

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

<!-- wp:paragraph -->
<p><em>Tipografía de</em> <strong>párrafo</strong>. <span style="text-decoration: underline">¿Oíste eso?</span> Han apagado el reactor principal. Seguro que nos destruirán. ¡Esto es una locura! ¡Estamos condenados! Esta vez no habrá escape para la Princesa. ¿Qué es eso? ¡Artoo! Artoo-Detoo, ¿dónde estás? ¡Por fin! ¿Dónde has estado? Vienen en esta dirección. ¿Qué vamos a hacer? ¡Nos enviarán a la mina de especias de Kessel o nos estrellarán contra quién sabe qué!</p>
<!-- /wp:paragraph -->

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

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

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:cover {"overlayColor":"black","minHeight":180,"minHeightUnit":"px"} -->
<div class="wp-block-cover" style="min-height:180px"><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":"Escribí el título…","fontSize":"small"} -->
<p class="has-text-align-center has-small-font-size">#000000</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:cover {"overlayColor":"cyan-bluish-gray","minHeight":180,"minHeightUnit":"px","isDark":false} -->
<div class="wp-block-cover is-light" style="min-height:180px"><span aria-hidden="true" class="wp-block-cover__background has-cyan-bluish-gray-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Escribí el título…","textColor":"black","fontSize":"small"} -->
<p class="has-text-align-center has-black-color has-text-color has-small-font-size">#ABB8C3</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:cover {"overlayColor":"vivid-cyan-blue","minHeight":180,"minHeightUnit":"px"} -->
<div class="wp-block-cover" style="min-height:180px"><span aria-hidden="true" class="wp-block-cover__background has-vivid-cyan-blue-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Escribí el título…","textColor":"black","fontSize":"small"} -->
<p class="has-text-align-center has-black-color has-text-color has-small-font-size">#0693E3</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:cover {"overlayColor":"pale-cyan-blue","minHeight":180,"minHeightUnit":"px","isDark":false} -->
<div class="wp-block-cover is-light" style="min-height:180px"><span aria-hidden="true" class="wp-block-cover__background has-pale-cyan-blue-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Escribí el título…","textColor":"black","fontSize":"small"} -->
<p class="has-text-align-center has-black-color has-text-color has-small-font-size">#8ED1FC</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:separator {"align":"wide","className":"is-style-wide"} -->
<hr class="wp-block-separator alignwide 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 wp-element-button">Botón sólido</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">Contorno de los botones</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 wp-element-button">Botón 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 wp-element-button">Botón 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 wp-element-button">Botón 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 wp-element-button">Botón 100%</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

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

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

<!-- wp:paragraph -->
<p><strong>Cita predeterminada</strong></p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Tu destino está conmigo, Skywalker. Obi-Wan sabía que esto era cierto. ¡No! Demasiado fácil. Quizás no eres tan fuerte como el Emperador pensaba. Impresionante... muy impresionante. Obi-Wan te ha enseñado bien. Has controlado tu miedo.</p><cite>Darth Vader</cite></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p><strong>Cita simple</strong></p>
<!-- /wp:paragraph -->

<!-- wp:quote {"className":"is-style-plain"} -->
<blockquote class="wp-block-quote is-style-plain"><p>Tu destino está conmigo, Skywalker. Obi-Wan sabía que esto era cierto. ¡No! Demasiado fácil. Quizás no eres tan fuerte como el Emperador pensaba. Impresionante... muy impresionante. Obi-Wan te ha enseñado bien. Has controlado tu miedo.</p><cite>Darth Vader</cite></blockquote>
<!-- /wp:quote -->

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

<!-- wp:heading -->
<h2>Párrafos de cita</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Citas que pueden colocarse entre bloques de texto, o situarse junto a ellos a la izquierda o a la derecha.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Párrafo de cita sin alineación.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:pullquote -->
<figure class="wp-block-pullquote"><blockquote><p><strong>Obi-Wan sabía que esto era cierto.</strong></p><cite>Darth Vader</cite></blockquote></figure>
<!-- /wp:pullquote -->

<!-- wp:paragraph -->
<p><strong>Pullquote with wide alignment.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:pullquote {"align":"wide"} -->
<figure class="wp-block-pullquote alignwide"><blockquote><p><strong>No! All to easy. Perhaps you are not as strong as the Emperor thought.</strong></p><cite>Darth Vader</cite></blockquote></figure>
<!-- /wp:pullquote -->

<!-- wp:paragraph -->
<p><strong>Pullquote with full width alignment</strong></p>
<!-- /wp:paragraph -->

<!-- wp:pullquote {"align":"full"} -->
<figure class="wp-block-pullquote alignfull"><blockquote><p><strong>Impressive...most impressive. Obi-Wan has taught you well. You have controlled your fear.</strong></p></blockquote></figure>
<!-- /wp:pullquote -->

<!-- wp:paragraph -->
<p><strong>Pullquote with left and right alignment.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:pullquote {"textAlign":"left","align":"left"} -->
<figure class="wp-block-pullquote alignleft has-text-align-left"><blockquote><p>Tu destino está conmigo, Skywalker.</p><cite>Darth Vader, párrafo de cita alineado a la izquierda</cite></blockquote></figure>
<!-- /wp:pullquote -->

<!-- wp:paragraph -->
<p>I must face him alone. Chewie! Get behind me! Get behind me! Can't get out that way. Looks like you managed to cut off our only escape route. Maybe you'd like it back in your cell, Your Highness.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Are you kidding? At the rate they're gaining. Traveling through hyperspace isn't like dusting crops, boy! Without precise calculations we could fly right through a star or bounce too close to a supernova and that'd end your trip real quick, wouldn't it? What's that flashing? We're losing our deflector shield. Go strap yourself in, I'm going to make the jump to light speed. We've entered the Alderaan system.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Líder Rojo, estamos justo encima tuyo. Girá al punto cero cinco, te cubrimos. Quedate ahí. Acabo de perder mi motor de estribor. Prepárense para hacer su carrera de ataque. Biggs, Wedge, cerrémoslo.</p>
<!-- /wp:paragraph -->

<!-- wp:pullquote {"textAlign":"left","align":"right"} -->
<figure class="wp-block-pullquote alignright has-text-align-left"><blockquote><p>Tu destino está conmigo, Skywalker.</p><cite>Darth Vader, párrafo de cita alineado a la derecha</cite></blockquote></figure>
<!-- /wp:pullquote -->

<!-- wp:paragraph -->
<p>No vas a querer que mi vida se vuelva aburrida, ¿verdad? Luke, la Fuerza va a estar con vos. Todas las alas repórtense. Rojo Diez en espera. Rojo Siete a la espera. Rojo Tres a la espera. Rojo Seis a la espera. Rojo Nueve a la espera.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Mantené a la mitad de tu grupo fuera del alcance para la siguiente carrera. Copiado, Base Uno. Luke, toma a Rojo Dos y Tres. Aguanten acá y esperen mi señal... para comenzar su carrera.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Ella es la del mensaje. Tenemos que ayudarla. No te hagás ilusiones. El viejo quiere que esperemos acá.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Where are you going? Well, I'm not going that way. It's much too rocky. This way is much easier. What makes you think there are settlements over there? Don't get technical with me. What mission? What are you talking about? I've had just about enough of you! Go that way! You'll be malfunctioning within a day, you nearsighted scrap pile! And don't let me catch you following me begging for help, because you won't get it. No more adventures.</p>
<!-- /wp:paragraph -->

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

<!-- wp:heading -->
<h2>Muestra de texto y tratamiento del color</h2>
<!-- /wp:heading -->

<!-- wp:cover {"url":"https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/pd36-2-pia11735_orig.jpg?w=1200&h=1200&fit=clip&crop=default&dpr=1&q=75&vib=3&con=3&usm=15&cs=srgb&bg=F4F4F3&ixlib=js-2.2.1&s=44e5721d038ddca51c84b8ff96099368","id":null,"dimRatio":60,"focalPoint":{"x":"0.37","y":"0.47"},"minHeight":596,"minHeightUnit":"px","customGradient":"linear-gradient(135deg,rgb(2,3,129) 49%,rgb(40,116,252) 100%)","contentPosition":"bottom left","align":"full","style":{"spacing":{"padding":{"top":"80px","right":"80px","bottom":"20px","left":"80px"}}}} -->
<div class="wp-block-cover alignfull has-custom-content-position is-position-bottom-left" style="padding-top:80px;padding-right:80px;padding-bottom:20px;padding-left:80px;min-height:596px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-60 has-background-dim wp-block-cover__gradient-background has-background-gradient" style="background:linear-gradient(135deg,rgb(2,3,129) 49%,rgb(40,116,252) 100%)"></span><img class="wp-block-cover__image-background" alt="" src="https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/pd36-2-pia11735_orig.jpg?w=1200&amp;h=1200&amp;fit=clip&amp;crop=default&amp;dpr=1&amp;q=75&amp;vib=3&amp;con=3&amp;usm=15&amp;cs=srgb&amp;bg=F4F4F3&amp;ixlib=js-2.2.1&amp;s=44e5721d038ddca51c84b8ff96099368" style="object-position:37% 47%" data-object-fit="cover" data-object-position="37% 47%" /><div class="wp-block-cover__inner-container"><!-- wp:group {"layout":{"contentSize":"600px"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":5,"textColor":"white","fontSize":"large"} -->
<h5 class="has-white-color has-text-color has-large-font-size">Categoría o subtítulo</h5>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2>Un titular convincente que atraiga a los lectores a tu contenido.</h2>
<!-- /wp:heading -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"pale-cyan-blue","textColor":"black","className":"is-style-fill"} -->
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-black-color has-pale-cyan-blue-background-color has-text-color has-background wp-element-button">Llamada a la acción</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->