Costco Brand Book
Costco is a membership-based warehouse retailer offering bulk goods, high-quality products, and exceptional value. Its unique shopping model saves members money on everyday essentials and specialty items.
Samantha Lim COSTCO STYLE GUIDE
01 - Task Flow 02 - Logo 03 - Typography 04 - Colours TABLE OF CONTENTS 05 - Iconography 06 - UI Components 07 - Grid Systems & Spacing
01 01 TASK FLOW Adding a chromebook to cart User enters Finds banner Looks through Looks at item postal code on Home Page chromebooks details
01 TASK FLOW Adding a chromebook to cart Looks at Sign In Adds item to Views cart delivery details cart
App Logo Logo on White BG 02 LOGO Logo on Coloured BG Clearance area around the logo should be same height as the three blue bars. If on a coloured background there should be a white outline.
Roboto 03 TYPOGRAPHY Ag Ag Ag Regular Medium Bold
Roboto Medium px22 The quick brown fox jumps over the lazy dog. Roboto Bold px18 03 The quick brown fox jumps over the lazy dog. TYPOGRAPHY Roboto Medium px14 The quick brown fox jumps over the lazy dog. Roboto Regular px12 The quick brown fox jumps over the lazy dog.
04 COLOURS Primary Secondary Semantic HEX: #C8102E HEX: #0032A0 HEX: #3071A9 HEX: #9B0F24 HEX: #0F9B2E Use: Brand, Use: Brand, Use: Action Text Use: Warning Use: Checkout Accent, Warning Icons Text CTA, Success
04 04 COLOURS Neutrals HEX: #333333 HEX: #5F5F5F HEX: #DFDFDF HEX: #FAFAFA HEX: #FFFFFF Use: Bold text, Use: Body Use: Inactive Use: Main Use: Secondary, Headers text, Icons states background colour Navigation bar
Top Navigation - 22x22 User Info Cart (no Cart Search items) (with items) Bottom Navigation - 22x22 05 Shop Store More Shop More Membership Offers Offers Store (Active) (Active) (Active) (Inactive) (Inactive) (Inactive) (Active) (Inactive) ICONOGRAPHY Membership- 26x26 Navigation My Account My Orders Department & Services - 26x26 Travel Business COVID-19 Grocery Photo Tires Centre Information Centre
Suggested - 22x22 Check Hot Deals Important Symbol - 26x26 05 Cross Minus Minus Add Like Rating Add Like Rating ICONOGRAPHY (Active) (Inactive) (Inactive) (Inactive) (Inactive) (Active) (Active) (Active) Action Direction - 22x22 > Learn More Back
06 06 UI COMPONENTS CTAs W:250px H: 35px Selectors W:329px H:39px Fields W:250px H: 35px Enabled Selected Filled Disabled Not Selected Default
06 06 06 UI COMPONENTS Text Links Cards W:178 H:160 Numeric Stepper W: 121 H: 35 Disabled Enabled 14px 12px Labels W: 58px H: 19px Navigation Bars Used for popular items Top Bar W: 360 H: 56 Categories W:100 H:79 Visual Indicators Bottom Bar W: 360 H:86 Used with sliders/carousels
07 GRID SYSTEMS Margins Gutters Columns 8px 16px 16px
50px 65px 22px 07 12px SPACING 32px 20px
APPENDIX https://www.costco.ca/costco-app.html https://media.corporate-ir.net/media_files/irol/83/83830/CostcoLogoStandards.pdf https://www.figma.com/community/plugin/735098390272716381/Iconify