Style Guide
Image Sizes
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.
2000x1000px
- CTA Block BKGD (JPG)
- Home Hero Block, BKGD (JPG)
- Hero Block Inline Image (JPG or PNG)
- Image & Text Block, Large Image Option (JPG) – Not often used.
2000x500px (NOT CONFIRMED)
- Home Hero Block, Product Collage (PNG)
1000 x 1000px
- Product, Filter, & Accessory Images
- CTA Block Standard Image (JPG)
- CTA Block Inline Image (PNG)
1000 x 666px
- Image & Text Block (JPG or PNG)
- Image Cards Block (JPG)
- Columns Block (JPG)
- Insights Blog Post Thumbnails (JPG)
200 x 200px
Note: For the SVGs, the site’s CSS will change color to appropriate blue, based on BKGD color, to meet accessibility requirements.
- Blurb Block Images (JPG or PNG) or Icons (SVG)
- Stats Block Icons (SVG)
Logos
- 500 x 250px for Logo Page Block (PNG preferred, JPG requires matching BKGD color of block)
- 500 x 250px for Events & Tradeshows (PNG or JPG)
- Varying Width x 250px for certification logos that appear on product detail pages (PNG or JPG)
Mega Menu Images
Note: Smaller size is used for photo type images to save file size, but the product collages require 750 size to look sharp on their white BKGD.
- 375 x 100px for Ice & Industry Photos (JPG)
- 750 x 200px for Refrigeration Product Shots (JPG with white BKGD)
Document Cover Thumbnails
- 170 x 220px (JPG) recommended
Font Specifics
Mostly used for development but can also be a reference point. Listed mobile first.
- Text over white or gray: #1A1A1A
- Text over black or charcoal: #FFF
- Buttons, link underlines, bullets, etc over white or gray: #009FDB
- Buttons, link underlines, bullets, etc over white or gray: #00AEEF
- H1 Mobile: Medium, 26/36px, Margin: 0 0 15px; Padding: 0;
- H1 Tablet: 42/52px, Margin: 0 0 20px;
- H1 Desktop: 48/58px
- H2 Mobile: Medium, 26/36px, Margin: 0 0 15px; Padding: 0;
- H2 Tablet: 36/48px
- H2 Desktop: 42/54px
- H3 Mobile: Medium, 22/32px, Margin: 0 0 10px; Padding: 10px 0 0;
- H3 Tablet & Desktop: 28/36px;
- H4: Extrabold, 20/26px, Margin: 0 0 10px; Padding: 0;
- H5: Medium, 20/26px, Margin: 0 0 10px; Padding: 0;
- H6: Extrabold, 16/22px, Margin: 0 0 10px; Padding: 0;
- P Mobile: Regular, 15/25px; Margin: 0 0 20px; Padding: 0;
- P Tablet & Desktop: 16/28px;
- P Intro Mobile: 18/28px;
- P Intro Tablet & Desktop: 20/30px;
- Pretitle: Medium, 15/20px; Margin: 0 0 10px; Padding: 0;
- UL/OL: Margin: 0 0 0 25px; Padding: 5px 0 25px; (see content styles for annotations)
- LIs Mobile: Regular, 15/25px; Margin: 0 0 15px; Padding: 0; (see design for bullet spacing)
- LIs Tablet & Desktop: 16/28px; Margin: 0 0 16px;
- HRs over white or gray: 1px tall, rgba(26,26,26,0.1), 40px on top/bottom
- HRs over black: rgba(255,255,255,0.1)
- Bold/Strong: Extrabold weight
- Buttons: For accessibility reasons, Extrabold 18.5/22px (see design for rest)
- CTA Links: Extrabold 16/22px (see design for rest)
Site Color Values
| #FFF | |
| #F0F0F0 | |
| #323E48 | |
| #1A1A1A | |
| #009FDB | |
| #00AEEF |