Style Guide
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.
Image Sizes
- Header Images: 750 × 750px JPGs
- Logos: 150 × 70px PNGs with transparent BKGDs
- Video Thumbnails: 1000 × 560px JPGs
- Image Page Block Images: 750 × 750px JPG
- Columns & Cards Images: 750 × 375px JPG (note this is the recommended size for flush to edge images, but any size is ok for inline images)
- Columns & Cards Icons: 64 × 64px PNGs or SVGs
- 2 Column CTA Block Image: 750 × 750px JPG
- Testimonial & Student Story Headshot: 250 × 250px JPG
Site Color Values
| #FFF | |
| #E0EAF8 | |
| #0D0F4A | |
| #EF6E47 | |
| #E85428 | |
| #3F64DD |
Font Specifics
- Fonts Used: Poppins (Light, Semibold), Inter (Light, Semibold) — Italics too if not too heavy (Both are Google Fonts) – • /
- Headers & Text over Light Blue and White – • / • Color: #0D0F4A
- Headers & Text over Navy – • / • Color: #FFF
- H1: Mobile – Poppins, 600 • 28/36 • Color: #FFF • Letter-Spacing: -0.25px • Margin: 0 0 20px; Padding: 0;
- H1: Tablet – • 42/52px • Letter-Spacing: -0.5px
- H1: Desktop – • 48/58px
- H2: Mobile – Poppins, 600 • 28/36px • Letter-Spacing: -0.25 • Margin: 0 0 20px; Padding: 0;
- H2: Tablet – • 42/52 • Letter-Spacing: -0.5px
- H2: Desktop – • 44/54px
- H3: Mobile – Poppins, 600 • 24/32px • Letter-Spacing: -0.25px • Margin: 0 0 15px; Padding: 10px 0 0;
- H3: Tablet & Desktop – • 30/38px • Letter-Spacing: -0.5px • Margin: 0 0 20px; Padding: 10px 0 0;
- H4: Mobile – Poppins, 600 • 18/25px • Letter-Spacing: -0.25px • Margin: 0 0 15px; Padding: 0;
- H4: Tablet & Mobile – • 24/34px • Color: -0.5px
- H5: Mobile – Poppins, 600 • 16/22px • Margin: 0 0 15px; Padding: 0;
- H5: Desktop & Tablet – • 20/26px • Letter-Spacing: -0.25px
- H6: Mobile – Poppins, 600, ALL CAPS • 13/16px • Letter-Spacing: 3px • Margin: 0 0 15px; Padding: 0;
- H6: Tablet & Desktop – • 15/20px
- Paragraph Text: Mobile – Inter, 300 • 16/25 • Letter-Spacing: -0.25px • Margin: 0 0 20px; Padding: 0;
- Paragraph Text: Tablet & Desktop: – • 17/28px
- Intro Class: Mobile – • 20/30px
- Intro Class: Tablet & Desktop – • 24/34px
- Pre-Title Class: Mobile – Inter, 600, ALL CAPS • 13/16px • Margin: 3px
- Pre-Title Class: Tablet & Destkop – • 15/20px
- UL, OL – • / • Margin: 0 0 10px; Padding: 5px 0 0;
- LI’s: Mobile – • 16/25px • Letter-Spacing: -0.25px • Margin: 0 0 15px; Padding: 0; (please reference design for indent spacing)
- LI’s: Tablet & Desktop – • 17/28px
- Text Links – Bottom Border (can we use a linear-gradient so we can animate L→R) • /
- Buttons – Inter, 600 • 18.5px/18.5px
- CTA Links – Inter, 600 • 18.5px/24px • Letter-Spacing: -0.25px
- Borders, Buttons, Bullets, Accents over Light Blue – • / • Color: #E85428
- Borders, Buttons, Bullets, Accents over White or Navy – • / • Color: #EF6E47
- Borders, Buttons, Bullets, Accents in Hack Reactor Pages for All BKGDs – • / • Color: #3F64DD
- CTA Links in Hack Reactor Pages over Navy – • / • Color: #4B72F4