Designers
The Design Language System provides a unified language for designing American Express websites and experiences. The DLS provides design resources that match our coded components and are aligned with the American Express brand. Included are colors, components, icons and glyphs, type styles, and graphic assets to get you up and running quickly.
DLS Design Kit
The Design Kit contains everything you need to get started designing using the DLS, including our grid, typography, colors, and components. The kit is available in both Figma and Sketch.
Need a different design systems components? For mobile components visit Native Design Language (NDL), for email design system visit Marketing Email Design System (M-EDS) or Servicing Email Design Team (S-EDS).
Figma Kit
The Figma kit has three library files:
- Foundations - Colors, text styles, styles, and grid.
- Web Components - All components, their states, and component elements needed to create and maintain your designs.
- Assets - Logos, flags, icons, patterns, and brand graphics.
Figma Access
If you work at American Express, before submitting an IIQ request, please speak to your leader. There are two types of access, view only or edit access. The Design Guild have put together step by step instructions on how to get access to Figma. For additional help you can also join #figma-help on Slack.
Library Access
Follow the design guilds Figma library guide to get started.
Sketch Kit
There are two types of design files in the Sketch Kit:
- Library file - Has the symbols and component elements needed to create and maintain your designs.
- Reference sheet - Shows the library of components in all of their states. Note: should not be used as a library file.
Sketch Access
Like Figma if you work at American Express, you will need to get IIQ access. Before submitting the IIQ, please speak to your leader. The design guild have put together instructions for how to get access to Sketch.
Our Sketch kit v6.25+ is now in maintenance status, updates to the kit will only be on an as-needed basis.
Design Kit Best Practices
1. Don’t edit the library. If you make changes to a library it can be out of sync with the coded version your team is using.
2. Avoid detaching a component from the library. Use properties/overrides or prebuilt variations and reach out if you can’t find what you need at #dls-design or send an email to dls@aexp.com.
3. Check for updates and use the latest version.
- For Figma, make sure to check for updates.
- For Sketch, check the version listed in DLS Design Kit Updates and update when needed.
4. Use the Grids and layouts available in Figma and Sketch. Grid is based on systems breakpoints. A tip for a quick working environment is by turning on snap to pixel grid.
5. Check out the design guild Figma FAQ’s, Sketch videos and general tools information.
6. Something not right? If you find a missing component, outdated components, or any other issues let us know at #dls-design or send an email to dls@aexp.com.
How to Use The Design Kit
Figma
Follow the design guild instructional videos to add the DLS Libraries within Figma.
Sketch
Follow these instructions to add the DLS Library within Sketch:
1. Download the DLS Design Kit. Put both the amex-dls-library and the amex-dls-reference-guide in a permanent folder. Don’t move it or rename these files because they will be linked to the library once added.
2. To install the DLS library, open Sketch.
- Open Preferences in the Sketch menu and go to the Libraries tab.
- Select Add Library…choose “amex-dls-library.sketch’ from your permanent folder.
3. You can now begin to use the DLS library in your Sketch files. Visit the Sketch site to learn more about libraries.
Design Kit Sketch Symbols
Symbols from the DLS Library can be added to your design file by selecting “+” insert menu.
There are two types of symbols: library symbols and document symbols. Library symbols come from the DLS library and are available in any Sketch document, whereas document symbols are specific to the document in which they’re found.
DLS library symbols are built to be flexible. Avoid detaching them from the library because you’ll no longer receive updates for it from the DLS team.
Design Plugins
Plugins are not required to use the design resources but can enhance and improve your designs.
Figma Plugins
Every plugin and widget needs approval from Infosec. The Design guild have a list of Figma plugins and widgets that have been accepted/requested and their overall status.
Sketch Plugins
Here’s a few we recommend:
- Spell Check — Run a spell check on the entire file and correct typos.
- Stark — Check accessibility color contrast to ensure AA or AAA legibility.
- Symbol Instance Locator — Locate all copies of a selected symbol.
Fonts
Benton Sans and Guardian
Benton Sans is the more contemporary brand typeface while Guardian is a warmer alternative. Both brand fonts supplement Helvetica Neue in digital experiences.
If you work at American Express, reach out to your leader for how to download the font families.
As font licenses cannot be shared, when working with American Express on a site or campaign, a commercial license is needed:
Support and Office Hours
Can’t find what you are looking for? Need some help with your designs? We’re available over email and Slack for questions and reviews.
We host office hours every Tuesday. Reach out to schedule time with the DLS designers or engineers to answer your questions.
For questions about the American Express brand, please contact #askbrand on slack or globalbrandsupport@aexp.com.
Legal
While American Express has redrawn and shares these assets for the benefit of our organization and partners, American Express does not own any of the underlying product or user interface designs. By accessing these assets, you agree to obtain all necessary permissions from the underlying rights holders and/or adhere to any applicable brand use guidelines before using them. American Express disclaims all express or implied warranties with respect to these assets, including non-infringement of intellectual property rights.