Digital design

This is where you'll find digital design guidelines and user interface patterns for web and mobile
About our Digital design system

Core Brand Guidelines

Get design files
Menu

Menu

UI patterns

The core brand UI patterns shown here have been approved to meet industry standards and accessibility guidelines. For more information about how to use UI patterns when designing digital experiences, read our Digital design system.
At this point, the core brand design foundation covers web only. Patterns and specifications for other platforms will be added in the future.

Keep these rules in mind when using these patterns to create new digital programs:

Colors

The colors of any UI pattern can be altered, but newly selected colors for text and interactive elements should be at least 4.5:1 as recommended in the W3C accessibility standards, in order to ensure readability on screens. See the Color section for further guidance on using colors.

Touch target size

Resized interactive elements should have a vertical and horizontal hitspace of no less than 42 pixels X 42 pixels so the element remains tappable.

Font size

A variety of font sizes can be used but should never be smaller than 14px to ensure readability on screens. See the Typography section for further guidance on using type sizes.

States

Each interactive element should be coded so that it can be used in any state (active, disabled, hover), no matter how it will be used in its current design.

Download the design assets to get started right away.
Get design files

Text

Using text styles appropriately will help to establish visual hierarchy, giving the user a sense of what is most important to least important.

Headings

Use the following heading styles at the top of large blocks of content. Headings introduce the topic covered in the information that follows.

Styles

H1 Heading

Mark Office Pro, Extra Light, 84/90pt,
#141413

H2 Heading

Mark Office Pro, Extra Light, 72/75pt,
#141413

H3 Heading

Mark Office Pro, Light, 50/60pt,
#141413

H4 Heading

Mark Office Pro, Light, 36/45pt,
#141413

H5 Heading

Mark Office Pro, Light, 30/45pt,
#141413

H6 Heading

Mark Office Pro, Light, 23/30pt,
#141413

Eyebrow Heading

Mark Office Pro, Bold, 15/30pt,
#141413, All caps, 1.8 Tracking

  • html
  • css
<h1>H1 Heading</h1> <h2>H2 Heading</h2> <h3>H3 Heading</h3> <h4>H4 Heading</h4> <h5>H5 Heading</h5> <h6>H6 Heading</h6> <h6 class='eyebrow'>Eyebrow Heading</h6>
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 1rem; } h2, h3, h4, h5 { font-family: "Mark Offc Pro Light", sans-serif; font-weight: 100; } h1, .h1 { font-family: "Mark Offc Pro Extra Light", sans-serif; font-size: 2.8rem; font-weight: 100; line-height: 2.8rem; } @media (min-width: 768px) { h1, .h1 { font-size: 4.8rem; line-height: 5rem; } } h1.h0, .h1.h0 { font-family: "Mark Offc Pro Extra Light", sans-serif; font-size: 3rem; font-weight: 100; line-height: 3.73333rem; } @media (min-width: 768px) { h1.h0, .h1.h0 { font-family: "Mark Offc Pro Extra Light", sans-serif; font-size: 5.6rem; font-weight: 100; line-height: 6rem; } } h2, .h2 { font-family: "Mark Offc Pro Extra Light", sans-serif; font-size: 2rem; font-weight: 100; line-height: 2.8rem; } @media (min-width: 768px) { h2, .h2 { font-size: 3.33333rem; line-height: 4rem; } } h3, .h3 { font-size: 1.6rem; line-height: 1.86667rem; } @media (min-width: 768px) { h3, .h3 { font-size: 2.4rem; line-height: 3rem; } } h4, .h4 { font-size: 1.4rem; line-height: 1.86667rem; } @media (min-width: 768px) { h4, .h4 { font-size: 2rem; line-height: 2.4rem; } } h5, .h5 { font-size: 1.26667rem; line-height: 1.86667rem; } @media (min-width: 768px) { h5, .h5 { font-size: 1.6rem; line-height: 2.4rem; } } h6, .h6 { font-size: 1.4rem; line-height: 1.93333rem; } @media (min-width: 768px) { h6, .h6 { font-size: 1.4rem; line-height: 1.93333rem; } } h6.eyebrow, .h6.eyebrow { font-family: "Mark Offc Pro Bold", sans-serif; font-size: 0.8rem; font-weight: bold; line-height: 1.86667rem; letter-spacing: 0.12rem; text-transform: uppercase; } @media (min-width: 768px) { h6.eyebrow, .h6.eyebrow { font-size: 1rem; line-height: 2rem; } }

Body copy

Use body copy for long blocks of text, from paragraphs to complete articles or stories. Body copy usually appears below a main heading.

Styles

Lead body - Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tempor dui. Pellentesque dapibus fringilla nulla in dapibus. In blandit sed mi vitae maximus.

Mark Office Pro, Light, 23/30pt, #141413

Body 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tempor dui. Pellentesque dapibus fringilla nulla in dapibus. In blandit sed mi vitae maximus. Aenean suscipit tortor id gravida maximus. Nullam elementum in tellus feugiat mollis. Fusce tempus placerat.

Mark Narrow, Regular, 18/30pt, #141413

Body 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tempor dui. Pellentesque dapibus fringilla nulla in dapibus. In blandit sed mi vitae maximus. Aenean suscipit tortor id gravida maximus. Nullam elementum in tellus feugiat mollis. Fusce tempus placerat mi ut condimentum. Praesent at semper erat.

Mark Narrow, Regular, 15/30pt, #141413

Bold - Lorem ipsum dolor

Mark Narrow, Medium

Body copy link - Lorem ipsum dolor

Mark Narrow, Underline

  • html
  • css
<p class='lead'>Lead body - Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tempor dui. Pellentesque dapibus fringilla nulla in dapibus. In blandit sed mi vitae maximus. </p> <p>Body 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tempor dui. Pellentesque dapibus fringilla nulla in dapibus. In blandit sed mi vitae maximus. Aenean suscipit tortor id gravida maximus. Nullam elementum in tellus feugiat mollis. Fusce tempus placerat.</p> <p class='body-2'>Body 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tempor dui. Pellentesque dapibus fringilla nulla in dapibus. In blandit sed mi vitae maximus. Aenean suscipit tortor id gravida maximus. Nullam elementum in tellus feugiat mollis. Fusce tempus placerat mi ut condimentum. Praesent at semper erat.</p> <p class='bold'>Bold - Lorem ipsum dolor</p> <p>Body copy link - <a href='#'>Lorem ipsum dolor</a></p>
p { margin: 0 0 1rem; font-size: 1.06667rem; line-height: 1.86667rem; } @media (min-width: 768px) { p { font-size: 1.2rem; line-height: 2rem; } } p.small { font-size: 0.93333rem; } @media (min-width: 768px) { p.small { font-size: 1rem; } } p.lead { font-family: "Mark Offc Pro Light", sans-serif; font-weight: 100; font-size: 1.26667rem; line-height: 1.86667rem; } @media (min-width: 768px) { p.lead { font-size: 1.6rem; line-height: 2.4rem; } } p.body-2 { font-size: 1rem; line-height: 2rem; } p.bold { font-family: "Mark Offc Pro Medium", sans-serif; font-weight: 100; }

Forms

Forms allow users to give information to be used by the system.
Code for this element will be coming soon. In the meantime, you can Get design files.

Input fields

Basic input field

Default state

Hover

Hover state

Focus/active

Focus/active

Locked/disabled

Locked/disabled

Error state

Error state

Search

Search state

Checkboxes and radio buttons

Checkbox

Checkbox

Radio button

Radio button

Buttons and links

Buttons are triggers for actions. Depending on the use case, primary or secondary buttons, or text links are used.

Primary Buttons

Use the primary button treatment when a primary action is to be taken. Use primary buttons sparingly, preferably only once per page.

Black
Active
Disabled
  • html
  • css
<a href='#' class='btn btn-primary'>Active</a> <a href='#' class='btn btn-primary btn--disabled'>Disabled</a>
.btn { display: inline-block; width: 100%; padding: 1rem 0; text-align: center; border-radius: 3px; cursor: pointer; font-family: "Mark Offc Pro Medium", sans-serif; font-size: 15px; transition: color 200ms, background-color 500ms; text-decoration: none; } @media (min-width: 768px) { .btn { width: auto; padding: .6rem 5rem; } } .btn-primary { background-color: #000000; color: #ffffff; } .btn-primary:hover { background-color: rgba(0, 0, 0, 0.6); } .btn-primary.btn--disabled { border: none; background-color: rgba(0, 0, 0, 0.3); color: #ffffff; } .btn-primary.btn--disabled:hover { background-color: rgba(0, 0, 0, 0.3); cursor: not-allowed; }
Orange
Active
Disabled
  • html
  • css
<a href='#' class='btn btn-primary btn-primary--orange'>Active</a> <a href='#' class='btn btn-primary btn-primary--orange btn--disabled'>Disabled</a>
.btn { display: inline-block; width: 100%; padding: 1rem 0; text-align: center; border-radius: 3px; cursor: pointer; font-family: "Mark Offc Pro Medium", sans-serif; font-size: 15px; transition: color 200ms, background-color 500ms; text-decoration: none; } @media (min-width: 768px) { .btn { width: auto; padding: .6rem 5rem; } } .btn-primary--orange { border: solid #ff671b 1px; background-color: #ff671b; color: #ffffff; } .btn-primary--orange:hover { border-color: rgba(255, 103, 27, 0.6); background-color: rgba(255, 103, 27, 0.6); } .btn-primary--orange.btn--disabled { border: none; background-color: rgba(255, 103, 27, 0.3); color: #ffffff; } .btn-primary--orange.btn--disabled:hover { cursor: not-allowed; background-color: rgba(255, 103, 27, 0.3); }
White
Active
Disabled
  • html
  • css
<a href='#' class='btn btn-primary--inverted btn-primary'>Active</a> <a href='#' class='btn btn-primary btn-primary--inverted btn--disabled'>Disabled</a>
.btn { display: inline-block; width: 100%; padding: 1rem 0; text-align: center; border-radius: 3px; cursor: pointer; font-family: "Mark Offc Pro Medium", sans-serif; font-size: 15px; transition: color 200ms, background-color 500ms; text-decoration: none; } @media (min-width: 768px) { .btn { width: auto; padding: .6rem 5rem; } } .btn-primary--inverted { background-color: #ffffff; color: #000000; } .btn-primary--inverted:hover { background-color: rgba(255, 255, 255, 0.6); } .btn-primary--inverted.btn--disabled { border: none; background-color: rgba(255, 255, 255, 0.3); color: rgba(0, 0, 0, 0.3); } .btn-primary--inverted.btn--disabled:hover { cursor: not-allowed; }

Secondary buttons

Use the secondary button treatment when a secondary action is to be taken.

Black
Active
Disabled
  • html
  • css
<a href='#' class='btn btn-secondary'>Active</a> <a href='#' class='btn btn-secondary btn--disabled'>Disabled</a>
.btn { display: inline-block; width: 100%; padding: 1rem 0; text-align: center; border-radius: 3px; cursor: pointer; font-family: "Mark Offc Pro Medium", sans-serif; font-size: 15px; transition: color 200ms, background-color 500ms; text-decoration: none; } @media (min-width: 768px) { .btn { width: auto; padding: .6rem 5rem; } } .btn-secondary { border: solid #000000 1px; color: #000000; } .btn-secondary:hover { border-color: rgba(0, 0, 0, 0.6); color: rgba(0, 0, 0, 0.6); } .btn-secondary.btn--disabled { border-color: rgba(0, 0, 0, 0.3); color: rgba(0, 0, 0, 0.3); } .btn-secondary.btn--disabled:hover { cursor: not-allowed; }
Orange
Active
Disabled
  • html
  • css
<a href='#' class='btn btn-secondary btn-secondary--orange'>Active</a> <a href='#' class='btn btn-secondary btn-secondary--orange btn--disabled'>Disabled</a>
.btn { display: inline-block; width: 100%; padding: 1rem 0; text-align: center; border-radius: 3px; cursor: pointer; font-family: "Mark Offc Pro Medium", sans-serif; font-size: 15px; transition: color 200ms, background-color 500ms; text-decoration: none; } @media (min-width: 768px) { .btn { width: auto; padding: .6rem 5rem; } } .btn-secondary--orange { border: solid #ff671b 1px; color: #ff671b; } .btn-secondary--orange:hover { color: rgba(255, 103, 27, 0.6); border-color: rgba(255, 103, 27, 0.6); } .btn-secondary--orange.btn--disabled { border-color: rgba(255, 103, 27, 0.3); color: rgba(255, 103, 27, 0.3); } .btn-secondary--orange.btn--disabled:hover { cursor: not-allowed; }
White
Active
Disabled
  • html
  • css
<a href='#' class='btn btn-secondary--inverted btn-secondary'>Active</a> <a href='#' class='btn btn-secondary btn-secondary--inverted btn--disabled'>Disabled</a>
.btn { display: inline-block; width: 100%; padding: 1rem 0; text-align: center; border-radius: 3px; cursor: pointer; font-family: "Mark Offc Pro Medium", sans-serif; font-size: 15px; transition: color 200ms, background-color 500ms; text-decoration: none; } @media (min-width: 768px) { .btn { width: auto; padding: .6rem 5rem; } } .btn-secondary--inverted { border: solid #ffffff 1px; background-color: none; color: #ffffff; } .btn-secondary--inverted:hover { color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.6); } .btn-secondary--inverted.btn--disabled { border-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.3); } .btn-secondary--inverted.btn--disabled:hover { cursor: not-allowed; }

Links

Use the link treatment when a secondary or tertiary action is to be taken.

Black
Learn more
  • html
  • css
<a href='#' class='cta cta--arrow'>Learn more</a>
.cta { font-family: "Mark Offc Pro Medium", sans-serif; font-size: 1.06667rem; } .cta, .cta:hover { text-decoration: none; } .cta, .cta:before, .cta:after { color: #141413; } .cta--arrow:after { content: "\f10c"; display: inline-flex; align-self: center; margin-left: 10px; font-family: 'mastercard-design-center'; font-size: 0.72rem; }
White
Learn more
  • html
  • css
<a href='#' class='cta cta--arrow cta--inverted'>Learn more</a>
.cta { font-family: "Mark Offc Pro Medium", sans-serif; font-size: 1.06667rem; } .cta, .cta:hover { text-decoration: none; } .cta, .cta:before, .cta:after { color: #141413; } .cta--inverted, .cta--inverted:before, .cta--inverted:after { color: #ffffff; } .cta--arrow:after { content: "\f10c"; display: inline-flex; align-self: center; margin-left: 10px; font-family: 'mastercard-design-center'; font-size: 0.72rem; }