Design, Build, Deliver
Design System version 7
Create digital experiences that reflect AMEX’s unique brand voice and accelerate the design and development process
Get Started
Design and build products that are usable, accessible, and inclusive for all our customers. Looking for v6?
Design System Meets Brand
The American Express Design System is a collection of style guidelines, re-useable components, and the code that supports them. By using the Design System, teams can create a cohesive, responsive, consistent experience across all digital channels and platforms. The result reflects our unique brand voice and helps our design and development teams become more efficient. Learn more about the system.
Design System Principles
Design principles create the foundation of a successful design system. They are shared guidelines that set the standard for design excellence and support the mission to create solutions that resonate with our users.
Efficiency and Scalability
Work together efficiently and effectively across journeys
Visual Cohesion
Create beautiful products that seamlessly work together
Strong Foundations
Core foundations that can be implemented across journeys
Loyalty and Trust
Brand consistency across channel experiences
Inclusive Experiences
Designed to be clearly readable, intuitive, and mindful of those who use alternative input peripherals or screen readers
Support and Guidance
Continuously maintaining and evolving the system
What people are saying about the Design System
Nathan Moses
Product Designer
“DLS7 utilizes all of the capabilities of Figma to help me design at my full potential. It’s easier, faster, and more organized. The documentation that supplements the design system answers any question I might have about design standards or how to use a component. And if it does not, then the team is right there to help answer questions, troubleshoot, or improve the library. DLS7 a huge win for the entire AMEX design organization.”
Mert Kalyon
Senior Product Designer
“Remembering that DLS powers not just a few systems but the whole Enterprise, it is an impressive feat to have achieved full parity from v6 to v7. I’m excited for everyone to get their hands on the new kit and believe that it’ll be a smooth transition for most. There are many well-thought-out variants, variables and documentation to help us build better experiences for all of our channels.”
Hy Nguyen
Product Designer
“The DLS7 Kit has been a game-changer for our projects! The new aesthetic is fresh, modern, but still uniquely Amex. While there is a slight learning curve with Figma tokens, once you get the hang of it, the kit becomes incredibly powerful and user-friendly. Taking a design from light mode to dark mode used to take us hours, now it is literally a couple of clicks away.
The DLS team behind the kit is just as equally impressive. Laura, Becky, Denisse, Christy, and Alexis are all dedicated and enthusiastic colleagues who truly care about design and our team’s success. Their swift responses to bug reports, feedback, and mundane questions alike have made the DLS7 adoption process a breeze for our small design team. I’m constantly impressed by the consistent update cadence with major improvements every week. Overall, 10/10 would recommend!”
Contribute
Your input, whether it be feedback, designs, code, or innovative ideas, is invaluable to the Amex product community. By collaborating, we can collectively craft an exceptional user experience for our customers.
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.