This page demonstrates the various style elements and calls-to-action as dictated by the current style guides of this site.

---

Colors

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

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: Font Name

Heading 2: Font Name

Heading 3: Font Name

Heading 4: Font Name

Heading 5: Font Name

Heading 6: Font Name

Typical body text and the font that should be used.

This is a quote for when you want to quote someone.

---

Calls to Action

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

.button
.green-button
.yellow-button
.pink-button

<a href="LINK" class="button CLASS">TEXT</a>

---

Special Text Blocks

Special text blocks may be needed at times to draw extra attention to give specific notes or add typographic emphasis. Here are the various special text blocks.

This is the .define class used for things like definitions and such.

This is the .notice class used to draw special attention to text inside a blog post either for citing the blog post as part of a series or small annotations.

<p class="CLASS">TEXT</p>