Style Guide


  • Primary
  • Secondary
  • Accent
  • Neutral

Primary
Lighter
Primary
Default
Primary
Darker
Secondary
Lighter
Secondary
Default
Secondary
Darker
Accent
Lighter
Accent
Default
Accent
Darker
Neutral
Lighter
Neutral
Default
Neutral
Darker

Fonts

Fonts for Headings

h1. Blambot Pro

h2. Blambot Pro

h3. Blambot Pro

Font for Body Text

Rooney Web Regular
Rooney Web Bold
Rooney Web Italic
Rooney Web Bold Italic
 


Text Styles

Post & Page Titles (h1)

This is an example of a paragraph. We keep the main body of text at a nice legible size — 16-18 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 down for mobile devices.

Sub-headings (h2)

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.

Quote. Ugnaught zabrak vella dantari Galen rahm moor aayla gwurran.

Additional Styling

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

Heading 3

Heading 4

Heading 5
Heading 6

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


Examples of how your social media icons will look on your site.

Instagram Block

Twitter Block


Advertisements

Leaderboard above Navigation

Leaderboard above Navigation