Style Guide
UPDATED for September 2020 Rebrand: Please reference the list below whenever you're creating new images for your site. You should find a size for all possible images you'll need/use.
Font Specifics
- H1 - Barlow Condensed, 700, ALL CAPS • 48px/1.14 • Color: #000 • Margin: 0 0 20px
- H2 - Barlow Condensed, 500 • 36px/1.13 • Color: #111 • Margin: 0 0 15px
- H3 - Barlow Condensed, 400, ALL CAPS • 30px/1.14 • Color: #111 • Letter-Spacing: 0.2px • Margin: 0 0 15px
- H4 - Bitter, 500 • 22px/1.6 • Color: #111 • Margin: 0 0 30px
- H5 - Barlow, 500 • 22px/3.3rem • Color: #333 • Margin: 0 0 10px
- H6 - Bitter, 700 • 16px/1.3 • Color: #333 • Letter-Spacing: 0.05em • Margin: 0 0 10px
- Paragraph Text / Unordered List Text - Bitter, 400 • 16px/2 • Color: #222 • Letter-Spacing: 0.2px • Margin: 0 0 20px
Site Color Values
#E4002B |
|
#000 |
|
#444 |
Please reference the list below for image, font and color specifications for the ATIpt.com website.
Image Sizes
- Home Hero: 1400px × 750px
- Home Patient Info Image: 600px × 450px
- Home Featured Therapies Images: 600px × 380px
- Full-Width Image Block: 1400px × 650px
- 3 Across Images: 600px × 600px
- Interior Header Images: 1400px × 350px
- Page Block Images: 600px × 400px (Any Height)
- Sidebar Images: 600px × 600px (Any Height)
OLD Font Specifics
- H1 - Abril Text Regular, 400 • 48px/55px • Color: #2a2425 • Letter-Spacing: 0px • Margin: 0px 0px 20px
- H1 - Tablet - • 43px/58px
- H1 - Mobile - • 31px/48px
- H2 - Abril Text Regular, 400 • 38px/38px • Color: #2a2425 • Letter-Spacing: 0px • Margin: 10px 0px 15px
- H2 - Mobile - • 26px/30px
- H3 - Abril Text Regular, 400 • 30px/38px • Color: #2a2425 • Letter-Spacing: 50px • Margin: 10px 0px 10px
- H3 - Tablet - • 24px/30px
- H3 - Mobile - • 21px/25px
- H4 - • 26px/40px • Color: #a5a5a5 • Letter-Spacing: 25px • Margin: 0px 0px 35px
- H4 - Tablet - • 24px/35px
- H4 - Mobile - • 21px/35px
- H5 - Abril Text Regular, 400 • 22px/24px • Color: #2a2425 • Letter-Spacing: 0px • Margin: 20px 0px 10px
- H5 - Mobile - • 18px/24px
- H6 - Tahoma, Bold • 16px/21px • Color: #2a2425 • Letter-Spacing: 50px • Margin: 20px 0px 10px
- Block Quote - Abril Text Italic, 400, Italic • 26px/40px • Color: #a5a5a5 • Letter-Spacing: 25px • Margin: 40px 0px 44px 90px
- Block Quote - Tablet - • 24px/35px • Margin: 30px 0px 45px 90px
- Block Quote - Mobile - • 23px/34px • Margin: 20px 0px 35px 70px
- Paragraph Text - Tahoma, 400 • 16px/28px • Color: #414042 • Letter-Spacing: 0px • Margin: 0px 0px 20px
OLD Site Color Values
#a11927 |
|
#bf1e2e |
|
#282324 |
|
#372f31 |
|
#f4f4f4 |
|
#332c2e |
|
#201c1d |