Text

Purpose

Most of our content is presented as text. Using text styles consistently and appropriately builds a sense of uniqueness and brand.

Headings

Usage

Headings help to define the hierarchy and the structure of an experience. The tags below define our headings, and range from a font size of 13px to 38px.

Color Variations

Headers by default will display Gray 06, our darkest gray value. Headers may also display in Gray 05. This is most common when using header font sizes 16px or 15px in medium weight. Due to the heavier font weight, it can afford a lighter value. For font sizes 20px and above, you may also use Deep Blue to add color to the page. This is most commonly used on marketing landing pages.

Labels

Usage

Labels clarify the content for customers. Currently, we have two label classes:

Body

Usage

Because a majority of our content is presented in body copy, it should be easy for the customer to read. Body copy should be left-aligned, not centered, to prevent hard-to-read text wrapping when in mobile form. Body copy should also be Gray 06 for legibility. Adjusting the color to a lighter value increases the risk of the copy becoming too light to read.

Example - Fluid

The width of the legal copy lines can be defined by the full width of the component or page.

<div class="legal">
    <h3 class="label-2">Get up to $300 Back</h3>
    <p class="margin-b">Get $100 back after you spend $1,000 on qualified purchases on the Card within the first 3 months of Card Membership.</p>
    <p>Plus, get up to $200 back when you apply by 06/15/2016 by getting 10% back at Wireless Telephone Service Providers on the first $2,000 in purchases made on the Card Account in 2016.</p>
</div>

<div class="legal">
    <h2 class="heading-4 margin-3-b">Frequently Asked Questions</h2>
    <h3 class="label-2">Updated income information</h3>
    <p class="margin-b">You agree that we will use the income and financial asset information you provide us here for all the American Express Card accounts you have with us and our affiliates. The information you provide may help us extend the credit you need.</p>
    <a class="link-underlined" href="#">See all FAQs</a>
</div>

Example - Defined Width

The width of legal copy lines may also be defined by design. For example, design may specify that the width of the content will span across 10 out of 12 columns on large, 10 out of 12 columns on medium, and 12 columns on small breakpoint.

<div class="legal">
    <div class="container margin-auto">
        <h3 class="label-2">Helpful Information</h3>
        <p>Please note: This is not an application for an increase in your spending limit. You may be approved to temporarily spend over your limit. Approved requests cannot be used for Traveler’s checks or Gift Cards. Visit the FAQs to learn more.</p>
    </div>
</div>

Legal Copy

Usage

Legal copy is often long and complex. For large blocks of legal copy, such as terms and conditions, we recommend placing the text on a Gray 01 background with a fluid or defined width, we give it a different look and feel from standard body copy so that it doesn’t feel overwhelming to our customers.

<div class="border pad-2 col-xs-12 col-sm-6">
    <h4 class="heading-1 margin-1-b">Shipping Address</h4>
    <p>Charles Front</p>
    <p>433 S NEVERLAND DR</p>
    <p class="legal-1">For your security, only a portion of your address is shown. To mail your Card to a different address, please <a class="link-underlined" href="#">Contact Us</a>.</p>
</div>

<div class="col-md-8 col-lg-6">
  <div class="card border">
    <div class="pad-responsive">
        <h2 class="heading-4 text-align-center">Check Your Spending Power</h2>
    </div>
    <hr>
    <div class="pad-responsive text-align-center">
      <i class="dls-color-success pad-1-t pad-2-b" data-dls-icon="success" data-dls-icon-variant="outline" data-dls-icon-size="lg" data-dls-icon-role="decorative"></i>
      <p class="heading-4 margin-b">Good news!</p>
      <p class="margin-1-b"><span class="label-2">Approved:</span> $100.00</p>
    </div>
    <hr>
    <div class="pad-responsive dls-gray-01-bg">
        <p class="legal-1">This approval is based on your current account status. Certain changes to your account could affect the approved amount, such as a past due balance, a returned payment, a significant change in your spending pattern, or a fraid risk on your Card.</p>
    </div>
    <hr>
    <div class="pad-responsive text-align-center pad-3-b">
        <button class="btn-block margin-auto-lr btn fluid margin-3-b">Try a Higher Amount</button>
        <a class="link-underlined" href="#">Frequently Asked Questions</a>
    </div>
  </div>
</div>

Bulleted List

Description

Bulleted lists are used when displaying short phrases or short sentences. We use the traditional circular bullet symbol for bullet lists.

<ul>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>

Numbered List

Description

Numbered lists are used when displaying short phrases or short sentences that are required to be displayed in a specific order.

<ol>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ol>

Checklist

Description

Use checklists for marketing purposes to showcase available features and advantages.

Specs

Text = Body 1, Gray 06
Glyph = Check (medium), Status - Success
Class Name = .checklist

<ul class='checklist stack'>
    <li>Save offers to your Card with a single tap.</li>
    <li>View your Card account on the go.</li>
    <li>Pay off transactions using your Membership Rewards points.</li>
</ul>

Currency Amounts

Usage

The format of currency amounts should be consistent across our defined font sizes. Superscript is used for the fractional amount when writing in large fonts to save horizontal space and helps the customer to focus on the whole-number amount.

Standard

Currency amounts for font sizes 20px and below will display at the normal font style. Do not superscript currency amounts for smaller font sizes, as this will make the number harder to read.

Superscript

For font sizes of 30px and above, the decimal mark (either a dot “.” or a comma “,” depending on the market) and fractional amount should be superscript.

<p>$3,908.66</p>

<p>3 908,66&euro;</p>

<p class="heading-6">$3,908<sup>.66</sup></p>

<p class="heading-6">3 908<sup>,66</sup>&euro;</p>

Dates

Usage

There are four main formats for dates: long date, abbreviated long date, short date, and abbreviated short date. When space is limited, such as in data sets or tables, use the abbreviated format of dates to conserve space.

Depending on the market, the day may come before or after the month. For example, in the U.S., dates are written in the “month day year” order, while they are more commonly written in the “day month year” order in the UK, Mexico, Canada, and Australia.

Formats