Contribution

Purpose

The DLS team is dedicated to creating consistent, clear, quality guidelines and we welcome all feedback and designs to create the best experiences for our users. We’ve outlined in this section several ways you can contribute to the DLS.

Component Contribution

Propose Enhancement or New Component

Before contributing an enhancement or component, please review the following diagram to confirm whether it would be a good addition to the DLS.

The DLS grows organically with contributions made by teams across the entire enterprise. Our objective is to make a system that works for as many teams as possible, and which is comprehensive and robust as possible. A contribution may be of high quality, but if it is too specific in its use case or only meets the needs of a single team, we may decide to expand upon the design or to not include it in the DLS

Submit a PR

We have clear guidelines for DLS and DLS-React that must be followed by all contributors to our repository. Please review them carefully and do not hesitate to ask for help.

Submit a Design File

Follow these steps once you have determined that there is a need for an enhancement or a new component:

1. Submit a clean Sketch file with properly named layers/folders
2. Name your Sketch file as follows: ComponentName-YourName-Date
3. In an email to DLS@aexp.com include the following:
   • Subject: DLS Submission
   • Component name
   • Description of enhancement or new component
   • Upcoming deadlines: design approvals, tech sprint start and end dates

Before submitting an enhancement or a new component, please ensure your designs are:

Componentized

• Is there a similar component in the library that already exists?
• Have you tested this design for multiple use cases? It needs to be a pattern that all teams can use.

Aligned with existing visual and UX patterns

• Does your design follow basic UX best practices?
• Is your design consistent with the visual style established for the DLS library?
• Do your interaction patterns (hover, focus, motion) match DLS styles?

Accessible

• Is your design WCAG AA accessible?
• Does your design pass the color contrast ratio?

Icon Contribution

The DLS provides a robust collection of icons. If you need to create an icon for your product and you think that it is something other teams could use, please submit it to DLS@aexp.com. Refer to Creating Icons for more information.

Design Working Groups

A design working groups is a team of designers that comes together to define a new component or style, or to evolve an existing component’s base functionality to better meet the needs of every team using the DLS.

When a component is being refreshed, the DLS team will reach out to designers to help define or improve the component or style. Participation is limited to one designer per design team. That person will communicate decisions with their team, and collect and incorporate feedback.

We’ll do the following:

1. Call for designers to join working group in #dls-design Slack channel (raise your hand if you want to join, especially if you’re working on something related).
2. Create a list of designers to participate and make a Slack group to discuss and share project and ideas.
3. Hold an initial meeting to determine common use cases, basic functional requirements, current pain points, conditional logic, etc.
4. Iterate with the team through Slack or design sessions.
5. Add the new or updated component to the DLS site, the Sketch kit, etc. Members of the working group can then inform their teams about the update.

Design Insight

The DLS team is always looking for good ideas and ways to improve the system.

• Do you have an awesome article you want to share with us?
• Are you an expert in motion design?
• Are you a Sketch kit guru and want to improve on our workflow?
• Have some free time and want to offer your services?

Find us in the New York Tower, send us an email or message us on Slack.

Report a Bug

Report a bug by posting the following information on the Slack channel #dls-tech:

• DLS version used
• Browser and version
• Steps to replicate bug
• Additional documentation of bug (screenshots, etc.)
• Link to testing environment
• Link to design visual for references

If a bug is confirmed, we create a ticket to address it in our next patch or minor release. After the DLS releases the bug fix into production, it is documented in the Release Notes and Changelog. All releases are announced in #one-amex_news.

Collaboration

Contact Us

#dls-tech: Engineering questions
#dls-design: Design questions
#one-amex_news: Notifications and updates

Office Hours - Every Tuesday

Have a question or feedback? Want to schedule a quick DLS review of your work or want to talk about a contribution? Contact us in the appropriate Slack channel above, and we can set up a session.

Design Reviews

Not sure if your design is compliant with the DLS? Have some questions about best practices? To request a design review, send an email to DLS@aexp.com with the following details:

1. Project timeline, i.e. where in the project are you?
2. Expected development state/end dates

Please keep in mind that we cannot prioritize all requests immediately and will work with your team to find a timely solution to your request.