Website Style Guide

Logo

Company Logo

Fonts

NOTE: All font sizes are based from the body size, and a browsers default font-size is 16px = 1rem. This site has a body font-size at 14px XL Desktop >= 1200W, and .813rem/13px for < 1200W and below, and the "rem" size of elements inside of the body are a percentage of that rem size: 14px/.813rem. SO, an h1 of size 1.25rem is 100% of the body + .25% larger meaning 17.55px > 1199W, or 16.25px <1200W;

Body: Montserrat, Noto Sans, sans-serif; font-size: 14px >1199W / .813rem, or 13px <1200W equivalent;

Header Tags

H1 font-size: 1.25rem >1200W 17.5px, <1200W = 16.25px

H2 font-size: 1.1rem >1200W 15.4px, <1200W = 14.3px

H3 font-size: 0.9rem >1200W 12.6px, <1200W = 11.7px

H6 font-size: 0.85rem >1200W 11.9px, <1200W = 11px

Colors

primary-color-dark: #3b4459
very-light-gray: #F7F7F7
primary-color-light: #EAE7E3
dark-silver: #707070
sbf-charcoal: #616161
very-dark-gray: #4d4d4d
secondary-gray: #4e4b48
secondary-dark-gray: #3b4459
secondary-blue: #004a88
secondary-light: #e44261
secondary-black: #0E191C

Buttons

standard-button: #3b4459
Hover: #616161
standard-reverse-button: #616161
Hover: #3b4459
standard-white-button: #ffffff
Hover: #616161

Links

plain link #909090, font-size: >1200W 14px, <1200W = .813rem / 13px equivalent; dark link #000000, font-size: >1200W 14px, <1200W = .813rem / 13px equivalent; a-primary-color link #3b4459, font-size: >1200W 14px, <1200W = .813rem / 13px equivalent;

Menu Items

Header Nav #6a6a6a, font-size: .9rem >1200W 12.6px, <1200W = .9rem /11.7px equivalent; font-weight: bold; Drop down list #6a6a6a, font-size: .9rem >1200W 12.6px, <1200W = .9rem /11.7px equivalent; font-weight: 400; Drop down hover background: #3b4459, color: #ffffff, font-size: .9rem >1200W 12.6px, <1200W = .9rem /11.7px equivalent; font-weight: 400;

Footer

primary-color-dark: #3b4459
footer lower background: #2e2e2e