The style guide pattern features the default blocks and sample color treatments for creating a style guide page on your website. This pattern is an easy way to add the default heading, text, button, quote, and sample image cover content to a site you are styling. Deliver the style guide with a client’s website for easy reference and design adherence.

typography


Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph typography. 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!


colours

#000000

#ABB8C3

#0693E3

#8ED1FC


Buttons


quotes

Default Quote

Your destiny lies with me, Skywalker. Obi-Wan knew this to be true. No! All to easy. Perhaps you are not as strong as the Emperor thought. Impressive…most impressive. Obi-Wan has taught you well. You have controlled your fear.

Darth Vader

Plain Quote

Your destiny lies with me, Skywalker. Obi-Wan knew this to be true. No! All to easy. Perhaps you are not as strong as the Emperor thought. Impressive…most impressive. Obi-Wan has taught you well. You have controlled your fear.

Darth Vader

Pullquotes

Quotes that can be placed between text blocks or positioned alongside them on the left or right.

Pullquote with no alignment.

Obi-Wan knew this to be true.

Darth Vader

Pullquote with wide alignment.

No! All to easy. Perhaps you are not as strong as the Emperor thought.

Darth Vader

Pullquote with full width alignment

Impressive…most impressive. Obi-Wan has taught you well. You have controlled your fear.

Pullquote with left and right alignment.

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.

Your destiny lies with me, Skywalker.

Darth Vader, left-aligned pullquote

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.

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.

Red Leader, we’re right above you. Turn to point. oh-five, we’ll cover for you. Stay there. I just lost my starboard engine. Get set to make your attack run. Biggs, Wedge, let’s close it up.

Your destiny lies with me, Skywalker.

Darth Vader, right-aligned pullquote

You wouldn’t want my life to get boring, would you? Luke, the Force will be with you. All wings report in. Red Ten standing by. Red Seven standing by. Red Three standing by. Red Six standing by. Red Nine standing by.

Keep half your group out of range for the next run. Copy, Base One. Luke, take Red Two and Three. Hold up here and wait for my signal…to start your run.

She’s the one in the message.. We’ve got to help her. Now, look, don’t get any funny ideas. The old man wants us to wait right here.

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.


Sample Text and Color Treatment

Category or Subheading

A compelling headline that draws readers into your content.