Color Swatches: Default Colors

  • Primary
  • Secondary
  • Accent
  • Accent 2

Color Swatches: Darker & Lighter Values

Primary
Lighter
Primary
Default
Primary
Darker
Secondary
Lighter
Secondary
Default
Secondary
Darker
Accent
Lighter
Accent
Default
Accent
Darker
Accent 2
Lighter
Accent 2
Default
Accent 2
Darker

Fonts

Font for Headings

  • Noto Serif
 

Font for Callouts

  • Bree

Font for Body Text

  • Arno Pro -Regular
  • Arno Pro - Italic
  • Arno Pro - Semibold
  • Arno Pro - Semibold italic
  • Arno Pro - Bold
  • Arno Pro - Bold italic

Text Styles

Post & Page Titles (Heading 1)

This is an example of a paragraph. We keep the main body of text at a nice legible size — 20 pixels — for reading. You may think the font size is a bit large, but it's a good size for the average distance someone sits from a computer/laptop screen. Consideration will be given for scaling the font size smaller for mobile devices.

Sub-headings (Heading 2)

It's always good to break-up large bodies of text with subheadings. People like to skim articles and pages on the Web. Be sure your sub-headings are useful for the type of content you post, or your own unique style of writing.

Additional Styling

The following are some additional Heading styles you may use on your site, though it is not common to use anything below a Heading 3.

Heading 3

Heading 4

Heading 5

Callouts & Quotes: If a callout or quote is needed within the main body text, and it's not going to be in an image, this font, Bree, would be appropriate to add some fun styling to set it apart.

This is an example of Text Link Styling. Be sure to hover over the text link on your computer to see how it changes. If you are on a smartphone or tablet hovering doesn't work.

If you want to add emphasis you can easily Bold or Italicize text. What about underlining? Don't use it, it's confusing to most people because text links are commonly underlined.

Lists are great ways to present information. They're easy to skim, and help get information across quickly. The following are example styles of an unordered list and ordered list.

Unordered List

  • Han Solo
  • Chewbacca
  • Qui-Gon Jinn
  • Obi-Wan Kenobi
  • R2-D2

Ordered List

  1. Qui-Gon Jinn
  2. Han Solo
  3. Obi-Wan Kenobi
  4. R2-D2
  5. Chewbacca

Button Styles

Typically, only one button style is used on a site, but if more uses for different buttons arise we've prepared different options.