Canada
UK
France
AustraliaLANDING PAGE TEMPLATE AND STYLE GUIDE - 2025
Become a Pixel Perfect Ninja!
336 x 525px - Vertical Banners - LINK TO CANVA TEMPLATE ITW
CTA one line 2-3 simple direct words max, text option examples: SHOP NOW, SHOP SALE, LEARN MORE, CONTACT US
24px Bold, max 2-lines, 45 max characters
Paragraph: 18px, max 3-Lines (95 max characters including spaces), 20px margins.
24px Bold, max 2-lines, 45 max characters
Paragraph: 18px, max 3-Lines (95 max characters including spaces), 20px margins.
24px Bold, max 2-lines, 45 max characters
Paragraph: 18px, max 3-Lines (95 max characters including spaces), 20px margins.
Magento: 4/14 Columns with 15px margin - Set column height to 525px min, align top
1120 x 400px Horizontal Banner - LINK TO CANVA TEMPLATE ITW
CTA one line 2-3 simple direct words max, text option examples: SHOP NOW, SHOP SALE, LEARN MORE, CONTACT US
Header: 28px Bold, max 2-lines, 60 max characters, 40px margin
Paragraph: 20px, max 3-Lines (135 max characters including spaces) use a text color that contrasts with Header. 40px margin.
Magento: 5/12 Columns - Set column height to 400px min, align middle
1120 x 400px Horizontal Slide-Show Banner - LINK TO CANVA TEMPLATE ITW
Note: Please only feature up to 4 slide images
CTA one line 2-3 simple direct words max, text option examples: SHOP NOW, SHOP SALE, LEARN MORE, CONTACT US
Header: 28px Bold, max 2-lines, 60 max characters, 40px margin
Paragraph: 20px, max 3-Lines (135 max characters including spaces) use a text color that contrasts with Header, 40px margin.
Magento: 5/12 Columns - Set column height to 400px min, align middle
1120 x 185px Thin Banner - LINK TO CANVA TEMPLATE ITW
Use 10px margins – No text smaller than 16px (see example)
Save as PNG file format so text stays sharp, unless animated GIF file.
Hero Images
1200x400 desktop - See colored image zones.
See example below how the zones will appear.
Hero Header: 32px Bold, max 3-lines, 70 characters max, 40px margin
Paragraph: 20px, max 3-Lines, 135 max characters, use a text color that contrasts so header is first focal point you see. 40px margin.
Green zone should be focal point, note it stays to the right of the text box when resized.
Green zone is cropped to 600px wide for mobile.
Magento: Set row background image to align upper center
Performance Health Color & Style Guide
Primary Colors
Yale Blue
Hex: #004691
RGB: 0/70/145
CMYK: 100, 52, 0, 43
Pantone: 306
Pacific Blue
Hex: #00B5D8
RGB: 0/181/216
CMYK: 100, 16, 0, 15
Pantone: 7686
Upsdell Red
Hex: #AE2029
RGB: 174, 32, 41
CMYK: 0, 82, 76, 32
Pantone:
Eerie Black
Hex: #1D1D1B
RGB: 29/29/27
CMYK: 0, 0, 7, 89
Pantone:
Complementary Colors
Paradise Pink
Hex: #EF476F
RGB: 239/71/111
CMYK: 0, 70, 54, 6
Pantone:
Lavender Floral
Hex: #C589E8
RGB: 197/137/232
CMYK: 15, 41, 0, 9
Pantone:
Outrageous Orange
Hex: #F96E46
RGB: 249/110/70
CMYK: 0, 56, 72, 2
Pantone:
Sunglow
Hex: #FDCA40
RGB: 253/202/64
CMYK: 0, 20, 75, 1
Pantone:
Caribbean Green
Hex: #26C485
RGB: 38/196/133
CMYK: 81, 0, 32, 23
Pantone:
Sandy Brown
Hex: #FCAA67
RGB: 252/170/103
CMYK: 0, 33, 59, 1
Pantone:
Magic Mint
Hex: #A5F8D3
RGB: 165/248/211
CMYK: 33, 0, 15, 3
Pantone:
Misty Rose
Hex: #E5D1D0
RGB: 229/209/208
CMYK: 0, 9, 9, 10
Pantone:
Cool Grey
Hex: #938BA1
RGB: 147/139/161
CMYK: 9, 14, 0, 37
Pantone:
Font Family
Primary Font:
Secondary Font:
