Style Guide

Consider using this if you need to provide more context on why you do what you do. Be engaging. Focus on delivering value to your visitors.

Call To Action

TYPOGRAPHY HEADINGS, PARAGRAPHS, LISTS, AND OTHER INLINE-TYPE ELEMENTS

Headings & Copy

H1. Heading 1

Font: PT Sans Narrow 700, 2.5 Rem (40 px), #4A5568, Line-Height 2.8 rem, Letter Spacing .15 rem, caps

H1 – The quick brown fox jumped over the lazy dog.

H2. Heading 2

Font: PT Sans 700, 2.1 rem (40 px), #2D3748, Line-Height 2.7 rem, Letter spacing .07

H2 – The quick brown fox jumped over the lazy dog.

H3. Heading 3

Font: Source Sans Pro 900, 1.75 rem (28 px), #1A202C, Line-Height 1.9 rem

H3 – The quick brown fox jumped over the lazy dog.

H4. Heading 4

Font: Source Sans Pro 700, 1.25 rem (20 px), #317523, Line-Height 1.6 rem, Letter spacing .015, all caps

H4 – The quick brown fox jumped over the lazy dog.

H5. Heading 5

Font: PT Sans Narrow, Regular, 1 rem (20 px), #2D3748, Line-Height 1.3 rem

H5 – The quick brown fox jumped over the lazy dog.
H6. Heading 6

Font: Source Sans Pro 600Italic, 1 rem (20 px), #4A5568, Line-Height 1.3 rem

H6 – The quick brown fox jumped over the lazy dog.

Links

This is how link text shows up in your paragraph.

Paragraph

Paragraph
Font: Source Sans Pro Regular, 1.2 rem, #4A5568, Line-height 1.45 rem

Bold – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Italics – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum nisi non neque hendrerit, vitae vulputate tortor vestibulum. Suspendisse potenti. Morbi cursus est vitae dui blandit pharetra. Praesent consequat quis urna a ultrices. Pellentesque malesuada est at tempor pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

“Testimonials, as authentic endorsements from satisfied customers, serve as potent social proof, significantly inspiring trust in potential consumers.”

Name

“Testimonials, as authentic endorsements from satisfied customers, serve as potent social proof, significantly inspiring trust in potential consumers.”

Name

Block Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.

Jane P. Normal, CEO of Company

Lists

Unordered List

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

ordered List

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Phasellus iaculis neque
  7. Purus sodales ultricies
  8. Vestibulum laoreet porttitor sem
  9. Ac tristique libero volutpat at
  10. Faucibus porta lacus fringilla vel
  11. Aenean sit amet erat nunc
  12. Eget porttitor lorem

Media

Full-Width Background mage

Medium

Thumbnail

Colors

,

Buttons

Button
Alternative Button

Content Width

The width of content greatly affects the readability of a paragraph of text. Considering the base font size:

  • The default content width for this site is xxxx (ie. 1000) px wide.
  • The default row padding is x, x, x, x (ie. 104 px, 104 px, 104 px, 104 px.)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum nisi non neque hendrerit, vitae vulputate tortor vestibulum. Suspendisse potenti. Morbi cursus est vitae dui blandit pharetra. Praesent consequat quis urna a ultrices. Pellentesque malesuada est at tempor pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec augue massa. Cras in ultricies purus. Quisque vitae luctus diam. Quisque risus orci, lobortis vitae magna a, mattis molestie urna. Maecenas posuere ac eros sit amet consectetur. Nullam est sem, congue vitae nisl eu, ornare feugiat tortor. Vestibulum volutpat sapien quis turpis tempor, et sollicitudin leo hendrerit. Pellentesque a imperdiet lorem, sed pharetra lacus. Donec vitae ullamcorper mi, at imperdiet ex. Nam ac suscipit justo.

Aliquam orci felis, rutrum at lacus vel, mattis congue sapien. Nam sapien nisl, bibendum non sapien porttitor, luctus accumsan erat. Cras mattis tempus lectus ac gravida. Etiam eu nisi egestas, elementum ligula mattis, scelerisque lorem. Maecenas facilisis magna enim, eget congue ante euismod et. Sed aliquet ullamcorper quam, vel pretium turpis euismod ac. Mauris ut justo leo. Suspendisse in suscipit ante.

Aenean laoreet suscipit nulla, ac maximus eros blandit mattis. Pellentesque vitae ex vel diam sodales congue. Donec eu ligula eget nunc laoreet ullamcorper quis eget sapien. Morbi sit amet pellentesque augue. Vestibulum fermentum convallis augue non tristique. Nam posuere dapibus erat, id viverra arcu auctor in. Nulla condimentum ex et commodo lobortis. Phasellus id tellus eget mi luctus pharetra. In sed ornare orci, non suscipit metus. Mauris ut vehicula nisl, quis dapibus mauris. Suspendisse sapien eros, vulputate quis pulvinar id, sodales mollis justo. Donec ac felis nunc. Sed consectetur, eros sit amet interdum feugiat, odio purus commodo orci, id tincidunt felis justo vitae massa. Aliquam tincidunt aliquet justo, sit amet vestibulum urna pretium sagittis.

Quisque sit amet pulvinar urna. Nulla pharetra in urna ac tempus. Pellentesque lobortis semper ultricies. Ut vehicula vel nibh convallis commodo. Suspendisse sed ullamcorper lorem. Quisque auctor maximus eros, congue mollis elit euismod vitae. Aenean at accumsan urna. Integer quis tincidunt libero. In nec diam feugiat, pulvinar purus non, dictum turpis. Sed venenatis, justo sed cursus lobortis, odio nulla condimentum ipsum, at dignissim dolor libero in arcu. Donec ut justo lobortis, porttitor sapien vel, iaculis arcu. Vivamus a leo eget est mattis sagittis et ac nulla.

Nunc tempor, nulla non posuere fermentum, augue ipsum pulvinar ex, in blandit arcu risus vitae nulla. Aenean sit amet pulvinar ante. Nam sodales orci placerat feugiat elementum. Duis nec orci porta est euismod lobortis eget id velit. Sed accumsan est ut pharetra sagittis. Nulla interdum vel dui ullamcorper porttitor. In vehicula lobortis elit, vel elementum lectus semper quis. Mauris imperdiet tellus in venenatis feugiat. Quisque lobortis risus ac orci imperdiet, ullamcorper porta metus ultricies. Maecenas vitae justo tellus. Aliquam dignissim vehicula euismod. Phasellus vel mattis elit.