Style Guide

  • Headings H1—H3 – typeface: EB Garamond (Google fonts), size: 69px 42px 35px, color: #5d5d5d, style: italics
  • Heading H4 – typeface: Muli (Google fonts), size: 23px, color: #5d5d5d
  • Heading H5 – typeface: Muli (Google fonts), size: 30px, color: #5d5d5d, transform: uppercase
  • Heading H6 – typeface: EB Garamond (Google fonts), size: 23px, color: #5d5d5d, style: bold, transform: uppercase

H1 Heading – used for Titles

H2 Heading – used for Main Content Sub Titles

H3 Heading – used for Main Content Sub Titles of H2

H4 Heading – used for Meta Data, e.g., Navigation, Categories, Footer

H5 Heading – used for Titles on Sidebar
H6 Heading – to be determined
  • Body – typeface: EB Garamond (Google fonts), size: 23px, color: #393939
  • Drop Cap – size: 91px, transform: uppercase
  • Blockquote – typeface: EB Garamond (Google fonts), size: 26px, color: #5d5d5d, style: italics, border: 1px #f6f6f6, border-left: 6px #c9c9c9, box-shadow
  • Pullquote – typeface: EB Garamond (Google fonts), size: 26px, color: #5d5d5d, style: normal, border-top: 4px #c9c9c9, border-bottom: 4px #c9c9c9
  • Box – class irw-background – size: 26px, background: #f6f6f6, border: 1px #ededed, border-top: 6px #4187bf

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Integer quam nunc, consequat nec egestas ac, volutpat ac nisi. Sed consectetur dignissim dignissim. Donec pretium est sit amet ipsum fringilla feugiat. Aliquam erat volutpat. Maecenas scelerisque, orci sit amet cursus tincidunt, libero nisl eleifend tortor, vitae.

—Bob’s your Uncle

Integer quam nunc, consequat nec egestas ac, volutpat ac nisi. Sed consectetur dignissim dignissim. Donec pretium est sit amet ipsum fringilla feugiat. Aliquam erat volutpat. Maecenas scelerisque, orci sit amet cursus tincidunt, libero nisl eleifend tortor, vitae.

Bob’s your Uncle

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Small Button – class irw-small-button – typeface: Muli (Google font), transform: uppercase, color: #ffffff; weight: bold, background-color: #4187bf; hover & border: #3977a8, size: 16px, padding: 12px 24px, border-radius: 4px, box-shadow
  • Medium Button & Submit Form Button – class irw-medium-button – typeface: Muli (Google font), transform: uppercase, color: #ffffff; weight: bold, background-color: #4187bf; hover & border: #3977a8, size: 20px, padding: 15px 30px, border-radius: 6px, box-shadow
  • Small Transparent Button – class irw-small-transparent-button – same as “Small Button”, except color: #3977a8, background-color: transparent, hover: #3977a8, border: 2px #3977a8
  • Medium Transparent Button – class irw-medium-transparent-button – same as “Medium Button”, except color: #3977a8, background-color: transparent, hover: #3977a8, border: 2px #3977a8

Scroll to Top