This page demonstrates the various style elements and calls-to-action as dictated by the current brand style guidelines of DustinStout.com.

---

Color and its use throughout a website is a crucial part of the branding puzzle. Use the following colors, and the following colors only throughout this site.

Brighter colors should only be used in moderation and when drawing attention to specific calls-to-action.

---

Typography is among the most important of elements in any web design. This is why the utmost of care must be taken when crafting the style of each typographic element.

Heading 1: The Quick Brown Fox

Heading 2: Jumps over the lazy dog

Heading 3: Two driven jocks help

Heading 4: Fax my big quiz

Heading 5: Pack my box with

Heading 6: Five dozen liquor jugs

Regular body text: The job requires extra pluck and zeal from every young wage earner.

Bold body text: The job requires extra pluck and zeal from every young wage earner.

300 body text: The job requires extra pluck and zeal from every young wage earner.

400 body text: The job requires extra pluck and zeal from every young wage earner.

500 body text: The job requires extra pluck and zeal from every young wage earner.

600 body text: The job requires extra pluck and zeal from every young wage earner.

700 body text: The job requires extra pluck and zeal from every young wage earner.

800 body text: The job requires extra pluck and zeal from every young wage earner.

900 body text: The job requires extra pluck and zeal from every young wage earner.

Quote (Default): Waltz, bad nymph, for quick jigs vex.

Quote Author

Quote (Plain): Waltz, bad nymph, for quick jigs vex.

Quote Author

Pullquote: Waltz, bad nymph, for quick jigs vex.

Quote Author

This is a bit of text with some inline code example.

This is a block of pre-formatted text.
I don't know what it would be used for.

I suppose we'll find out.

Below is a code block example:

.button {
    background-color: var(--color-primary);
    border-radius: 100px;
    color: var(--color-base-00);
}

---

Buttons are critical if you want to move people to action. Here’s the various kinds found on this site:

---

Special text blocks are great for calling attention to important pieces of text. Here’s how to use them throughout this site.

This is a standard paragraph where I have used the Gutenberg editor options to add a background color. It should automatically have padding and the text + link should be clearly visible.

This is a standard paragraph where I have used the Gutenberg editor options to add a background color. It should automatically have padding and the text + link should be clearly visible.

This is a standard paragraph where I have used the Gutenberg editor options to add a background color. It should automatically have padding and the text + link should be clearly visible.

---

Patterns help give consistency to things such as calls to action, callouts, and other objects of high importance. More patterns to come.