Speed
The design system will put resources at your fingertips that will prevent the inefficiency of having to start from scratch with each new project. And being able to re-use code helps development move even faster.
Introducing the digital design system
The digital design system is the first step towards improving creative consistency and efficiency for Mastercard’s digital products, sites and applications. It will give you the basic design guidance and user interface (UI) building blocks you need to help in creating new digital material. While we are still early on in the process of rolling out the new brand, it is important that this system provide you with everything currently available to help you bring the brand to life.
KEY BENEFITS
Consistency
The system will help keep a consistent look, feel, and experience across multiple products and brands, even when teams are spread out and working independently.
Flexibility
This library will allow designers and coders to make needed changes to a given product quickly. And any larger-scale changes can be integrated into the system and immediately shared with everyone involved.
What does it cover?
The contents of this site cover the basic building blocks needed from a design perspective. Over the coming months, the addition of new patterns and guides will help developers and external agencies and partners even more.
Styles
Logos
Colors
Fonts
UI patterns
The “core” is the brand in its truest form. Our goal with this united system is to create a memorable and distinctive expression of the brand across all web, applications and digital touch points.
Who will use it?
TThese guidelines and systems will be helpful for a range of people throughout the process of developing digital products and experiences.
Developers
Developers will be able to efficiently and easily use and re-use these brand-consistent building blocks of code to build out and revise experiences.
Designers
For both visual and UX designers, these guidelines, component and patterns will make creating a consistent brand experience easy.
Product leads
Early in the design process, product leads will be able to look at different design patterns in order to create low-fidelity UX prototypes. Later, they can use the guide to make sure their products are consistent and correctly branded for Mastercard.
Why should I use it?
In order for Mastercard to be a competitive digital technology company, we need to approach our experiences and our brand in a way that is consistent, delightful, and innovative.
User testing
With consistent patterns and components readily available, it is fast and easy to create simple prototypes to test changes and improvements whenever needed.
ADA
With accessibility parameters defined and built in, there is no need to discuss or second-guess whether or not your product is ADA compliant.
Executive prototyping
Communicating the benefit of a new product to executives becomes direct and clear-cut when you can simply demonstrate it with an easily-built prototype.
Straight to code
The site will help developers with the parts and components they need in order to quickly assemble or enhance products.
What is provided?
Code (HTML & CSS), Sketch files, Digital design guidelines
How will it be updated?
Over the coming months, this site will continue to grow as styles and pattern libraries are expanded.
Update schedule
The site will be updated again in January 2017, and following that regularly, as the new brand evolves.