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.
#5D3D62
#73628A
#CBC5EA
#EAEAEA
#4381C1
#00487C
#293241
#222222
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: Playfair Display
Heading 2: Playfair Display
Heading 3: Playfair Display
Heading 4: Playfair Display
Heading 5: Playfair Display
Heading 6: Lato
Typical body text and the font that should be used is Lato.
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
.cta-button
.clear-button
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.