Date Formats

The date format is conditional depending on the region you are targeting.
When possible, use the month’s full name, for example, October.If there are space constraints, write dates numerically, for example, 30/09/22.
Names of months and weekdays are written in title case.

U.S.

International

Time Formats

Time is always given in a 24-hour or 12-hour format with a colon as the hour-minute separator. Always put a leading zero for the hour so that there are always two digits for both the hour and minute units.

12-hour format

24-hour format

Number Labels

For label fields referring to numbers, use “#” instead of “No.” or spelling out “number”.

Primary Colors

Text Colors

Other Colors

Gradients

                                        background: linear-gradient(333deg, #0094D1 -26.41%, #12329A 115.57%);
                                  
                                

                                        background: linear-gradient(321deg, #0096D5 13.36%, #12329A 102.5%);
                                  
                                

Desktop Type Ramp

Material Symbols

Material design system icons are simple, modern, friendly, and sometimes quirky. Each icon is created using our design guidelines to depict in simple and minimal forms the universal concepts used commonly throughout a UI. Ensuring readability and clarity at both large and small sizes, these icons have been optimized for beautiful display on all common platforms and display resolutions.

Get Started

EDS Figma

Google Fonts

Requesting an Icon

To request or submit additional icons not yet available in the design system, please fill out our feedback form and select "Icon Request" under "What is this regarding?". Please describe what you are looking for and the purpose the icon should serve.

Primary Actions

These buttons are used to house the main call to action of a module. Ideally, there should only be one primary button per module, panel, or overlay. Our buttons are flat and have a rounded corner radius of 3.

Button Base

                                /* Button Base */
.button {
  padding: 10px 40px;
  border: none;
  border-radius: 3px;
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 125% */
  letter-spacing: 0.1px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.button:hover, .button:active {
    transition: all 0.3s ease-in-out
}
  
@media (prefers-reduced-motion: reduce) {

  .button:hover,
  .button:active,
  .button:focus {
    transition: none
  }
}
                          
                        

Primary (On Light Background)

class="button btn-primary"

                                        /* Button Primary */
.btn-primary {
color: #FFFFFF;
background: #3071A9;
}
                                            
.btn-primary:hover {
color: #FFFFFF;
background: #2A6293;                                                
}
                                            
.btn-primary:active {
color: #FFFFFF;
background: #16527E;
}
                                            
.btn-primary:disabled {
color: #FFFFFF;
background: #AFAFAF;
}                  

                                

On Dark Background

class="button btn-primary-onDark"

                                        /* Button Primary on Dark */
.btn-primary-onDark {
  color: #005DAB;
  background: #FFFFFF;
}

.btn-primary-onDark:hover {
  color: #005DAB;
  background: #F9FCFF;
}

.btn-primary-onDark:active {
  color: #005DAB;
  background: #F4F9FF;
}

.btn-primary-onDark:disabled {
  color: #64686C;
  background: #E4E5E6;
}
                                  
                                

Secondary Actions

Secondary actions give users an alternative action to the primary button. They consist of a thin border with no fill (with the exception of the interactive states). There can be multiple secondary buttons within a module, but must be acompanied by a primary button.

Button Base

Secondary (On Light Background)

class="button btn-secondary"

                                        /* Button Secondary */
.btn-secondary {
padding: 10px 32px;
color: #005DAB;
background: none;
border: 2px solid #005DAB;
}
                                            
.btn-secondary:hover {
color: #005DAB;
background: #F4F9FF;                                       
}
                                            
.btn-secondary:active {
color: #005DAB;
background: #E9F1FB;
}
                                            
.btn-secondary:disabled {
color: #AFAFAF;
background: none;
border: 2px solid #AFAFAF;
}

                                

On Dark Background

class="button btn-secondary-onDark"

                                        /* Button Secondary on Dark */
.btn-secondary-onDark {
padding: 10px 32px;
color: #FFF;
background: none;
border: 2px solid #FFF;
}
                                            
.btn-secondary-onDark:hover {
color: #FFF;
background: rgba(244, 249, 255, 0.20);
}
                                            
.btn-secondary-onDark:active {
color: #FFF;
background: rgba(233, 241, 251, 0.20);
}
                                            
.btn-secondary-onDark:disabled {
color: #AFAFAF;
background: none;
border: 2px solid #AFAFAF;
}
                                  
                                

Logo & App Title

App Title

Overview

While you will often see Costco sites and applications bearing just the “Costco Wholesale” logo, as the number of internal and external applications continues to expand, it is important to specify to the user which applications they are currently using. This is done by adding each app title to the logo.

Examples

Legacy Logos

Margins & Sizing

Preparing an App Logo

Option 1: Export from Figma File

1. Select the logo with title inside of the Figma file you are working with.
2. On the right-hand sidebar, expand the 'Export' section, if not already.
3. Select the appropriate file type, usually SVG.
4. Click 'Export'

Option 2: Adobe Illustrator

1. Make sure you have the Roboto Font installed locally on your machine.
2. Open the logo.svg file in Adobe Illustrator
3. Using the 'Text' tool, modify the "App Title Here" text to your tool or application name.
4. Navigate to 'File', 'Save As', give your file a name, ensure "SVG" is the filetype selected, and press 'Save'.
5. This should trigger the 'SVG Options' dialog (see image above). Under 'Fonts' and 'Type' select "Convert to outline". Click 'OK'.

Option 3: Editing SVG Code

1. Using the text editor of your choice, open logo.svg.
2. On line 10, under the "EDIT TITLE HERE" comment, you'll find the text "App Title Here".
3. Replace "App Title Here" with your app or tool's name.
4. Save.

Favicon

Downloads