Return to flip book view

NFL SHOP STYLE GUIDE REV 10 2018

MISSION As the official online store of the NFL our goal is to enhance the fan shopping experience by representing the core of the sport

INSPIRATION NFL SHOP STYLE GUIDE REV 10 2018 THE CALL OF THE GAME We carry the flag as the OFFICIALLY LICENSED site of the NFL therefore our focus stays centered on the game players and conveying the power pride strength and toughness associated with sport of football Using this as our foundation for creative and visuals we will align our output with theming and messaging that reinforces these core values Football is a battle that draws from mental a physical abilities A game of contrast one side vs another offense vs defense the quick and nimble mixed in with the static and strong and moving the ball one direction or the other

INSPIRATION NFL SHOP STYLE GUIDE REV 10 2018 CORE TENEMANTS The souce for inspiration and keeping our creative on track lies in core terms brought to the forefront through a word cloud process Users were asked to generate a list of terms they associate with the sport of football Words mentioned more than once across the whole group are highighted below Brief definitions give additional context guidance and a baseline to judge creative output tone and imagery Amount of energy Pleasure derived from achievements State of being strong Involving difficulty Withstanding adverse conditions

IMPLEMENTATION NFL SHOP STYLE GUIDE REV 10 2018 IMAGERY TONE Metal concrete environments abstractions with contrast and textures convey the strength and boldness of the game and reference back to stadiums Key terms that generate the look are modern abstract industrial clean lines geometric Not grunge dirt decay which could communicate chaos and dissaray Bold contarst also plays a part in portraying the opposing sides and the duality of the game It can be mental vs physical offense vs defense quick and nimble in contrast to big and barrier wall There are always two sides in contrast or in combat with eachother

DESIGN ELEMENTS NFL SHOP STYLE GUIDE REV 10 2018 SIDELINE STROKE Football is a game of lines Line of scrimmage 1st down out of bounds The game is built around these rules We incorporate them as the baseline of creative

DESIGN ELEMENTS NFL SHOP STYLE GUIDE REV 10 2018 SIDELINE STROKE CONSTRUCTION GRAPHIC ELEMENTS 363437 Sideline Stroke 1d1d1d backer box set to 88 opacity TYPESETTING SHOP NOW CTA 30px Top Padding 25px SHOP NOW 15px Sideline Stroke 10px Padding 30px Left Padding 78px type 30px Right Padding 10px Padding 15px Sideline Stroke 30px Bottom Padding 15px Spacing 85px X 75px CTA Carrot Box

DESIGN ELEMENTS NFL SHOP STYLE GUIDE REV 10 2018 SIDELINE STROKE HIERARCHY HERO LAYOUT VARIANTS MULTI TIER MESSAGING Intro and subheadlines tuck in line with the sideline stroke Exclusions and fine print copy nest between the sideline strokes PRODUCT LAUNCH OR CAMPAIGN Color palette can adapt to the theming of a campaign or launch PROMOTION Due to the amount of copy the messaging shifts to the right to take up 3 columns of the site structure TYPE LAYOUT VARIANTS Refer to PG 10 for additional details on type layout in the sideline stroke architecture

DESIGN ELEMENTS NFL SHOP STYLE GUIDE REV 10 2018 SIDELINE STROKE HIERARCHY TIER 2 LAYOUT VARIANTS As dimensions get smaller and shallower the backer box from the Hero Tier moves to the right and occupies roughly 1 3 of the spot TYPE LAYOUT VARIANTS Refer to PG 10 for additional details on type layout in the sideline stroke architecture Color palette can change based on campaign

DESIGN ELEMENTS NFL SHOP STYLE GUIDE REV 10 2018 SIDELINE STROKE HIERARCHY TIER 3 LAYOUT VARIANTS When copy headline no longer be integrated within the image they break away from eachother Text occupies its own white space below the image This treatmeant maintains readability through scale and contrast TLP B Spot Example

TYPOGRAPHY NFL SHOP STYLE GUIDE REV 10 2018 HEADLINE DISPLAY COPY Endzone Sans Condensed Bold Size 78px Leading 60px Tracking 10 Endzone Sans Condensed Bold Size 58px Leading 45px Tracking 10 Endzone Sans Condensed Bold Size 44px Leading 35px Tracking 10 Endzone Sans Condensed Bold Size 36px Leading 27px Tracking 10 HEADLINE ONE SECOND LINE HEADLINE ONE SECOND LINE HEADLINE ONE SECOND LINE HEADLINE ONE SECOND LINE

TYPOGRAPHY NFL SHOP STYLE GUIDE REV 10 2018 SUBHEAD SECONDARY COPY Secondary ciopy matches the height of the Sideline Stroke and stays in line Endzone Sans Medium Size 20px Tracking 10 SECONDARY COPY Size based on it s integration with the 15px Sideline Stroke element Endzone Sans Medium Size 14px Tracking 0 Set any copy 14px and below at Tracking 0 Size based on it s integration with the 15px Sideline Stroke element SECONDARY COPY

TYPOGRAPHY NFL SHOP STYLE GUIDE REV 10 2018 TERTIARY COPY Endzone Sans Light Size 14px Leading 14px Tracking 0 TERTIARY COPY SECOND LINE Set any copy 14px and below at Tracking 0 Endzone Sans Light Size 10px Leading 10px Tracking 0 TERTIARY COPY SECOND LINE Set any copy 14px and below at Tracking 0 Endzone Sans Light Size 8px Leading 8px Tracking 0 TERTIARY COPY SECOND LINE Set any copy 14px and below at Tracking 0 Endzone Sans Light Size 6px Leading 6px Tracking 0 Set any copy 14px and below at Tracking 0 TERTIARY COPY SECOND LINE

TYPOGRAPHY NFL SHOP STYLE GUIDE REV 10 2018 BODY SENTENCE STRUCTURE COPY When copy becomes 10 words or more move away from all caps into sentence structure Endzone Sans Light Size 14px Leading 17px Tracking 0 Set any copy 14px and below at Tracking 0 Endzone Sans Light Size 10px Leading 13px Tracking 0 Body copy and sentence structure copy Omnim faccus denditatis sam eos doluptas et molut adio eturibus quam idestio rectatquo quam experum aut atquiat ecabore nduciisciae pelestiscit labores toribus abo Itatquo doluptatem quas cus aciasin veliqui dolo mo denisquam hillum rectemp Body copy and sentence structure copy Omnim faccus denditatis sam eos doluptas et molut adio eturibus quam idestio rectatquo quam experum aut atquiat ecabore nduciisciae pelestiscit labores toribus abo Itatquo doluptatem quas cus aciasin veliqui dolo mo denisquam hillum rectemp Set any copy 14px and below at Tracking 0 Endzone Sans Light Size 8px Leading 11px Tracking 0 Body copy and sentence structure copy Omnim faccus denditatis sam eos doluptas et molut adio eturibus quam idestio rectatquo quam experum aut atquiat ecabore nduciisciae pelestiscit labores toribus abo Itatquo doluptatem quas cus aciasin veliqui dolo mo denisquam hillum rectemp Set any copy 14px and below at Tracking 0 Endzone Sans Light Size 6px Leading 8px Tracking 0 Set any copy 14px and below at Tracking 0 Body copy and sentence structure copy Omnim faccus denditatis sam eos doluptas et molut adio eturibus quam idestio rectatquo quam experum aut atquiat ecabore nduciisciae pelestiscit labores toribus abo Itatquo doluptatem quas cus aciasin veliqui dolo mo denisquam hillum rectemp

SPACING NFL SHOP STYLE GUIDE REV 10 2018 Spacing informs everything from type leading to website padding and supports the proportions of our type hierarchy 60px 45px 30px Example 15px 10px 7px 5px 15px 10px 5px 15px Sideline Stroke

COLOR PALETTE NFL SHOP STYLE GUIDE REV 10 2018 ce1126 ffffff 666666 003b66 f5f6f8 363436 03ade6 cccccc