Transcription
Sam’s Club Design Style GuideLast updated 8/24/21
CONTENTS46Category Page1Introduction2Brand Colors47Category POVs3ADA Compliance49Category Banners7Design Elements51Content Module54Visual Nav12CTA Styles13Typography19Stock Photography20Badges22Callout Styles26Brand Voice & Tone27Homepage57Shelf Page58 Shelf Banners61 Shelf Headers63SPA Page65Carrier Connect68Affiliate Banners71Custom Landing Pages28ROS Banner29Homepage POV76Push Notification33Social Module79Emails34Seasonal Hub39Visual Nav40Featured Services42Product Marketing Modules45Global Nav/N-up80Fully Customizable Emails84Templatized/Dynamic Emails
SC Design Style Guide IntroductionIntroductionWe have our own unique identity ofbeing fun, innovative, modern, wittyand relatable. Having a consistent lookand voice across all our site assets helpsstrengthen our brand identity and makesus more top-of-mind to members.The Design Style Guide showcases ourtemplatized digital assets designed tohelp designers and outside agenciesstay within our brand guidelines so wecan create a cohesive look and feelacross our site.To keep with our identity, copy shouldbe short and sweet with one primarymessage. Design should follow thePSD templates and be in-line with themain brand guidelines. Following theseguidelines will give you the best chanceof having your asset approved as is.Visit the SAM’S CLUB BRAND CENTERto download the main brand guidelines.1
Design Style Guide Brand ColorsBrand ColorsOur brand palette has beenupdated to communicate that weare a modern, energetic and boldcompany. Our primary and secondarypalettes are fresh and reflect our“bold bestie” personality.Supporting ColorsUse supporting colors with intention.There needs to be a strong designrationale and/or a visual correlation withthe hero image when incorporating asupporting color. Select tones that arecomplementary to our brand palette anduse bright jewel tones when choosingsupporting colors.Primary Brand ColorsSA M ’ S BLU ESA PPHI R E BLU ESK Y BLUE#0067A0#00358E#A4DBE8PANTONE 2384C96.60.14.01PANTONE 2146C100.68.00.20PANTONE 635C34.01.07.00Secondary Brand ColorsM I D N I GHT BLU ET R O PI C A L BLU E#11224B#00AFD7PANTONE 289C 100.89.35.45PANTONE 638C 84.07.09.00Tertiary Brand ColorsUX BLU EM I D GR E YL IGHT GREY#1D4B6D#7C878E#D0D3D4PANTONE 7693C99.70.34.18PANTONE 430C 33.18.13.40PANTONE 427C07.03.05.082
Design Style Guide ADA ComplianceContrast CheckerAll text must pass WCAG AA standardswith the WebAIM Color Contrast l TextThis would include preheaders, subheads,CTAs and any other text below 18.66px.Large TextThis applies to headlines or titles at least18.66px when the text is bold and 24pxwhen the text is regular.Graphical Objects andUser Interface ComponentsFor button-style CTAs where the text isencapsulated in a rectangle (mobile, tablet,email, etc.), the text needs to pass againstthe background color, as well as the buttoncolor against the background it sits on.3
Style Guide ColorsDesign Style Guide ADA ComplianceBrandColorsContrastCheckerIn order to comply with ADAwebaim.org/resources/contrastchecker/standards please use thesecolor combinations for text andIn order to comply with ADA standards,background in all digital assets.please use these color combinations fortext and background in all digital assets.ADA Compliant CombinationsSAM’S BLUE BACKGROUNDWHITETEXTTROPICAL BLUE BACKGROUNDBLACKTEXTSAPPHIRE BLUE BACKGROUNDWHITETEXTSKY BLUETEXTLIGHT GREYTEXTMIDNIGHT BLUE BACKGROUNDWHITETEXTSKY BLUETEXTLIGHT GREYTEXTSKY BLUE BACKGROUNDSAM’S BLUETEXTMIDNIGHT BLUETEXTBLACKTEXT4
Style Guide ColorsDesign Style Guide ADA ComplianceBrandColorsContrastCheckerIn order to comply with ADABothCTA textandusearrowneed to pass thestandardspleasethesecontrastchecker.color combinations for text andbackground in all digital assets.webaim.org/resources/contrastchecker/CTA GuidanceBoth arrow color againstbutton color and buttonagainst backgroundmust pass large textspecifications.Arrow color must pass “Large Text”against background.Both CTA text againstbutton color and buttonagainst backgroundcolor must pass large textspecifications.5
Design Style Guide ADA CompliancePlacing text on an imageWhen placing text on an image, or anybackground that is not a solid color, samplethe darkest color that touches the text andenter that as the background color in thecontrast checker. If the text is lighter thanthe background, the lightest area thattouches the text should be sampledand used as the background color.The darkest area of the backgroundthat touches the text shouldbe sampled and enteredin as background color.When using text lighter than thebackground, the lightest area thattouches the text should be sampledand entered in as background color.6
DesignStyle Guide Design ElementsStyle Guide TextureGE O M E T R I C GR A D I E N TBAS I C GR A D I E N TGradientsSubtle gradient to add depth andvisual interest.NOTE: Use gradients sparingly onbadges and graphic-onlygraphic only assets.Can apply gradient to seasonal/accent colors.7
DesignStyle GuideStyle Guide Graphics Design ElementsPatternsST R I PE S 1ST R I PE S 2STRIP ES 3Clean, simple patterns used in anunexpected way, to help elevate thedesign while adding a hint of playfulness.Best Practices Use of patterns should never beoverpowering. Patterns are only used asenhancement - HL and photographyshould always be the HERO Find unexpected, delightful ways toincorporate patterns.DAS HE SD OTS8
DesignStyle Guide Design ElementsStyle Guide GraphicsPattern ExamplesST R I PE SClean, simple patterns used in anunexpected way, to help elevate thedesign while adding a hint of playfulness.Best Practices Use of patterns should never beoverpowering. Patterns are only used asenhancement - HL and photographyshould always be the HERO Find unexpected, delightful ways toincorporate patterns.99
DesignStyle Guide Design ElementsStyle Guide GraphicsPattern ExamplesDAS HE SClean, simple patterns used in anunexpected way, to help elevate thedesign while adding a hint of playfulness.Best Practices Use of patterns should never beoverpowering. Patterns are only used asenhancement - HL and photographyshould always be the HERO Find unexpected, delightful ways toincorporate patterns.10
DesignStyle Guide Design ElementsStyle Guide GraphicsPattern ExamplesD OTSClean, simple patterns used in anunexpected way, to help elevate thedesign while adding a hint of playfulness.Best Practices Use of patterns should never beoverpowering. Patterns are only used asenhancement - HL and photographyshould always be the HERO Find unexpected, delightful ways toincorporate patterns.11
Style Guide ColorsDesign Style Guide CTA stylesHP POV - DESKTOP ( 1140X350)C AT POV - DESKTOP ( 760X370)HP F EATUR ED SERV I CE - DESKTOP (562X280)H P P RO DU C T M ARK ET I NG MO DU L E (5 6 6 X 2 0 0 )BrandColorsCTA stylesIn order to comply with ADAstandards please use thesecolor combinations for text andbackground in all digital assets.20 pxCTA text: 16 pt,Gibson Semibold15 px15 pxCTA text: 16 pt,Gibson SemiboldBox: 33 x 33 pxCorner radius: 5 px15 pxTABLET POV - XL AR GE (1456X857)Distance from last line of copy: 60 pxRadius: 6 pxCTA text: 40 ptBox: 88 px (height) xvarying width60 pxMOBI LE POV - M ED ( 768X452)C AT EGO RY POV - MO BI L E (75 0 X 4 3 0 )Distance from lastline of copy: 30 pxDistance from lastline of copy: 30 pxRadius: 4 pxCTA text: 24 ptBox: 53 px (height)x varying width60 px30 px30 pxRadius: 4 pxCTA text: 24 ptBox: 50 px (height) xvarying width30 px30 px12
Design Style Guide TypographyBrand FontGibson is our primary brand font.We use four different weights todistinguish visual hierarchy.GI BSONABCD EFGHI J K L M N OPQRSTUVWX YZa b cd efg h ij k lm nop qrstuvw xyz0 1 2 3 4 5 678 9 0 ( . , ; : ’” #@!&*)Primary FontsAa AaGI BSON SEM I B OLDGI BSON R EGUL ARSecondary FontsAa AaGI BSON B OLDGI BSON B OOK13
Design Style Guide TypographyType TreatmentOverall width, alignment, and sizeof H1 headlines may depend onplacement in relation to productimages and/or photographs. Resizingis up to the discretion of the designer,but must maintain proportions andvisual hierarchy between all heads.Choose one H2 Sub Headline optionto pair with the Main Headline basedon your layout. Both treatments shouldnot be used in the same design.Body copy size should remainconsistent across all module sectionswithin the design.PrintH1 M AI N HEADLI NEGibson Semibold40pt - 60ptH2 SUB HEADLI NE - OPTI ON 1GIBSON BOOK, ALL CAPS, UNDERLINE, 24PTH2 SUB HEADLI NE - OPTI ON 2GIBSON REGULAR, ALL CAPSF I L L , 2 4 P T, T R A C K I N G 2 5 0H3 SUB HEADLI NEGIBSON BOLD, ALL CAPS, 14PTB ODY COPYGibson regular, 10pt - 14ptSEC TI ON/C ATEGORY LEADGIBSON SEMIBOLD, ALL CAPS, UNDERLINE9 P T, T R A C K I N G 2 5 014
Design Style Guide TypographyType TreatmentOverall width, alignment, and sizeof H1 headlines may depend onplacement in relation to productimages and/or photographs. Resizingis up to the discretion of the designer,but must maintain proportions andvisual hierarchy between all heads.Choose one H2 Sub Headline optionto pair with the Main Headline basedon your layout. Both treatments shouldnot be used in the same design.Body copy size should remainconsistent across all module sectionswithin the design.EmailOnsiteH1 M AI N HEADLI NEH 1 M AI N H EADL I NEGibsonSemibold45pt - 55ptH2 SUB HEADLI NE - OPTI ON 1GIBSON REGULAR, ALL CAPSF I L L , 2 2 P T - 2 8 P T, T R A C K I N G 1 5 0H2 SUB HEADLI NE - OPTI ON 2GIBSON BOLDALL CAPS, 22PT - 28PTB ODY COPYGibsonSemiboldH 2 SU B H EADL I NEGIBSON BOLDALL CAPSBO DY CO P YGibson regularEY EBROWGIBSON SEMIBOLDALL CAPSNOTE: Refer to site assets template for onsite type specs.Gibson regular16pt - 20ptEYEBR OWGI BS O N S E M I B O L D, A L L C A P S9 P T - 1 2 P T, T R A C K I N G 1 5 015
Design Style Guide TypographyType SpacingKER NI NG25% Off25% OffManually kern out letters thatrun into each other.LEADI NG AND COPY SPACI NGKeep subcopy leading at 2ptand consistent throughoutthe design layout.Always create enough space between headline andsubcopy to allow for visual breaks. Keep spacingconsistent throughout the design layout.16
Design Style Guide TypographyPrintDigitalType TreatmentExamples17
Design Style Guide TypographyOmni-ChannelType TreatmentExamplesEM AI LPR I NTONSI TE18
Design Style Guide Stock PhotographyGOOD EXAM PLESBAD EX AM P L ESStock PhotographyUse stock photography when thereisn’t a better option from the in-houselifestyle photography we’ve shot.Avoid photography that is stagedand/or posed.Avoid anything too cutesy.Use candid, authentic-feelingphotography when there are peoplein the shot.If you need photography of a homeinterior, try to keep the decor neutraland not too modern or identifiable.We don’t want it to be too flashyand result in people thinking we sellwhat’s in the photo.When looking for food photography,keep it straightforward.19
DesignStyle Guide BadgesStyle Guide BadgesBadgesUse badge treatments for pricesavings promotional messaging or“Expect Something Special”.OFFFREESHIPPINGMOST ITEMSGE O M E T R I C GR A D I E N TBAS I C GR A D I E N T20
DesignStyle Guide BadgesStyle Guide BadgesBadgesUse badge treatments for pricesavings promotional messaging or to“Expectcallout OAD WORKING FILE HERE21
DesignStyle Guide CalloutStylesStyle Guide TypeTreatmentCallout TreatmentsUse these to call out specific productfeatures or product names or to highlightthe quality or value story.Lorem ipsum dolor sit amet, doeiusmod tempor ut labore etdolore magna aliqua.Lorem ipsum dolor sit amet, doeiusmod tempor ut labore etdolore magna aliqua.Lorem ipsum dolor sit amet, doeiusmod tempor ut labore etdolore magna aliqua.Body copy: Gibson Book, size 9pt,leading 11pt, kerning metrics, tracking 0EXAMPLESNOTE: All versions are interchangeable based on design layout.22
“DesignStyle Guide CalloutStylesStyle Guide TypeTreatmentCallout Treatment“Lorem ipsum dolor sit amet, consecteturdunt ut labore et dolore magna aliqua.”Lorem ipsum dolor sit amet, consecteturdunt ut labore et dolore magna aliqua.”Joe ShmoSam’s Club EmployeeJoe ShmoWhy we love this w/Headshot:Sam’s Club EmployeeLead-in copy: Gibson Medium,Medium (all12ptcaps),(all0.05” spacecaps),0.05” afterspace afterBody copy: Gibson italic, size 10pt,leading 12pt, kerning metrics, tracking 0EXAMPLESJob titleAllcopy:NOTE:versionsGibsonare InterchangableRegular, 8ptbased on design layout.NOTE: All versions are Interchangeablebased on design layout.23
DesignStyle Guide CalloutStylesStyle Guide TypeTreatmentEXAMPLESCallout TreatmentExpertPicks:Thisshouldbe used when featuring aLead-incopy:GibsonMediumproduct,(all cap),customer reviewon a specific0.05”spaceafter,usually in an email.“Lorem ipsum dolor sit amet,consectetur adipismod tempor incididunt.”- User123Bodycopy: Gibson italic, size 10pt,Headline:leading12pt, kerningmetrics,tracking 0Gibson Medium,9pt (allcap), 0.05”space after,NOTE: All versions are Interchangeablebasedon designlayout.Body copy:Gibsonitalic, size 8pt,leading 10pt, kerning metrics, tracking 0User name copy: Gibson Regular, 6ptCustomer Reviews:Lead-in copy: Gibson Medium (all cap),space after: 0.3”,Body copy: Gibson Italic size 8pt,leading 10pt, kerning metrics, tracking 0““24
Design Style Guide Brand Voice & ToneBrand Voice & ToneAll Sam’s Club content should be in theBold Bestie voice.POV headlines should be 1-2 lines (MAX 20 characters).Subheads should ideally be one line (MAX 40 characters).Your Bold Bestie listens and truly hearswhat you need most—while makingyou smile. And she does so withoutjudgment, ready to take on anything withyou (or for you).A Bold Bestie is:Banner headlines should be 1 line(MAX 32 characters).Subheads should also be 1 line(MAX 75 characters). She gets it and keeps it real with you,from little moments to big challenges. She knows just what you need to makeyou feel better and taken care of. She takes something off your shouldersand makes everything seem a littleeasier. She brings you something you need orlove (but won’t do for yourself), like aslice of cheesecake. She does it all with levity and wit (and abig heart).Copy should:BEFOR E COV I DAFT ER COV I D Exercise sensitivity and cautionin language, message and storychoice, without avoiding, belittling orpandering. Opt for a friendly, calm, supportivetone vs. an overly excited orcelebratory one. 25
Homepage26
ContinuedDesign Style Guide HomepageHomepagePlacement Overview1621. ROS banner2. Homepage POV3. Social Module74. Seasonal Hub5. Featured Service6. Visual Nav7. Product Marketing Module (locationmay move up or depending on if Socialmod is live8. Global Nav/”gNav” - located in “Shopby Department” drop down nav in header348527
EXAMPLESDesign Style Guide HomepageROS (Run of Site)bannerThis is an HTML text banner that runsabove the POV and shows up on everypage.Be mindful of ADA compliance whenchoosing text and background colors.This banner is always HTMLcoded text.Text can only be one color andone weight. Only the CTA text isbolded.Background can be any color aslong as color text color is ADAcompliant.COPY - CHARACTER COUNTHeight is fixed.MAXIMUM 80FYI: CTA must be at the end ofthe copy line due to technicallimitations28
Design Style Guide HomepageHomepage POVsAlways balance out horizontalspace between text and image.HORIZONTAL SPACETEXT OR IMAGEHORIZONTAL SPACEThis template contains all sizes requiredfor homepage POVs. Once layouts arecomplete, follow instructions in thePSD to export the individual assets.Callouts apply to all sizes.TEXT OR IMAGEHORIZONTAL SPACEAlways tryto verticallycenter copy.On tablet and mobile versions, CTAbutton must pass the contrast checkeragainst the background and textmust pass against the button color.DOWNLOAD TEMPLATES HEREContact [email protected] access to any templates found in this guide.Text can be left aligned orcentered and placed eitherleft of right of the images.The sm size is automaticallygenerated from themed layout.The large size is automatically generatedfrom the xlarge layout.Disclaimer can appearon left or right sidedepending on the layout.29
Design Style Guide HomepageDESKTOP EXAMPLES4 0PT HEADLI NEDesktopHomepage POVsIdeally, if there’s a way to leveragea full bleed lifestyle image, thatshould always be the first optionwhen creating a homepage POV.5 0PT HEADLI NEIf a lifestyle image is too busy, an overlay can be used to make text ADA compliant.30
Design Style Guide HomepageTabletHomepage POVsTABLET EXAMPLESSame guidelines apply as desktop.CTA button must pass the contrastchecker against the background andtext must pass against the button color.31
Design Style Guide HomepageMobileHomepage POVsEXAMPLESSame guidelines apply as desktop.CTA button must pass the contrastchecker against the background andtext must pass against the button color.LINK TO TEMPLATE LOCATED ON PAGE 2832
Design Style Guide HomepageSocial ModuleAlways tryto verticallycenter copy.This template contains all sizes requiredfor the Social Module. Once layouts arecomplete, follow instructions in thePSD to export the individual assets.Callouts apply to all sizes.LINK TO TEMPLATE LOCATED ON PAGE 28EXAMPLES1 UP2 UP33
Max width for entire hub is 1140pxHeight is variable.Design Style Guide HomepageW I R EF R AM ESeasonal HubLorem ipsum dolor sit ametIMPORTANT:Title bannerConsectetur adipiscing elit, sed do eiusmod tempor.Regardless of which layout style you use,follow these dimensions and guidelines.Module 1Module 2Module 3IMPORTANT:You also need to take into account gutters (akathe spacing between modules).Lorem ipsumLorem ipsumLorem ipsumConsectetur adipiscing elit, seddo eiusmod tempor.Consectetur adipiscing elit, seddo eiusmod tempor.Consectetur adipiscing elit, seddo eiusmod tempor.Standard gutters in web design should be ofmultiples of four (4px, 8px, 12px, 16px, etc.)that you can determine.Note: When the tile max width says it’s380px, that needs to include the gutter.So consider that when you’re determiningthe width of each of your modules.For 3-up modules:Max width for each section is 380px,gutter included, see note on the right.For 2-up modules:Max width for each section is 570px,gutter included, see note on the right.34
Design Style Guide HomepageW I R EF R AM ESeasonal HubMO BI L ELorem ipsum dolor sit ametConsectetur adipiscing elit, sed do eiusmod tempor.Layout option #1Title bannerModule 1Lorem ipsumLorem ipsumLorem ipsumConsectetur adipiscing elit, seddo eiusmod tempor.Consectetur adipiscing elit, seddo eiusmod tempor.Consectetur adipiscing elit, seddo eiusmod tempor.D ESKTOPModule 2Module 335
Design Style Guide HomepageSeasonal HubLayout option #2DESKTOPMO BI L E36
Design Style Guide HomepageSeasonal HubLayout option #3WI R EF R AM EDESKTOPMO BI L E37
Design Style Guide HomepageSeasonal HubLayout option #4WI R EF R AM EDESKTOPMO BI L E38
Design Style Guide HomepageCUR R ENTLY ON HPVisual NavSilo images used here are pulleddynamically from PDP pages. We areusually only asked to create new lightblue bursts.New blue bursts should be built out as a400x400 px circle.6-UP - SI LOBlue bursts should be built outas a 400x400 px circle.Utilize icon library for icons and lockups used here.39
Design Style Guide HomepageMM logo should be 40x40and placed 15 px above theheadline. See MM StyleGuide for more specificsHomepageService ModulesThese banners live 2-up. One is alwaysOMP and is designed by the OMP team.The other is always Member’s Mark and is done by our team.Ideally, if there’s a way to leveragea full bleed lifestyle image, that shouldalways be the first option when creatinga category POV.Always verticallycenter copy and CTA.Always keep text and CTA32px from left edge.Disclaimer will usually beright aligned and in thisposition unless imagedoesn’t allow for it.When a full bleed lifestyle is not anoption, color blocking can be used to fillspace and add color. If there’s a lifestyleimage available, use that over productsilhouettes. Try to stick to vertical or45 degree angled shapes.CTA button must pass the contrastchecker against the background andtext must pass against the button color.SEE MEMBER’S MARK STYLE GUIDELINK TO TEMPLATE LOCATED ON PAGE 28The sm size is automaticallygenerated from themed layout.The large size is automatically generatedfrom the xlarge layout.40
Design Style Guide HomepageEXAMPLEService ModulesThese banners live 2-up. One is alwaysOMP and is designed by the OMP team.The other is always Member’s Mark and is done by our team.562x280Ideally, if there’s a way to leveragea full bleed lifestyle image, that shouldalways be the first option when creatinga category POV.When a full bleed lifestyle is not anoption, color blocking can be used to fillspace and add color. If there’s a lifestyleimage available, use that over productsilhouettes. Try to stick to vertical or45 degree angled shapes.CTA button must pass the contrastchecker against the background andtext must pass against the button color.SEE MEMBER’S MARK STYLE GUIDELINK TO TEMPLATE LOCATED ON PAGE 2841
Always balance out horizontalspace between text and image.Design Style Guide HomepageDesktop ProductMarketing Modules2-upHORIZONTAL SPACETEXT OR IMAGEHORIZONTAL SPACETEXT OR IMAGEHORIZONTAL SPACE566 x 200Maintain the neutral gray background.# EEEEEELINK TO TEMPLATE LOCATED ON PAGE 28These banners live 2-up. The headlines should align at least if copy lengths are different.If copy lengths are the same on both, then everything should line up.Center content block vertically.EXAMPLES42
Design Style Guide HomepageMobile ProductMarketing Modules2-upAlways balance out horizontalspace between text and image.HORIZONTAL SPACETEXT OR IMAGEHORIZONTAL SPACETEXT OR IMAGEHORIZONTAL SPACESame guidelines apply as desktop.LINK TO TEMPLATE LOCATED ON PAGE 28EXAMPLES43
Design Style Guide Homepage3-up - DesktopProduct MarketingModulesOPTIONSThe 3-up version of these bannersis not currently live but there is apossibility it will be requested in thefuture.Maintain same banner height as the2-up banners, but reduce to 200 pxwide for each.375X20044
Design Style Guide HomepageGlobal Nav/N-upThis asset lives on the homepage globalnav as well as on event landing pages/cat pages. They are the same dimensionregardless of placement.LINK TO TEMPLATE LOCATED ON PAGE 28500 pxXXInstantSavings500 pxCOPY - CHARACTER COUNTHEADLINE MAXIMUM 30SUBHEAD MAXIMUM 60SITE PLACEMENTSEXAMPLES45
Category Page46
Design Style Guide Category PageCategory PagePlacement Overview1. Category POV12. Category Banner3. Content Mod2347
Design Style Guide Category PageDesktopCategory POVsAlways balance out horizontalspace between text and image.HORIZONTAL SPACEIMAGEHORIZONTAL SPACEIdeally, if there’s a way to leveragea full bleed lifestyle image, that shouldalways be the first option when creatinga category POV.When a full bleed lifestyle is not anoption, color blocking can be used to fillspace and add color. If there’s a lifestyleimage available, use that over productsilhouettes. Try to stick to vertical or45-degree angled shapes.TEXTHORIZONTAL SPACEKeep text and CTAon the right sideand left aligned toavoid competingwith the navigationto the left of POV.Always tryto verticallycenter copy.LINK TO TEMPLATES LOCATED ON PAGE 28Right aligndisclaimer and placein lower right corner.Avoid carousel dots.EXAMPLES48
Design Style Guide Category PageMobileCategory POVsAlways balance out horizontalspace between text and image.HORIZONTAL SPACEIMAGEHORIZONTAL SPACETEXTHORIZONTAL SPACESame guidelines apply as desktop.CTA button must pass the contrastchecker against the background andtext must pass against the button color.Keep text and CTAconsistent with thedesktop version.LINK TO TEMPLATE LOCATED ON PAGE 28Always tryto verticallycenter copy.EXAMPLESDisclaimer can goin either corner oraligned with text.49
Design Style Guide Category PageDesktopCategory BannersIdeally, if there’s a way to leveragea full bleed lifestyle image, that shouldalways be the first option when creatinga category banner.Always balance out horizontalspace between text and image.HORIZONTAL SPACEIMAGEHORIZONTAL SPACEAlways tryto verticallycenter copy.TEXTHORIZONTAL SPACEKeep CTA to theright and avoidplacing under text.When a full bleed lifestyle is not anoption, color blocking can be used to fillspace and add color. If there’s a lifestyleimage available, use that over productsilhouettes. Try to stick to vertical or45 degree angled shapes.Disclaimer can eithergo in either corner.EXAMPLESLINK TO TEMPLATE LOCATED ON PAGE 2850
Design Style Guide Category PageMobileCategory BannersAlways balance out horizontalspace between text and image.HORIZONTAL SPACEIMAGEHORIZONTAL SPACETEXTHORIZONTAL SPACESame guidelines apply as desktop.LINK TO TEMPLATE LOCATED ON PAGE 28Keep text and CTAconsistent with thedesktop version.Always tryto verticallycenter copy.Disclaimer can goin either corner oraligned with text.EXAMPLES51
Design Style Guide Category PageWI R EF R AM E I DEASContent ModuleHeight of banner/module is flexible.Can also be one long banner or dividedup into 2 or 3 sections.Fully flexible, height, number of storiesFor each section, the height is variable.Number of sections is also variable, based onbusiness owners request.52
Design Style Guide Category PageEXAMPLESContent ModuleExamples3 - UP2 - UPCO NTENT BANNER53
Design Style Guide Category PageEXAMPLESContent Module MobileHeight of each module is variable basedon contents.Mobile width: 640CO NT ENT BANNER3-UP2-UP54
Design Style Guide Category PageDESKTOPMO BI L EVisual NavThese visual navigation sections live oncategory pages as a way to elevate morespecific categories within that division.LINK TO TEMPLATE LOCATED ON PAGE 28IMPORTANT:The light gray squares shown here are just to show the 400x400dimension but actual images should be against a white background.See next page for an example.If using a lifestyle image you can use a 400x400 square OR circle, justmake sure everything is consistent.General rule of thumb, if it goes to two rows, circle crops tend to lookbetter en masse than rows of square image crops.55
Design Style Guide Category PageEXAMPLESVisual Nav6-UP - SI LO6-UP - LI F ESTYLE56
Shelf Page57
Design Style Guide Shelf PageShelf PagePlacement Overview1. Shelf Header/Banner158
Design Style Guide Shelf PageDesktopShelf BannersIdeally, if there’s a way to leveragea full bleed lifestyle image, that shouldalways be the first option when creatinga shelf banner.When a full bleed lifestyle is not anoption, color blocking can be used to fillspace and add color. If there’s a lifestyleimage available, use that over productsilhouettes. Try to stick to vertical or45-degree angled shapes.Always balance out horizontalspace between text and image.HORIZONTAL SPACEIMAGEHORIZONTAL SPACEAlways try tovertically centercopy. Copy andCTA should be tothe right of imageunless the layoutdoesn’t allow for it.TEXTHORIZONTAL SPACEKeep CTA to theright and avoidplacing under text.Disclaimer can eithergo in either corner.EXAMPLESLINK TO TEMPLATE LOCATED ON PAGE 2859
Design Style Guide Shelf PageMobileShelf BannersAlways balance out horizontalspace between text and image.HORIZONTAL SPACEIMAGEHORIZONTAL SPACETEXTHORIZONTAL SPACESame guidelines apply as desktop.LINK TO TEMPLATE LOCATED ON PAGE 28Keep text and CTAconsistent with thedesktop version.Always tryto verticallycenter copy.Disclaimer can goin either corner oraligned with text.EXAMPLES60
Design Style Guide Shelf PageDesktopShelf HeadersA shelf header is identical to a shelfbanners except that it is static andhas no CTA.Ideally, if there’s a way to leveragea full bleed lifestyle image, that shouldalways be the first option when creatinga shelf banner.When full bleed lifestyle is not an option,color blocking can be used to fill spaceand add color. If there’s a lifestyleimage available, use that over productsilhouettes. Try to stick to vertical or45-degree angled shapes.Always balance out horizontalspace between text and image.HORIZONTAL SPACEIMAGEHORIZONTAL SPACETEXTHORIZONTAL SPACEAlways try to verticallycenter copy. Copy cango to the right or left ofthe image. Can be leftaligned or centered.Disclaimer can eithergo in either corner.EXAMPLESLINK TO TEMPLATE LOCATED ON PAGE 2861
Design Style Guide Shelf PageMobileShelf HeadersAlways balance out horizontalspace between text and image.HORIZONTAL SPACEIMAGEHORIZONTAL SPACETEXTHORIZONTAL SPACESame guidelines apply as desktop.LINK TO TEMPLATE LOCATED ON PAGE 28Always tryto verticallycenter copy.Keep text consistentwith the desktopversion.Disclaimer can goin either corner oraligned with text.EXAMPLES62
SPA Page63
Design Style Guide SPA pageSPA page1 2 50X VAR I ABLED E SKTOP6 4 0 X VARI ABL EMO BI L EHeight is variable for both desktop andmobile.Always include Sam’s Club logo.Note: These banners live on a whitepage so be mindful of the backgroundcolor of these banners.64
Carrier Connect65
Design Style Guide Carrier ConnectDESK TO P - 3 6 4 X 6 5 0Carrier ConnectIdeally, if there’s a way to leveragea full bleed lifestyle image, that shouldalways be the first option when creatinga category POV.When a full bleed lifestyle is not anoption, color blocking can be used to fillspace and add color. If there’s a lifestyleimage available, use that over productsilhouettes. Try to stick to vertical or45-degree angled shapes.Copy can live atthe top or bottomdepending on image.LINK TO TEMPLATE LOCATED ON PAGE 28Disclaimer should becentered along the bottomMOBI LE - 720X400Always tryto verticallycenter copy.Disclaimer should beright aligned with c
Aug 24, 2021 · ADA Compliant Combinations SAM’S BLUE BACKGROUND WHITE TEXT WHITE TEXT WHITE TEXT SAM’S BLUE TEXT BLACK TEXT SKY BLUE TEXT SKY BLUE TEXT MIDNIGHT BLUE TEXT LIGHT GREY TEXT LIGHT GREY . Secondary Fonts. 14 Design Style Guide Typo
