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.
#b0d28c
#7ccdca
#ee89b1
#f4d758
#2f2f2f
#818285
#f7f7f7
#ffffff
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>
