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
- Qui-Gon Jinn
- Han Solo
- Obi-Wan Kenobi
- R2-D2
- 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.