Skip to main content
Costco Wholesale
Pallet Design System

Punctuation

Punctuation marks are used in writing to convey meaning, clarify structure, and indicate pauses or emphasis. It is important to use punctuation correctly when writing microcopy for both consistency and clarity.

You may see the term “end punctuation” used throughout Pallet's documentation. End punctuation (also known as “terminal punctuation”) is used at the end of a sentence. The three types of end punctuation are periods, question marks, and exclamation points.

Apostrophes

The apostrophe is used to indicate possession or a contraction.

  • Possession

    Example:
    Enter the member’s last name.

    The last name belongs to the member.

  • Contraction

    Example:
    We’re sorry, but we’re experiencing a problem on our end.

    “We’re” is a contraction for “we are.” Contractions can be used to make messages sound more casual or conversational.

References:

Ampersands

The use of an ampersand (&) instead of the word "and" is typically reserved for specific situations. Ampersands are most frequently used on Costco’s digital products when there is limited space, such as in titles or menu labels.

Examples:

  • Grocery, Household Essentials & Pet (navigation item)
  • Orders & Returns (link in the header)

If you’re writing full sentences or have adequate space (and it makes sense within the context), write the word “and” and don’t use an ampersand.

References:

Brackets

The three types of brackets described in this section are not typically used for general writing, but they may be used in computer programming, or for placeholder content in designs or components in the Pallet Design System.

Parentheses are also considered a type of bracket, but are described in more detail in the parentheses section of this guide.

Types of Brackets

Angle Brackets
Angle brackets < >, sometimes referred to as chevrons, are not typically used in general writing, but they are frequently used in computer programming.

Example:
Visit <a href="https://www.costco.com/">Costco.com</a>today!</p>

Curly Brackets
Curly brackets { } are most often used in fields such as science, math, and computer programming. At Costco, curly brackets are primarily used to indicate placeholder text in designs or components.

Square Brackets
Square brackets [ ] in general writing are often found inside quotations to show text that has been added to an original quote.

Example:
“He [Robert] never showed up for the meeting.” In this example, the name of the person being referred to in the quote has been added in square brackets for additional context.

In Pallet, square brackets are sometimes used as a type of naming convention, or to indicate that something is a specific type of content inside of a component.

Example:

The “[Slot]” prefix on the “[Slot] Body” layer indicates that layer is a slot. The “[Opt]” prefix on the “[Opt] Help Link” layer indicates that layer is optional.

References:

Colons

Grammatically, a colon is used to connect sentences, put emphasis on a word or phrase, or introduce a quote or explanation. Colons are most commonly used to introduce lists. When a colon appears in a sentence, it usually implies “as follows,” “which is/are” or “thus.”

How to Use Colons

  • Don’t use colons after “including,” “following,” or similar words and phrases

    Incorrect Example:
    In the meeting, we will discuss the following: marketing language, ad revenue, and site traffic.

    A colon essentially replaces these words, so using them before a colon is redundant.

    Correct Example:
    In the meeting, we will discuss: marketing language, ad revenue, and site traffic.

  • Don’t separate a verb from its object or subject complement

    Incorrect Example:
    The three topics we will discuss in the meeting are: marketing language, ad revenue, and site traffic. The colon separates the verb “are” from its subject complements (“marketing language,” “ad revenue,” and “site traffic”).

    Correct Example:
    We will discuss three topics in the meeting: marketing language, ad revenue, and site traffic.

References:

Commas

Commas are used to indicate a brief pause in a sentence. They are frequently used to separate words, clauses, or ideas. Some examples of how to properly use commas are shown below.

How to Use Commas

  • To separate items in a list (serial commas)

    Example:
    Statistical reports are available daily, weekly, monthly, and yearly.

    This final comma in a list is called the Oxford comma or a serial comma. It helps to clarify the separation between the items in the list and can prevent ambiguity.

    While the usage of the Oxford comma may vary based on style guides, it is recommended to use the comma before the final “and” or “or” to avoid potential confusion.

  • After introductory clauses, phrases, or words that come before the main clause

    Incorrect Example:
    The three topics we will discuss in the meeting are: marketing language, ad revenue, and site traffic.

    The colon separates the verb “are” from its subject complements (“marketing language,” “ad revenue,” and “site traffic”).

    Correct Example:
    We will discuss three topics in the meeting: marketing language, ad revenue, and site traffic.

  • To separate two independent clauses

    Example:
    They went shopping at the warehouse, and they bought a full cart of groceries.

References:

Dashes

There are two types of dashes, the en dash and the em dash. The en dash is approximately the length of a capital N, and the em dash is the length of a capital M. Dashes are not interchangeable with hyphens.

En Dash
The en dash (–) is slightly wider than the hyphen (-) but narrower than the em dash (—). The en dash is used to indicate a range of numbers or span of time. There should be no space between the en dash and the characters on either side.

Examples:

  • 2022–2023
  • Read pages 25–100 in the report.
  • Monday–Friday
  • 6–11 a.m.

Em Dash
The em dash (—) is wider than both the en dash (–) and the hyphen (-). The em dash is used to indicate a break in the flow of a sentence, or to emphasize a word or phrase. It can be used to replace other punctuation such as semicolons, parentheses, and commas.

Examples:

  • The new product launch—scheduled for next month—will increase revenue.
  • Update your account information, preferences, and settings—all in one place.

References:

Ellipses

An ellipsis, or ellipses in plural form, represents a pause or that something has been intentionally left out of text. In user interfaces, an ellipsis may be used to indicate that there is more content, such as overflow content that is truncated when there is limited space.

How to Use Ellipses

  • When truncating product descriptions On Costco’s digital products, an ellipsis is often used to indicate that there is another way for the user to see the full text. For example, product names on the Product Listing Page (PLP) are truncated to save space and because users can see the full product title on Product Details Page (PDP).

Example:
One A Day Women's 50+ Healthy Advanta…

  • For user interface elements with long labels The most common situation where this may occur is when text on Costco’s digital products has been translated to French for the Canadian site.

Example:
Magasiner pour la livraison le jour mêm…

Truncating labels on user interface elements with an ellipsis should be used as a last resort. Labels on elements such as buttons typically provide critical information for users, so before truncating, explore other options such as shortening the label or wrapping text if space is limited.

References:

Exclamation Points

Exclamation points (or exclamation marks) show emotion, emphasis, or surprise. Use exclamation points sparingly. The most common way exclamation points are used when writing messaging for Costco is to add a sense of excitement.

Examples:

  • Transferring your prescriptions is quick and easy with the Costco website and mobile app. Download the Costco app today!
  • Stay informed about savings, new products, and more!

References:

Hyphens

A hyphen is used to join two or more words together to make a compound word. Hyphens are not interchangeable with dashes.

The rules for hyphens are not always straightforward. Some words need to be hyphenated, some should never be hyphenated, and some can be, but don’t have to be. The use of a hyphen may depend on the placement of a word in a sentence or the placement of the modifier in a compound word. It may also be determined by common practices, clarity, readability, or writing style.

How to Use Hyphens

  • Compound words
    Compound words consist of two or more words expressing a single concept. Compound words may include an adjective + noun, noun + adjective, noun + past/present participle, or adverb + adjective.

    Examples:

    • Short-term
    • Full-scale
    • Absent-minded
    • Old-fashioned
    • Part-time
    • Sister-in-law
    • Easy-to-find

    Adverbs and other “-ly” compound words can be tricky. If an adverb ends in "-ly" it should not be hyphenated.

    Examples:

    • He was highly regarded.
    • It is a poorly written sentence.

    If a word ends in “-ly” but it is not an adverb, it may still use a hyphen.

    Examples:

    • She is friendly-looking.
    • This is a family-owned store.

    If you’re not sure whether a compound word has a hyphen, check an online dictionary.

  • Numbers
    Numbers between 21 and 99 should always be hyphenated.

    Examples:

    • Twenty-one
    • Forty-five
    • Three hundred forty-three

  • Prefixes

    Examples:

    • Ex-partner
    • Self-aware

  • Clarity, readability and writing style
    Deciding whether to use a hyphen in some situations may be based on context or writing style.

    Examples:

    • Resign (to give up, surrender, relinquish) vs. re-sign (to sign again)
    • Re-elect vs. reelect (this difference is dependent on writing style)
    • Use "Pick-Up" when referring to the fulfillment channel, "pick-up" when it is used as a noun or adjective in other contexts (and don't capitalize the U when it's used in title case), and continue to use "pick up" when used as a verb.

  • Phrases
    Hyphen use in some common phrases, such as “up to date”, depends on how the phrase is used in a sentence.

    “Up-to-date” uses hyphens when it precedes a noun it is modifying.

    Example:

    • We show up-to-date inventory in our application.

    “Up to date” does not use hyphens when used adverbially.

    Example:

    • I stay up to date with the news.

    “Up to date” does not use hyphens if it used as a predicate adjective following what it modifies.

    Example:

    • Our plans are kept up to date.

Hyphenation at the End of Lines

Hyphenation at the end of a line is used to split a word to the next line of text in a way that improves the overall appearance and readability. This is most commonly seen when text is justified, in narrow columns, or when trying to avoid large gaps between words.

The rules for what a browser does by default with hyphenation are tied to the lang HTML attribute (lang="en"). For example, you may see more hyphenation if the language is set to German compared to English.

Guidelines for Breaking Words

  • When text is left-aligned, hyphenation to break words should be avoided.

  • If text is in a limited space, such a narrow column, and a long word will not fit in the space, consider alternative approaches to solve this issue, such as:

    • Modifying how the content is written
    • Using a smaller text style
    • Allowing more width in the design for the block of text

    If a word will still not fit in the space, discuss the best solution for your use case with developers and other designers.

  • In some cases, hyphenating the word may be the best approach. In other cases, it may be more appropriate to use a style such as “overflow-wrap: break-word;” to allow the browser to break the word without a hyphen.

References:

Parentheses

Parentheses set apart certain words and sentences. They are typically used to add extra information or provide additional explanation or commentary.

How to Use Parentheses

  • Showing abbreviations and acronyms

    Example:
    Contributions help to grow the Pallet Design System (PDS).

  • Providing additional information

    Example:
    For assistance, contact customer service between 6am–6pm (M–F).

  • The parenthetical plural “(s)”
    Occasionally, some messaging may contain a parenthetical plural “(s)” when a message needs to be generic, but it is unknown if the subject is singular or plural.

    Example:
    This item must be returned separately from the other item(s) you have selected to return.

    When possible, it is recommended to avoid this by rephrasing the message in a different way.

References:

Periods

A period indicates a definitive pause and is a type of end punctuation that is placed after a complete sentence. Periods are also sometimes used in abbreviations.

How to Use Periods

  • End punctuation

    Example:
    Your membership information has been updated. Use a period at the end of a complete sentence. Do not use end punctuation at the end of incomplete sentences.

  • Abbreviations

    Examples:

    • E.g.
    • Ave.
    • Mr.
    • A.M. or a.m.

    If an abbreviation is at the end of a sentence, do not use two periods. The period used for the abbreviation also serves as the period for the sentence

    Incorrect Example:
    The meeting is tomorrow at 8 a.m..

    Correct Example:
    The meeting is tomorrow at 8 a.m.

  • Periods and parentheses
    If a complete sentence is enclosed entirely by parentheses, the period goes inside the closing parenthesis (and the first word is capitalized).

    Example:
    Update your permissions to use this feature. (We never record or track your location.)

    When content in parentheses at the end of the sentence (but still part of the sentence) the period goes outside of the closing parenthesis.

    Example:
    For assistance, contact customer service between 6am–6pm (M–F).

  • Spaces after periods
    Do not insert a double space after a period. Double spaces were a common practice in the era of typewriters, but the current best practice recommended by all major style guides is to use a single space after end punctuation.

References:

Quotation Marks

Quotation marks (also known as quotes) are used to show direct quotes, dialogue, certain titles, and to call out specific terms and expressions.

How to Use Quotation Marks With Other Punctuation

The general rule is that commas and periods should be inside quotation marks at all times, while (most of the time) all other forms of punctuation should be outside of quotation marks. Pay attention to context when determining placement of punctuation, especially with question marks and exclamation points.

  • Periods and commas
    Periods and commas always go inside quotation marks, even when writing direct quotes or dialogue.

    Examples:

    • "Learn to anticipate our customers' wants and needs," is the motto of our business.
    • The motto of our business is, "Learn to anticipate our customers' wants and needs."

  • Question marks and exclamation points
    Placement of question marks and exclamation points may be either inside or outside quotation marks. Placement depends on context and sentence structure.

    If the question or exclamation is part of the quote, the punctuation mark goes inside the quotation marks.

    Examples:

    • He asked, “Are you going to the store today?”
    • She yelled, “We just got a free pizza!”

    If the question or exclamation is not part of the quote, the punctuation mark goes outside the quotation marks.

    Examples:

    • Did they just say “free pizza”?
    • They just said “free pizza”!

  • Colons and semicolons
    Colons and semicolons always go outside quotation marks.

    Examples:

    • Our manager said, "Learn to anticipate our customers' wants and needs"; following that will help us succeed.
    • My dad always reveals the ingredients of his "secret pizza": ham, pineapple, caramelized onions, and banana peppers.

Single vs. Double Quotes

In American English, single quotation marks are only used for quotes that appear inside other quotes. When the single and double quotation marks appear next to each other, do not add a space between them. It’s important to note, however, that some style guides allow a “courtesy” space if it helps readability.

Example:

  • “My boss always told me, ‘Work hard and you will succeed.’”

References:

Semicolons

The semicolon is used to join two independent clauses (i.e., clauses that can stand alone as independent sentences) without using a coordinating conjunction (for, and, but, etc.).

Example
I’m going shopping tomorrow; give me your list before I leave in the morning.

References:

Slashes

There are two types of slashes: a backslash ( \ ) and a forward slash ( / ). The backslash is used for computer programming. The forward slash, often just referred to as a slash, is a punctuation mark.

How to Use Slashes

  • Shorthand for “or”

    Example:
    By placing my order, I agree to receive automated texts and/or calls from Costco and its agents about this order. The “and/or” in this sentence means that the user agrees to receive automated texts or calls from Costco and its agents, or to receive both texts and calls.

  • Shorthand for “per”

    Example:
    They will receive $600/week for their salary.

  • Dates

    Example:
    Valid 7/27/23 through 9/4/23. While supplies last.

  • Breadcrumbs
    The breadcrumbs on Costco’s website use a forward slash to separate each page. In this instance, extra space is placed before and after the slash for better readability.

Example:

Home / Home & Kitchen / Bath / Bathroom Vanities

References: